精准查询,参数排序,拖拽排序优化

This commit is contained in:
JenniferW 2025-12-03 15:47:28 +08:00
parent 9de8918cba
commit 742cb4ce18
1 changed files with 118 additions and 15 deletions

View File

@ -277,6 +277,8 @@
width="1200px" width="1200px"
top="40px" top="40px"
:close-on-click-modal="false" :close-on-click-modal="false"
draggable
class="compare-dialog"
> >
<!-- 仅看不同项按钮 --> <!-- 仅看不同项按钮 -->
<div <div
@ -308,7 +310,7 @@
fixed="left" fixed="left"
/> />
<el-table-column <el-table-column
v-for="item in sortedCompareList" v-for="(item, index) in displayCompareList"
:key="item.partNumber" :key="item.partNumber"
:label="item.partNumber" :label="item.partNumber"
:prop="item.partNumber" :prop="item.partNumber"
@ -318,11 +320,11 @@
> >
<template #header="{ column }"> <template #header="{ column }">
<div <div
style=" class="compare-header-draggable"
display: flex; draggable="true"
align-items: center; @dragstart="onHeaderDragStart(index)"
justify-content: center; @dragover.prevent
" @drop="onHeaderDrop(index)"
> >
<span v-if="item.isLatest" class="new-tag"> <span v-if="item.isLatest" class="new-tag">
<img <img
@ -343,7 +345,7 @@
{{ column.label }} {{ column.label }}
</span> </span>
<span style="font-size: 12px; color: #666">{{ <span style="font-size: 12px; color: #666">{{
sortedCompareList.find( displayCompareList.find(
(i) => i.partNumber === column.label (i) => i.partNumber === column.label
)?.partName || "-" )?.partName || "-"
}}</span> }}</span>
@ -518,16 +520,34 @@ const sortedCompareList = computed(() => {
// 复制数组以避免修改原始数据 // 复制数组以避免修改原始数据
const list = [...selectedCompareList.value]; const list = [...selectedCompareList.value];
// 排序:根据品号结尾的五位数从大到小排序 // 排序规则:
// 1)取品号最后的 5 位数字,如 00001
// 2)第一位数字越大越靠后
// 3)后四位数字整体越大越靠前
list.sort((a, b) => { list.sort((a, b) => {
// 提取品号结尾的五位数
const aMatch = a.partNumber?.match(/-(\d{5})$/); const aMatch = a.partNumber?.match(/-(\d{5})$/);
const bMatch = b.partNumber?.match(/-(\d{5})$/); const bMatch = b.partNumber?.match(/-(\d{5})$/);
const aNum = aMatch ? parseInt(aMatch[1], 10) : 0; if (!aMatch && !bMatch) return 0;
const bNum = bMatch ? parseInt(bMatch[1], 10) : 0; if (!aMatch) return 1;
if (!bMatch) return -1;
return bNum - aNum; const aSuffix = aMatch[1];
const bSuffix = bMatch[1];
const aFirst = parseInt(aSuffix.charAt(0), 10);
const bFirst = parseInt(bSuffix.charAt(0), 10);
// 第一位数字越大越靠后 => 升序
if (!Number.isNaN(aFirst) && !Number.isNaN(bFirst) && aFirst !== bFirst) {
return aFirst - bFirst;
}
// 后四位整体越大越靠前 => 降序
const aRest = parseInt(aSuffix.slice(1), 10);
const bRest = parseInt(bSuffix.slice(1), 10);
if (Number.isNaN(aRest) || Number.isNaN(bRest)) return 0;
return bRest - aRest;
}); });
// 标记最新的品号(排序后的第一个) // 标记最新的品号(排序后的第一个)
@ -540,6 +560,56 @@ const sortedCompareList = computed(() => {
return list; return list;
}); });
// 对比列展示顺序(默认跟随 sortedCompareList,可通过拖拽调整)
const compareOrder = ref([]);
const displayCompareList = computed(() => {
const baseList = sortedCompareList.value;
if (!baseList.length) return [];
if (!compareOrder.value.length) {
return baseList;
}
const map = new Map(baseList.map((item) => [item.partNumber, item]));
const ordered = [];
compareOrder.value.forEach((partNumber) => {
if (map.has(partNumber)) {
ordered.push(map.get(partNumber));
map.delete(partNumber);
}
});
return ordered.concat(Array.from(map.values()));
});
// sortedCompareList 变化时,同步默认的列顺序
watch(
() => sortedCompareList.value.map((item) => item.partNumber),
(newOrder) => {
compareOrder.value = newOrder;
},
{ immediate: true }
);
// 列拖拽相关
const draggingColumnIndex = ref(null);
const onHeaderDragStart = (index) => {
draggingColumnIndex.value = index;
};
const onHeaderDrop = (targetIndex) => {
const from = draggingColumnIndex.value;
if (from === null || from === targetIndex) return;
const order = [...compareOrder.value];
const [moved] = order.splice(from, 1);
order.splice(targetIndex, 0, moved);
compareOrder.value = order;
draggingColumnIndex.value = null;
};
const compareTableData = ref([]); const compareTableData = ref([]);
const diffFieldKeys = ref(new Set()); const diffFieldKeys = ref(new Set());
@ -1337,6 +1407,21 @@ const getPreciseIndexSet = () => {
return preciseIndexSet; return preciseIndexSet;
}; };
// 同步精准查询条件在 parsedConditions 中的索引,使其在修改条件后仍然生效
const syncPreciseConditionsIndex = () => {
if (!preciseConditions.value.length) return;
preciseConditions.value = preciseConditions.value.map((cond) => {
const idx = parsedConditions.value.findIndex(
(item) => item.field === cond.field && item.value === cond.value
);
return {
...cond,
originalIndex: idx !== -1 ? idx : cond.originalIndex,
};
});
};
const buildFieldConditionsPayload = () => { const buildFieldConditionsPayload = () => {
const preciseIndexSet = getPreciseIndexSet(); const preciseIndexSet = getPreciseIndexSet();
@ -1518,9 +1603,8 @@ const removePreciseCondition = (index) => {
const handleSearch = async () => { const handleSearch = async () => {
// 解析条件 // 解析条件
parsedConditions.value = parseConditions(currentInput.value); parsedConditions.value = parseConditions(currentInput.value);
// 同步精准查询条件在新解析结果中的索引,不清空精准条件
// 清空精准查询条件 syncPreciseConditionsIndex();
preciseConditions.value = [];
selectedItems.value = new Map(); selectedItems.value = new Map();
// 执行查询与关键差异词推荐 // 执行查询与关键差异词推荐
@ -1537,6 +1621,8 @@ const triggerRealTimeSearch = () => {
// 只有当有有效条件时才触发实时查询 // 只有当有有效条件时才触发实时查询
if (currentInput.value.trim()) { if (currentInput.value.trim()) {
parsedConditions.value = parseConditions(currentInput.value); parsedConditions.value = parseConditions(currentInput.value);
// 输入实时变化时,同步精准条件索引
syncPreciseConditionsIndex();
scheduleSearchExecution(1); scheduleSearchExecution(1);
scheduleDifferenceFetch(); scheduleDifferenceFetch();
} }
@ -2481,6 +2567,23 @@ function handleConfirm() {
vertical-align: middle; vertical-align: middle;
} }
/* 参数对比弹窗支持拖拽和缩放 */
.compare-dialog {
::deep(.el-dialog) {
resize: both;
overflow: auto;
}
}
/* 对比表头可拖拽的鼠标样式 */
.compare-header-draggable {
display: flex;
align-items: center;
justify-content: center;
cursor: move;
padding: 4px 0;
}
/* 关键差异信息提示样式 */ /* 关键差异信息提示样式 */
.key-diff-hint { .key-diff-hint {
margin: -15px 0 15px 0; margin: -15px 0 15px 0;