调整

src/layout/components/CarBrandSelector/index.vue

@@ -1,33 +1,54 @@
 <template>
     <div class="block">
       <el-cascader
-        placeholder="搜索型号"
+        placeholder="车辆品牌型号"
         :options="options"
-        v-model="selectedOptions"
+        v-model="selectedValues"
         filterable/>
     </div>
-  
+
   </template>
   <script>
   import * as CarBrandSelectorApi from '@/layout/components/CarBrandSelector/Api';
-  
+
   export default {
+    name: 'CarBrandSelector',
+
+    props: {
+      //v-model绑定的值
+      value: {
+        type: Array,
+        default: () => [],
+      },
+    },
+
+    data() {
+      return {
+        //子组件赋值
+        selectedValues:this.value,
+        options: [], //选项集合
+      };
+    },
+
     watch: {
-      selectedOptions(newVal, oldVal) {
+      value: {
-        console.log("newS is ", newVal);
+        immediate: true,
+        handler(newVal) {
+          this.selectedValues = newVal;
+        }
+      },
+      selectedValues(newVal) {
+        this.$emit('input', newVal);
       }
     },
+
     created() {
       this.getData();
     },
     methods: {
-      // 处理过滤方法
+
-      handleFilter(node, keyword) {
-        console.log(keyword, 'Filtering:');
-        //请求相关选项
-        this.getData(keyword);
-      },
       getData(keyword) {
+        // this.reset()
         let param = {
           modelName: keyword,
         }
@@ -35,18 +56,8 @@
           this.options = res.data
         });
       },
-  
-  
     },
-  
+
-    data() {
+
-      return {
-        selectedOptions: [], // 存储已选择的选项
-  
-        options: [], //选项集合
-  
-      };
-    }
   };
   </script>
-  

src/views/base/carmain/CarMainForm.vue

@@ -12,10 +12,8 @@
         <el-form-item label="车牌号" prop="licenseNumber">
           <el-input v-model="formData.licenseNumber" placeholder="请输入车牌号" />
         </el-form-item>
-        <el-form-item label="车辆型号" prop="carModel">
+        <el-form-item label="品牌型号" prop="carModel">
-          <!-- <el-input v-model="formData.carModel" placeholder="请输入车辆型号" /> -->
+           <CarBrandSelector v-model="formData.brandAndModel" ref="brandForm" />
-          <!-- <CarBrandSelector v-model="formData.carModel" ref="brandForm" /> -->
-          <CarBrandSelector v-model="tesst" ref="brandForm" />
         </el-form-item>
         <el-form-item label="保养日期" prop="maintenanceDate">
           <el-date-picker clearable v-model="formData.maintenanceDate" type="date" value-format="timestamp"
@@ -105,7 +103,7 @@ export default {
         engineNumber: undefined,
         vin: undefined,
         licenseNumber: undefined,
-        carModel: undefined,
+        brandAndModel: [],
         maintenanceDate: undefined,
         maintenanceMileage: undefined,
         inspectionDate: undefined,
@@ -146,16 +144,13 @@ export default {
       }
       this.title = "新增车辆信息";
     },
+
     /** 提交按钮 */
     async submitForm() {
       // 校验主表
-      await this.$refs["formRef"].validate();
+      // await this.$refs["formRef"].validate();
       this.formLoading = true;
       try {
-        console.log("before",this.formData);
-        this.formData.carModel = this.formData.carModel[this.formData.carModel.length-1];
-        console.log("after",this.formData);
-
         const data = this.formData;
         // 修改的提交
         if (data.id) {
@@ -181,7 +176,7 @@ export default {
         engineNumber: undefined,
         vin: undefined,
         licenseNumber: undefined,
-        carModel: undefined,
+        brandAndModel: [],
         maintenanceDate: undefined,
         maintenanceMileage: undefined,
         inspectionDate: undefined,

src/views/base/carmain/index.vue

@@ -104,8 +104,8 @@
       </el-table-column>
       <el-table-column label="发动机号码" align="center" prop="engineNumber" width="180" />
       <el-table-column label="车架号" align="center" prop="vin" width="150" />
-      <el-table-column label="车辆品牌" align="center" prop="carBrand" />
+      <el-table-column label="车辆品牌" align="center" prop="brandStr" />
-      <el-table-column label="车辆型号" align="center" prop="carModel" />
+      <el-table-column label="车辆型号" align="center" prop="modelStr" />
       <!-- <el-table-column label="保养日期" align="center" prop="maintenanceDate" width="180">
         <template v-slot="scope">
           <span>{{ parseTime(scope.row.maintenanceDate,'{y}-{m}-{d}') }}</span>
@@ -317,7 +317,7 @@ export default {
         // this.$message({
         //   type: 'info',
         //   message: '已取消删除'
-        // });          
+        // });
       });
       //如果确认删除
       if (optionValue == 1) {