story#6071，编辑车辆页面选择服务逻辑修改

src/views/index/vehicleAdd.vue

@@ -74,10 +74,25 @@
       <img class="startImg" src="@/assets/start.png" />
       <span>车辆类型</span>
     </div>
-    <select id="mySelect"  class="mySelect"  v-model="selectedOption"    multiple @change="setChange"
+    <select
+        id="mySelect"
+        class="mySelect"
+        v-model="selectedOption"
+        multiple
+    >
+      <option
+          v-for="item in typeList"
+          :key="item"
+          :value="item"
+          :disabled="isOptionDisabled(item)"
+      >
+        {{ item }}
+      </option>
+    </select>
+<!--    <select id="mySelect"  class="mySelect"  v-model="selectedOption"    multiple @change="setChange"
           >
       <option v-for="item in computedTypeList" :key="item.name" :value="item.name" :label="item.name"  :disabled="item.disabled">{{item.name}}</option>
-    </select>
+    </select>-->
   </div>
   <div class="lineBot"></div>
   <div class="itemContent">
@@ -172,40 +187,23 @@ export default {
       isMultiple: false,     // 是否支持多选
     }
   },
-  computed: {
+  watch: {
-    computedTypeList() {
+    // 监听 selectedOption 的变化
-      return this.typeList.map((item, index) => {
+    selectedOption(newVal) {
-        console.log("item, index",item, index)
+      // 如果选中了“地库车”，则限制其他选项的选择
-        if (this.isMultiple) {
+      if (newVal.includes('地库车')) {
-          if ([2, 5, 6, 7, 8, 9].includes(index)) {
+        // 最多选择两个选项
-            return { ...item, disabled: true };
+        if (newVal.length >= 2) {
+          this.selectedOption = newVal.slice(0, 2); // 只保留前两个选项
         }
-        } else {
-          return { ...item, disabled: false };
-        }
-        return item;
-      });
-    },
-  },
-/*  watch: {
-    typeList: {
-      handler(newVal) {
-        console.log("newVal",newVal)
-        if (newVal.length === 2) { // 假设你想判断数组长度是否为 4
-          this.isMultiple = true;
-        } else {
-          this.isMultiple = false;
       }
     },
-      deep: true,
   },
-  },*/
   async mounted() {
     this.id=this.$route.params?.id
     const selectElement = document.getElementById('mySelect');
     selectElement.addEventListener('change', function() {
      this.selectedOption=selectElement.value;
-      console.log(" this.selectedOption", this.selectedOption)
     });
     await this.getTypeList();
     if( this.id){
@@ -214,8 +212,22 @@ export default {
     await this.getSupplierServiceTree();
   },
   methods:{
-    setChange(){
+    // 判断选项是否禁用
-      console.log("===========",this.selectedOption)
+    isOptionDisabled(item) {
+      // 如果选中了“地库车”
+      if (this.selectedOption.includes('地库车')) {
+        // 只有“牵引车”、“小修车”和“一般平板车”可选
+        const allowedOptions = ['牵引车', '小修车', '一般平板车'];
+        if (!allowedOptions.includes(item) && item !== '地库车') {
+          return true; // 禁用其他选项
+        }
+        // 如果已经选中了两个选项，禁用未选中的选项
+        if (this.selectedOption.length >= 2 && !this.selectedOption.includes(item)) {
+          return true;
+        }
+      }
+      // 如果没有选中“地库车”，则所有选项可用
+      return false;
     },
     async vehicleLicenseFrontHandler(file) {    // 上传 行驶证首页
       const formData = new FormData();
@@ -325,7 +337,9 @@ export default {
         if(result.code === 200){
           for (const key in result.data){
             // console.log("keys",result.data[key])
-            this.typeList.push({name:result.data[key],disabled:false})
+            // this.typeList.push({name:result.data[key],disabled:false})
+            this.typeList.push(result.data[key])
+
           }
         }
     },