emis-frontend/src/views/emis/EmisBaseTools/EmisSiteSimplePicker.vue

<template>
   <el-select
      style="width:100%"
      ref="selectRef"
      filterable
      clearable
      remote
      :remote-method="queryData"
      v-model="svalue"
      :placeholder="placeholder"

      no-data-text=""

      @blur="onBlur"
      @change="onChange"
      @click.native="onClick"
      @visible-change="reverseArrow"
      >
        <el-option v-for="item in optionItems" :key="item.siteCode" :label="item.siteName" :value="item.siteCode" ></el-option>
    </el-select>

    <!-- filterable
      clearable
      autocomplete="false"
      ref="selectRef"
      v-model="svalue"
      remote
      :remote-method="queryData"
      :placeholder="placeholder"
      style="width: 100%;"
      @focus="onFocus"
      class="remote-select"
      @change="onChange"
      @clear="onClear"

      no-data-text=""


      @visible-change="reverseArrow"
      @mouseleave.native="onMouseleave" -->

</template>
<script>
  import emitter from 'element-ui/src/mixins/emitter';
  import { listSimpleEmisSite } from "@/api/emis/emisSite";

  export default {
    name: "EmisSiteSimplePicker",
    mixins: [emitter],
    props: {
      value: {
        type: String,
        required: false
      },
      placeholder: {
        type: String,
        required: false
      },
      countryCode: {
        type: String,
        required: false
      },
      siteType:{
        type: [String,Number],
        required: false
      },
      parentSiteCode:{
        type: [String],
        required: false,
        defaultValue:null
      },
      blIncludeChildSite:{
        type: [String,Number],
        required: false,
        defaultValue:null
      },
      disabled:{
        type: [Boolean,String],
        required: false
      },
    },
    data() {
      return {
        loading:false,

        svalue: this.value,
        optionItems: [],
        // 缺省值
        defaultItems: null,
        itemMap:new Map(),

        queryParams:{
          pageNum:1,
          pageSize:10,
          siteType:this.siteType,
          countryCode:this.countryCode,
          siteCode:null,
          siteName:null,
          parentSiteCode:this.parentSiteCode,
          params:{
            blIncludeChildSite:this.blIncludeChildSite
          }
        }
      };
    },
    watch: {
      value(newVal,oldVal) {
        // 逻辑 有初始值先查询初值
        if(this.value!=null){
          this.svalue=this.value;
          this.queryData(null,this.svalue);
        }
      },
      siteType(newVal, oldVal) {
        if(newVal!=oldVal){
          this.queryParams.siteType=newVal
          this.defaultItems=null;
        }
      },
      countryCode(newVal, oldVal) {
        if(newVal!=oldVal){
          this.queryParams.countryCode=newVal
          this.defaultItems=null;
        }
      }
    },
    mounted(){
      let rulesDom = this.$refs["selectRef"].$el.querySelector(".el-input .el-input__suffix .el-input__suffix-inner .el-input__icon"); // 找到dom
      rulesDom.classList.add("el-icon-arrow-up"); // 对dom新增class
    },
    created() {
      if(this.svalue!=null){
          this.queryData(null,this.svalue);
      }
    },
    methods: {
      onClick(){
        // 第一次点击时需要初始化
        if(!this.defaultItems){
          this.queryData(null,null);
        }else{
          this.optionItems = [...this.defaultItems];
        }
      },
      onChange() {
        this.$emit("input", this.svalue);
        let itemData = this.optionItems.find(item => item.siteCode == this.svalue);
        this.$emit("onChange",itemData);
      },
      onClear(){
        this.$emit("input", this.svalue);
        this.$emit("onChange",null);
      },
      onBlur(val){
        this.$emit("input", this.svalue);
        this.dispatch('ElFormItem', 'el.form.blur');
      },
      queryData(val,key) {
        this.optionItems=[];

        this.queryParams.siteCode=key;
        this.queryParams.siteName=val;

        listSimpleEmisSite(this.queryParams).then(response => {
            this.optionItems=response.rows;
          // 初始值存储
          if(key==null && val==null){
            this.defaultItems=[...this.optionItems]
          }
        });
      },
      reverseArrow(flag) {
        let rulesDom = this.$refs["selectRef"].$el.querySelector(
          ".el-input .el-input__suffix .el-input__suffix-inner .el-input__icon"
        ); // 找到dom
        if (flag) {
          rulesDom.classList.add("is-reverse"); // 对dom新增class
        } else {
          rulesDom.classList.remove("is-reverse"); // 对dom新增class
        }
      },
    }
  };
</script>

<style lang="scss" scoped>
  // right: 30px;
  // cursor: pointer;
 :deep .el-select.remote-select{
  .el-select__caret::before{
      content: '\e6e1';
    }
  .is-focus{
    .el-select__caret{
      transform: rotateZ(0deg);
    }
  }
}



</style>