1.searchSelect组件调整为页面缓存数据。

This commit is contained in:
xiaosuonian 2025-07-07 16:49:48 +08:00
parent 8642a45f03
commit 10a7c5e372
4 changed files with 293 additions and 256 deletions

View File

@ -1,178 +1,53 @@
<template>
<div>
<el-select
filterable
slot="reference"
ref="select"
:size="size"
v-model="selectedData"
:multiple="multiple"
:clearable="clearable"
:disabled="disabled"
@change="changeSelected"
allow-create
>
<el-option v-for="item in options" :key="item.label+'-'+item.value" :label="item.label" :value="item.value" >
<span style="float: left">{{ item.label }}</span>
<!-- <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>-->
</el-option>
</el-select>
</div>
<el-select
v-model="selectedData"
filterable
allow-create
default-first-option
:multiple="multiple"
:clearable="clearable"
:disabled="disabled"
:size="size"
@change="changeSelected"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
<script>
import {getSearchSelectData } from '@/api/tool/gen';
export default {
name: 'search-select',
name: 'SearchSelect',
props: {
value: [Number, String],
// :value,label,whereorderby:"t_bd_factory,id,name"
params: {
type: String,
default() {
return '';
}
},
where: {
type: String,
default() {
return '';
}
},
orderby: {
type: String,
default() {
return '';
}
},
groupby: {
type: String,
default() {
return '';
}
},
defaultProps: {
type: Object,
default() {
return {};
}
},
//
multiple: {
type: Boolean,
default() {
return false;
}
},
//
clearable: {
type: Boolean,
default() {
return false;
}
},
disabled: {
type: Boolean,
default() {
return false;
}
},
size: {
type: String,
default() {
return 'small';
}
},
width: {
type: Number,
default() {
return 250;
}
},
height: {
type: Number,
default() {
return 300;
}
},
scope: {
type: Object,
default() {
return {};
}
},
value: [String, Number, Array],
options: { type: Array, default: () => [] },
multiple: Boolean,
clearable: Boolean,
disabled: Boolean,
size: { type: String, default: 'small' },
scope: Object
},
data() {
return {
options: [],
selectedData: [], //
style: 'width:' + this.width + 'px;' + 'height:' + this.height + 'px;',
selectStyle: 'width:' + (this.width + 24) + 'px;',
checkedIds: [],
checkedData: []
};
},
mounted() {
this.initData();
return { selectedData: this.value };
},
watch: {
value: {
deep: true,
immediate: true,
handler(val) {
this.selectedData = val;
}
},
params: {
deep: true,
immediate: true,
handler(val) {
this.initData();
}
},
where: {
deep: true,
immediate: true,
handler(val) {
this.initData();
}
}
value: { handler(val) { this.selectedData = val; }, immediate: true }
},
methods: {
initData(){
if (!this.params) return;
let tableName = this.params.split(";")[0];
let value = this.params.split(";")[1];
let label = this.params.split(";")[2];
getSearchSelectData({
tableName: tableName,
value: value,
label: label,
where: this.where,
groupby: this.groupby,
orderby: this.orderby
}).then(res=>{
console.log(res)
if(res.code == 200) {
this.options = res.data;
//
console.log(this.value)
if(this.value) {
this.selectedData = this.value;
}
}
});
},
// select {label: "", value: ""}
changeSelected(selectedData) {
this.$emit('input', selectedData)
changeSelected(val) {
this.$emit('input', val);
if (this.multiple) {
this.$emit('change', this.options.filter(a=> selectedData.includes(a.value)));
const selected = val.map(v => this.options.find(o => o.value === v) || { label: v, value: v });
this.$emit('change', selected);
} else {
let result = this.options.find(a=>a.value == selectedData);
result['scope'] = this.scope;
this.$emit('change', result);
const selected = this.options.find(o => o.value === val) || { label: val, value: val };
this.$emit('change', selected);
}
}
}
}
};
</script>

