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

<template>
  <el-select
      style="width:100%"
      filterable
      clearable
      v-model="svalue"

      no-data-text=""
      :placeholder="placeholder"
      @change="onChange"
      @click.native="onClick"

     >
       <el-option v-for="item in optionItems" :key="item.destCode" :label="item.destName" :value="item.destCode" ></el-option>
   </el-select>

</template>
<script>
  import { listSimpleEmisDestination } from "@/api/emis/emisDestination";

 export default {
   name: "DestinationPicker",
   props: {
     value: {
       type: String,
       required: false
     },
     placeholder: {
       type: String,
       required: false
     },
     countryCode: {
       type: String,
       required: false
     },
     lineCode:{
       type: [String,Number],
       required: false
     },
     isInitiated:{
       type: [Boolean,String],
       required: false,
       default:false
     },
     disabled:{
       type: [Boolean,String],
       required: false
     },
   },
   data() {
     return {
       loading:false,
       svalue: this.value,
       optionItems: [],
        // 缺省值
       defaultItems: null,

     };
   },
   watch: {
      value(newVal,oldVal) {
        if(this.value!=null ){
          this.svalue=this.value;
          // 判断默认值中是否存在，若存在则不继续查询
          if(this.optionItems){
              let selItem = this.optionItems.find(item => item.destCode == this.svalue);
              if(selItem){
                return;
              }
          }
          this.queryData(null,this.svalue);
        }
      },
     countryCode(newVal, oldVal) {
        if(newVal!=oldVal){
            this.defaultItems=null;
        }
     },
   },
   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.destCode === this.svalue);
       this.$emit("onChange",itemData);
     },
     queryData(val,key) {
       this.loading = true;
       let queryParams = {
          pageNum:1,
          pageSize:150,
          country:this.countryCode
        };

      this.optionItems=[];
       listSimpleEmisDestination(queryParams).then(response => {
         this.loading = false;
         this.optionItems =response.rows;
          // 初始值存储
          if(key==null && val==null){
            this.defaultItems=[...this.optionItems]
          }
       });
     },
   }
 };
</script>