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

<template>
   <!-- :loading="loading" -->
   <!-- v-el-select-loadmore="loadmore" -->
        <!-- <i class="el-icon-arrow-down select-down" :class="visible&&'rotate180'"></i> -->

   <el-select
      filterable
      clearable
      autocomplete="false"
      ref="selectDom"
      v-model="svalue"
      remote
      :remote-method="queryData"
      :placeholder="placeholder"
      style="width: 100%;"
      :disabled="disabled"
      @focus="onFocus"
      class="remote-select"
      @change="onChange"
      @clear="onClear"
      @visible-change="reverseArrow"
      >
        <el-option v-for="item in dataList" :key="item.siteCode" :label="item.siteName" :value="item.siteCode" ></el-option>
    </el-select>


</template>
<script>
  import { listSimpleEmisSite } from "@/api/emis/emisSite";

  export default {
    name: "EmisSiteSimplePicker",
    components: {

    },
    dicts: [],
    props: {
      value: {
        type: String,
        required: false
      },
      placeholder: {
        type: String,
        required: false
      },
      countryCode: {
        type: String,
        required: false
      },
      siteType:{
        type: [String,Number],
        required: false
      },
      isInitiated:{
        type: [Boolean,String],
        required: false,
        default:false
      },
      disabled:{
        type: [Boolean,String],
        required: false
      },
    },
    data() {
      return {
        loading:false,
        visible:false,
        dataList: [],
        svalue: this.value,
        filterMap:new Map(),
        firstFlag:true,
        queryParams:{
          pageNum:1,
          pageSize:20,
          searchValue:null,
          siteType:this.siteType,
          countryCode:this.countryCode,
          siteCode:null
        }
      };
    },
    watch: {
      value(newVal) {
        this.svalue = newVal;
        console.log("000=>"+this.svalue);
        this.firstFlag = true;
        this.initData();
      },
      siteType(newVal, oldVal) {
        if(newVal!= oldVal ){
        }
        this.initData();
      },
      countryCode(newVal, oldVal) {
        if(newVal!= oldVal ){
        }
        this.initData();
      }
    },
    created() {
      // this.queryData();
    },
    beforeDestroy(){
      this.firstFlag = true;
    },
    methods: {
      onChange() {
        this.$emit("input", this.svalue);
        let itemData=this.filterMap[this.svalue];
        this.$emit("onChange",itemData);
      },
      onClear(){
        this.queryParams.searchValue=null;
        this.queryData();
      },
      onFocus(){
        this.queryData();
      },
      initData(){
        if(this.svalue && this.firstFlag ){
          let queryParams = {
              siteCode:this.svalue
          }
          listSimpleEmisSite(queryParams).then(response => {
            this.dataList=response.rows;
            const curItem = response.rows[0];
            let curOption = {
              currentLabel: curItem.siteName,
              currentValue: curItem.siteCode,
              label:curItem.siteName,
              value:curItem.siteCode,
            }
            this.$refs.selectDom.cachedOptions.push(curOption)
            response.rows.forEach(item => {
              if(!this.filterMap.hasOwnProperty(item.siteCode)){
                this.filterMap[item.siteCode]=item;
              }
            });
            this.firstFlag = false;
          });
        }
      },
      queryData(val) {
        if(val && this.queryParams.pageNum == 1){
          this.dataList=[];
        }
        this.queryParams.searchValue=val;
        listSimpleEmisSite(this.queryParams).then(response => {
          this.dataList=response.rows;
          response.rows.forEach(item => {
            if(!this.filterMap.hasOwnProperty(item.siteCode)){
              this.filterMap[item.siteCode]=item;
            }
          });
        });
      },
      // loadmore() {
      //   this.visible = true
      //   this.queryParams.pageNum++;
      //   this.queryData();
      // },
      reverseArrow(flag) {
        let rulesDom = this.$refs["selectDom"].$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>