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

<template>
   <el-select
      :loading="loading"
      filterable
      clearable
      v-model="svalue"
      :placeholder="placeholder"
      :filter-method="dataFilter"
      style="width: 100%;"
      :disabled="disabled"
      @change="onChange">
        <el-option v-for="item in optionItems" :key="item.siteCode" :label="item.siteCode+'-'+item.siteName" :value="item.siteCode" ></el-option>
    </el-select>

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

  export default {
    name: "EmisSiteSimplePicker",
    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,
        bakOptionItems:[],
        optionItems: [],
        svalue: this.value,
        optionDefault:null,
        dataMap:new Map(),
      };
    },
    watch: {
      value(newVal) {
        this.svalue = newVal;
      },
      svalue(newVal, oldVal) {
        // this.$emit("input", this.svalue);
      },
      siteType(newVal) {
        this.initData();
      },
      countryCode(newVal, oldVal) {
        this.initData();
      }
    },
    created() {
      if(this.isInitiated || this.svalue!=null){
        this.initData();
      }
    },
    methods: {
      onChange() {
        this.$emit("input", this.svalue);
        let itemData ={};
        this.optionItems.forEach(item=>{
          if(item.siteCode === this.svalue){
            itemData = item;
          }
        });
        this.$emit("onChange",itemData);
        this.optionItems = this.bakOptionItems;
      },

      initData() {
        this.loading = true;
        let queryParams = {pageNumber:1,pageSize:5000,siteType:this.siteType,countryCode:this.countryCode};
        // queryParams.orderByColumn = 'orderNum';
        // queryParams.isAsc = 'descending';
        this.bakOptionItems=[];
        this.optionItems=[];
        listSimpleEmisSite(queryParams).then(response => {
          this.loading = false;
          this.bakOptionItems =  response.rows;
          this.optionItems =this.bakOptionItems;

          if(this.optionItems!=null && this.svalue == null){
            this.svalue=this.optionItems[0].siteCode;
          }

        });
      },
      dataFilter(val) {
        this.optionDefault = val

        if (val) {
          let searchVal = val.toLowerCase();
          this.optionItems = this.bakOptionItems.filter(item => {
            if (item.siteCode.indexOf(searchVal) != -1 || item.siteName.toLowerCase().indexOf(searchVal) != -1 ) {
              return true
            }
          })
        } else {
          this.optionItems = this.bakOptionItems;
        }
      },
    }
  };
</script>