From 54ae167c2b49c372bb5585781b27494badde762e Mon Sep 17 00:00:00 2001
From: xiao-fajia <1665375861@qq.com>
Date: Sun, 29 Sep 2024 18:13:07 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=B4=E4=BF=AE=E5=B7=A5=E5=8D=95-=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E3=80=81=E4=BF=AE=E6=94=B9=E7=94=A8=E6=88=B7=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/repair/Components/StaffChoose.vue   |   2 +-
 src/views/repair/Components/UserChoose.vue    |   2 +-
 .../repair/tickets/Components/UserInfo.vue    |  53 ++-
 .../repair/tickets/form/UserAndCarForm.vue    | 344 ++++++++++++++++++
 4 files changed, 385 insertions(+), 16 deletions(-)
 create mode 100644 src/views/repair/tickets/form/UserAndCarForm.vue

diff --git a/src/views/repair/Components/StaffChoose.vue b/src/views/repair/Components/StaffChoose.vue
index 924d790..2f2092a 100644
--- a/src/views/repair/Components/StaffChoose.vue
+++ b/src/views/repair/Components/StaffChoose.vue
@@ -1,6 +1,6 @@
 <template>
   <el-select v-model="staffSelected" clearable filterable @blur="$emit('input-blur', $event)">
-    <el-option v-for="staff in staffList" :key="staff.id" :label="staff.name" :value="staff.id"/>
+    <el-option v-for="staff in staffList" :key="staff.id" :label="staff.name + ' ' + staff.tel" :value="staff.id"/>
   </el-select>
 </template>
 
diff --git a/src/views/repair/Components/UserChoose.vue b/src/views/repair/Components/UserChoose.vue
index 8784961..6a1b825 100644
--- a/src/views/repair/Components/UserChoose.vue
+++ b/src/views/repair/Components/UserChoose.vue
@@ -1,6 +1,6 @@
 <template>
   <el-select v-model="userSelected" clearable filterable >
-    <el-option v-for="user in userList" :key="user.id" :label="user.cusName" :value="user.id" />
+    <el-option v-for="user in userList" :key="user.id" :label="user.cusName + ' ' + user.phoneNumber" :value="user.id" />
   </el-select>
 </template>
 
diff --git a/src/views/repair/tickets/Components/UserInfo.vue b/src/views/repair/tickets/Components/UserInfo.vue
index d46bb6a..cb51559 100644
--- a/src/views/repair/tickets/Components/UserInfo.vue
+++ b/src/views/repair/tickets/Components/UserInfo.vue
@@ -117,11 +117,12 @@
       <el-col :span="17" style="padding-right: 0">
         <el-card class="top-left">
           <el-descriptions class="margin-top" :column="3" :size="'mini'" border>
-            <!--      <template slot="extra">-->
-            <!--        <el-button v-if="createTicketType" type="success" size="small">新增客户信息</el-button>-->
-            <!--        <el-button v-if="createTicketType" type="primary" size="small" :disabled="!selectUser.id">完善更多客户信息</el-button>-->
-            <!--        <el-button type="primary" size="small">选择业务</el-button>-->
-            <!--      </template>-->
+            <template slot="extra">
+              <el-button v-if="createTicketType" type="success" size="small" @click="updateUserInfo(false)">新增客户信息</el-button>
+              <el-button v-if="createTicketType" type="primary" size="small" @click="updateUserInfo(true)" :disabled="!selectUser.id">
+                完善更多客户信息
+              </el-button>
+            </template>
             <el-descriptions-item>
               <template slot="label">
                 用户选择
@@ -241,7 +242,7 @@
             :data="couponList"
             border
             size="mini"
-            height="200"
+            height="270"
             style="width: 100%">
             <!--            @selection-change="handleSelectionChange"-->
             <!--            <el-table-column-->
@@ -332,12 +333,12 @@
       <el-col :span="createTicketType ? 12 : 16">
         <el-descriptions class="margin-top" :column="createTicketType ? 2 : 3" border :size="'medium'"
                          style="margin-bottom: 1rem">
-<!--          <el-descriptions-item>-->
-<!--            <template slot="label">-->
-<!--              工单号-->
-<!--            </template>-->
-<!--            <TicketChoose @selected="getTickets"/>-->
-<!--          </el-descriptions-item>-->
+          <el-descriptions-item>
+            <template slot="label">
+              工单号
+            </template>
+            <TicketChoose @selected="getTickets"/>
+          </el-descriptions-item>
           <el-descriptions-item>
             <template slot="label">
               时间
