From 9a74a8414fa86aed037a33b6ada659d5e402a7df Mon Sep 17 00:00:00 2001
From: xiaofajia <1665375861@qq.com>
Date: Sat, 16 Nov 2024 12:05:12 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BD=A6=E8=BE=86=E5=93=81=E7=89=8C=E5=9E=8B?=
 =?UTF-8?q?=E5=8F=B7=E6=8B=86=E5=88=86=E4=B8=BA=E5=93=81=E7=89=8C=E5=92=8C?=
 =?UTF-8?q?=E5=9E=8B=E5=8F=B7=EF=BC=8C=E5=9E=8B=E5=8F=B7=E4=B8=BA=E8=BE=93?=
 =?UTF-8?q?=E5=85=A5=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/CarBrandSelector/index.vue     | 123 +++++++++++-------
 src/views/base/carmain/CarMainForm.vue        |  16 ++-
 src/views/base/carmain/index.vue              |   2 +-
 src/views/repair/Components/CarChoose.vue     |   6 +-
 .../repair/tickets/form/UserAndCarForm.vue    |  20 ++-
 5 files changed, 107 insertions(+), 60 deletions(-)

diff --git a/src/layout/components/CarBrandSelector/index.vue b/src/layout/components/CarBrandSelector/index.vue
index e97a5af..a003001 100644
--- a/src/layout/components/CarBrandSelector/index.vue
+++ b/src/layout/components/CarBrandSelector/index.vue
@@ -1,64 +1,89 @@
 <template>
-    <div class="block">
-      <el-cascader
-        placeholder="车辆品牌型号"
-        :options="options"
-        v-model="selectedValues"
-        filterable
-        />
-    </div>
+  <div class="block">
+    <el-select v-model="selectedValues" filterable :filter-method="getData" placeholder="车辆品牌">
+      <el-option v-for="item in options" :key="item.id" :value="item.id" :label="item.brandName"/>
+    </el-select>
+    <!--      <el-cascader-->
+    <!--        placeholder="车辆品牌型号"-->
+    <!--        :options="options"-->
+    <!--        v-model="selectedValues"-->
+    <!--        filterable-->
+    <!--        />-->
+  </div>
 
-  </template>
-  <script>
-  import * as CarBrandSelectorApi from '@/layout/components/CarBrandSelector/Api';
+</template>
+<script>
+import * as CarBrandSelectorApi from '@/layout/components/CarBrandSelector/Api';
+import {getCarBrandPage, getCarBrand} from '@/api/base/carbrand'
 
