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

<template>
  <!-- style="width:100%" -->
 <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.regionCode" :label="item.regionName" :value="item.regionCode" />
 </el-select>


</template>
<script>
import { listSimpleEmisRegion } from "@/api/emis/emisRegion";

export default {
name: "ProvincePicker",
props: {
 value: {
   type: String,
   required: false
 },
 countryCode: {
   type: String,
   required: false
 },
 placeholder: {
   type: String,
   required: false
 },
},
data() {
 return {
   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.regionCode == 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 selItem = this.optionItems.find(item => item.regionCode == this.svalue);
   this.$emit("onChange", selItem);},
 queryData(val,key) {
   this.optionItems =[];

   let queryParams = {
     pageNum:1,
     pageSize:100,
     countryCode:this.countryCode,
     regionCode:key,
     regionType:1
   };

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

}
};
</script>