From afb343786f79088d830be39822fc4c00f564828c Mon Sep 17 00:00:00 2001
From: PQZ <pangqingzhou@gmail.com>
Date: Sat, 3 Aug 2024 21:51:33 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=91=E5=AE=9A=E8=BD=A6=E8=BE=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/base/customer/index.js                |   8 +
 src/views/base/customer/ChooseCarDraw.vue     | 306 ++++++++++--------
 src/views/base/customer/CustomerCarForm.vue   |  67 ++--
 .../base/customer/components/CorpCustomer.vue |  17 +-
 .../base/customer/components/TodoCustomer.vue |  15 +-
 5 files changed, 248 insertions(+), 165 deletions(-)

diff --git a/src/api/base/customer/index.js b/src/api/base/customer/index.js
index e745be9..378f6a5 100644
--- a/src/api/base/customer/index.js
+++ b/src/api/base/customer/index.js
@@ -9,6 +9,14 @@ export function createCustomerMain(data) {
   })
 }
 
+export function bindCustomerCar(data) {
+  return request({
+    url: '/base/custom/bindCustomerCar',
+    method: 'post',
+    data: data
+  })
+}
+
 // 更新客户管理
 export function updateCustomerMain(data) {
   return request({
diff --git a/src/views/base/customer/ChooseCarDraw.vue b/src/views/base/customer/ChooseCarDraw.vue
index 8dc9c1a..5f1a0d4 100644
--- a/src/views/base/customer/ChooseCarDraw.vue
+++ b/src/views/base/customer/ChooseCarDraw.vue
@@ -1,80 +1,30 @@
 <template>
-  <div>
+
     <!-- 对话框(添加 / 修改) -->
     <el-drawer
       title="选择车辆"
       size="60%"
       :visible.sync="drawVisible"
-      >
+      @close="cancelForm"
+    >
+      <div style="padding: 0 10px;margin-bottom: 70px">
       <!-- 搜索工作栏 -->
       <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-        <el-form-item label="发动机号码" prop="engineNumber">
-          <el-input v-model="queryParams.engineNumber" placeholder="请输入发动机号码" clearable
-                    @keyup.enter.native="handleQuery" />
-        </el-form-item>
-        <el-form-item label="车架号" prop="vin">
-          <el-input v-model="queryParams.vin" placeholder="请输入车架号" clearable @keyup.enter.native="handleQuery" />
-        </el-form-item>
+
         <el-form-item label="车牌号" prop="licenseNumber">
           <el-input v-model="queryParams.licenseNumber" placeholder="请输入车牌号" clearable
-                    @keyup.enter.native="handleQuery" />
+                    @keyup.enter.native="handleQuery"/>
         </el-form-item>
-        <el-form-item label="车辆型号" prop="carModel">
-          <el-input v-model="queryParams.carModel" placeholder="请输入车辆型号" clearable @keyup.enter.native="handleQuery" />
+
+        <el-form-item label="车辆型号" prop="carModel" label-width="90">
+          <el-input v-model="queryParams.carModel" placeholder="请输入车辆型号" clearable @keyup.enter.native="handleQuery"/>
         </el-form-item>
-        <el-form-item label="保养日期" prop="maintenanceDate">
-          <el-date-picker v-model="queryParams.maintenanceDate" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
-                          type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
-                          :default-time="['00:00:00', '23:59:59']" />
+        <el-form-item label="车辆品牌" prop="carBrand" label-width="90">
+          <el-input v-model="queryParams.carBrand" placeholder="请输入车辆品牌" clearable @keyup.enter.native="handleQuery"/>
         </el-form-item>
-        <el-form-item label="保养里程" prop="maintenanceMileage">
-          <el-input v-model="queryParams.maintenanceMileage" placeholder="请输入保养里程" clearable
-                    @keyup.enter.native="handleQuery" />
-        </el-form-item>
-        <el-form-item label="年检日期" prop="inspectionDate">
-          <el-date-picker v-model="queryParams.inspectionDate" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
-                          type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
-                          :default-time="['00:00:00', '23:59:59']" />
-        </el-form-item>
-        <el-form-item label="保险日期" prop="insuranceDate">
-          <el-date-picker v-model="queryParams.insuranceDate" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
-                          type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
-                          :default-time="['00:00:00', '23:59:59']" />
-        </el-form-item>
-        <el-form-item label="二级维护时间" prop="checkDate">
-          <el-date-picker v-model="queryParams.checkDate" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
-                          type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
-                          :default-time="['00:00:00', '23:59:59']" />
-        </el-form-item>
-        <el-form-item label="车辆品牌" prop="carBrand">
-          <el-input v-model="queryParams.carBrand" placeholder="请输入车辆品牌" clearable @keyup.enter.native="handleQuery" />
-        </el-form-item>
-        <el-form-item label="车辆性质" prop="carNature">
-          <el-input v-model="queryParams.carNature" placeholder="请输入车辆性质" clearable
-                    @keyup.enter.native="handleQuery" />
-        </el-form-item>
-        <el-form-item label="车辆注册日期" prop="carRegisterDate">
-          <el-date-picker v-model="queryParams.carRegisterDate" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
-                          type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
-                          :default-time="['00:00:00', '23:59:59']" />
-        </el-form-item>
-        <el-form-item label="最近办理业务" prop="recentlyHandledBusiness">
-          <el-input v-model="queryParams.recentlyHandledBusiness" placeholder="请输入最近办理业务" clearable
-                    @keyup.enter.native="handleQuery" />
-        </el-form-item>
-        <el-form-item label="最近办理业务的时间" prop="recentlyHandleBusinessTime">
-          <el-date-picker v-model="queryParams.recentlyHandleBusinessTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
-                          type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
-                          :default-time="['00:00:00', '23:59:59']" />
-        </el-form-item>
-        <el-form-item label="行驶证图片" prop="carLicenseImg">
-          <el-input v-model="queryParams.carLicenseImg" placeholder="请输入行驶证图片" clearable
-                    @keyup.enter.native="handleQuery" />
-        </el-form-item>
-        <el-form-item label="创建时间" prop="createTime">
-          <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
-                          type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
-                          :default-time="['00:00:00', '23:59:59']" />
+        <el-form-item label="发动机号" prop="engineNumber" label-width="90">
+          <el-input v-model="queryParams.engineNumber" placeholder="请输入发动机号" clearable
+                    @keyup.enter.native="handleQuery"/>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
@@ -83,72 +33,72 @@
       </el-form>
 
       <!-- 操作工具栏 -->
-      <el-row :gutter="10" class="mb8">
-        <el-col :span="1.5">
+      <el-row>
+        <el-col :span="3">
           <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openForm(undefined)"
-                     v-hasPermi="['base:car-main:create']">新增</el-button>
+                     v-hasPermi="['base:car-main:create']">新增
+          </el-button>
+        </el-col>
+        <el-col :span="3" v-for="car in multipleSelection">
+          <el-tag
+            :key="car.id"
+            type="danger"
+            @close="tagClose(car)"
+            closable>
+            {{car.licenseNumber}}
+          </el-tag>
         </el-col>
-
-        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
       </el-row>
 
-      <el-table v-loading="formLoading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-        <el-table-column label="主键标识" align="center" prop="id" />
+      <el-table
+        ref="multipleTable"
+        height="460"
+        v-loading="formLoading"
+        :data="list"
+        :stripe="true"
+        @select="selectRow"
+        @select-all="handleSelectAll"
+        :show-overflow-tooltip="true">
+        <el-table-column
+          type="selection"
+          width="55">
+        </el-table-column>
+        <el-table-column label="车牌号" align="center" prop="licenseNumber"/>
+        <el-table-column label="车辆品牌" align="center" prop="carBrand"/>
+        <el-table-column label="车辆型号" align="center" prop="carModel"/>
         <el-table-column label="发动机号码" align="center" prop="engineNumber" />
         <el-table-column label="车架号" align="center" prop="vin" />
-        <el-table-column label="车牌号" align="center" prop="licenseNumber" />
-        <el-table-column label="车辆型号" align="center" prop="carModel" />
-        <el-table-column label="保养日期" align="center" prop="maintenanceDate" width="180">
+        <el-table-column label="登记时间" align="center" prop="createTime" >
           <template v-slot="scope">
-            <span>{{ parseTime(scope.row.maintenanceDate) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="保养里程" align="center" prop="maintenanceMileage" />
-        <el-table-column label="年检日期" align="center" prop="inspectionDate" width="180">
-          <template v-slot="scope">
-            <span>{{ parseTime(scope.row.inspectionDate) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="保险日期" align="center" prop="insuranceDate" width="180">
-          <template v-slot="scope">
-            <span>{{ parseTime(scope.row.insuranceDate) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="二级维护时间" align="center" prop="checkDate" width="180">
-          <template v-slot="scope">
-            <span>{{ parseTime(scope.row.checkDate) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="车辆品牌" align="center" prop="carBrand" />
-        <el-table-column label="车辆性质" align="center" prop="carNature" />
-        <el-table-column label="车辆注册日期" align="center" prop="carRegisterDate" width="180">
-          <template v-slot="scope">
-            <span>{{ parseTime(scope.row.carRegisterDate) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="最近办理业务" align="center" prop="recentlyHandledBusiness" />
-        <el-table-column label="最近办理业务的时间" align="center" prop="recentlyHandleBusinessTime" width="180">
-          <template v-slot="scope">
-            <span>{{ parseTime(scope.row.recentlyHandleBusinessTime) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="行驶证图片" align="center" prop="carLicenseImg" />
-        <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-          <template v-slot="scope">
-            <span>{{ parseTime(scope.row.createTime) }}</span>
+            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
           </template>
         </el-table-column>
+
+
+
       </el-table>
+      <!-- 分页组件 -->
+      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                  @pagination="getList"/>
+      </div>
+        <div style="position: absolute;bottom: 0;width: 100%;right: 0;padding: 5px 20px 0;z-index: 999;background: white;text-align: right">
+          <div class="demo-drawer__footer"  >
+            <el-button @click="cancelForm">取 消</el-button>
+            <el-button type="primary" @click="submitForm" >确 定</el-button>
+          </div>
+        </div>
+      <CarMainForm ref="formRef" @success="getList" />
+
     </el-drawer>
-  </div>
+  <!-- 对话框(添加 / 修改) -->
 </template>
 
 <script>
 import * as CarMainApi from '@/api/base/carmain';
+import CarMainForm from '@/views/base/carmain/CarMainForm.vue';
 export default {
   name: "ChooseCarDraw",
-  components: {
-  },
+  components: {CarMainForm},
   data() {
     return {
       // 弹出层标题
@@ -161,27 +111,20 @@ export default {
       // 显示搜索条件
       showSearch: true,
       //回参
-      formData:{},
+      formData: {},
+      // 总条数
+      total: 0,
       // 车辆信息列表
       list: [],
+      multipleSelection:[],
       // 查询参数
       queryParams: {
         pageNo: 1,
         pageSize: 10,
-        engineNumber: null,
-        vin: null,
         licenseNumber: null,
         carModel: null,
-        maintenanceDate: [],
-        maintenanceMileage: null,
-        inspectionDate: [],
-        insuranceDate: [],
-        checkDate: [],
         carBrand: null,
-        carNature: null,
-        carRegisterDate: [],
-        carLicenseImg: null,
-        createTime: [],
+        engineNumber: null,
       },
 
     };
@@ -189,32 +132,115 @@ export default {
   methods: {
 
     /** 打开弹窗 */
-    async open() {
+    async open(multipleSelection) {
       this.drawVisible = true;
       this.formLoading = true;
-      try{
+      this.reset();
+      try {
         const res = await CarMainApi.getCarMainPage(this.queryParams);
         this.list = res.data.records;
         this.total = res.data.total;
-      }finally {
+        this.multipleSelection = multipleSelection
+        this.defaultChecked(multipleSelection)
+      } finally {
         this.formLoading = false;
       }
     },
+    /**标签删除事件*/
+    tagClose(row){
+      console.log(row)
+      let id1 = this.multipleSelection.findIndex(item => {
+        if (item.id == row.id) {
+          return true
+        }
+      })
+      this.multipleSelection.splice(id1, 1)
+      const that = this;
+      this.$nextTick(() => {
+        that.$refs.multipleTable.toggleRowSelection(row, false);
+      });
+
+    },
+
+    /**选中*/
+    selectRow(val,row){
+      //当前点击是否勾选
+      let selectBool = val.length && val.indexOf(row) !== -1
+      if(!selectBool){
+        //取消勾选
+        this.multipleSelection.forEach((item,i) => {
+          if(item.id == row.id){
+            this.multipleSelection.splice(i,1)
+          }
+        })
+      }else{
+        //选中
+        this.multipleSelection.push(row)
+      }
+    },
+
+    /**全选*/
+    handleSelectAll(val){
+      if(val.length == this.list.length){ //全选
+        this.multipleSelection = this.multipleSelection.concat(val)
+        //去重
+        let obj = {}
+        let result = []
+        this.multipleSelection.forEach(item => {
+          if(!obj[item.id]){
+            result.push(item)
+            obj[item.id] = true
+          }
+        })
+        this.multipleSelection = result
+      }else{ //取消全选
+        this.list.forEach(item => {
+          this.multipleSelection.forEach((multItem,i) => {
+            if(item.id == multItem.id){
+              this.multipleSelection.splice(i,1)
+            }
+          })
+        })
+      }
+    },
+
+    /**设置默认选中*/
+    defaultChecked(multipleSelection) {
+      const that = this;
+      this.$nextTick(() => {
+        that.list.forEach((v, i) => {
+          multipleSelection.map(item => {
+            if (item.id === v.id){
+              that.$refs.multipleTable.toggleRowSelection(v, true);
+            }
+          })
+        });
+      });
+    },
+
+    cancelForm(){
+      this.drawVisible = false
+    },
+
+    /** 添加/修改操作 */
+    openForm(id) {
+      this.$refs["formRef"].open(id);
+    },
 
     /** 查询列表 */
     async getList() {
       try {
-
+        this.formLoading = true
         const res = await CarMainApi.getCarMainPage(this.queryParams);
         this.list = res.data.records;
         this.total = res.data.total;
+        this.defaultChecked(this.multipleSelection)
       } finally {
-
+        this.formLoading = false
       }
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      debugger;
       this.queryParams.pageNo = 1;
       this.getList();
     },
@@ -223,11 +249,21 @@ export default {
       this.resetForm("queryForm");
       this.handleQuery();
     },
-
-
+    /**重置参数*/
+    reset() {
+      this.queryParams= {
+        pageNo: 1,
+          pageSize: 10,
+          licenseNumber: null,
+          carModel: null,
+          carBrand: null,
+          engineNumber: null,
+      }
+    },
     /** 提交按钮 */
-    async submitForm() {
-
+    submitForm() {
+      this.drawVisible = false
+      this.$emit('success',this.multipleSelection)
     },
 
   }
diff --git a/src/views/base/customer/CustomerCarForm.vue b/src/views/base/customer/CustomerCarForm.vue
index 1c51341..04afeb4 100644
--- a/src/views/base/customer/CustomerCarForm.vue
+++ b/src/views/base/customer/CustomerCarForm.vue
@@ -57,26 +57,20 @@
           <el-button @click="openChooseCar" style="float: right; padding: 3px 0" type="text">选择车辆</el-button>
         </div>
         <el-row>
-          <el-col :span="8">
-            <el-card shadow="hover">
-              车辆1
-            </el-card>
-          </el-col>
-          <el-col :span="8">
-            <el-card shadow="hover">
-              车辆2
-            </el-card>
-          </el-col>
-          <el-col :span="8">
-            <el-card shadow="hover">
-              车辆3
-            </el-card>
-          </el-col>
-          <el-col :span="8">
-            <el-card shadow="hover">
-              车辆4
+          <el-empty v-if="formData.carList.length == 0" description="暂无车辆信息" :image-size="100"></el-empty>
+          <el-col v-for="item in formData.carList" :span="8">
+            <el-card  shadow="hover">
+              <el-descriptions>
+                <template slot="title">
+                  {{item.carBrand}}({{item.carModel}})
+                </template>
+                <el-descriptions-item label="车主"> <el-checkbox true-label="1" false-label="0" v-model="item.isOwner" /></el-descriptions-item>
+                <el-descriptions-item label="车牌号">{{item.licenseNumber}}</el-descriptions-item>
+              </el-descriptions>
+
             </el-card>
           </el-col>
+
         </el-row>
       </el-card>
       <div slot="footer" class="dialog-footer">
@@ -84,7 +78,7 @@
         <el-button @click="dialogVisible = false">取 消</el-button>
       </div>
     </el-dialog>
-    <ChooseCarDraw ref="chooseCarForm"/>
+    <ChooseCarDraw @success="chooseCar"  ref="chooseCarForm"/>
   </div>
 </template>
 
@@ -106,7 +100,9 @@ export default {
       // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
       formLoading: false,
       //回参
-      formData:{},
+      formData:{
+        carList:[],
+      },
 
     };
   },
@@ -116,24 +112,45 @@ export default {
     async open(row) {
       this.dialogVisible = true;
       this.formLoading = true;
+      this.reset()
       try{
         const res = await CustomerMainApi.getCustomerMain(row.id);
         this.formData = res.data
-        console.log(this.formData)
         this.dialogTitle = "绑定车辆";
       }finally {
         this.formLoading = false;
       }
     },
-
-    openChooseCar(){
-      this.$refs["chooseCarForm"].open();
+    /**重置*/
+    reset(){
+      this.formData={
+        carList:[],
+      }
     },
 
+    openChooseCar(){
+      this.$refs["chooseCarForm"].open(this.formData.carList);
+    },
+
+    /**
+     * 选择车辆
+     */
+    chooseCar(chooseCars){
+      this.formData.carList = chooseCars
+    },
 
     /** 提交按钮 */
     async submitForm() {
-
+      this.formLoading = true
+      try{
+        const data = this.formData;
+        await CustomerMainApi.bindCustomerCar(data);
+        this.$modal.msgSuccess("绑定成功");
+        this.dialogVisible = false;
+        this.$emit('success');
+      }finally {
+        this.formLoading = false
+      }
     },
 
   }
diff --git a/src/views/base/customer/components/CorpCustomer.vue b/src/views/base/customer/components/CorpCustomer.vue
index cbe1fc4..7851a54 100644
--- a/src/views/base/customer/components/CorpCustomer.vue
+++ b/src/views/base/customer/components/CorpCustomer.vue
@@ -95,8 +95,11 @@
         </template>
       </el-table-column>
 
-      <el-table-column fixed="right" width="200" label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column fixed="right" width="300" label="操作" align="center" class-name="small-padding fixed-width">
         <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-truck" @click="bindCar(scope.row)"
+                     v-hasPermi="['base:customer-main:car']">绑定车辆
+          </el-button>
           <el-button size="mini" type="text" icon="el-icon-s-custom" @click="openFormAttn(scope.row)"
                      v-hasPermi="['base:customer-main:attn']">经办人管理
           </el-button>
@@ -114,17 +117,18 @@
                 @pagination="getList"/>
     <!-- 对话框(添加 / 修改) -->
     <CustomerMainForm ref="formRef" @success="getList"/>
+    <CustomerCarForm ref="carFormRef" @success="getList"/>
   </div>
 </template>
 
 <script>
 import * as CustomerMainApi from '@/api/base/customer';
 import CustomerMainForm from '@/views/base/customer/CustomerMainForm.vue';
-
+import CustomerCarForm from '@/views/base/customer/CustomerCarForm.vue';
 export default {
   name: "CorpCustomer",
   components: {
-    CustomerMainForm,
+    CustomerMainForm,CustomerCarForm
   },
   props: {
     typeCode: {
@@ -181,6 +185,13 @@ export default {
     this.getList();
   },
   methods: {
+    /**
+     * 绑定车辆
+     */
+    bindCar(row){
+      this.$refs["carFormRef"].open(row);
+    },
+
     /** 查询列表 */
     async getList() {
       try {
diff --git a/src/views/base/customer/components/TodoCustomer.vue b/src/views/base/customer/components/TodoCustomer.vue
index 7436a24..6f34f3d 100644
--- a/src/views/base/customer/components/TodoCustomer.vue
+++ b/src/views/base/customer/components/TodoCustomer.vue
@@ -71,10 +71,13 @@
       <el-table-column
         fixed="right"
         label="操作"
-        width="150"
+        width="180"
         align="center"
         class-name="small-padding fixed-width">
         <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-truck" @click="bindCar(scope.row)"
+                     v-hasPermi="['base:customer-main:car']">绑定车辆
+          </el-button>
           <el-button size="mini" type="text" icon="el-icon-edit" @click="openForm(scope.row.id)"
                      v-hasPermi="['base:customer-main:update']">修改
           </el-button>
@@ -89,16 +92,18 @@
                 @pagination="getList"/>
     <!-- 对话框(添加 / 修改) -->
     <CustomerMainForm ref="formRef" @success="getList"/>
+    <CustomerCarForm ref="carFormRef" @success="getList"/>
   </div>
 </template>
 
 <script>
 import * as CustomerMainApi from '@/api/base/customer';
 import CustomerMainForm from '@/views/base/customer/CustomerMainForm.vue';
+import CustomerCarForm from '@/views/base/customer/CustomerCarForm.vue';
 export default {
   name: "TodoCustomer",
   components: {
-    CustomerMainForm,
+    CustomerMainForm,CustomerCarForm
   },
   props:{
     typeCode: {
@@ -153,6 +158,12 @@ export default {
     this.getList();
   },
   methods: {
+    /**
+     * 绑定车辆
+     */
+    bindCar(row){
+      this.$refs["carFormRef"].open(row);
+    },
     /** 查询列表 */
     async getList() {
       try {