lshcomment 1.0.0

package/src/components/customer-vehicle/index.vue

@@ -0,0 +1,1160 @@
+<template>
+<div class="custom-vehicle-modal">
+    <el-dialog ref="dialog" 
+        title="人车组件" 
+        no-close-on-backdrop 
+        size="large" :before-close="hide" 
+        :visible.sync="dialogVisible" 
+        :modal-append-to-body="false">
+
+        <!-- 车主信息 -->
+        <b-card header="车主信息">
+            <div class="row">
+                <div class="col-md-4">
+                    <b-form-fieldset horizontal label="移动电话 *" :label-cols="4" class="text-right">
+                        <b-form-input v-model.trim="customInfo.mobilePhone" @blur.native="mobilePhoneBlur" :state="checkStateInfo.mobilePhone.state" autocomplete="off"/>
+                    </b-form-fieldset>
+                </div>
+                <div class="col-md-4">
+                    <b-form-fieldset horizontal label="客户姓名 *" :label-cols="4" class="text-right">
+                        <b-form-input v-model.trim="customInfo.customName" @blur.native="customNameBlur" :state="checkStateInfo.customName.state" autocomplete="off"/>
+                    </b-form-fieldset>
+                </div>
+                <div class="col-md-4">
+                    <b-form-fieldset horizontal label="客户性别" :label-cols="4" class="text-right">
+                        <b-form-select v-model="customInfo.gender" :options="customerSex"></b-form-select>
+                    </b-form-fieldset>
+                </div>
+                <div class="col-md-4">
+                    <b-form-fieldset horizontal label="客户类型" :label-cols="4" class="text-right">
+                        <b-form-select v-model="customInfo.customType" :options="customType"></b-form-select>
+                    </b-form-fieldset>
+                </div>
+                <div class="col-md-4">
+                    <b-form-fieldset horizontal label="证件类型" :label-cols="4" class="text-right">
+                        <b-form-select 
+                            v-model="customInfo.idType" 
+                            :options="certificateType">
+                        </b-form-select>
+                    </b-form-fieldset>
+                </div>
+                <div class="col-md-4">
+                    <b-form-fieldset horizontal label="证件号码" :label-cols="4" class="text-right">
+                        <b-form-input v-model.trim="customInfo.idNo" autocomplete="off"/>
+                    </b-form-fieldset>
+                </div>
+                <div class="col-md-4">
+                    <b-form-fieldset horizontal label="生日" :label-cols="4" class="text-right">
+                        <el-date-picker
+                            type="date"
+                            format="yyyy-MM-dd"
+                            v-model="customInfo.birthday"
+                            placeholder="选择日期">
+                        </el-date-picker>
+                    </b-form-fieldset>
+                </div>
+                <div class="col-md-4">
+                    <b-form-fieldset horizontal label="邮箱" :label-cols="4" class="text-right">
+                        <b-form-input v-model.trim="customInfo.email" @blur.native="emailBlur" :state="checkStateInfo.email.state" autocomplete="off"/>
+                    </b-form-fieldset>
+                </div>
+                <div class="col-md-4">
+                    <b-form-fieldset horizontal :label-cols="4">
+                        <el-checkbox v-model="customInfo.customCategory">虚拟客户</el-checkbox>
+                    </b-form-fieldset>
+                </div>
+            </div>
+        </b-card>
+
+        <div class="row">
+            <div class="col-md-12 text-right"> 
+                <b-button size="sm" variant="primary" @click="selectBtnClick">确定</b-button>
+                <b-button size="sm" variant="default" @click="hide">取消</b-button>
+            </div>  
+        </div>
+
+        <div class="custom-vehicle mt-2" v-if="isVehicleCard">
+            <el-tabs type="border-card" v-model="activeName">
+                <el-tab-pane :label="tab_1_title" name="vehicle_list">
+                    <div class="mb-2">
+                        <b-button size="sm" variant="success" @click="insertBtnClick" >新增</b-button>
+                        <b-button size="sm" variant="primary" @click="updateBtnClick" >编辑</b-button>
+                    </div>
+
+                    <el-table
+                        :data="tempCustomVehicleInfo.customVehicleInfoVos"
+                        tooltip-effect="dark"
+                        height="300"
+                        border
+                        @row-click="rowClick">
+                            <el-table-column
+                                label="选择"
+                                type="radio">
+                                <template slot-scope="scope">
+                                    <input type="radio" name="radio" :value="scope.$index" v-model="selIndex"/>
+                                </template>
+                            </el-table-column>
+                            <el-table-column
+                                prop="plateNumber"
+                                label="车牌"
+                                :min-width="120"
+                                show-overflow-tooltip>
+                            </el-table-column>
+                            <el-table-column
+                                prop="vinCode"
+                                label="车架号"
+                                :min-width="200"
+                                show-overflow-tooltip>
+                            </el-table-column>
+                            <el-table-column
+                                prop="carModelCode"
+                                label="车型代码"
+                                :min-width="100"
+                                show-overflow-tooltip>
+                            </el-table-column>
+                            <el-table-column
+                                prop="factoryName"
+                                label="厂家"
+                                :min-width="150"
+                                show-overflow-tooltip>
+                            </el-table-column>
+                            <el-table-column
+                                prop="brandName"
+                                label="品牌"
+                                :min-width="150"
+                                show-overflow-tooltip>
+                            </el-table-column>
+                            <el-table-column
+                                prop="seriesName"
+                                label="车系"
+                                :min-width="100"
+                                show-overflow-tooltip>
+                            </el-table-column>
+                            <el-table-column
+                                prop="modelName"
+                                label="车型"
+                                :min-width="150"
+                                show-overflow-tooltip>
+                            </el-table-column>
+                            <el-table-column
+                                prop="displayName"
+                                label="车款"
+                                :min-width="150"
+                                show-overflow-tooltip>
+                            </el-table-column>
+                    </el-table>
+                </el-tab-pane>
+
+                <el-tab-pane :label="tab_2_title" name="insert_vehicle" disabled>
+                    <div class="row">
+                        <div class="col-md-4">
+                            <b-form-fieldset horizontal label="车牌 *" :label-cols="4" class="text-right">
+                                <b-form-input 
+                                    v-model.trim="vehicleInfo.plateNumber" 
+                                    :state="checkStateInfo.plateNumber.state"
+                                    @blur.native="plateNumberBlur('plateNumber')"
+                                    autocomplete="off"/>
+                            </b-form-fieldset>
+                        </div>
+                        <div class="col-md-4">
+                            <b-form-fieldset horizontal label="VIN码 *" :label-cols="4" class="text-right">
+                                <b-form-input
+                                    :disabled="!!insertOrUpdateFlag"
+                                    maxlength="17" 
+                                    v-model.trim="vehicleInfo.vinCode" 
+                                    :state="checkStateInfo.vinCode.state"
+                                    @blur.native="vinCodeBlur" placeholder="请输入17位大写字母和数字"
+                                    autocomplete="off"/>
+                            </b-form-fieldset>
+                        </div>
+                        <div class="col-md-4 text-center">
+                            <el-checkbox v-model="isPlateTmp">临时车牌</el-checkbox>
+                            <el-checkbox v-model="vehicleInfo.isMainCar">默认车辆</el-checkbox>
+                            <el-checkbox v-model="salesStatus">未销售车辆</el-checkbox>
+                        </div>
+                    </div>
+                    <hr>
+                    <p>车型信息</p>
+                    <hr>
+                    <car-info
+                        :required="true"
+                        ref="carInfo"
+                        @handleChange="getCarInfo"
+                        >
+                    </car-info>
+
+                    <p>其他信息</p>
+                    <hr>
+                    <div class="row">
+                        <div class="col-md-4">
+                            <b-form-fieldset horizontal label="上牌日" :label-cols="4" class="text-right">
+                                <el-date-picker
+                                    type="date"
+                                    v-model="vehicleInfo.plateDate"
+                                    placeholder="选择日期"
+                                    style="width: 100%">
+                                </el-date-picker>
+                            </b-form-fieldset>
+                        </div>
+                        <div class="col-md-4">
+                            <b-form-fieldset horizontal label="商业险到期" :label-cols="4" class="text-right">
+                                <el-date-picker
+                                    type="date"
+                                    v-model="vehicleInfo.commercialInsuranceEndDate"
+                                    placeholder="选择日期"
+                                    style="width: 100%">
+                                </el-date-picker>
+                            </b-form-fieldset>
+                        </div>
+                        <div class="col-md-4">
+                            <b-form-fieldset horizontal label="交强险到期" :label-cols="4" class="text-right">
+                                <el-date-picker
+                                    type="date"
+                                    v-model="vehicleInfo.compulsoryInsuranceEndDate"
+                                    placeholder="选择日期"
+                                    style="width: 100%">
+                                </el-date-picker>
+                            </b-form-fieldset>
+                        </div>
+                        <div class="col-md-4">
+                            <b-form-fieldset horizontal label="保修起始日" :label-cols="4" class="text-right">
+                                <el-date-picker
+                                    type="date"
+                                    v-model="vehicleInfo.warrantyStartDate"
+                                    placeholder="选择日期"
+                                    style="width: 100%">
+                                </el-date-picker>
+                            </b-form-fieldset>
+                        </div>
+                        <div class="col-md-4">
+                            <b-form-fieldset horizontal label="保修到期日" :label-cols="4" class="text-right">
+                                <el-date-picker
+                                    type="date"
+                                    v-model="vehicleInfo.warrantyExpiryDate"
+                                    placeholder="选择日期"
+                                    style="width: 100%">
+                                </el-date-picker>
+                            </b-form-fieldset>
+                        </div>
+                        <div class="col-md-4">
+                            <b-form-fieldset horizontal label="进厂里程" :label-cols="4" class="text-right">
+                                <b-form-input type="number" v-model.trim="vehicleInfo.inMileage" autocomplete="off"/>
+                            </b-form-fieldset>
+                        </div>
+                        <div class="col-md-4">
+                            <b-form-fieldset horizontal label="商业险公司" :label-cols="4" class="text-right">
+                                <search
+                                    ref="search"
+                                    :dataList="datalist"
+                                    option="coName"
+                                    @dataChange="querySelect"
+                                    @itemValue="itemClick"
+                                    @clickShowBack="firstLoad"
+                                    @clearValue="clearValue"
+                                    @comScroll="scrollBottom">
+                                </search>
+                            </b-form-fieldset>
+                        </div>
+                        <div class="col-md-4">
+                            <b-form-fieldset horizontal label="交强险公司" :label-cols="4" class="text-right">
+                                <search
+                                    ref="_search"
+                                    :dataList="datalist"
+                                    option="coName"
+                                    @dataChange="querySelect"
+                                    @itemValue="_itemClick"
+                                    @clickShowBack="firstLoad"
+                                    @clearValue="_clearValue"
+                                    @comScroll="scrollBottom">
+                                </search>
+                            </b-form-fieldset>
+                        </div>
+                        <div class="col-md-4">
+                            <b-form-fieldset horizontal label="保险备注" :label-cols="4" class="text-right">
+                                <b-form-textarea :maxlength="200" v-model.trim="vehicleInfo.commercialInsuranceCompanyRemark">
+                                </b-form-textarea>
+                            </b-form-fieldset>
+                        </div>
+                        <div class="col-md-4">
+                            <b-form-fieldset horizontal label="车辆备注" :label-cols="4" class="text-right">
+                                <b-form-textarea :maxlength="200" v-model.trim="vehicleInfo.vehicleRemark">
+                                </b-form-textarea>
+                            </b-form-fieldset>
+                        </div>
+                    </div>
+                </el-tab-pane>
+            </el-tabs>
+        </div>
+        
+    </el-dialog>
+</div>
+</template>
+<script>
+import Vue from 'vue'
+import { Message, DatePicker, Dialog, Checkbox, Table, TableColumn, Tabs, TabPane } from 'element-ui'
+Vue.use(Dialog)
+Vue.use(Checkbox)
+Vue.use(Table)
+Vue.use(TableColumn)
+Vue.use(DatePicker)
+Vue.use(Tabs)
+Vue.use(TabPane)
+
+import CarInfo from  'components/iris-carinfo/iris-carinfo'
+import Search from 'components/iris-search/search'
+
+import api from 'common/api'
+import config from 'common/config'
+import common from 'common/common'
+
+import { getSequence, alertSuccess, getType, getSequenceList, filter, cloneDeep } from 'common/api-common'
+import { CUSTOM, CUSTOM_VEHICLE_SEQ, CUSTOM_VEHICLE_ADD_SEQ } from 'common/sequence'
+import { CERTIFICATE_TYPE, CUSTOM_TYPE } from 'common/ref-code'
+
+
+/**
+ * date: 2018/11/13
+ * @author luwenxiang
+ * @description 新人车弹窗组件 ( 第三版 )
+ * @prop { cardUseTypeCode } 默认车辆卡 = 'VehicleCard'
+ * @event { show() }  调用show方法传入你想通过某些字段来检索人车信息 => 例: 如下 propsInfo
+ * @emit { selectCusVehicleInfo } 
+ *    抛出客户信息Vo嵌套车辆列表list( 只有一条 ), 
+ *    车辆列表list - Vo 里再嵌套扩展属性列表list
+ * 
+ */
+
+// propsInfo : {
+//     customCode: customCode,               // 客户编码
+//     mobilePhone: mobilePhone,             // 客户手机号
+//     vehicleCode: vehicleCode,             // 车辆编码      
+//     plateNumberOrVin: plateNumberOrVin,   // 车牌号或VIN码或VIN后6位
+//     plateNumber: plateNumber,             // 车牌号
+//     plateNumberTmp: plateNumberTmp,       // 临牌
+//     vinCode: vinCode                      // vin码
+// }
+
+export default {
+    components: {
+        Search,
+        CarInfo
+    },
+    props: {
+        cardUseTypeCode: {
+            type: String,
+            default: 'VehicleCard'
+        },
+    },
+    data() {
+        return {
+            dialogVisible: false,
+            
+            customerSex: [
+                {text: '男', value: 1},
+                {text: '女', value: 0},                
+            ],
+            certificateType: [],
+            customType: [],
+            // 客户信息
+            customInfo: {
+                customName: '',
+                mobilePhone: '',
+                gender: '',
+                customType: 'customTypeIndividualCus',   // 默认个人客户
+                idType: '',
+                idNo: '',
+                birthday: '',
+                email: '',
+                customCategory: false
+            },
+            // 车辆信息
+            vehicleInfo: {
+                plateNumber: '',
+                plateNumberTmp: '',
+                vinCode: '',
+                isMainCar: true,
+
+                plateDate: '',
+                commercialInsuranceEndDate: '',
+                compulsoryInsuranceEndDate: '',
+                warrantyStartDate: '',
+                warrantyExpiryDate: '',
+                inMileage: '',
+                
+                commercialInsuranceCompanyCode: '',
+                commercialInsuranceCompanyName: '',
+                compulsoryInsuranceCompanyCode: '',
+                compulsoryInsuranceCompanyName: '',
+                commercialInsuranceCompanyRemark: '',
+                vehicleRemark: '',
+
+                factoryCode: '',
+                brandCode: '',
+                seriesCode: '',
+                modelCode: '',
+                displayName: '', 
+
+                customVehicleAddInfoVos: []    // 车型扩展属性
+            },
+
+            isPlateTmp: false,
+            salesStatus: false,
+
+            tempCustomVehicleInfo: {},
+            
+            selIndex: 0,
+
+            // 下拉查询保险公司参数
+            datalist: [],
+            selectParams: {
+                pageNums: config.pageNums,
+                pageStart: 1
+            },
+            isLastPage: false,
+
+            // 校验信息
+            checkStateInfo: {
+                mobilePhone: {
+                    state: null,
+                    message: '手机号输入格式不正确'
+                },
+                customName: {
+                    state: null,
+                    message: ''
+                },
+                email: {
+                    state: null,
+                    message: '邮箱输入格式不正确'
+                },
+                plateNumber: {
+                    state: null,
+                    message: '车牌号输入格式不正确'
+                },
+                plateNumberTmp: {
+                    state: null,
+                    message: '临时车牌输入格式不正确'
+                },
+                vinCode: {
+                    state: null,
+                    message: 'vin码输入格式不正确'
+                },
+            },
+
+            activeName: 'vehicle_list',
+
+            timer: null,
+            
+            insertOrUpdateFlag: 0
+        }
+    },
+    mounted() {
+        // 获取证件类型列表
+        this.getCertificateType()
+        // 获取客户类型列表
+        this.getCustomerType()
+    },
+    computed: {
+        tab_1_title() {
+            let count = 0
+            const { customVehicleInfoVos } = this.tempCustomVehicleInfo
+            customVehicleInfoVos && (count = customVehicleInfoVos.length)
+            return `已有车辆 ( ${count} )`
+        },
+        tab_2_title() {
+            return this.insertOrUpdateFlag === 0 ? '新增车辆' : '编辑车辆'
+        },
+        // 区分车辆卡还是车主卡
+        isVehicleCard() {
+            return this.cardUseTypeCode === 'VehicleCard'
+        },
+    },
+    methods: {
+        rowClick(row) {
+            this.selIndex = this.tempCustomVehicleInfo.customVehicleInfoVos.indexOf(row)
+        },
+        setSelIndex(plateNumberOrVin, plateNumber, vinCode) {
+            const {customVehicleInfoVos } = this.tempCustomVehicleInfo
+            if(customVehicleInfoVos && customVehicleInfoVos.length) {
+                customVehicleInfoVos.forEach((k, i) => {
+                    if(k.plateNumber == (plateNumber || plateNumberOrVin)) {
+                        this.selIndex = i
+                    }
+
+                    if(k.vinCode == (vinCode || plateNumberOrVin)) {
+                        this.selIndex = i
+                    }
+                })
+            }
+        },
+        show(queryInfo = null) {
+            if(queryInfo != null) {
+                this.dialogVisible = true
+                this.initModal()
+
+                const {customCode, mobilePhone, vehicleCode, plateNumberOrVin, plateNumber, vinCode} = queryInfo
+                this.queryCustomAndVehicle({ 
+                    customCode: customCode,
+                    carOwnerMobile: mobilePhone,
+                    vehicleCode: vehicleCode,
+                    plateNumberOrVin: plateNumberOrVin,   // 车牌号或VIN码或VIN后6位
+                    plateNumber: plateNumber,
+                    vinCode: vinCode
+                }, (obj) => {
+                    // 有手机号, 或者无人或者有人无车 则弹出人车组件
+                    if(mobilePhone || !obj || !obj.customVehicleInfoVos) {
+                        // this.dialogVisible = true
+                        // this.initModal()
+                        if(!obj || !obj.customVehicleInfoVos) {
+                            this.customInfo.mobilePhone = mobilePhone
+                            this.vehicleInfo.plateNumber = plateNumber                 
+                            this.vehicleInfo.vinCode = vinCode
+                        }
+                    }
+                    // 输入车牌或者vin码直接带出, vin码后六位如果匹配到多条 弹出提示
+                    else {
+                        if(obj.customVehicleInfoVos.length > 1) {
+                            Message({
+                                type: 'warning',
+                                message: 'vin码匹配到多条记录，请补充vin码信息'
+                            })
+                        }else {
+                            // this.setCustomVehicleInfo(obj, true)
+                        }
+                    }
+
+                    // this.setSelIndex(plateNumberOrVin, plateNumber, vinCode)
+
+                    this.selIndex = 0
+                    
+                }, (res) => {
+                    this.customInfo.mobilePhone = mobilePhone
+                    this.vehicleInfo.plateNumber = plateNumber                 
+                    this.vehicleInfo.vinCode = vinCode
+
+                    this.timer = setTimeout(() => {
+                        Message({
+                            message: res.data.message,
+                            type: 'error',
+                        })
+                    }, 500)
+                })
+            }
+        },
+        hide() {
+            this.dialogVisible = false
+            this.$emit('hideEmpCarModal')
+        },
+        insertBtnClick() {
+            this.insertOrUpdateFlag = 0
+            this.activeName = 'insert_vehicle'
+
+            this.initModal(false)
+        },
+        updateBtnClick() {
+            if(!this.tempCustomVehicleInfo 
+            || !this.tempCustomVehicleInfo.customVehicleInfoVos
+            || !this.tempCustomVehicleInfo.customVehicleInfoVos.length) {
+                Message({
+                    type: 'warning',
+                    message: '请选择'
+                })
+                return
+            }
+            this.insertOrUpdateFlag = 1
+            this.activeName = 'insert_vehicle'
+
+            this.vehicleInfo = cloneDeep(this.tempCustomVehicleInfo.customVehicleInfoVos[this.selIndex])
+
+            this.vehicleInfo.customVehicleAddInfoVos = []
+
+            const {
+                isMainCar,
+                isPlateTmp,
+                salesStatus,
+
+                factoryCode,
+                brandCode,
+                seriesCode,
+                modelCode,
+                displayName,
+                carCode,
+                carModelCode,
+                engineNumber,
+
+                commercialInsuranceCompanyName,
+                compulsoryInsuranceCompanyName
+            } = this.vehicleInfo
+
+            this.vehicleInfo.isMainCar = !!isMainCar
+            this.isPlateTmp = !!isPlateTmp
+            this.salesStatus = !!salesStatus
+
+            this.$refs.carInfo.setValue({
+                factoryCode,
+                brandCode,
+                seriesCode,
+                modelCode,
+                carCode,
+                carModelCode,
+                engineNumber
+            })
+
+            this.$refs.search.setValue(commercialInsuranceCompanyName)
+            this.$refs._search.setValue(compulsoryInsuranceCompanyName)
+        },
+        /**
+         * info => 被校验的对象
+         * prop => 被校验的对象属性
+         * required => 是否校验必填, 默认必填
+         */
+        checkState({info, prop, required = true, regFlag = true}) {
+            const reg = {
+                mobilePhone: /^\d{11}$/,
+                email: new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"),
+                plateNumber: /^[\u4E00-\u9FA5A-Z0-9]{7,9}$/,
+                plateNumberTmp: /^[\u4E00-\u9FA5A-Z0-9]{7,9}$/,
+                vinCode: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{17}$/,
+            }
+            if(required && !this[info][prop]) {
+                this.checkStateInfo[prop].state = 'invalid'
+                return
+            }else if(!required && !this[info][prop]) {
+                this.checkStateInfo[prop].state = null
+                return
+            }else if(regFlag) {
+                if(!reg[prop].test(this[info][prop])) {
+                    this.checkStateInfo[prop].state = 'invalid'
+                    Message({
+                        type: 'warning',
+                        message: this.checkStateInfo[prop].message
+                    })
+                }else {
+                    this.checkStateInfo[prop].state = null
+                }
+            }else {
+                this.checkStateInfo[prop].state = null
+            }
+        },
+
+        resetState() {
+            const { keys } = Object
+            for(let key of keys(this.checkStateInfo)) {
+                this.checkStateInfo[key].state = null
+            }
+        },
+        formatDate(info) {
+            const { keys } = Object
+            for(let key of keys(info)) {
+                if((key.includes('birthday') || key.includes('Date')) && info[key]) {
+                    info[key] = new Date(info[key]).Format('yyyy-MM-dd')
+                }
+            }
+        },
+
+        // 各种失去焦点校验 => start
+        mobilePhoneBlur() {
+            this.checkState({
+                info: 'customInfo',
+                prop: 'mobilePhone' 
+            })
+          
+            if(!this.checkStateInfo.mobilePhone.state) {
+                this.queryCustomAndVehicle({
+                    carOwnerMobile: this.customInfo.mobilePhone
+                })
+            }
+        },
+        customNameBlur() {
+            this.checkState({
+                info: 'customInfo',
+                prop: 'customName',
+                regFlag: false
+            })
+        },
+        emailBlur() {
+            this.checkState({
+                info: 'customInfo',
+                prop: 'email',
+                required: false
+            })
+        },
+        plateNumberBlur(prop) {
+            this.vehicleInfo[prop] = this.vehicleInfo[prop].toUpperCase()
+            this.checkState({
+                info: 'vehicleInfo',
+                prop: prop,
+                required: true
+            })
+        },
+        vinCodeBlur() {
+            this.checkState({
+                info: 'vehicleInfo',
+                prop: 'vinCode',
+                required: true
+            })
+        },
+        // 各种失去焦点校验 => end
+
+        getCarInfo(info) {
+            const {
+                factoryCode,
+                brandCode,
+                seriesCode,
+                modelCode,
+                displayName,
+                engineNumber
+            } = info
+            this.vehicleInfo.factoryCode = factoryCode
+            this.vehicleInfo.brandCode = brandCode
+            this.vehicleInfo.seriesCode = seriesCode
+            this.vehicleInfo.modelCode = modelCode
+            this.vehicleInfo.displayName = displayName
+            this.vehicleInfo.engineNumber = engineNumber
+        },
+
+        checkBeforeSave() {
+            let res = true
+            // 手机号
+            this.checkState({
+                info: 'customInfo',
+                prop: 'mobilePhone' 
+            })
+            // 客户姓名
+            this.checkState({
+                info: 'customInfo',
+                prop: 'customName',
+                regFlag: false
+            })
+            if(this.activeName == 'insert_vehicle' && this.cardUseTypeCode == 'VehicleCard') {
+                
+                // 车牌未销售车辆的时候车牌不校验
+                if (!this.salesStatus) {
+                    this.checkState({
+                        info: 'vehicleInfo',
+                        prop: 'plateNumber',
+                        required: true
+                    })
+                } else {
+                    this.checkState({
+                        info: 'vehicleInfo',
+                        prop: 'plateNumber',
+                        required: false
+                    })
+                }
+                
+                // vin码
+                this.checkState({
+                    info: 'vehicleInfo',
+                    prop: 'vinCode',
+                    required: true
+                })
+
+                if(!this.vehicleInfo.factoryCode) {
+                    Message({
+                        type: 'warning',
+                        message: '车型主信息必填'
+                    })
+                    res = false
+                }
+
+            }
+
+            const { keys } = Object
+            for(let key of keys(this.checkStateInfo)) {
+                if(this.checkStateInfo[key].state) {
+                    res = false
+                    break
+                }
+            }
+
+            return res
+        },
+        
+        // 未销售车辆，车牌为空时 => vinCode 后8位赋值给车牌
+        setPlate() {
+            if (this.salesStatus && !this.vehicleInfo.plateNumber)
+                this.vehicleInfo.plateNumber = this.vehicleInfo.vinCode.slice(-8)
+        },
+
+        // 点击选择
+        selectBtnClick() {
+            
+            // 车主卡
+            if(!this.isVehicleCard) {
+               
+                const customParams = {...this.customInfo, customCategory: this.customInfo.customCategory ? 1 : 0 }
+                this.formatDate(customParams)      
+                // 新增车主信息
+                if(!this.tempCustomVehicleInfo.id) {
+                    if(!this.checkBeforeSave()) return
+                    getSequence(CUSTOM, res => {
+                        delete customParams.id
+                        customParams.customCode = res
+                        this.insertCustomInfo(customParams)
+                    })
+                }
+                // 编辑车主信息
+                else {
+                    if(!this.checkBeforeSave()) return
+                    customParams.id = this.tempCustomVehicleInfo.id
+                    customParams.customCode = this.tempCustomVehicleInfo.customCode                  
+                    this.updateCustomInfo(customParams)
+                }
+            }
+            // 车辆卡 => 查询结果是( 人套车 ), 新增或者编辑客户车辆是入参格式为( 车套人 )
+            else {
+                const customVehicleParams = {...this.vehicleInfo},
+                    { customVehicleInfoVos } = this.tempCustomVehicleInfo
+
+                // 新增客户车辆 => 无人
+                if(!this.tempCustomVehicleInfo.id) {
+                    if(!this.checkBeforeSave()) return
+                    this.setPlate()
+                    getSequence(CUSTOM, _customCode => {
+                        getSequence(CUSTOM_VEHICLE_SEQ, _vehicleCode => {
+                            delete customVehicleParams.id
+                            customVehicleParams.vehicleCode = _vehicleCode
+                            customVehicleParams.customCode = _customCode
+                            customVehicleParams.isMainCar = customVehicleParams.isMainCar ? 1 : 0
+                            customVehicleParams.isPlateTmp = this.isPlateTmp ? 1 : 0
+                            customVehicleParams.salesStatus = this.salesStatus ? 1 : 0
+                            customVehicleParams.plateNumber = this.vehicleInfo.plateNumber
+
+                            customVehicleParams.customInfoVo = {...this.customInfo}
+                            customVehicleParams.customInfoVo.customCategory = this.customInfo.customCategory ? 1 : 0
+                            delete customVehicleParams.customInfoVo.id
+                            customVehicleParams.customInfoVo.customCode = _customCode
+
+                            this.formatDate(customVehicleParams)
+                            this.formatDate(customVehicleParams.customInfoVo)
+
+                          
+                            this.insertCustomVehicleInfo(customVehicleParams, () => {
+                                const emitParams = {...customVehicleParams.customInfoVo},
+                                    vehicleInfo = {...customVehicleParams}
+                                    delete vehicleInfo.customInfoVo
+                                emitParams.customVehicleInfoVos = [{...vehicleInfo}]
+                                this.setCustomVehicleInfo(emitParams, true)
+                            })
+                            
+                        })
+                    })
+                }else {
+                    // 新增客户车辆 => 有人
+                    if(this.activeName == 'insert_vehicle') {
+                        if(!this.checkBeforeSave()) return                      
+                        this.setPlate()
+                        // 新增
+                        if(!this.insertOrUpdateFlag) {
+                            getSequence(CUSTOM_VEHICLE_SEQ, _vehicleCode => {
+                                delete customVehicleParams.id
+                                customVehicleParams.vehicleCode = _vehicleCode
+                                customVehicleParams.customCode = this.tempCustomVehicleInfo.customCode
+                                customVehicleParams.isMainCar = customVehicleParams.isMainCar ? 1 : 0
+                                customVehicleParams.isPlateTmp = this.isPlateTmp ? 1 : 0
+                                customVehicleParams.salesStatus = this.salesStatus ? 1 : 0
+                                customVehicleParams.plateNumber = this.vehicleInfo.plateNumber
+                                
+                                customVehicleParams.customInfoVo = {...this.customInfo}
+                                customVehicleParams.customInfoVo.customCategory = this.customInfo.customCategory ? 1 : 0
+                                customVehicleParams.customInfoVo.id = this.tempCustomVehicleInfo.id
+                                customVehicleParams.customInfoVo.customCode = this.tempCustomVehicleInfo.customCode
+
+                                
+                                this.formatDate(customVehicleParams)
+                                this.formatDate(customVehicleParams.customInfoVo)
+
+                            
+                                this.insertCustomVehicleInfo(customVehicleParams, () => {
+                                    const emitParams = {...customVehicleParams.customInfoVo},
+                                        vehicleInfo = {...customVehicleParams}
+                                        delete vehicleInfo.customInfoVo
+                                    emitParams.customVehicleInfoVos = [{...vehicleInfo}]
+                                    this.setCustomVehicleInfo(emitParams, true)
+                                })
+                                
+                            })
+                        }
+                        // 编辑
+                        else {
+                            const selCustomVehicleInfo = this.vehicleInfo
+                            
+                            !selCustomVehicleInfo.plateDate && (selCustomVehicleInfo.plateDate = '')
+                            !selCustomVehicleInfo.commercialInsuranceEndDate && (selCustomVehicleInfo.commercialInsuranceEndDate = '')
+                            !selCustomVehicleInfo.compulsoryInsuranceEndDate && (selCustomVehicleInfo.compulsoryInsuranceEndDate = '')
+                            !selCustomVehicleInfo.warrantyStartDate && (selCustomVehicleInfo.warrantyStartDate = '')
+                            !selCustomVehicleInfo.warrantyExpiryDate && (selCustomVehicleInfo.warrantyExpiryDate = '')
+
+                            this.assignment(customVehicleParams, selCustomVehicleInfo)                      
+                            customVehicleParams.id = selCustomVehicleInfo.id
+                            customVehicleParams.vehicleCode = selCustomVehicleInfo.vehicleCode
+                            customVehicleParams.customCode = this.tempCustomVehicleInfo.customCode
+                            customVehicleParams.isPlateTmp = +this.isPlateTmp
+                            customVehicleParams.salesStatus = +this.salesStatus
+                            customVehicleParams.plateNumber = selCustomVehicleInfo.plateNumber
+                            customVehicleParams.isMainCar = +customVehicleParams.isMainCar
+
+                            customVehicleParams.customInfoVo = {...this.customInfo}
+                            customVehicleParams.customInfoVo.customCategory = this.customInfo.customCategory ? 1 : 0
+                            customVehicleParams.customInfoVo.id = this.tempCustomVehicleInfo.id
+                            customVehicleParams.customInfoVo.customCode = this.tempCustomVehicleInfo.customCode
+
+                            this.formatDate(customVehicleParams)
+                            this.formatDate(customVehicleParams.customInfoVo)
+                            
+                            this.updateCustomVehicleInfo(customVehicleParams, () => {
+                                const emitParams = {...customVehicleParams.customInfoVo},
+                                    vehicleInfo = {...customVehicleParams}
+                                    delete vehicleInfo.customInfoVo
+                                emitParams.customVehicleInfoVos = [{...vehicleInfo}]
+                                this.setCustomVehicleInfo(emitParams, true)
+                            })
+                        }
+                    }
+                    // 编辑客户车辆 => 一人多车
+                    else if(this.activeName == 'vehicle_list') {
+                        const selCustomVehicleInfo = customVehicleInfoVos[this.selIndex]
+                        this.assignment(customVehicleParams, selCustomVehicleInfo)                      
+                        customVehicleParams.id = selCustomVehicleInfo.id
+                        customVehicleParams.vehicleCode = selCustomVehicleInfo.vehicleCode
+                        customVehicleParams.customCode = this.tempCustomVehicleInfo.customCode
+                        customVehicleParams.isPlateTmp = selCustomVehicleInfo.isPlateTmp
+                        customVehicleParams.salesStatus = selCustomVehicleInfo.salesStatus
+                        customVehicleParams.plateNumber = selCustomVehicleInfo.plateNumber
+
+                        customVehicleParams.customInfoVo = {...this.customInfo}
+                        customVehicleParams.customInfoVo.customCategory = this.customInfo.customCategory ? 1 : 0
+                        customVehicleParams.customInfoVo.id = this.tempCustomVehicleInfo.id
+                        customVehicleParams.customInfoVo.customCode = this.tempCustomVehicleInfo.customCode
+
+                        this.formatDate(customVehicleParams.customInfoVo)
+                        
+                        this.updateCustomVehicleInfo(customVehicleParams, () => {
+                            const emitParams = {...customVehicleParams.customInfoVo},
+                                vehicleInfo = {...customVehicleParams}
+                                delete vehicleInfo.customInfoVo
+                            emitParams.customVehicleInfoVos = [{...vehicleInfo}]
+                            this.setCustomVehicleInfo(emitParams, true)
+                        })
+                    }
+                }
+            }
+        },
+        setCustomVehicleInfo(params, isVehicleCard) {
+            const emitInfo = {...params}
+            delete emitInfo.id
+            // 做的完美一点就是把各种类型名称也抛出去
+            if(!isVehicleCard) {
+
+            }else {
+                // 车辆卡对外抛出对象信息
+            }
+            this.$emit('selectCusVehicleInfo', emitInfo)
+            this.hide()          
+        },
+
+        assignment(info, newInfo) {
+            const { keys } = Object
+            for (let key of keys(info)) {
+                info[key] = newInfo[key]
+            }
+        },
+
+        initModal(flag = true) {
+            if(flag) {
+                this.tempCustomVehicleInfo = {}
+                this.assignment(this.customInfo, {
+                    mobilePhone: this.customInfo.mobilePhone,
+                    customType: 'customTypeIndividualCus'
+                })
+            }
+            this.assignment(this.vehicleInfo, {
+                isMainCar: true,
+                customVehicleInfoVos: []
+            })
+            if(this.cardUseTypeCode == 'VehicleCard') {
+                this.$nextTick(() => {
+                    this.$refs.search.setValue()
+                    this.$refs._search.setValue()
+                    this.$refs.carInfo.initCarInfo()
+                })
+            }
+
+            this.isPlateTmp = false
+            this.salesStatus = false
+
+        },
+
+        queryCustomAndVehicle(params, sucess, error) {
+            // 查询前应该初始化一下
+            // !error && this.initModal()
+            api.mancar.queryCustomAndVehicle(params, res => {
+                const obj = res.data.obj
+                this.resetState()
+
+                sucess && sucess(obj)
+
+                if(res.data.code === 'success') {
+                    if(!obj || !obj.customVehicleInfoVos) {
+                        this.activeName = 'insert_vehicle'
+
+                        this.insertOrUpdateFlag = 0
+                    }else {
+                        this.activeName = 'vehicle_list'
+                    }
+                    if(obj) {
+                        const Vo = { ...obj, customCategory: obj.customCategory ? true : false }
+                        this.assignment(this.customInfo, Vo)
+                    }
+
+                    this.tempCustomVehicleInfo = {...obj} 
+
+                    // sucess && sucess(obj)
+                }else {
+                    error && error(res)
+                }
+            })
+        },
+
+        // 新增客户信息
+        insertCustomInfo(params) {
+            api.mancar.insertCustomInfo(params, res => {
+                if(res.data.code === 'success') {
+                    alertSuccess(res)
+                    this.setCustomVehicleInfo(params, false)
+                }
+            })
+        },
+        // 编辑客户信息
+        updateCustomInfo(params) {
+            api.mancar.updateCustomInfo(params, res => {
+                if(res.data.code === 'success') {
+                    alertSuccess(res)
+                    this.setCustomVehicleInfo(params, false)
+                }
+            })
+        },
+        // 新增客户车辆信息
+        insertCustomVehicleInfo(params, next) {
+            api.mancar.insertCustomVehicleInfo(params, res => {
+                if(res.data.code === 'success') {
+                    alertSuccess(res)
+                    next()
+                }
+            })
+        },
+        // 编辑客户车辆信息
+        updateCustomVehicleInfo(params, next) {
+            api.mancar.updateCustomVehicleInfo(params, res => {
+                if(res.data.code === 'success') {
+                    alertSuccess(res)
+                    next()
+                }
+            })
+        },
+
+        // 保险公司下拉搜索 => start
+        clearValue() {
+            this.vehicleInfo.commercialInsuranceCompanyCode = ''
+            this.vehicleInfo.commercialInsuranceCompanyName = ''
+        },
+        _clearValue() {
+            this.vehicleInfo.compulsoryInsuranceCompanyCode = ''
+            this.vehicleInfo.compulsoryInsuranceCompanyName = ''
+        },
+        firstLoad() {
+            if(this.selectParams.coName) {
+                delete this.selectParams.coName;
+            }else if(this.datalist.length !== 0) {
+                return;
+            }
+            let params = this.selectParams;     
+            this.querySerInfo(params, obj => {
+                this.isLastPage = obj.isLastPage;                            
+                this.datalist = obj.list;
+            });
+        },
+        querySelect(data) {
+            this.selectParams.pageStart = 1;
+            this.selectParams.coName = data;
+            let params = this.selectParams;        
+            this.querySerInfo(params, obj => {
+                this.isLastPage = obj.isLastPage;            
+                this.datalist = obj.list;
+            });
+        },
+        itemClick(item) {
+            this.vehicleInfo.commercialInsuranceCompanyCode = item.coCode
+            this.vehicleInfo.commercialInsuranceCompanyName = item.coName
+        },
+        _itemClick(item) {
+            this.vehicleInfo.compulsoryInsuranceCompanyCode = item.coCode
+            this.vehicleInfo.compulsoryInsuranceCompanyName = item.coName
+        },
+        scrollBottom(isEnd) {
+            if (isEnd && !this.isLastPage) {
+                this.selectParams.pageStart ++
+                let params = this.selectParams;        
+                this.querySerInfo(params, obj => {
+                    this.isLastPage = obj.isLastPage;
+                    this.datalist = this.datalist.concat(obj.list);
+                });
+            }
+        },
+        querySerInfo(params, callback) {
+            // 回头加权限
+            api.mancar.queryCompanyInfoByCodesAndPagination(params, res => {
+                if (res.data.code === "success") {
+                    let obj = res.data.obj;
+                    callback(obj);
+                }
+            })
+        },
+        // 保险公司下拉搜索 => end
+
+
+        getCertificateType() {
+            getType(CERTIFICATE_TYPE, items => {
+                this.certificateType = items.map(item => {
+                    return {
+                        text: item.refDetailName,
+                        value: item.refDetailCode
+                    }
+                })
+            })
+        },
+        getCustomerType() {
+            getType(CUSTOM_TYPE, items => {
+                this.customType = items.map(item => {
+                    return {
+                        text: item.refDetailName,
+                        value: item.refDetailCode
+                    }
+                })
+            })
+        },
+        beforeDestroy() {
+            clearTimeout(this.timer)
+        }
+    }
+}
+</script>
+<style>
+.car-list-btn {
+    position: absolute;
+    top: 8px;
+    left: 100px;
+}
+.add-car-btn {
+    position: absolute;
+    top: 8px;
+    left: 200px;
+}
+
+.custom-vehicle-modal .el-dialog {
+    top: 3% !important;
+}
+.custom-vehicle .el-tabs__content {
+    overflow: inherit !important;
+}
+</style>