emis-frontend/src/views/emis/EmisBaseTools/GoodsSimplePicker.vue
2024-05-17 11:09:09 +08:00

111 lines
2.3 KiB
Vue

<template>
<el-select
filterable
clearable
ref="selectRef"
default-first-option
remote
:remote-method="remoteMethod"
:loading="loading"
:no-data-text="noDataText"
v-model="svalue"
:placeholder="placeholder"
style="width:100%"
allow-create
@change="onChange">
<el-option v-for="item in filterData" :key="item.goodsName" :label="item.goodsName" :value="item.goodsName">
</el-option>
</el-select>
</template>
<script>
import { listSimpleEmisGoods} from "@/api/emis/emisGoods";
export default {
name: "GoodsSimplePicker",
props: {
value: {
type: [String],
required: false
},
placeholder:{
type: [String],
required: false
},
},
data() {
return {
svalue: null,
// 搜索后的数据
filterData:[],
filterMap:new Map(),
noDataText: '无数据',
loading: false,
queryParams:{
pageNum: 1,
pageSize: 10,
}
};
},
watch: {
value(newVal) {
},
svalue(newVal, oldVal) {
}
},
created() {
this.queryData();
},
methods: {
onChange(val) {
this.$emit('input', val)
this.$emit('onChange', val)
this.$refs.selectRef.createdLabel = null
},
remoteMethod(queryVal) {
this.queryParams.pageNum=1;
this.queryParams.goodsName=queryVal;
this.queryData();
},
loadmore() {
this.queryParams.pageNum++;
this.queryData();
},
queryData() {
listSimpleEmisGoods(this.queryParams).then(response => {
this.filterData= response.rows
this.filterData.forEach(item => {
this.filterMap[item.id]=item;
});
});
},
}
};
</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>