-  export default {
-    name: 'CarBrandSelector',
+export default {
+  name: 'CarBrandSelector',
 
-    props: {
-      //v-model绑定的值
-      value: {
-        type: Array,
-        default: () => [],
-      },
+  props: {
+    //v-model绑定的值
+    value: {
+      type: [Array, String],
+      // default: () => [],
     },
+  },
 
-    data() {
-      return {
-        //子组件赋值
-        selectedValues:this.value,
-        options: [], //选项集合
-      };
-    },
+  data() {
+    return {
+      //子组件赋值
+      selectedValues: this.value,
+      options: [], //选项集合
+    };
+  },
 
-    watch: {
-      value: {
-        immediate: true,
-        handler(newVal) {
+  watch: {
+    value: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal instanceof Array) {
+          this.selectedValues = newVal[0]
+        } else {
           this.selectedValues = newVal;
         }
-      },
-      selectedValues(newVal) {
-        this.$emit('input', newVal);
+        this.getData(this.selectedValues)
       }
     },
+    selectedValues(newVal) {
+      this.$emit('input', newVal);
+    }
+  },
 
-    created() {
-      this.getData();
-    },
-    methods: {
-
-      getData(keyword) {
-        // this.reset()
-        let param = {
-          modelName: keyword,
-        }
-        CarBrandSelectorApi.searchBrand(param).then(res => {
-          this.options = res.data
-        });
-      },
+  created() {
+    this.getData();
+  },
+  methods: {
+    // 得到车辆品牌的分页
+    getData(keyword) {
+      const query = {
+        brandName: keyword
+      }
+      getCarBrandPage(query).then(res => {
+        this.options = res.data.records
+      })
+      // 需要的数据可能不在该页，比如修改回显的时候，那此时传入的id，那就通过ID去查了添加到options
+      const data = this.options.filter(item => item.id === this.selectedValues)
+      if (!data || data.length === 0) {
+        getCarBrand(this.selectedValues).then(res => {
+          if (res.data) {
+            this.options.push(res.data)
+          }
+        })
+      }
+      // // this.reset()
+      // let param = {
+      //   modelName: keyword,
+      // }
+      // CarBrandSelectorApi.searchBrand(param).then(res => {
+      //   // console.log(res.data)
+      //   this.options = res.data
+      // });
     },
+  },
 
 
-  };
-  </script>
+};
+</script>
diff --git a/src/views/base/carmain/CarMainForm.vue b/src/views/base/carmain/CarMainForm.vue
index cfa8e03..fd64ad0 100644
--- a/src/views/base/carmain/CarMainForm.vue
+++ b/src/views/base/carmain/CarMainForm.vue
@@ -27,10 +27,15 @@
 
             <el-row :gutter="20">
               <el-col :span="8">
-                <el-form-item label="品牌型号" prop="brandAndModel">
+                <el-form-item label="车辆品牌" prop="brandAndModel">
                   <CarBrandSelector v-model="formData.brandAndModel" ref="brandForm"/>
                 </el-form-item>
               </el-col>
+              <el-col :span="8">
+                <el-form-item label="车辆型号" prop="carModel">
+                  <el-input v-model="formData.carModel" placeholder="车辆型号" />
+                </el-form-item>
+              </el-col>
               <el-col :span="8">
                 <el-form-item label="车辆类别" prop="carCategory">
                   <el-select v-model="formData.carCategory" placeholder="请选择车辆类别">
@@ -39,6 +44,8 @@
                   </el-select>
                 </el-form-item>
               </el-col>
+            </el-row>
+            <el-row :gutter="20">
               <el-col :span="8">
                 <el-form-item label="车辆性质" prop="carNature">
                   <el-select v-model="formData.carNature" placeholder="请选择车辆性质">
@@ -47,8 +54,6 @@
                   </el-select>
                 </el-form-item>
               </el-col>
-            </el-row>
-            <el-row :gutter="20">
               <el-col :span="8">
                 <el-form-item label="注册日期" prop="carRegisterDate" label-width="auto">
                   <el-date-picker clearable v-model="formData.carRegisterDate" type="date" value-format="timestamp"
@@ -198,6 +203,7 @@ export default {
         nextInspectionDate: undefined,
         nextMaintenanceDate: undefined,
         nextMaintenanceMileage: undefined,
+        carModel: undefined
       },
       buttonLoading:false,
       // 表单校验
@@ -209,6 +215,7 @@ export default {
         carNature: [{required: true, message: '车辆性质不能为空', trigger: 'blur'}],
         carRegisterDate: [{required: true, message: '车辆注册日期不能为空', trigger: 'blur'}],
         brandAndModel: [{required: true, message: '品牌型号不能为空', trigger: 'blur'}],
+        carModel: [{required: true, message: '车辆型号不能为空', trigger: 'blur'}]
       },
     };
   },