View File

@ -0,0 +1,68 @@
// searchData.js - 搜索配置的独立模块
export const selectConfigs =[
// 磅点选择
{
key: 'truepound',
params: 't_data_truepound;id;concat(name,\' \',usrcode)',
where: 'poundtype = \'3\'',
orderby: 'usrcode asc'
},
// 业务磅点
{
key: 'buspound',
params: "t_data_buspound;id;concat(name,' ',usrcode)",
where: '',
orderby: 'usrcode asc'
},
// 车号
{
key: 'carno',
params: "t_data_pounddata;usrcode;usrcode",
where: "type = 'plateNumber'",
orderby: "usrcode asc"
},
// 司机
{
key: 'cardriver',
params: "t_data_pounddata;usrcode;usrcode",
where: "type = 'driverName'",
orderby: "usrcode asc"
},
// 品名
{
key: 'itmcode',
params: "t_data_pounddata;usrcode;concat(name,' ',usrcode)",
where: "type = 'productName'",
orderby: "usrcode asc"
},
// 收货单位
{
key: 'recunit',
params: "t_data_pounddata;usrcode;concat(name,' ',usrcode)",
where: "type = 'receivingCompany'",
orderby: "usrcode asc"
},
// 承运单位
{
key: 'trnunit',
params: "t_data_pounddata;usrcode;concat(name,' ',usrcode)",
where: "type = 'teamOrCarrier'",
orderby: "usrcode asc"
},
// 发货单位
{
key: 'sendunit',
params: "t_data_pounddata;usrcode;concat(name,' ',usrcode)",
where: "type = 'shippingCompany'",
orderby: "usrcode asc"
},
// 主榜单号
{
key: 'appli',
params: "t_data_poundmst;id;usrcode",
where: "",
orderby: "usrcode asc"
},
]
;

View File