@@ -393,6 +394,7 @@
 
     <RepairAdvice ref="repairAdvice" v-model="formData.repairAdvice"/>
     <QualityExplain ref="qualityExplain" v-model="formData.quality"/>
+    <UserAndCarForm ref="userAndCarInfo" @success="successCreateUserInfo"/>
   </div>
 </template>
 
@@ -408,10 +410,13 @@ import QualityExplain from "@/views/repair/tickets/form/QualityExplain.vue";
 import TicketChoose from "@/views/repair/tickets/Components/TicketChoose.vue";
 import request from "@/utils/request";
 import * as CustomerMainApi from "@/api/base/customer";
+import UserAndCarForm from "@/views/repair/tickets/form/UserAndCarForm.vue";
 
 export default {
   name: "UserInfo",
-  components: {TicketChoose, QualityExplain, RepairAdvice, CarChoose, TicketItem, StaffChoose, UserChoose},
+  components: {
+    UserAndCarForm,
+    TicketChoose, QualityExplain, RepairAdvice, CarChoose, TicketItem, StaffChoose, UserChoose},
   props: {
     createTicketType: {
       type: Boolean,
@@ -739,7 +744,6 @@ export default {
       this.bookingList = res.data
       if (this.bookingList.length > 0) {
         this.bookingList.forEach(item => {
-          console.log(item.bookingTime)
           item.bookingTime = this.parseTime(item.bookingTime, '{y}-{m}-{d} {h}:{m}')
         })
       }
@@ -753,6 +757,23 @@ export default {
       this.finaCouponList.forEach(item => console.log(item.isChoose))
       this.couponList = this.finaCouponList.filter(item => !item.isChoose)
     },
+    // 新增客户信息
+    updateUserInfo(flag){
+      const data = {}
+      if (flag){
+        if (this.selectUser){
+          data.userInfo = this.selectUser
+        }
+        if (this.selectCar){
+          data.carInfo = this.selectCar
+        }
+      }
+      this.$refs.userAndCarInfo.open(data)
+    },
+    // 新增客户信息回调
+    successCreateUserInfo(){
+
+    }
     // // 权益选择
     // handleSelectionChange(val){
     //
@@ -765,4 +786,8 @@ export default {
 .top-left {
   margin-bottom: 1rem;
 }
+
+.el-card__body {
+  min-height: 100rem;
+}
 </style>
diff --git a/src/views/repair/tickets/form/UserAndCarForm.vue b/src/views/repair/tickets/form/UserAndCarForm.vue
new file mode 100644
index 0000000..869333e
--- /dev/null
+++ b/src/views/repair/tickets/form/UserAndCarForm.vue
@@ -0,0 +1,344 @@
+<template>
+  <div class="app-container">
+    <el-dialog title="客户信息" :visible.sync="dialogVisible" width="80%" v-dialogDrag append-to-body>
+      <el-form size="small" ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading"
+               label-width="100px">
+        <el-collapse v-model="activeNames">
+          <!--客户基本信息面板-->
+          <el-collapse-item title="客户基本信息" name="1">
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="客户名称" prop="userInfo.cusName">
+                  <el-input v-model="formData.userInfo.cusName" placeholder="请输入客户名称"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="客户类型" prop="userInfo.typeCode">
+                  <el-select v-model="formData.userInfo.typeCode" placeholder="请选择客户类型">
+                    <el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_CUS_TYPE)" :key="dict.value"
+                               :label="dict.label" :value="dict.value"/>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item v-if="formData.userInfo.typeCode !== '03'" label="身份证号" prop="userInfo.idCard">
+                  <el-input v-model="formData.userInfo.idCard" placeholder="请输入客户身份证号"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item v-if="formData.userInfo.typeCode !== '03'" label="性别" prop="userInfo.sex">
+                  <el-radio-group v-model="formData.userInfo.sex">
+                    <el-radio v-for="dict in sexDictDatas" :key="dict.value" :label="dict.value">
+                      {{ dict.label }}
+                    </el-radio>
+                  </el-radio-group>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item v-if="formData.userInfo.typeCode !== '03'" label="生日" prop="userInfo.birthday">
+                  <el-date-picker v-model="formData.userInfo.birthday" type="date" placeholder="选择日期">
+                  </el-date-picker>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="联系方式" prop="userInfo.phoneNumber">
+                  <el-input v-model="formData.userInfo.phoneNumber" placeholder="请输入客户联系方式"/>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="2">
+              <el-col :span="12">
+                <el-form-item label="客户来源" prop="userInfo.dataFrom">
+                  <el-select v-model="formData.userInfo.dataFrom" placeholder="请选择客户来源">
+                    <el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_CUS_DATA_FROM)" :key="dict.value"
+                               :label="dict.label" :value="dict.value"/>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="注册方式" prop="userInfo.inviterType">
+                  <el-select v-model="formData.userInfo.inviterType" placeholder="请选择注册方式">
+                    <el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_SIGN_TYPE)" :key="dict.value"
+                               :label="dict.label" :value="dict.value"/>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="2">
+              <el-col :span="12">
+                <el-form-item label="选择会员" prop="userInfo.memberLevelId">
+                  <el-select v-model="formData.userInfo.memberLevelId" placeholder="请选择会员">
+                    <el-option v-for="(item,index) in levelList" :key="item.id"
+                               :label="item.name" :value="item.id"/>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="联系地址" prop="userInfo.address">
+                  <el-input type="textarea" v-model="formData.userInfo.address" placeholder="请输入客户联系地址"/>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-collapse-item>
+          <el-collapse-item v-if="formData.userInfo.typeCode !== '03'" title="身份证件信息" name="2">
+            <el-row>
+              <el-col>
+                <el-form-item>
+                  <ImageUpload v-model="formData.userInfo.idCardImage"/>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-collapse-item>
+          <el-collapse-item title="车辆基本信息" name="3">
+            <el-row :gutter="20">
+              <el-col :span="8">
+                <el-form-item label="车牌号" prop="carInfo.licenseNumber">
+                  <el-input v-model="formData.carInfo.licenseNumber" placeholder="请输入车牌号"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="发动机号码" prop="carInfo.engineNumber">
+                  <el-input v-model="formData.carInfo.engineNumber" placeholder="请输入发动机号码"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="车架号" prop="carInfo.vin">
+                  <el-input v-model="formData.carInfo.vin" placeholder="请输入车架号"/>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="20">
+              <el-col :span="8">
+                <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.carCategory">
+                  <el-select v-model="formData.carInfo.carCategory" placeholder="请选择车辆类别">
+                    <el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_CAR_CATEGORY)" :key="dict.value"
+                               :label="dict.label" :value="dict.value"/>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="车辆性质" prop="carInfo.carNature">
+                  <el-select v-model="formData.carInfo.carNature" placeholder="请选择车辆性质">
+                    <el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_CAR_NATURE)" :key="dict.value"
+                               :label="dict.label" :value="dict.value"/>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="20">
+              <el-col :span="8">
+                <el-form-item label="注册日期" prop="carInfo.carRegisterDate" label-width="auto">
+                  <el-date-picker clearable v-model="formData.carInfo.carRegisterDate" type="date" value-format="timestamp"
+                                  placeholder="选择车辆注册日期"/>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-collapse-item>
+          <el-collapse-item title="车辆业务信息" name="4">
+            <el-row :gutter="20">
+              <el-col :span="8">
+                <el-form-item label="最近办理业务" prop="carInfo.recentlyHandledBusiness">
+                  <el-select v-model="formData.carInfo.recentlyHandledBusiness" placeholder="请选择业务类别" clearable>
+                    <el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_CUS_BUSI_TYPE)" :key="dict.value"
+                               :label="dict.label" :value="dict.value"/>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="最近业务时间" prop="carInfo.recentlyHandleBusinessTime">
+                  <el-date-picker clearable v-model="formData.carInfo.recentlyHandleBusinessTime" type="date"
+                                  value-format="timestamp" placeholder="选择最近办理业务的时间"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="二级维护时间" prop="carInfo.checkDate">
+                  <el-date-picker clearable v-model="formData.carInfo.checkDate" type="date" value-format="timestamp"
+                                  placeholder="选择二级维护时间"/>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="20">
+              <el-col :span="8">
+                <el-form-item label="保养日期" prop="carInfo.maintenanceDate">
+                  <el-date-picker clearable v-model="formData.carInfo.maintenanceDate" type="date" value-format="timestamp"
+                                  placeholder="选择保养日期"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="年检日期" prop="carInfo.inspectionDate">
+                  <el-date-picker clearable v-model="formData.carInfo.inspectionDate" type="date" value-format="timestamp"
+                                  placeholder="选择年检日期"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="保险日期" prop="carInfo.insuranceDate">
+                  <el-date-picker clearable v-model="formData.carInfo.insuranceDate" type="date" value-format="timestamp"
+                                  placeholder="选择保险日期"/>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="20">
+              <el-col :span="8">
+                <el-form-item label="保养里程" prop="carInfo.maintenanceMileage">
+                  <el-input v-model="formData.carInfo.maintenanceMileage" placeholder="请输入保养里程"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="16">
+                <el-button :loading="buttonLoading" icon="el-icon-date" @click="compute" size="small" type="primary">计算</el-button>
+              </el-col>
+            </el-row>
+          </el-collapse-item>
+          <el-collapse-item title="测算" name="5">
+            <el-row :gutter="20">
+              <el-col :span="8">
+                <el-form-item label="保险到期时间" prop="carInfo.insuranceExpiryDate">
+                  <el-date-picker clearable v-model="formData.carInfo.insuranceExpiryDate" type="date" value-format="timestamp"
+                                  placeholder="选择下次保险时间"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="下次年检时间" prop="carInfo.nextInspectionDate">
+                  <el-date-picker clearable v-model="formData.carInfo.nextInspectionDate" type="date" value-format="timestamp"
+                                  placeholder="选择下次年检时间"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="下次保养时间" prop="carInfo.nextMaintenanceDate">
+                  <el-date-picker clearable v-model="formData.carInfo.nextMaintenanceDate" type="date" value-format="timestamp"
+                                  placeholder="选择下次保养时间"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="下次保养里程" prop="carInfo.nextMaintenanceMileage">
+                  <el-input v-model="formData.carInfo.nextMaintenanceMileage" placeholder="请输入下次保养里程"/>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-collapse-item>
+          <el-collapse-item title="附件信息" name="6">
+            <el-form-item>
+              <ImageUpload v-model="formData.carInfo.carLicenseImg"/>
+            </el-form-item>
+          </el-collapse-item>
+        </el-collapse>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {DICT_TYPE, getDictDatas} from "@/utils/dict";
+import CarBrandSelector from "@/layout/components/CarBrandSelector/index.vue";
+
+export default {
+  name: "UserAndCarForm",
+  components: {CarBrandSelector},
+  data() {
+    return {
+      dialogVisible: false,
+      formData: {
+        userInfo: {
+          memberLevelId: undefined,
+          id: undefined,
+          userId: undefined,
+          typeCode: '01',
+          deptCode: undefined,
+          cusName: undefined,
+          phoneNumber: undefined,
+          birthday: undefined,
+          address: undefined,
+          sex: '1',
+          idCard: undefined,
+          idCardImage: undefined,
+          dataFrom: '08',
+          nearDoTime: undefined,
+          nearDoContent: undefined,
+          inviter: undefined,
+          inviterType: '01',
+          status: undefined,
+          itemList: [
+            {
+              systemCode: '',
+              serContent: '',
+              serTimeStart: '',
+              serTimeEnd: ''
+            }
+          ],
+        },
+        carInfo: {
+          id: undefined,
+          engineNumber: undefined,
+          vin: undefined,
+          licenseNumber: undefined,
+          brandAndModel: [],
+          maintenanceDate: undefined,
+          maintenanceMileage: undefined,
+          inspectionDate: undefined,
+          insuranceDate: undefined,
+          checkDate: undefined,
+          carBrand: undefined,
+          carNature: undefined,
+          carRegisterDate: undefined,
+          carLicenseImg: undefined,
+          carCategory: undefined,
+          insuranceExpiryDate: undefined,
+          nextInspectionDate: undefined,
+          nextMaintenanceDate: undefined,
+          nextMaintenanceMileage: undefined,
+        }
+      },
+      formRules: {},
+      formLoading: false,
+      //折叠面板默认展开
+      activeNames: ['1', '2', '3', '4', '5', '6'],
+      levelList: [],
+      // 性别数据字典
+      sexDictDatas: getDictDatas(DICT_TYPE.DICT_SYS_USER_SEX),
+      cusBusiTypeDictDatas: getDictDatas(DICT_TYPE.DICT_CUS_BUSI_TYPE),
+      buttonLoading: false,
+    }
+  },
+  methods: {
+    async open(data) {
+      if (data?.userInfo?.id){
+        this.formData.userInfo = {
+          ...this.formData.userInfo,
+          ...data.userInfo
+        }
+      }
+      if (data?.carInfo?.id){
+        this.formData.carInfo = {
+          ...this.formData.carInfo,
+          ...data.carInfo
+        }
+      }
+      this.dialogVisible = true
+    },
+    compute(){
+
+    },
+    async submitForm(){
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>