emis-frontend/src/views/emis/EmisBaseTools/DestinationPicker.vue
2024-08-15 20:45:14 +08:00

122 lines
2.7 KiB
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.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=[];
this.defaultItems=[];
listSimpleEmisDestination(queryParams).then(response => {
this.loading = false;
this.optionItems =response.rows;
// 初始值存储
if(key==null && val==null){
this.defaultItems=[...this.optionItems]
}
});
},
}
};
</script>