@@ -218,7 +225,6 @@ export default {
       this.buttonLoading = true
       try{
         const data = this.formData;
-        console.log(data,'adadadad')
         debugger
         const res = await CarMainApi.compute(data);
         const result = res.data;
@@ -253,6 +259,7 @@ export default {
     async submitForm() {
       // 校验主表
       // await this.$refs["formRef"].validate();
+      this.formData.brandAndModel = [this.formData?.brandAndModel, this.formData?.carModel]
       this.formLoading = true;
       try {
         const data = this.formData;
@@ -290,6 +297,7 @@ export default {
         carNature: undefined,
         carRegisterDate: undefined,
         carLicenseImg: undefined,
+        carModel: undefined
       };
       this.resetForm("formRef");
     }
diff --git a/src/views/base/carmain/index.vue b/src/views/base/carmain/index.vue
index 7a5fcd8..0f44427 100644
--- a/src/views/base/carmain/index.vue
+++ b/src/views/base/carmain/index.vue
@@ -109,7 +109,7 @@
       <el-table-column label="发动机号码" align="center" prop="engineNumber" width="180" />
       <el-table-column label="车架号" align="center" prop="vin" width="180" />
       <el-table-column label="车辆品牌" align="center" prop="brandStr" />
-      <el-table-column label="车辆型号" align="center" prop="modelStr" />
+      <el-table-column label="车辆型号" align="center" prop="carModel" />
       <el-table-column label="车辆类别" align="center" prop="carCategory">
         <template v-slot="scope">
           <dict-tag :type="DICT_TYPE.DICT_CAR_CATEGORY" :value="scope.row.carCategory" />
diff --git a/src/views/repair/Components/CarChoose.vue b/src/views/repair/Components/CarChoose.vue
index 782c694..8be7afd 100644
--- a/src/views/repair/Components/CarChoose.vue
+++ b/src/views/repair/Components/CarChoose.vue
@@ -28,7 +28,11 @@ export default {
   watch: {
     carSelected(val) {
       if (val) {
-        const car = this.carList.find(item => item.id === val);
+        let car = this.carList.find(item => item.id === val);
+        car = {
+          ...car,
+          modelStr: car?.brandStr + " " + car?.carModel
+        }
         this.$emit('input', car);
       }
     },
diff --git a/src/views/repair/tickets/form/UserAndCarForm.vue b/src/views/repair/tickets/form/UserAndCarForm.vue
index 7ab568b..462eb26 100644
--- a/src/views/repair/tickets/form/UserAndCarForm.vue
+++ b/src/views/repair/tickets/form/UserAndCarForm.vue
@@ -115,10 +115,15 @@
             </el-row>
             <el-row :gutter="20">
               <el-col :span="8">
-                <el-form-item label="品牌型号" prop="carInfo.brandAndModel">
+                <el-form-item label="车辆品牌" prop="carInfo.brandAndModel">
                   <CarBrandSelector v-model="formData.carInfo.brandAndModel" ref="brandForm"/>
                 </el-form-item>
               </el-col>
+              <el-col :span="8">
+                <el-form-item label="车辆型号" prop="carInfo.carModel">
+                  <el-input type="text" v-model="formData.carInfo.carModel" placeholder="请输入车辆型号" />
+                </el-form-item>
+              </el-col>
               <el-col :span="8">
                 <el-form-item label="车辆类别" prop="carInfo.carCategory">
                   <el-select v-model="formData.carInfo.carCategory" placeholder="请选择车辆类别">
@@ -127,6 +132,8 @@
                   </el-select>
                 </el-form-item>
               </el-col>
+            </el-row>
+            <el-row :gutter="20">
               <el-col :span="8">
                 <el-form-item label="车辆性质" prop="carInfo.carNature">
                   <el-select v-model="formData.carInfo.carNature" placeholder="请选择车辆性质">
@@ -135,8 +142,6 @@
                   </el-select>
                 </el-form-item>
               </el-col>
-            </el-row>
-            <el-row :gutter="20">
               <el-col :span="8">
                 <el-form-item label="注册日期" prop="carInfo.carRegisterDate">
                   <el-date-picker clearable v-model="formData.carInfo.carRegisterDate" type="date" value-format="timestamp"
@@ -303,6 +308,7 @@ export default {
           nextInspectionDate: undefined,
           nextMaintenanceDate: undefined,
           nextMaintenanceMileage: undefined,
+          carModel: undefined
         }
       },
       formRules: {
@@ -311,7 +317,8 @@ export default {
         'carInfo.licenseNumber': [{required: true, message: "车牌号不能为空", trigger: 'blur'}],
         'carInfo.brandAndModel': [{required: true, message: "品牌型号不能为空", trigger: 'blur'}],
         'carInfo.carCategory': [{required: true, message: '车辆类别不能为空', trigger: 'blur'}],
-        'carInfo.carNature': [{required: true, message: '车辆性质不能为空', trigger: 'blur'}]
+        'carInfo.carNature': [{required: true, message: '车辆性质不能为空', trigger: 'blur'}],
+        'carInfo.carModel': [{required: true, message: '车辆型号不能为空', trigger: 'blur'}]
       },
       formLoading: false,
       //折叠面板默认展开
@@ -342,7 +349,8 @@ export default {
           this.formData.carInfo = {
             ...this.formData.carInfo,
             ...data.carInfo,
-            brandAndModel: [data.carInfo?.carBrand, data.carInfo?.carModel]
+            brandAndModel: data.carInfo?.carBrand,
+            carModel: data.carInfo?.carModel
           }
         }
         // await this.listLevel()
@@ -368,6 +376,7 @@ export default {
     async submitForm(){
       await this.$refs["formRef"].validate();
       this.formLoading = true
+      this.formData.carInfo.brandAndModel = [this.formData.carInfo.brandAndModel, this.formData.carInfo.carModel]
       try {
         await updateCustomerAndCar(this.formData)
         this.$modal.msgSuccess(this.formData?.userInfo?.id ? "修改成功" : "新增成功")
@@ -429,6 +438,7 @@ export default {
             nextInspectionDate: undefined,
             nextMaintenanceDate: undefined,
             nextMaintenanceMileage: undefined,
+            carModel: undefined
         }
       }
       this.resetForm("formRef")