130 lines
2.7 KiB
Vue
130 lines
2.7 KiB
Vue
<template>
|
|
<el-select
|
|
:loading="loading"
|
|
filterable
|
|
clearable
|
|
ref="selectRef"
|
|
remote
|
|
:remote-method="queryData"
|
|
v-model="svalue"
|
|
:placeholder="placeholder"
|
|
style="width: 100%"
|
|
@blur="onBlur"
|
|
@focus="onFocus"
|
|
@change="onChange"
|
|
>
|
|
<el-option
|
|
v-for="item in filterData"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</template>
|
|
|
|
<script>
|
|
import { getMasterEmisWaybills } from "@/api/emis/emisWaybill";
|
|
import emitter from 'element-ui/src/mixins/emitter';
|
|
|
|
export default {
|
|
mixins: [emitter],
|
|
props: {
|
|
value: {
|
|
type: [String],
|
|
required: false,
|
|
},
|
|
placeholder: {
|
|
type: [String],
|
|
required: false,
|
|
},
|
|
searchParams:{
|
|
type:Object,
|
|
required:false,
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
svalue: this.value,
|
|
// 搜索后的数据
|
|
filterData: [],
|
|
filterMap: new Map(),
|
|
loading: false,
|
|
queryParams: {
|
|
billCode: null,
|
|
...this.searchParams
|
|
},
|
|
};
|
|
},
|
|
watch: {
|
|
value(newVal,oldVal) {
|
|
// 逻辑 有初始值先查询初值
|
|
this.svalue=this.value;
|
|
this.queryData(null,this.svalue);
|
|
},
|
|
//监听参数变化 重新获取
|
|
searchParams:{
|
|
handler(newVal,oldVal){
|
|
this.queryData();
|
|
},
|
|
deep:true
|
|
}
|
|
},
|
|
created() {
|
|
this.queryData();
|
|
},
|
|
methods: {
|
|
onFocus(val) {
|
|
this.optionItems = [];
|
|
this.queryData();
|
|
},
|
|
onChange(val) {
|
|
//通过value获取到transLineType
|
|
let valObject = this.filterData.find((item) => item.value == val);
|
|
this.$emit("onMasterBillCodeChange", valObject);//子组件传选中对象到父组件
|
|
this.$emit("input", this.svalue); // 子组件值传到父组件 基础双向绑定
|
|
},
|
|
onBlur(val) {
|
|
this.$emit("input", this.svalue);
|
|
this.dispatch('ElFormItem', 'el.form.blur');
|
|
},
|
|
queryData(val) {
|
|
this.queryParams = {...this.searchParams};
|
|
this.queryParams.billCode = val;
|
|
getMasterEmisWaybills(this.queryParams).then((response) => {
|
|
this.filterData = response.rows.map((item) => {
|
|
return {
|
|
label: item.billCode,
|
|
value: item.billCode,
|
|
productType: item.productType
|
|
};
|
|
});
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.el-s-thead {
|
|
width: 100%;
|
|
color: rgb(177 47 41);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
display: inline-flex;
|
|
padding: 10px;
|
|
border-bottom: 1px solid #e6e3e3;
|
|
min-width: 300px;
|
|
}
|
|
|
|
.el-data {
|
|
width: 100%;
|
|
color: #000;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
display: inline-flex;
|
|
padding: 5px;
|
|
border-bottom: 1px solid #e6e3e3;
|
|
}
|
|
</style>
|