精准查询,参数排序,拖拽排序优化
This commit is contained in:
parent
9de8918cba
commit
742cb4ce18
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue