增加精准查询

src/views/order/intention/search.vue

@@ -132,13 +132,38 @@
                   @click.stop="focusConditionTag(index)"
                   >{{ cond.value }}</span
                 >
-                <el-icon class="tag-edit-icon" size="14"><Edit /></el-icon>
+                <!-- 将编辑图标替换为"精准"文字，并添加点击事件 -->
+                <span
+                  class="tag-precise"
+                  @click.stop="addPreciseCondition(index)"
+                  >精准</span
+                >
               </el-tag>
               <el-button link @click="clearAll" class="clear-button">
                 <el-icon><RefreshLeft /></el-icon>
                 清除所有
               </el-button>
             </div>
+
+            <!-- 精准查询参数展示区域 -->
+            <div v-if="preciseConditions.length > 0" class="precise-conditions">
+              <div class="precise-conditions-label">选择精准查询参数：</div>
+              <div class="precise-tags">
+                <el-tag
+                  v-for="(cond, index) in preciseConditions"
+                  :key="'precise-' + index"
+                  closable
+                  type="primary"
+                  @close="removePreciseCondition(index)"
+                  class="precise-tag"
+                >
+                  <span v-if="cond.field" class="tag-field"
+                    >{{ cond.fieldLabel }}:</span
+                  >
+                  <span class="tag-value">{{ cond.value }}</span>
+                </el-tag>
+              </div>
+            </div>
           </div>
 
           <!-- 查询结果区域 -->
@@ -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()) {
+  preciseConditions.value = [];
-    filteredData.value = mockData.map((item) => ({ ...item, selected: false }));
-  } else {
-    // 执行过滤，创建副本并添加selected属性
-    filteredData.value = filterData(parsedConditions.value).map((item) => ({
-      ...item,
-      selected: false,
-    }));
-  }
 
-  // 更新总数和重置页码
+  // 应用过滤
-  totalItems.value = filteredData.value.length;
+  applyPreciseFilter();
-  currentPage.value = 1;
 
   // 显示结果
   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()) {
+  const preciseIndex = preciseConditions.value.findIndex(
-    filteredData.value = mockData.map((item) => ({ ...item, selected: false }));
+    (cond) => cond.originalIndex === index
-  } else {
+  );
-    filteredData.value = filterData(parsedConditions.value).map((item) => ({
+  if (preciseIndex !== -1) {
-      ...item,
+    preciseConditions.value.splice(preciseIndex, 1);
-      selected: false,
-    }));
   }
 
-  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) {
+  // if (!item.selected && selectedCount >= 3) {
-    ElMessage.warning("最多只能选择3个卡片进行对比");
+  //   ElMessage.warning("最多只能选择3个卡片进行对比");
-    return;
+  //   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 {
-  /* 移除滚动条相关样式 */
+  max-width: 1250px;
-  padding: 0 10px 20px;
+  margin: 0 auto;
 }
 
 .no-results {