diff --git a/src/views/order/intention/search.vue b/src/views/order/intention/search.vue index 1f7fa91..4cbbe78 100644 --- a/src/views/order/intention/search.vue +++ b/src/views/order/intention/search.vue @@ -132,13 +132,38 @@ @click.stop="focusConditionTag(index)" >{{ cond.value }} - + + 精准 清除所有 + + +
+
选择精准查询参数:
+
+ + {{ cond.fieldLabel }}: + {{ cond.value }} + +
+
@@ -340,6 +365,8 @@ const activePossibleFieldIndex = ref(-1); // 解析后的条件和查询结果 const parsedConditions = ref([]); +// 精准查询条件 +const preciseConditions = ref([]); const showResults = ref(false); const filteredData = ref([]); @@ -978,25 +1005,38 @@ const parseConditions = (input) => { return conditions; }; +// 添加精准查询条件 +const addPreciseCondition = (index) => { + const condition = parsedConditions.value[index]; + // 检查是否已经添加到精准查询条件中 + const exists = preciseConditions.value.some( + (cond) => cond.field === condition.field && cond.value === condition.value + ); + + if (!exists) { + preciseConditions.value.push({ ...condition, originalIndex: index }); + // 重新过滤数据,应用精准查询 + applyPreciseFilter(); + } +}; + +// 移除精准查询条件 +const removePreciseCondition = (index) => { + preciseConditions.value.splice(index, 1); + // 重新过滤数据 + applyPreciseFilter(); +}; + // 处理查询 const handleSearch = () => { // 解析条件 parsedConditions.value = parseConditions(currentInput.value); - // 查询条件为空时,展示所有商品 - if (!currentInput.value.trim()) { - filteredData.value = mockData.map((item) => ({ ...item, selected: false })); - } else { - // 执行过滤,创建副本并添加selected属性 - filteredData.value = filterData(parsedConditions.value).map((item) => ({ - ...item, - selected: false, - })); - } + // 清空精准查询条件 + preciseConditions.value = []; - // 更新总数和重置页码 - totalItems.value = filteredData.value.length; - currentPage.value = 1; + // 应用过滤 + applyPreciseFilter(); // 显示结果 showResults.value = true; @@ -1006,6 +1046,36 @@ const handleSearch = () => { possibleFields.value = []; }; +// 应用精准过滤 +const applyPreciseFilter = () => { + // 先应用原始过滤 + let filtered = filterData(parsedConditions.value); + + // 再应用精准过滤 + if (preciseConditions.value.length > 0) { + filtered = filtered.filter((item) => { + return preciseConditions.value.every((condition) => { + if (!condition.valid) return false; + + if (condition.field) { + const fieldValue = item[condition.field]; + return checkPreciseCondition(fieldValue, condition.value); + } else { + return allFields.some((field) => { + const fieldValue = item[field.key]; + return checkPreciseCondition(fieldValue, condition.value); + }); + } + }); + }); + } + + // 更新过滤后的数据 + filteredData.value = filtered.map((item) => ({ ...item, selected: false })); + totalItems.value = filteredData.value.length; + currentPage.value = 1; +}; + // 根据条件过滤数据 const filterData = (conditions) => { return mockData.filter((item) => { @@ -1028,7 +1098,7 @@ const filterData = (conditions) => { }); }; -// 检查单个条件 +// 检查单个条件(模糊匹配) const checkCondition = (fieldValue, conditionValue) => { // 将null转换为空字符串处理 const processedValue = fieldValue ?? ""; @@ -1049,7 +1119,6 @@ const checkCondition = (fieldValue, conditionValue) => { const value = processedCondition.substring(op.symbol.length).trim(); if (!isNaN(Number(processedValue)) && !isNaN(Number(value))) { return op.func(Number(processedValue), Number(value)); - return op.func(Number(processedValue), Number(value)); } return op.func(String(processedValue), value); } @@ -1060,9 +1129,19 @@ const checkCondition = (fieldValue, conditionValue) => { .includes(processedCondition.toLowerCase()); }; +// 检查精准条件(精确匹配) +const checkPreciseCondition = (fieldValue, conditionValue) => { + // 将null转换为空字符串处理 + const processedValue = fieldValue ?? ""; + const processedCondition = conditionValue ?? ""; + + // 精准匹配,不使用包含关系 + return String(processedValue) === processedCondition; +}; + // 移除单个条件 const removeCondition = (index) => { - const parts = currentInput.value.split(/[;;]/); // 同时匹配中英文分号 + const parts = currentInput.value.split(/[;;]/); parts.splice(index, 1); currentInput.value = parts .join(";") @@ -1070,18 +1149,16 @@ const removeCondition = (index) => { .trim(); parsedConditions.value = parseConditions(currentInput.value); - // 重新过滤数据 - if (!currentInput.value.trim()) { - filteredData.value = mockData.map((item) => ({ ...item, selected: false })); - } else { - filteredData.value = filterData(parsedConditions.value).map((item) => ({ - ...item, - selected: false, - })); + // 检查是否有精准查询条件引用了这个索引,如果有则一并删除 + const preciseIndex = preciseConditions.value.findIndex( + (cond) => cond.originalIndex === index + ); + if (preciseIndex !== -1) { + preciseConditions.value.splice(preciseIndex, 1); } - totalItems.value = filteredData.value.length; - currentPage.value = 1; + // 重新过滤数据 + applyPreciseFilter(); // 重置选中的条件索引 if (selectedConditionIndex.value === index) { @@ -1093,6 +1170,7 @@ const removeCondition = (index) => { const clearAll = () => { currentInput.value = ""; parsedConditions.value = []; + preciseConditions.value = []; filteredData.value = []; totalItems.value = 0; currentPage.value = 1; @@ -1165,10 +1243,10 @@ watch( function toggleSelect(item) { // 统计已选中的数量 const selectedCount = filteredData.value.filter((i) => i.selected).length; - if (!item.selected && selectedCount >= 3) { - ElMessage.warning("最多只能选择3个卡片进行对比"); - return; - } + // if (!item.selected && selectedCount >= 3) { + // ElMessage.warning("最多只能选择3个卡片进行对比"); + // return; + // } item.selected = !item.selected; } @@ -1565,7 +1643,6 @@ function handleConfirm() { .result-card-list { display: flex; flex-wrap: wrap; - justify-content: center; gap: 30px; } .result-card { @@ -1801,7 +1878,7 @@ function handleConfirm() { .condition-tag { cursor: pointer; transition: all 0.2s; - padding-right: 30px !important; + padding-right: 60px !important; /* 增加右侧 padding 以容纳"精准"文字 */ position: relative; } @@ -1826,18 +1903,52 @@ function handleConfirm() { color: #1890ff; } -.tag-edit-icon { +/* 精准查询相关样式 */ +.tag-precise { position: absolute; - right: 10px; + right: 20px; /* 为关闭按钮留出空间 */ top: 50%; transform: translateY(-50%); color: #409eff; - opacity: 0.7; + font-size: 12px; + cursor: pointer; + padding: 2px 4px; + border-radius: 2px; + background-color: rgba(64, 158, 255, 0.1); + transition: all 0.2s; +} + +.tag-precise:hover { + background-color: rgba(64, 158, 255, 0.2); + color: #1890ff; +} + +.precise-conditions { + margin: 15px 0; +} + +.precise-conditions-label { + font-size: 14px; + color: #666; + margin-bottom: 8px; + font-weight: 500; +} + +.precise-tags { + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +.precise-tag { + cursor: default; + padding-right: 30px !important; + position: relative; } .results-section { - /* 移除滚动条相关样式 */ - padding: 0 10px 20px; + max-width: 1250px; + margin: 0 auto; } .no-results {