@ -15,9 +15,7 @@
<!-- />-->
<!-- </el-select>-->
<search-select v-model="queryParams.poundid"
params = "t_data_truepound;id;concat(name,' ',usrcode)"
where="poundtype = '1' or poundtype = '2'"
orderby="usrcode asc"
:options="getOptionsByKey('truepound')"
></search-select>
</el-form-item>
</el-col>
@ -53,9 +51,7 @@
</el-form-item>
<el-form-item label="车号" prop="carno">
<search-select v-model="queryParams.carno"
params = "t_data_pounddata;usrcode;usrcode"
where="type = 'plateNumber'"
orderby="usrcode asc"
:options="getOptionsByKey('carno')"
clearable
></search-select>
<!-- <el-input-->
@ -497,6 +493,10 @@ import {delUser} from "@/api/system/user";
//
import Decimal from 'decimal.js';
import {mulToString,mulToArray} from "@/api/tool/util.js"
//searchSelect
import { getSearchSelectData } from "@/api/tool/gen.js";
//searchData
import {selectConfigs} from "@/components/SearchSelect/searchdata.js";
export default {
name: "Outinpound",
components: {SearchSelect},
@ -585,9 +585,34 @@ export default {
},
},
//searchSelect
// searchData:{
// optionsMap:{},
// selectConfigs:[
// //
// {
// key: 'truepound',
// params: 't_data_truepound;id;concat(name,\' \',usrcode)',
// where: 'poundtype = \'1\' or poundtype = \'2\'',
// orderby: 'usrcode asc'
// },
// //
// {
// key: 'carno',
// params : "t_data_pounddata;usrcode;usrcode",
// where : "type = 'plateNumber'",
// orderby : "usrcode asc"
// },
// ]
// },
searchData: {
optionsMap: {},
selectConfigs:selectConfigs
},
}
},
created() {
this.loadAllSelectOptions();
},
computed:{
searchPound(){
@ -1046,6 +1071,31 @@ export default {
this.poundbillList = response.rows;
this.loading = false;
})
},
//searchSelect
buildCacheKey({ params, where, groupby = '', orderby = '' }) {
return `${params}|${where}|${groupby}|${orderby}`;
},
async loadAllSelectOptions() {
for (const cfg of this.searchData.selectConfigs) {
const key = this.buildCacheKey(cfg);
if (!this.searchData.optionsMap[key]) {
const [tableName, value, label] = cfg.params.split(';');
const res = await getSearchSelectData({
tableName: tableName,
value: value,
label: label,
where: cfg.where,
groupby: cfg.groupby,
orderby: cfg.orderby
});
this.$set(this.searchData.optionsMap, key, res.code === 200 ? res.data : []);
}
}
},
getOptionsByKey(key) {
const cfg = this.searchData.selectConfigs.find(c => c.key === key);
return this.searchData.optionsMap[this.buildCacheKey(cfg)] || [];
}
},
mounted() {

View File

@ -15,9 +15,7 @@
<!-- />-->
<!-- </el-select>-->
<search-select v-model="queryParams.poundid"
params = "t_data_truepound;id;concat(name,' ',usrcode)"
where="poundtype = '3'"
orderby="usrcode asc"
:options="this.getOptionsByKey('truepound')"
></search-select>
</el-form-item>
</el-col>
@ -74,9 +72,7 @@
<!-- />-->
<!-- </el-select>-->
<search-select v-model="queryPageParams.mstBill.recunitid"
params = "t_data_pounddata;usrcode;concat(name,' ',usrcode)"
where="type = 'receivingCompany'"
orderby="usrcode asc"
:options="getOptionsByKey('recunit')"
clearable
></search-select>
</el-form-item>
@ -90,9 +86,7 @@
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<search-select v-model="queryPageParams.mstBill.itmcode"
params = "t_data_pounddata;usrcode;concat(name,' ',usrcode)"
where="type = 'productName'"
orderby="usrcode asc"
:options = "getOptionsByKey('itmcode')"
clearable
></search-select>
</el-form-item>
@ -102,9 +96,7 @@
<el-col :span="24">
<el-form-item label="承运单位" prop="trnunitid">
<search-select v-model="queryPageParams.mstBill.trnunitid"
params = "t_data_pounddata;usrcode;concat(name,' ',usrcode)"
where="type = 'teamOrCarrier'"
orderby="usrcode asc"
:options = "getOptionsByKey('trnunit')"
clearable
></search-select>
</el-form-item>
@ -112,9 +104,7 @@
<el-col :span="24">
<el-form-item label="发货单位" prop="sendunitid">
<search-select v-model="queryPageParams.mstBill.sendunitid"
params = "t_data_pounddata;usrcode;concat(name,' ',usrcode)"
where="type = 'shippingCompany'"
orderby="usrcode asc"
:options = "getOptionsByKey('sendunit')"
clearable
></search-select>
</el-form-item>
@ -158,9 +148,7 @@
<search-select
:disabled = "true"
v-model="scope.row.itmcode"
params = "t_data_pounddata;usrcode;concat(name,' ',usrcode)"
where="type = 'productName'"
orderby="usrcode asc"
:options = "getOptionsByKey('itmcode')"
class="search-select-custom-disabled"
></search-select>
</template>
@ -174,9 +162,7 @@
<search-select
:disabled = "true"
v-model="scope.row.sendunitid"
params = "t_data_pounddata;usrcode;concat(name,' ',usrcode)"
where="type = 'shippingCompany'"
orderby="usrcode asc"
:options = "getOptionsByKey('sendunit')"
class="search-select-custom-disabled"
></search-select>
</template>
@ -186,9 +172,7 @@
<search-select
:disabled = "true"
v-model="scope.row.recunitid"
params = "t_data_pounddata;usrcode;concat(name,' ',usrcode)"
where="type = 'receivingCompany'"
orderby="usrcode asc"
:options = "getOptionsByKey('recunit')"
class="search-select-custom-disabled"
></search-select>
</template>
@ -198,9 +182,7 @@
<search-select
:disabled = "true"
v-model="scope.row.trnunitid"
params = "t_data_pounddata;usrcode;concat(name,' ',usrcode)"
where="type = 'teamOrCarrier'"
orderby="usrcode asc"
:options = "getOptionsByKey('trnunit')"
class="search-select-custom-disabled"
></search-select>
</template>
@ -248,9 +230,7 @@
<search-select
:disabled = "true"
v-model="scope.row.appliid"
params = "t_data_poundmst;id;usrcode"
where=""
orderby="usrcode asc"
:options = "getOptionsByKey('appli')"
class="search-select-custom-disabled"
></search-select>
</template>
@ -262,9 +242,7 @@
<search-select
:disabled = "true"
v-model="scope.row.sendunitid"
params = "t_data_pounddata;usrcode;concat(name,' ',usrcode)"
where="type = 'shippingCompany'"
orderby="usrcode asc"
:options = "getOptionsByKey('sendunit')"
class="search-select-custom-disabled"
></search-select>
</template>
@ -274,9 +252,7 @@
<search-select
:disabled = "true"
v-model="scope.row.recunitid"
params = "t_data_pounddata;usrcode;concat(name,' ',usrcode)"
where="type = 'receivingCompany'"
orderby="usrcode asc"
:options = "getOptionsByKey('recunit')"
class="search-select-custom-disabled"
></search-select>
</template>
@ -286,9 +262,7 @@
<search-select
:disabled = "true"
v-model="scope.row.itmcode"
params = "t_data_pounddata;usrcode;concat(name,' ',usrcode)"
where="type = 'productName'"
orderby="usrcode asc"
:options = "getOptionsByKey('itmcode')"
class="search-select-custom-disabled"
></search-select>
</template>
@ -379,9 +353,7 @@
<search-select
:disabled = "true"
v-model="scope.row.appliid"
params = "t_data_poundmst;id;usrcode"
where=""
orderby="usrcode asc"
:options = "getOptionsByKey('appli')"
class="search-select-custom-disabled"
></search-select>
</template>
@ -393,9 +365,7 @@
<search-select
:disabled = "true"
v-model="scope.row.sendunitid"
params = "t_data_pounddata;usrcode;concat(name,' ',usrcode)"
where="type = 'shippingCompany'"
orderby="usrcode asc"
:options = "getOptionsByKey('sendunit')"
class="search-select-custom-disabled"
></search-select>
</template>
@ -405,9 +375,7 @@
<search-select
:disabled = "true"
v-model="scope.row.recunitid"
params = "t_data_pounddata;usrcode;concat(name,' ',usrcode)"
where="type = 'receivingCompany'"
orderby="usrcode asc"
:options = "getOptionsByKey('recunit')"
class="search-select-custom-disabled"
></search-select>
</template>
@ -417,9 +385,7 @@
<search-select
:disabled = "true"
v-model="scope.row.trnunitid"
params = "t_data_pounddata;usrcode;concat(name,' ',usrcode)"
where="type = 'teamOrCarrier'"
orderby="usrcode asc"
:options = "getOptionsByKey('trnunit')"
class="search-select-custom-disabled"
></search-select>
</template>
@ -429,9 +395,7 @@
<search-select
:disabled = "true"
v-model="scope.row.itmcode"
params = "t_data_pounddata;usrcode;concat(name,' ',usrcode)"
where="type = 'productName'"
orderby="usrcode asc"
:options = "getOptionsByKey('itmcode')"
class="search-select-custom-disabled"
></search-select>
</template>
@ -526,9 +490,7 @@
<!-- />-->
<!-- </el-select>-->
<search-select v-model="queryParams.carno"
params = "t_data_pounddata;usrcode;usrcode"
where="type = 'plateNumber'"
orderby="usrcode asc"
:options = "getOptionsByKey('carno')"
></search-select>
</el-form-item>
</el-col>
@ -548,9 +510,7 @@
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<search-select v-model="queryParams.cardriver"
params = "t_data_pounddata;usrcode;usrcode"
where="type = 'driverName'"
orderby="usrcode asc"
:options = "getOptionsByKey('cardriver')"
></search-select>
</el-form-item>
</el-col>
@ -611,10 +571,7 @@
<el-form-item label="业务磅点" prop="poundid">
<search-select
v-model="mstBillFormData.mstBillForm.poundid"
params="t_data_buspound;id;concat(name,' ',usrcode)"
where = ""
orderby="usrcode asc"
:clearable = "true"
:options = "getOptionsByKey('buspound')"
:disabled = "true"
></search-select>
</el-form-item>
@ -624,9 +581,7 @@
<el-col :span="16">
<el-form-item label="发货单位" prop="sendunitid">
<search-select v-model="mstBillFormData.mstBillForm.sendunitid"
params = "t_data_pounddata;usrcode;concat(name,' ',usrcode)"
where="type = 'shippingCompany'"
orderby="usrcode asc"
:options = "getOptionsByKey('sendunit')"
clearable
></search-select>
</el-form-item>
@ -634,9 +589,7 @@
<el-col :span="8">
<el-form-item label="品名" prop="itmcode">
<search-select v-model="mstBillFormData.mstBillForm.itmcode"
params = "t_data_pounddata;usrcode;concat(name,' ',usrcode)"
where="type = 'productName'"
orderby="usrcode asc"
:options = "getOptionsByKey('itmcode')"
clearable
></search-select>
</el-form-item>
@ -646,9 +599,7 @@
<el-col :span="16">
<el-form-item label="收货单位" prop="recunitid">
<search-select v-model="mstBillFormData.mstBillForm.recunitid"
params = "t_data_pounddata;usrcode;concat(name,' ',usrcode)"
where="type = 'receivingCompany'"
orderby="usrcode asc"
:options = "getOptionsByKey('recunit')"
clearable
></search-select>
</el-form-item>
@ -663,9 +614,7 @@
<el-col :span="16">
<el-form-item label="承运单位" prop="trnunitid">
<search-select v-model="mstBillFormData.mstBillForm.trnunitid"
params = "t_data_pounddata;usrcode;concat(name,' ',usrcode)"
where="type = 'teamOrCarrier'"
orderby="usrcode asc"
:options = "getOptionsByKey('trnunit')"
clearable
></search-select>
</el-form-item>
@ -698,9 +647,7 @@
<el-form-item label="主榜单编号" prop="usrcode" readonly>
<!-- <el-input v-model="mstBillFormData.mstBillForm.usrcode" placeholder="请输入主榜单编号" />-->
<search-select v-model="poundBillDetailFormData.poundBillDetailForm.appliid"
params = "t_data_poundmst;id;usrcode"
where=""
orderby="usrcode asc"
:options = "getOptionsByKey('appli')"
disabled
class="search-select-custom-disabled"
></search-select>
@ -714,9 +661,7 @@
<el-col :span="8">
<el-form-item label="发货单位" prop="sendunitid">
<search-select v-model="poundBillDetailFormData.poundBillDetailForm.sendunitid"
params = "t_data_pounddata;usrcode;concat(name,' ',usrcode)"
where="type = 'shippingCompany'"
orderby="usrcode asc"
:options = "getOptionsByKey('sendunit')"
></search-select>
</el-form-item>
</el-col>
@ -725,18 +670,14 @@
<el-col :span="16">
<el-form-item label="收货单位" prop="recunitid">
<search-select v-model="poundBillDetailFormData.poundBillDetailForm.recunitid"
params = "t_data_pounddata;usrcode;concat(name,' ',usrcode)"
where="type = 'receivingCompany'"
orderby="usrcode asc"
:options = "getOptionsByKey('recunit')"
></search-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="品名" prop="itmcode">
<search-select v-model="poundBillDetailFormData.poundBillDetailForm.itmcode"
params = "t_data_pounddata;usrcode;concat(name,' ',usrcode)"
where="type = 'productName'"
orderby="usrcode asc"
:options = "getOptionsByKey('itmcode')"
></search-select>
</el-form-item>
</el-col>
@ -801,6 +742,10 @@ import {
getPoundbill,
updateTransPoundbill,
} from "@/api/measurement/bill/poundbill"
//searchSelect
import { getSearchSelectData } from "@/api/tool/gen.js";
//searchData
import {searchData, selectConfigs} from "@/components/SearchSelect/searchdata.js";
export default {
name: "Shortdispound",
components: {SearchSelect},
@ -936,10 +881,84 @@ export default {
thisSelectedRow:{},
isWght:true,
},
//searchSelect
searchData111:{
optionsMap:{},
selectConfigs:[
//
{
key: 'truepound',
params: 't_data_truepound;id;concat(name,\' \',usrcode)',
where: 'poundtype = \'3\'',
orderby: 'usrcode asc'
},
//
{
key: 'buspound',
params: "t_data_buspound;id;concat(name,' ',usrcode)",
where: '',
orderby: 'usrcode asc'
},
//
{
key: 'carno',
params : "t_data_pounddata;usrcode;usrcode",
where : "type = 'plateNumber'",
orderby : "usrcode asc"
},
//
{
key: 'cardriver',
params : "t_data_pounddata;usrcode;usrcode",
where : "type = 'driverName'",
orderby : "usrcode asc"
},
//
{
key: 'itmcode',
params : "t_data_pounddata;usrcode;concat(name,' ',usrcode)",
where : "type = 'productName'",
orderby : "usrcode asc"
},
//
{
key: 'recunit',
params : "t_data_pounddata;usrcode;concat(name,' ',usrcode)",
where : "type = 'receivingCompany'",
orderby : "usrcode asc"
},
//
{
key: 'trnunit',
params : "t_data_pounddata;usrcode;concat(name,' ',usrcode)",
where : "type = 'teamOrCarrier'",
orderby : "usrcode asc"
},
//
{
key: 'sendunit',
params : "t_data_pounddata;usrcode;concat(name,' ',usrcode)",
where : "type = 'shippingCompany'",
orderby : "usrcode asc"
},
//
{
key: 'appli',
params : "t_data_poundmst;id;usrcode",
where : "",
orderby : "usrcode asc"
},
]
},
searchData: {
optionsMap: {},
selectConfigs:selectConfigs
},
}
},
created() {
// this.getList()
this.loadAllSelectOptions();
},
watch: {
//
@ -1444,7 +1463,32 @@ watch: {
this.poundBillFullList = response.rows;
this.poundBillFullLoading = false;
})
}
},
//searchSelect
buildCacheKey({ params, where, groupby = '', orderby = '' }) {
return `${params}|${where}|${groupby}|${orderby}`;
},
async loadAllSelectOptions() {
for (const cfg of this.searchData.selectConfigs) {
const key = this.buildCacheKey(cfg);
if (!this.searchData.optionsMap[key]) {
const [tableName, value, label] = cfg.params.split(';');
const res = await getSearchSelectData({
tableName: tableName,
value: value,
label: label,
where: cfg.where,
groupby: cfg.groupby,
orderby: cfg.orderby
});
this.$set(this.searchData.optionsMap, key, res.code === 200 ? res.data : []);
}
}
},
getOptionsByKey(key) {
const cfg = this.searchData.selectConfigs.find(c => c.key === key);
return this.searchData.optionsMap[this.buildCacheKey(cfg)] || [];
},
}
}
</script>