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

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"
top="40px"
:close-on-click-modal="false"
draggable
class="compare-dialog"
>
<!-- 仅看不同项按钮 -->
<div
@ -308,7 +310,7 @@
fixed="left"
/>
<el-table-column
v-for="item in sortedCompareList"
v-for="(item, index) in displayCompareList"
:key="item.partNumber"
:label="item.partNumber"
:prop="item.partNumber"
@ -318,11 +320,11 @@
>
<template #header="{ column }">
<div
style="
display: flex;
align-items: center;
justify-content: center;
"
class="compare-header-draggable"
draggable="true"
@dragstart="onHeaderDragStart(index)"
@dragover.prevent
@drop="onHeaderDrop(index)"
>
<span v-if="item.isLatest" class="new-tag">
<img
@ -343,7 +345,7 @@
{{ column.label }}
</span>
<span style="font-size: 12px; color: #666">{{
sortedCompareList.find(
displayCompareList.find(
(i) => i.partNumber === column.label
)?.partName || "-"
}}</span>
@ -518,16 +520,34 @@ const sortedCompareList = computed(() => {
// 复制数组以避免修改原始数据
const list = [...selectedCompareList.value];
// 排序:根据品号结尾的五位数从大到小排序
// 排序规则:
// 1)取品号最后的 5 位数字,如 00001
// 2)第一位数字越大越靠后
// 3)后四位数字整体越大越靠前
list.sort((a, b) => {
// 提取品号结尾的五位数
const aMatch = a.partNumber?.match(/-(\d{5})$/);
const bMatch = b.partNumber?.match(/-(\d{5})$/);
const aNum = aMatch ? parseInt(aMatch[1], 10) : 0;
const bNum = bMatch ? parseInt(bMatch[1], 10) : 0;
if (!aMatch && !bMatch) return 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;
});
// 对比列展示顺序(默认跟随 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 diffFieldKeys = ref(new Set());
@ -1337,6 +1407,21 @@ const getPreciseIndexSet = () => {
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 preciseIndexSet = getPreciseIndexSet();
@ -1518,9 +1603,8 @@ const removePreciseCondition = (index) => {
const handleSearch = async () => {
// 解析条件
parsedConditions.value = parseConditions(currentInput.value);
// 清空精准查询条件
preciseConditions.value = [];
// 同步精准查询条件在新解析结果中的索引,不清空精准条件
syncPreciseConditionsIndex();
selectedItems.value = new Map();
// 执行查询与关键差异词推荐
@ -1537,6 +1621,8 @@ const triggerRealTimeSearch = () => {
// 只有当有有效条件时才触发实时查询
if (currentInput.value.trim()) {
parsedConditions.value = parseConditions(currentInput.value);
// 输入实时变化时,同步精准条件索引
syncPreciseConditionsIndex();
scheduleSearchExecution(1);
scheduleDifferenceFetch();
}
@ -2481,6 +2567,23 @@ function handleConfirm() {
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 {
margin: -15px 0 15px 0;