优化

src/views/order/intention/Step2.vue

@@ -12,6 +12,7 @@
                 placeholder="请选择车型"
                 filterable
                 class="param-input"
+                @change="onQuery"
               >
                 <el-option-group
                   v-for="group in carTypeOptions"
@@ -82,7 +83,7 @@
               @click="onCompare"
               circle
             >
-              参数对比
+              参数<br />对比
             </el-button>
             <div class="result-card-list">
               <el-card
@@ -160,7 +161,11 @@
 
 <script setup>
 import { ref, computed, watch, onMounted } from "vue";
-import { carTypeOptions, allParts, compareTableData } from "@/data/stepMockData";
+import {
+  carTypeOptions,
+  allParts,
+  compareTableData,
+} from "@/data/stepMockData";
 import CarModelDialog from "@/components/CarModelDialog.vue";
 import { ElMessage } from "element-plus";
 
@@ -176,7 +181,7 @@ const selectedCarModel = ref(null);
 // 彻底双向绑定
 const selectedCarTypeProxy = computed({
   get() {
-    return props.form?.selectedCarType ?? "其他";
+    return props.form?.selectedCarType ?? "";
   },
   set(val) {
     if (props.form) {
@@ -186,16 +191,16 @@ const selectedCarTypeProxy = computed({
   },
 });
 
-const paramAxle = ref("不限");
+const paramAxle = ref("");
-const paramGearbox = ref("不限");
+const paramGearbox = ref("");
-const paramWheel = ref("不限");
+const paramWheel = ref("");
-const paramBrake = ref("不限");
+const paramBrake = ref("");
 
 onMounted(() => {
-  if (!props.form.selectedCarType) {
+  // 只有已选车型才自动查询，否则等待用户选择
-    selectedCarTypeProxy.value = "其他";
+  if (props.form.selectedCarType) {
+    onQuery();
   }
-  onQuery(); // 首次自动查询，展示卡片
 });
 
 function selectCarType(val) {
@@ -204,33 +209,39 @@ function selectCarType(val) {
 
 const queryResultList = ref([]);
 function onQuery() {
-  queryResultList.value = allParts.filter(item => {
+  queryResultList.value = allParts
-    // 车型过滤
+    .filter((item) => {
-    if (selectedCarTypeProxy.value && item.carType !== selectedCarTypeProxy.value) return false;
+      // 车型过滤
+      if (
+        selectedCarTypeProxy.value &&
+        item.carType !== selectedCarTypeProxy.value
+      )
+        return false;
 
-    // 车轴
+      // 车轴
-    if (item.type === "车轴") {
+      if (item.type === "车轴") {
-      if (paramAxle.value === "不限") return true;
+        if (paramAxle.value === "不限") return true;
-      return item.feature.includes(paramAxle.value);
+        return item.feature.includes(paramAxle.value);
-    }
+      }
-    // 齿轮箱
+      // 齿轮箱
-    if (item.type === "齿轮箱") {
+      if (item.type === "齿轮箱") {
-      if (paramGearbox.value === "不限") return true;
+        if (paramGearbox.value === "不限") return true;
-      return item.feature.includes(paramGearbox.value);
+        return item.feature.includes(paramGearbox.value);
-    }
+      }
-    // 车轮
+      // 车轮
-    if (item.type === "车轮") {
+      if (item.type === "车轮") {
-      if (paramWheel.value === "不限") return true;
+        if (paramWheel.value === "不限") return true;
-      return item.feature.includes(paramWheel.value);
+        return item.feature.includes(paramWheel.value);
-    }
+      }
-    // 制动盘
+      // 制动盘
-    if (item.type === "制动盘") {
+      if (item.type === "制动盘") {
-      if (paramBrake.value === "不限") return true;
+        if (paramBrake.value === "不限") return true;
-      return item.feature.includes(paramBrake.value);
+        return item.feature.includes(paramBrake.value);
-    }
+      }
-    // 其它类型不显示
+      // 其它类型不显示
-    return false;
+      return false;
-  }).map(item => ({ ...item, selected: false }));
+    })
+    .map((item) => ({ ...item, selected: false }));
 }
 
 const compareDialogVisible = ref(false);
@@ -280,27 +291,48 @@ function onNextStep() {
 // 智能模糊建议方法
 function queryAxleSuggestions(queryString, cb) {
   const results = allParts
-    .filter(item => item.type === "车轴" && item.carType === selectedCarTypeProxy.value && item.feature.includes(queryString))
+    .filter(
-    .map(item => ({ value: item.feature }));
+      (item) =>
-  cb(results.length ? results : [{ value: queryString }]);
+        item.type === "车轴" &&
+        item.carType === selectedCarTypeProxy.value &&
+        item.feature.includes(queryString)
+    )
+    .map((item) => ({ value: item.feature }));
+  // 增加'不限'选项
+  cb([{ value: "不限" }, ...results.filter((r, i, arr) => arr.findIndex(x => x.value === r.value) === i)]);
 }
 function queryGearboxSuggestions(queryString, cb) {
   const results = allParts
-    .filter(item => item.type === "齿轮箱" && item.carType === selectedCarTypeProxy.value && item.feature.includes(queryString))
+    .filter(
-    .map(item => ({ value: item.feature }));
+      (item) =>
-  cb(results.length ? results : [{ value: queryString }]);
+        item.type === "齿轮箱" &&
+        item.carType === selectedCarTypeProxy.value &&
+        item.feature.includes(queryString)
+    )
+    .map((item) => ({ value: item.feature }));
+  cb([{ value: "不限" }, ...results.filter((r, i, arr) => arr.findIndex(x => x.value === r.value) === i)]);
 }
 function queryWheelSuggestions(queryString, cb) {
   const results = allParts
-    .filter(item => item.type === "车轮" && item.carType === selectedCarTypeProxy.value && item.feature.includes(queryString))
+    .filter(
-    .map(item => ({ value: item.feature }));
+      (item) =>
-  cb(results.length ? results : [{ value: queryString }]);
+        item.type === "车轮" &&
+        item.carType === selectedCarTypeProxy.value &&
+        item.feature.includes(queryString)
+    )
+    .map((item) => ({ value: item.feature }));
+  cb([{ value: "不限" }, ...results.filter((r, i, arr) => arr.findIndex(x => x.value === r.value) === i)]);
 }
 function queryBrakeSuggestions(queryString, cb) {
   const results = allParts
-    .filter(item => item.type === "制动盘" && item.carType === selectedCarTypeProxy.value && item.feature.includes(queryString))
+    .filter(
-    .map(item => ({ value: item.feature }));
+      (item) =>
-  cb(results.length ? results : [{ value: queryString }]);
+        item.type === "制动盘" &&
+        item.carType === selectedCarTypeProxy.value &&
+        item.feature.includes(queryString)
+    )
+    .map((item) => ({ value: item.feature }));
+  cb([{ value: "不限" }, ...results.filter((r, i, arr) => arr.findIndex(x => x.value === r.value) === i)]);
 }
 </script>
 
@@ -786,7 +818,7 @@ function queryBrakeSuggestions(queryString, cb) {
   border-radius: 8px;
   box-shadow: 0 2px 12px rgba(33, 86, 243, 0.12);
   transition: box-shadow 0.2s, background 0.2s;
-  font-size: 12px;
+  font-size: 14px;
 }
 .compare-btn-float:hover {
   background: #ffe9c6;