emis-frontend/src/views/emis/EmisBaseTools/EmisMonthpayAccountPicker.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.custNo" :label="item.custName" :value="item.custNo" ></el-option>
   </el-select>
   <!-- item.custNo+'-'+ -->
</template>
<script>
  import { listSimpleEmisMonthpayAccount } from "@/api/emis/emisMonthpayAccount";

 export default {
   name: "EmisMonthpayAccountPicker",
   props: {
    value: {
        type: [String, Number],
        required: false
      },
      sideCode: {
        type: String,
        required: false
      },
      payee: {
        type: String,
        required: false
      },
      salesmen: {
        type: String,
        required: false
      },
      postCode:{
        type: String,
        required: false
      },
     isInitiated:{
       type: [Boolean,String],
       required: false,
       default:false
     },
     placeholder:{
        type: String,
        required: 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);
     },
     postCode(newVal){

     }
   },
   created() {
      this.initData();
   },
   methods: {
     onChange() {
       this.$emit("input", this.svalue);
       let itemData =null;
       this.optionItems.forEach(item=>{
         if(item.custNo === this.svalue){
           itemData = item;
         }
       });
       this.$emit("onChange",itemData);
       this.optionItems = this.bakOptionItems;
     },

     initData() {
       this.loading = true;
       let queryParams = {
        pageNumber:1,
        pageSize:1300,
        payee:this.payee,
        salesmen:this.salesmen
      };
       this.bakOptionItems=[];
       this.optionItems=[];
       listSimpleEmisMonthpayAccount(queryParams).then(response => {
         this.loading = false;
         this.bakOptionItems =  response.rows;
         this.optionItems =this.bakOptionItems;

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

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