This commit is contained in:
parent
46613a9f3c
commit
c32a6123e6
|
|
@ -123,6 +123,20 @@
|
||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 关键差异信息提示 -->
|
||||||
|
<div v-if="showKeyDiffHint" class="key-diff-hint">
|
||||||
|
以下商品列表中,关键差异信息:
|
||||||
|
<span
|
||||||
|
v-for="(item, index) in keyDiffFields"
|
||||||
|
:key="index"
|
||||||
|
class="diff-field"
|
||||||
|
@click="addDiffFieldToInput(item)"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
<template v-if="index < keyDiffFields.length - 1"> 、</template>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 条件标签展示 -->
|
<!-- 条件标签展示 -->
|
||||||
<div v-if="parsedConditions.length > 0" class="conditions-tags">
|
<div v-if="parsedConditions.length > 0" class="conditions-tags">
|
||||||
<el-tag
|
<el-tag
|
||||||
|
|
@ -480,6 +494,10 @@ const parameterDifferences = ref({});
|
||||||
// 确认弹窗
|
// 确认弹窗
|
||||||
const confirmDialogVisible = ref(false);
|
const confirmDialogVisible = ref(false);
|
||||||
|
|
||||||
|
// 关键差异字段相关
|
||||||
|
const keyDiffFields = ref([]);
|
||||||
|
const showKeyDiffHint = ref(false);
|
||||||
|
|
||||||
// 计算排序后的对比列表(最新品号在前)
|
// 计算排序后的对比列表(最新品号在前)
|
||||||
const sortedCompareList = computed(() => {
|
const sortedCompareList = computed(() => {
|
||||||
// 复制数组以避免修改原始数据
|
// 复制数组以避免修改原始数据
|
||||||
|
|
@ -625,6 +643,68 @@ const initializeValues = () => {
|
||||||
allValues.value = values;
|
allValues.value = values;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 检查并更新关键差异字段提示
|
||||||
|
const updateKeyDiffHint = () => {
|
||||||
|
// 获取技术规范编号和CBC编号的字段信息
|
||||||
|
const techSpecField = allFields.find(
|
||||||
|
(field) => field.label === "技术规范编号"
|
||||||
|
);
|
||||||
|
const cbcField = allFields.find((field) => field.label === "CBC编号");
|
||||||
|
|
||||||
|
// 检查当前搜索条件中是否包含这两个字段
|
||||||
|
const hasTechSpec = parsedConditions.value.some(
|
||||||
|
(cond) => cond.field === techSpecField?.key
|
||||||
|
);
|
||||||
|
const hasCbc = parsedConditions.value.some(
|
||||||
|
(cond) => cond.field === cbcField?.key
|
||||||
|
);
|
||||||
|
|
||||||
|
// 确定需要显示的关键差异字段
|
||||||
|
const diffFields = [];
|
||||||
|
if (!hasTechSpec && techSpecField) diffFields.push(techSpecField);
|
||||||
|
if (!hasCbc && cbcField) diffFields.push(cbcField);
|
||||||
|
|
||||||
|
// 更新关键差异字段和显示状态
|
||||||
|
keyDiffFields.value = diffFields;
|
||||||
|
// 只有当有搜索条件且有关键差异字段时才显示提示
|
||||||
|
showKeyDiffHint.value =
|
||||||
|
currentInput.value.trim() !== "" && diffFields.length > 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 点击差异字段时添加到输入框
|
||||||
|
const addDiffFieldToInput = (field) => {
|
||||||
|
// 检查输入框末尾是否需要加分号
|
||||||
|
let separator = "";
|
||||||
|
if (
|
||||||
|
currentInput.value.trim() !== "" &&
|
||||||
|
!currentInput.value.trim().endsWith(";") &&
|
||||||
|
!currentInput.value.trim().endsWith(";")
|
||||||
|
) {
|
||||||
|
separator = ";";
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加字段到输入框
|
||||||
|
currentInput.value = `${currentInput.value}${separator}${field.label}:`;
|
||||||
|
|
||||||
|
// 触发输入事件和搜索
|
||||||
|
setTimeout(() => {
|
||||||
|
handleInput(currentInput.value);
|
||||||
|
triggerRealTimeSearch();
|
||||||
|
|
||||||
|
// 聚焦输入框并将光标定位到字段后的适当位置
|
||||||
|
if (searchInput.value) {
|
||||||
|
searchInput.value.focus();
|
||||||
|
const inputEl = searchInput.value.$el.querySelector("input");
|
||||||
|
if (inputEl) {
|
||||||
|
inputEl.setSelectionRange(
|
||||||
|
currentInput.value.length,
|
||||||
|
currentInput.value.length
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 0);
|
||||||
|
};
|
||||||
|
|
||||||
const getCurrentInputPart = () => {
|
const getCurrentInputPart = () => {
|
||||||
const parts = currentInput.value.split(/[;;]/);
|
const parts = currentInput.value.split(/[;;]/);
|
||||||
return parts[parts.length - 1].trim();
|
return parts[parts.length - 1].trim();
|
||||||
|
|
@ -1221,6 +1301,9 @@ const handleSearch = () => {
|
||||||
// 解析条件
|
// 解析条件
|
||||||
parsedConditions.value = parseConditions(currentInput.value);
|
parsedConditions.value = parseConditions(currentInput.value);
|
||||||
|
|
||||||
|
// 更新关键差异提示
|
||||||
|
updateKeyDiffHint();
|
||||||
|
|
||||||
// 清空精准查询条件
|
// 清空精准查询条件
|
||||||
preciseConditions.value = [];
|
preciseConditions.value = [];
|
||||||
|
|
||||||
|
|
@ -1240,6 +1323,8 @@ const triggerRealTimeSearch = () => {
|
||||||
// 只有当有有效条件时才触发实时查询
|
// 只有当有有效条件时才触发实时查询
|
||||||
if (currentInput.value.trim()) {
|
if (currentInput.value.trim()) {
|
||||||
parsedConditions.value = parseConditions(currentInput.value);
|
parsedConditions.value = parseConditions(currentInput.value);
|
||||||
|
// 更新关键差异提示
|
||||||
|
updateKeyDiffHint();
|
||||||
applyPreciseFilter();
|
applyPreciseFilter();
|
||||||
showResults.value = true;
|
showResults.value = true;
|
||||||
}
|
}
|
||||||
|
|
@ -1348,6 +1433,9 @@ const removeCondition = (index) => {
|
||||||
.trim();
|
.trim();
|
||||||
parsedConditions.value = parseConditions(currentInput.value);
|
parsedConditions.value = parseConditions(currentInput.value);
|
||||||
|
|
||||||
|
// 更新关键差异提示
|
||||||
|
updateKeyDiffHint();
|
||||||
|
|
||||||
// 检查是否有精准查询条件引用了这个索引,如果有则一并删除
|
// 检查是否有精准查询条件引用了这个索引,如果有则一并删除
|
||||||
const preciseIndex = preciseConditions.value.findIndex(
|
const preciseIndex = preciseConditions.value.findIndex(
|
||||||
(cond) => cond.originalIndex === index
|
(cond) => cond.originalIndex === index
|
||||||
|
|
@ -1377,6 +1465,10 @@ const clearAll = () => {
|
||||||
showSuggestions.value = false;
|
showSuggestions.value = false;
|
||||||
possibleFields.value = [];
|
possibleFields.value = [];
|
||||||
selectedConditionIndex.value = -1;
|
selectedConditionIndex.value = -1;
|
||||||
|
// 重置关键差异提示
|
||||||
|
keyDiffFields.value = [];
|
||||||
|
showKeyDiffHint.value = false;
|
||||||
|
|
||||||
if (searchInput.value) {
|
if (searchInput.value) {
|
||||||
searchInput.value.focus();
|
searchInput.value.focus();
|
||||||
}
|
}
|
||||||
|
|
@ -2252,6 +2344,31 @@ function handleConfirm() {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 关键差异信息提示样式 */
|
||||||
|
.key-diff-hint {
|
||||||
|
margin: -15px 0 15px 0;
|
||||||
|
padding: 8px 12px;
|
||||||
|
background-color: #f0f7ff;
|
||||||
|
border-left: 3px solid #2156f3;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diff-field {
|
||||||
|
color: #2156f3;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: underline;
|
||||||
|
text-underline-offset: 2px;
|
||||||
|
transition: color 0.2s;
|
||||||
|
margin: 0 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diff-field:hover {
|
||||||
|
color: #096dd9;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.search-box {
|
.search-box {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue