From fd58b8d43a6772c5e58e172a07f93de2b0d1d243 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= Date: Wed, 14 Jan 2026 09:58:37 +0800 Subject: [PATCH] =?UTF-8?q?feat(ActualWarehouseSelect):=20=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E5=8F=AF=E6=B8=85=E9=99=A4=E8=BE=93=E5=85=A5=E6=A1=86?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=B9=B6=E4=BC=98=E5=8C=96=E9=80=89=E4=B8=AD?= =?UTF-8?q?=E7=8A=B6=E6=80=81=E5=B1=95=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit refactor(ProductSelect): 重构为单选模式并优化选中逻辑和UI refactor(RawMaterialSelect): 重构为单选模式并优化选中逻辑和UI --- .../ActualWarehouseSelect/index.vue | 77 ++++++-- .../KLPService/ProductSelect/index.vue | 154 +++++----------- .../KLPService/RawMaterialSelect/index.vue | 168 ++++++------------ 3 files changed, 170 insertions(+), 229 deletions(-) diff --git a/klp-ui/src/components/KLPService/ActualWarehouseSelect/index.vue b/klp-ui/src/components/KLPService/ActualWarehouseSelect/index.vue index 19950f1c..c313762c 100644 --- a/klp-ui/src/components/KLPService/ActualWarehouseSelect/index.vue +++ b/klp-ui/src/components/KLPService/ActualWarehouseSelect/index.vue @@ -3,13 +3,27 @@ :class="['actual-warehouse-select', { 'is-block': block }]" :style="wrapperStyle" > + + + 清除 + + @@ -378,7 +320,7 @@ export default { .product-card { border: 1px solid #e6e6e6; border-radius: 0px; - padding: 4px; + padding: 12px 16px; cursor: pointer; transition: all 0.3s ease; position: relative; @@ -396,17 +338,9 @@ export default { background-color: #f0f7ff; } -/* 多选勾选框位置 */ -.card-checkbox { - position: absolute; - top: 16px; - right: 16px; -} - /* 卡片内容样式 */ .card-content { - margin-right: 24px; - /* 给多选框留空间 */ + width: 100%; } .card-title { diff --git a/klp-ui/src/components/KLPService/RawMaterialSelect/index.vue b/klp-ui/src/components/KLPService/RawMaterialSelect/index.vue index 6ed02a98..67cfbf67 100644 --- a/klp-ui/src/components/KLPService/RawMaterialSelect/index.vue +++ b/klp-ui/src/components/KLPService/RawMaterialSelect/index.vue @@ -12,7 +12,7 @@ - + - + +
- - -
@@ -88,15 +85,12 @@
- +
取消 - - 确认选择 -
@@ -112,18 +106,17 @@ export default { MemoInput }, props: { + // 绑定值：原材料ID 单选字符串格式 value: { type: String, default: '' }, + // 是否只读 readonly: { type: Boolean, default: false }, - multiple: { - type: Boolean, - default: false - }, + // 过滤条件 filters: { type: Object, default: () => ({}) @@ -133,7 +126,9 @@ export default { return { dialogVisible: false, loading: false, + recentLoading: false, rawMaterialList: [], + recentlySelectedList: [], total: 0, queryParams: { pageNum: 1, @@ -146,48 +141,40 @@ export default { surfaceTreatmentDesc: undefined, zincLayer: undefined }, - selectedIds: [], - selectedRows: [], - recentlySelectedList: [], - recentLoading: false + // ✅ 单选核心变量：选中的ID和单条数据对象 + selectedId: '', + selectedRow: {} }; }, computed: { + // 选择按钮展示文本 buttonText() { - // 如果为选中任何原材料，显示选择原材料 - // 如果为选中多个原材料，显示已选 X 项 - // 如果为选中单个原材料，显示原材料名称 - console.log(this.selectedIds); - if (this.selectedIds.length === 0) { + if (!this.selectedId) { return '请选择原材料'; } - if (this.multiple) { - return `已选 ${this.selectedIds.length} 项`; - } else { - return `${this.selectedRows[0]?.rawMaterialName}[${this.selectedRows[0]?.specification || '-'}] (${this.selectedRows[0]?.material || '-'})`; - } + return `${this.selectedRow.rawMaterialName}[${this.selectedRow.specification || '-'}] (${this.selectedRow.material || '-'})`; }, + // 只读状态展示文本 displayText() { - if (this.multiple) { - return this.selectedIds.length > 0 - ? `已选 ${this.selectedIds.length} 项` - : '未选择'; - } else { - return this.selectedRows[0]?.rawMaterialName || '未选择'; - } - }, - + return this.selectedRow.rawMaterialName || '未选择'; + } }, watch: { + // 监听父组件传值 实现值回显 ✅修复原回显BUG value: { immediate: true, - handler(val) { - console.log('watch触发val', val); - this.selectedIds = val ? val.split(',').filter(id => id) : []; - // this.syncSelectedRows(); - this.$forceUpdate(); // 新增：强制刷新视图 + async handler(val) { + this.selectedId = val || ''; + // 有选中ID则获取详情赋值 + if (this.selectedId) { + const res = await getRawMaterial(this.selectedId); + if (res.code === 200) this.selectedRow = res.data; + } else { + this.selectedRow = {}; + } } }, + // 弹窗打开时加载数据 dialogVisible(val) { if (val) { this.getList(); @@ -197,32 +184,20 @@ export default { methods: { // 判断卡片是否选中 isSelected(rawMaterialId) { - return this.selectedIds.includes(rawMaterialId); + return this.selectedId === rawMaterialId; }, - // 卡片选择事件（多选） - handleCardSelection(checked, item) { - if (checked) { - !this.selectedIds.includes(item.rawMaterialId) && this.selectedIds.push(item.rawMaterialId); - } else { - this.selectedIds = this.selectedIds.filter(id => id != item.rawMaterialId); - } - }, - - // 获取最近选择的数据 + // 获取最近选择的原材料数据 async listRecentlySelected() { try { this.recentLoading = true; - // 从localstorage中获取缓存的ids const ids = localStorage.getItem('recentlySelectedRawMaterialIds') || ''; const idsArray = ids.split(',').filter(id => id); - console.log('idsArray', idsArray, idsArray.length === 0); if (idsArray.length === 0) return; const list = await Promise.all(idsArray.map(async id => { const response = await getRawMaterial(id); return response.data || {}; })); - console.log('recentlySelectedList', list); this.recentlySelectedList = list || []; } catch (error) { console.error('获取最近选择的原材料列表失败', error); @@ -232,21 +207,21 @@ export default { } }, - // 原有方法保持不变（仅修改同步选中状态逻辑） + // 获取原材料列表 ✅修复原数据重复BUG async getList() { try { this.loading = true; const params = { ...this.queryParams, ...this.filters }; - console.log('params', params); const response = await listRawMaterial(params); if (response.code === 200) { - this.rawMaterialList = response.rows.map(item => ({ - ...item, - rawMaterialId: item.rawMaterialId.toString() - })) || []; + this.rawMaterialList = response.rows || []; this.total = response.total || 0; + // 选中的项不在列表中则追加进去，保证选中高亮 + if (this.selectedId && !this.rawMaterialList.some(item => item.rawMaterialId === this.selectedId)) { + const res = await getRawMaterial(this.selectedId); + res.code === 200 && this.rawMaterialList.push(res.data); + } } - return this.rawMaterialList; } catch (error) { console.error('获取原材料列表失败', error); this.$message.error('获取原材料列表失败'); @@ -255,11 +230,13 @@ export default { } }, + // 搜索 handleQuery() { this.queryParams.pageNum = 1; this.getList(); }, + // 重置搜索条件 resetQuery() { this.queryParams = { pageNum: 1, @@ -275,53 +252,34 @@ export default { this.getList(); }, + // 点击行/卡片选中 核心单选事件 handleRowClick(row) { - if (!this.multiple) { - // 存储在最近列表中，修改localstorage, 列表中最多5个，超过五个则删除最早的一个 - const index = this.recentlySelectedList.findIndex(item => item.rawMaterialId === row.rawMaterialId); - if (index > -1) { - this.recentlySelectedList.splice(index, 1); - } - this.recentlySelectedList.unshift(row); - if (this.recentlySelectedList.length > 5) { - this.recentlySelectedList.pop(); - } - localStorage.setItem('recentlySelectedRawMaterialIds', this.recentlySelectedList.map(item => item.rawMaterialId).join(',')); + // 缓存最近选择数据，最多5条 + const index = this.recentlySelectedList.findIndex(item => item.rawMaterialId === row.rawMaterialId); + if (index > -1) this.recentlySelectedList.splice(index, 1); + this.recentlySelectedList.unshift(row); + this.recentlySelectedList.length > 5 && this.recentlySelectedList.pop(); + localStorage.setItem('recentlySelectedRawMaterialIds', this.recentlySelectedList.map(item => item.rawMaterialId).join(',')); - this.selectedIds = [row.rawMaterialId]; - this.selectedRows = [row]; - this.confirmSelection(); - } - }, - - handleSelect(row) { - if (this.multiple) { - const index = this.selectedIds.indexOf(row.rawMaterialId); - index > -1 - ? (this.selectedIds.splice(index, 1), this.selectedRows.splice(index, 1)) - : (this.selectedIds.push(row.rawMaterialId), this.selectedRows.push(row)); - } else { - this.selectedIds = [row.rawMaterialId]; - this.selectedRows = [row]; - this.confirmSelection(); - } - }, - - confirmSelection() { - const emitValue = this.selectedIds.join(','); - this.$emit('input', emitValue); - this.$emit('change', emitValue, this.selectedRows); + // 赋值选中状态 + this.selectedId = row.rawMaterialId; + this.selectedRow = row; + // 向父组件传值 + this.$emit('input', this.selectedId); + this.$emit('change', this.selectedId, this.selectedRow); + // 关闭弹窗 this.dialogVisible = false; }, + // 弹窗关闭时恢复选中状态，防止误操作 handleClose() { - this.selectedIds = this.value ? this.value.split(',').filter(id => id) : []; - // this.syncSelectedRows(); + this.selectedId = this.value || ''; this.dialogVisible = false; } }, mounted() { this.listRecentlySelected(); + this.getList(); } }; @@ -367,7 +325,7 @@ export default { .material-card { border: 1px solid #e6e6e6; border-radius: 0px; - padding: 4px; + padding: 12px 16px; cursor: pointer; transition: all 0.3s ease; position: relative; @@ -385,17 +343,9 @@ export default { background-color: #f0f7ff; } -/* 多选勾选框位置 */ -.card-checkbox { - position: absolute; - top: 16px; - right: 16px; -} - /* 卡片内容样式 */ .card-content { - margin-right: 24px; - /* 给多选框留空间 */ + width: 100%; } .card-title {