From 1ad589405bf2b26a8e896fa6ac5361c316bb9026 Mon Sep 17 00:00:00 2001
From: buhuazhen <hua100783@gmail.com>
Date: 星期四, 12 三月 2026 09:54:49 +0800
Subject: [PATCH] fix(客户服务): 修复产品选择对话框行标识不一致问题
---
src/views/customerService/feedbackRegistration/components/ProductSelectDialog.vue | 118 +++++++++++++++++++++++++++++++++++++----------------------
1 files changed, 74 insertions(+), 44 deletions(-)
diff --git a/src/views/customerService/feedbackRegistration/components/ProductSelectDialog.vue b/src/views/customerService/feedbackRegistration/components/ProductSelectDialog.vue
index 4df22bc..37e21ef 100644
--- a/src/views/customerService/feedbackRegistration/components/ProductSelectDialog.vue
+++ b/src/views/customerService/feedbackRegistration/components/ProductSelectDialog.vue
@@ -16,8 +16,8 @@
</el-form>
<!-- 鍒楄〃 -->
- <el-table ref="tableRef" v-loading="loading" :data="tableData" height="420" highlight-current-row row-key="id"
- @selection-change="handleSelectionChange" @select="handleSelect">
+ <el-table ref="tableRef" v-loading="loading" :data="tableData" height="420" highlight-current-row :row-key="getRowKey"
+ @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column type="index" label="搴忓彿" width="60" />
<template v-for="column in visibleColumns" :key="column.prop">
@@ -79,8 +79,8 @@
});
const query = reactive({
- productName: "",
- model: "",
+ productCategory: "",
+ unit: "",
});
const page = reactive({
@@ -92,6 +92,7 @@
const tableData = ref([]);
const total = ref(0);
const multipleSelection = ref([]);
+const selectedRowMap = ref(new Map());
const tableRef = ref();
const columnsDialogVisible = ref(false);
@@ -106,6 +107,29 @@
const visibleColumns = computed(() => {
return allColumns.value.filter(c => selectedColumns.value.includes(c.prop));
});
+
+const getRowKey = (row) => {
+ return row?.id ?? row?.productModelId ?? `${row?.productCategory || ""}-${row?.specificationModel || row?.model || ""}-${row?.unit || ""}`;
+};
+
+const syncMultipleSelection = () => {
+ multipleSelection.value = Array.from(selectedRowMap.value.values());
+};
+
+const initSelectionFromProps = () => {
+ const selectedIdSet = new Set((props.selectedIds || []).map((id) => String(id)));
+ selectedRowMap.value = new Map();
+ if (!selectedIdSet.size) {
+ syncMultipleSelection();
+ return;
+ }
+ (props.products || []).forEach((row) => {
+ if (selectedIdSet.has(String(row?.id))) {
+ selectedRowMap.value.set(getRowKey(row), row);
+ }
+ });
+ syncMultipleSelection();
+};
const resetColumns = () => {
selectedColumns.value = allColumns.value.filter(c => c.selected).map(c => c.prop);
@@ -124,39 +148,33 @@
}
const handleSelectionChange = (val) => {
+ const currentPageKeys = new Set(tableData.value.map((item) => getRowKey(item)));
+ currentPageKeys.forEach((key) => selectedRowMap.value.delete(key));
+
if (props.single && val.length > 1) {
- // 濡傛灉闄愬埗涓哄崟涓�夋嫨锛屽彧淇濈暀鏈�鍚庝竴涓�変腑鐨�
const lastSelected = val[val.length - 1];
- multipleSelection.value = [lastSelected];
- // 娓呯┖琛ㄦ牸閫変腑鐘舵�侊紝鐒跺悗閲嶆柊閫変腑鏈�鍚庝竴涓�
+ selectedRowMap.value = new Map();
+ if (lastSelected) {
+ selectedRowMap.value.set(getRowKey(lastSelected), lastSelected);
+ }
+ syncMultipleSelection();
nextTick(() => {
if (tableRef.value) {
tableRef.value.clearSelection();
tableRef.value.toggleRowSelection(lastSelected, true);
}
});
- } else {
- multipleSelection.value = val;
- }
-}
-
-// 澶勭悊鍗曚釜閫夋嫨
-const handleSelect = (selection, row) => {
- if (props.single) {
- // 濡傛灉闄愬埗涓哄崟涓紝娓呯┖鍏朵粬閫夋嫨锛屽彧淇濈暀褰撳墠琛�
- if (selection.includes(row)) {
- // 閫変腑褰撳墠琛屾椂锛屾竻绌哄叾浠栭�変腑
- multipleSelection.value = [row];
- nextTick(() => {
- if (tableRef.value) {
- tableData.value.forEach((item) => {
- if (item.id !== row.id) {
- tableRef.value.toggleRowSelection(item, false);
- }
- });
- }
- });
+ } else if (props.single) {
+ selectedRowMap.value = new Map();
+ if (val[0]) {
+ selectedRowMap.value.set(getRowKey(val[0]), val[0]);
}
+ syncMultipleSelection();
+ } else {
+ val.forEach((row) => {
+ selectedRowMap.value.set(getRowKey(row), row);
+ });
+ syncMultipleSelection();
}
}
@@ -166,8 +184,8 @@
}
function onReset() {
- query.productName = "";
- query.model = "";
+ query.productCategory = "";
+ query.unit = "";
page.pageNum = 1;
loadData();
}
@@ -192,32 +210,29 @@
async function loadData() {
loading.value = true;
try {
- multipleSelection.value = []; // 缈婚〉/鎼滅储鍚庢竻绌洪�夋嫨鏇寸鍚堥鏈�
-
let filtered = props.products || [];
- // 鏈湴鎼滅储杩囨护
- if (query.productName) {
- filtered = filtered.filter(item => item.productName && item.productName.includes(query.productName));
+ if (query.productCategory) {
+ filtered = filtered.filter(item => item.productCategory && item.productCategory.includes(query.productCategory));
}
- if (query.model) {
- filtered = filtered.filter(item => item.model && item.model.includes(query.model));
+ if (query.unit) {
+ filtered = filtered.filter(item => item.unit && item.unit.includes(query.unit));
}
total.value = filtered.length;
- // 鍓嶇鍒嗛〉
const start = (page.pageNum - 1) * page.pageSize;
const end = start + page.pageSize;
tableData.value = filtered.slice(start, end);
- // 鑷姩鍥炴樉閫変腑鐘舵��
nextTick(() => {
if (tableRef.value) {
+ tableRef.value.clearSelection();
tableData.value.forEach(row => {
- if (props.selectedIds && props.selectedIds.includes(row.id)) {
+ if (selectedRowMap.value.has(getRowKey(row))) {
tableRef.value.toggleRowSelection(row, true);
}
});
}
+ syncMultipleSelection();
});
} finally {
loading.value = false;
@@ -227,16 +242,31 @@
// 鐩戝惉寮圭獥鎵撳紑锛岄噸缃�夋嫨
watch(() => props.modelValue, (visible) => {
if (visible) {
- // 姣忔鎵撳紑鏃堕噸鏂板垵濮嬪寲閫変腑鐘舵�侊紙multipleSelection 浼氶�氳繃 loadData 涓殑鍥炴樉閫昏緫鑷姩鏇存柊锛屼絾鍒濆闇�缃┖閬垮厤閲嶅锛�
- multipleSelection.value = [];
+ initSelectionFromProps();
page.pageNum = 1;
loadData();
}
});
-// 鐩戝惉鏁版嵁婧愬彉鍖�
watch(() => props.products, () => {
- loadData();
+ const latestMap = new Map();
+ const currentKeys = new Set(selectedRowMap.value.keys());
+ (props.products || []).forEach((row) => {
+ const key = getRowKey(row);
+ if (currentKeys.has(key)) {
+ latestMap.set(key, row);
+ }
+ });
+ selectedRowMap.value.forEach((row, key) => {
+ if (!latestMap.has(key)) {
+ latestMap.set(key, row);
+ }
+ });
+ selectedRowMap.value = latestMap;
+ syncMultipleSelection();
+ if (props.modelValue) {
+ loadData();
+ }
}, { deep: true });
onMounted(() => {
--
Gitblit v1.9.3