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

src/views/index/vehicleAdd.vue

@@ -74,10 +74,12 @@
       <img class="startImg" src="@/assets/start.png" />
       <span>车辆类型</span>
     </div>
+<!--
     <select
         id="mySelect"
         class="mySelect"
         v-model="selectedOption"
+        multiple
     >
       <option
           v-for="item in typeList"
@@ -88,10 +90,26 @@
         {{ 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>-->
+-->
+    <el-select
+        multiple
+        :multiple-limit="isMultiple ? 2 : 1"
+        v-model="selectedOption"
+        value-key="name"
+        class="elSelect"
+        collapse-tags="collapse-tags"
+        placeholder="请选择"  style="width: 55%"
+    >
+      <el-option
+          v-for="item in vehicleTypes"
+          :key="item.name"
+          :label="item.name"
+          :value="item.value"
+          :disabled="!item.disabled ? false : true"
+      >
+      </el-option>
+    </el-select>
+
   </div>
   <div class="lineBot"></div>
   <div class="itemContent">
@@ -184,27 +202,65 @@ export default {
       vehicleLicenseInfo: {},
       vehicleLicenseBackOcrFlag: false,   // 行驶证副页 修改时默认不需要 ocr识别
       isMultiple: false,     // 是否支持多选
+      vehicleTypes:[{
+        name: '小修车',
+        value: 1
+      },{
+        name: '一般平板车',
+        value: 2
+      },{
+        name: '落地平板车',
+        value: 3
+      },{
+        name: '地库车',
+        value: 4
+      },
+        {
+          name:'牵引车',
+          value: 5 },
+        {
+          name:'大力神',
+          value:6},
+        {
+          name:'充电车',
+          value: 7 },
+        {
+          name:'吊车',
+          value: 8 },
+        {
+          name:'公车',
+          value: 9 },
+        {
+          name:'箱式拖车',
+          value: 10 },
+
+      ],
     }
   },
-  watch: {
-    // 监听 selectedOption 的变化
-    selectedOption(newVal) {
-      console.log("newVal",newVal)
-      // 如果选中了“地库车”，则限制其他选项的选择
-      if (newVal.includes('地库车')) {
-        // 最多选择两个选项
-        if (newVal.length >= 2) {
-          this.selectedOption = newVal.slice(0, 2); // 只保留前两个选项
-        }
+  watch:{
+    selectedOption(newVal){
+      if(newVal == 4){
+        this.isMultiple = true
+        this.vehicleTypes[2].disabled=true
+        this.vehicleTypes[5].disabled=true
+        this.vehicleTypes[6].disabled=true
+        this.vehicleTypes[7].disabled=true
+        this.vehicleTypes[8].disabled=true
+        this.vehicleTypes[9].disabled=true
+      }else{
+        this.isMultiple = false
+        this.vehicleTypes[2].disabled=false
+        this.vehicleTypes[5].disabled=false
+        this.vehicleTypes[6].disabled=false
+        this.vehicleTypes[7].disabled=false
+        this.vehicleTypes[8].disabled=false
+        this.vehicleTypes[9].disabled=false
       }
     },
   },
+
   async mounted() {
     this.id=this.$route.params?.id
-    const selectElement = document.getElementById('mySelect');
-    selectElement.addEventListener('change', function() {
-     this.selectedOption=selectElement.value;
-    });
     await this.getTypeList();
     if( this.id){
       await this.vehicleInfo()
@@ -212,25 +268,6 @@ export default {
     await this.getSupplierServiceTree();
   },
   methods:{
-    // 判断选项是否禁用
-    isOptionDisabled(item) {
-      // 如果选中了“地库车”
-      if (this.selectedOption.includes('地库车')) {
-        console.log(11111111111)
-        // 只有“牵引车”、“小修车”和“一般平板车”可选
-        const allowedOptions = ['牵引车', '小修车', '一般平板车'];
-        if (!allowedOptions.includes(item) && item !== '地库车') {
-          return true; // 禁用其他选项
-        }
-        console.log(222222222)
-        // 如果已经选中了两个选项，禁用未选中的选项
-        if (this.selectedOption.length >= 2 && !this.selectedOption.includes(item)) {
-          return true;
-        }
-      }
-      // 如果没有选中“地库车”，则所有选项可用
-      return false;
-    },
     async vehicleLicenseFrontHandler(file) {    // 上传 行驶证首页
       const formData = new FormData();
       formData.append("file" , file.file);
@@ -339,8 +376,8 @@ 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(result.data[key])
+            this.typeList.push({name:result.data[key],disabled:false,value:(key+1)})
+            // this.typeList.push(result.data[key])
 
           }
         }
@@ -357,7 +394,9 @@ export default {
       this.id=result.vehicleId
       this.carNum=result.plateNumber
       this.isJoin=result.hasPolymerization.code
-      this.selectedOption=result.vehicleType;
+      this.selectedOption=result.vehicleType?.split(',').map((item)=>{
+        return Number(item);
+      });
       this.serviceIds=result.serviceIds
       this.vehicleLicenseFront = result.vehicleLicenseFront;
       this.vehicleLicenseBack = result.vehicleLicenseBack;
@@ -404,11 +443,15 @@ export default {
       if(this.vehicleLicenseBackOcrFlag && !this.vehicleLicenseInfo.backPlateNo ) {
         this.$toast('行驶证副页识别失败')
         return
+      }
+      if(!(this.selectedOption.length > 0)){
+        this.$toast('车辆类型不能为空')
+        return
       }
         await saveVehicle({
           vehicleId:this.id ? this.id : '',
           plateNumber:this.carNum ? this.carNum :'',
-          vehicleType:this.selectedOption ? this.selectedOption : '',
+          vehicleType:this.selectedOption?.length>0 ? this.selectedOption.join(',') : '',
           hasPolymerization:this.isJoin,
           serviceIds:this.serviceIds ? this.serviceIds : [],
           vehicleLicenseFront: this.vehicleLicenseFront,
@@ -534,4 +577,8 @@ export default {
     margin: 40px 0 30px 8px;
   }
 }
+.elSelect ::v-deep .el-input__inner{
+  border: none !important;
+  text-align: right !important;
+}
 </style>