lshcomment 1.0.0

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

@@ -0,0 +1,1216 @@
+<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="customInfo.mobilePhone" @blur.native="mobilePhoneBlur" :state="checkStateInfo.mobilePhone.state"/>
+                    </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="customInfo.customName" @blur.native="customNameBlur" :state="checkStateInfo.customName.state"/>
+                    </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="customInfo.idNo" />
+                    </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="customInfo.email" @blur.native="emailBlur" :state="checkStateInfo.email.state"/>
+                    </b-form-fieldset>
+                </div>
+            </div>
+        </b-card>
+        <!-- 车辆信息 -->
+        <b-card header="车辆信息" v-if="isVehicleCard">
+            <b-button size="sm" 
+                variant="primary" 
+                class="car-list-btn" 
+                v-show="showVehicleList"
+                @click="vehicleListBtnClick">
+                车辆列表
+            </b-button>   
+            <b-button size="sm" 
+                variant="success" 
+                class="add-car-btn"
+                @click="insertVehicleBtnClick" >
+                新增车辆
+            </b-button>  
+            <!-- 新增车辆信息 -->
+            <div v-show="!showVehicleList">
+                <div class="row">
+                    <div class="col-md-4">
+                        <b-form-fieldset horizontal label="车牌" :label-cols="4" class="text-right">
+                            <b-form-input v-model="vehicleInfo.plateNumber" 
+                                :state="checkStateInfo.plateNumber.state"
+                                :disabled="disabledPlateNumber" @blur.native="plateNumberBlur('plateNumber')"/>
+                        </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="vehicleInfo.plateNumberTmp" 
+                                :state="checkStateInfo.plateNumberTmp.state"
+                                @blur.native="plateNumberBlur('plateNumberTmp')"/>
+                        </b-form-fieldset>
+                    </div>
+                    <div class="col-md-4">
+                        <b-form-fieldset horizontal label="VIN码" :label-cols="4" class="text-right">
+                            <b-form-input v-model="vehicleInfo.vinCode" 
+                                :state="checkStateInfo.vinCode.state"
+                                @blur.native="vinCodeBlur" placeholder="请输入17位大写字母和数字"/>
+                        </b-form-fieldset>
+                    </div>
+                    <div class="col-md-12 text-right">
+                        <el-checkbox v-model="vehicleInfo.isMainCar">是否默认车辆</el-checkbox>
+                    </div>
+                </div>
+                <hr>
+                <p>添加车辆信息</p>
+                <hr>
+                <select-car-extend-prop 
+                    @getCarExtendInfo="getCarExtendInfo"
+                    ref="selectCarExtendProp">
+                </select-car-extend-prop>
+                <hr>
+                <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="选择日期">
+                            </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="选择日期">
+                            </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="选择日期">
+                            </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="选择日期">
+                            </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="选择日期">
+                            </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="vehicleInfo.inMileage"/>
+                        </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-input v-model="vehicleInfo.commercialInsuranceCompanyRemark" />
+                        </b-form-fieldset>
+                    </div>
+                    <div class="col-md-4">
+                        <b-form-fieldset horizontal label="车辆备注" :label-cols="4" class="text-right">
+                            <b-form-textarea id="textarea1" v-model="vehicleInfo.vehicleRemark">
+                            </b-form-textarea>
+                        </b-form-fieldset>
+                    </div>
+                </div>
+            </div>
+                
+            <!-- 车辆列表 -->
+            <div v-if="showVehicleList">
+                <el-table
+                    :data="tempCustomVehicleInfo.customVehicleInfoVos"
+                    tooltip-effect="dark"
+                    height="300"
+                    border>
+                        <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="plateNumberTmp"
+                            label="临牌"
+                            :min-width="120"
+                            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-column
+                            v-for="(item, i) in addlist"
+                            :key="i"
+                            :label="item.addName"
+                            :min-width="setWidth(item)"
+                            show-overflow-tooltip>
+                            <template slot-scope="scope">
+                                {{getAddValue(scope, item.addCode)}}
+                            </template>
+                        </el-table-column>
+                </el-table>
+            </div>
+
+        </b-card>
+        <div slot="footer" class="dialog-footer dialog-footer-cla">     
+            <b-button size="sm" variant="default" @click="hide">取消</b-button>
+            <b-button size="sm" variant="success" @click="selectBtnClick">选择</b-button>
+        </div>
+    </el-dialog>
+</div>
+</template>
+<script>
+import Vue from 'vue'
+import { Message, DatePicker, Dialog, Checkbox, Table, TableColumn, } from 'element-ui'
+Vue.use(Dialog)
+Vue.use(Checkbox)
+Vue.use(Table)
+Vue.use(TableColumn)
+Vue.use(DatePicker)
+
+import SelectCarExtendProp from 'components/select-car-extend-prop/select-car-extend-prop'
+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 } 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.prototype.format = function (format) {
+    //eg:format="yyyy-MM-dd hh:mm:ss";
+
+    if (!format) {
+        format = "yyyy-MM-dd hh:mm:ss";
+    }
+
+    var o = {
+        "M+": this.getMonth() + 1,  // month
+        "d+": this.getDate(),       // day
+        "H+": this.getHours(),      // hour
+        "h+": this.getHours(),      // hour
+        "m+": this.getMinutes(),    // minute
+        "s+": this.getSeconds(),    // second
+        "q+": Math.floor((this.getMonth() + 3) / 3), // quarter
+        "S": this.getMilliseconds()
+    };
+
+    if (/(y+)/.test(format)) {
+        format = format.replace(RegExp.$1, (this.getFullYear() + "")
+            .substr(4 - RegExp.$1.length));
+    }
+
+    for (var k in o) {
+        if (new RegExp("(" + k + ")").test(format)) {
+            format = format.replace(RegExp.$1, RegExp.$1.length == 1
+                ? o[k]
+                : ("00" + o[k]).substr(("" + o[k]).length));
+        }
+    }
+
+    return format;
+}
+
+/**
+ * date: 2018/10/10
+ * @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: {
+        SelectCarExtendProp,
+        Search
+    },
+    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: '',
+            },
+            // 车辆信息
+            vehicleInfo: {
+                plateNumber: '',
+                plateNumberTmp: '',
+                vinCode: '',
+                isMainCar: true,
+
+                plateDate: '',
+                commercialInsuranceEndDate: '',
+                compulsoryInsuranceEndDate: '',
+                warrantyStartDate: '',
+                warrantyExpiryDate: '',
+                inMileage: '',
+                
+                commercialInsuranceCompanyCode: '',
+                commercialInsuranceCompanyName: '',
+                compulsoryInsuranceCompanyCode: '',
+                compulsoryInsuranceCompanyName: '',
+                commercialInsuranceCompanyRemark: '',
+                vehicleRemark: '',
+
+                factoryCode: '',
+                brandCode: '',
+                seriesCode: '',
+                modelCode: '',
+                displayName: '', 
+
+                customVehicleAddInfoVos: []    // 车型扩展属性
+            },
+
+            extendList: [],            // 扩展属性列表
+
+            tempCustomVehicleInfo: {},
+            
+            showVehicleList: false,    // 是否显示车辆列表
+            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码输入格式不正确'
+                },
+            },
+
+            insertClicked: false
+        }
+    },
+    mounted() {
+        // 获取证件类型列表
+        this.getCertificateType()
+        // 获取客户类型列表
+        this.getCustomerType()
+    },
+    computed: {
+        addlist() {
+            let list = []
+            if(!this.tempCustomVehicleInfo || !this.tempCustomVehicleInfo.customVehicleInfoVos) {
+                return []
+            }
+            this.tempCustomVehicleInfo.customVehicleInfoVos.forEach(item => { 
+                list = list.concat(item.customVehicleAddInfoVos || [])
+            })
+            return filter(list, 'addCode')
+        },
+        // 区分车辆卡还是车主卡
+        isVehicleCard() {
+            return this.cardUseTypeCode === 'VehicleCard'
+        },
+        // 车牌号一旦录入就不可更改
+        disabledPlateNumber() {
+            const { customVehicleInfoVos } = this.tempCustomVehicleInfo
+            if(customVehicleInfoVos) {
+                if(customVehicleInfoVos.length == 1 
+                    && this.vehicleInfo.plateNumber
+                    && !this.insertClicked) {
+                    return true
+                }else {
+                    return false
+                }
+            }else {
+                return false
+            }
+        }
+    },
+    methods: {
+        show(queryInfo = null) {
+            this.initModal()
+            this.dialogVisible = true
+            if(queryInfo != null) {
+                const {customCode, mobilePhone, vehicleCode, plateNumberOrVin, plateNumber, plateNumberTmp, vinCode} = queryInfo
+                this.queryCustomAndVehicle({
+                    customCode: customCode,
+                    carOwnerMobile: mobilePhone,
+                    vehicleCode: vehicleCode,
+                    plateNumberOrVin: plateNumberOrVin,   // 车牌号或VIN码或VIN后6位
+                    plateNumber: plateNumber,
+                    plateNumberTmp: plateNumberTmp,
+                    vinCode: vinCode
+                }, () => {
+                    this.customInfo.mobilePhone = mobilePhone
+                    this.vehicleInfo.plateNumber = plateNumber
+                    this.vehicleInfo.plateNumberTmp = plateNumberTmp                    
+                    this.vehicleInfo.vinCode = vinCode
+                })
+            }
+        },
+        hide() {
+            this.dialogVisible = false
+        },
+
+        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
+                    }
+                })
+            })
+        },
+
+        getAddValue(scope, addCode) {
+            let sublist = scope.row.customVehicleAddInfoVos
+            if(sublist) {
+                for(let i = 0; i < sublist.length; i ++) {
+                    if(addCode === sublist[i].addCode) {
+                        return sublist[i].addValue
+                    }
+                }
+            }
+        },
+        setWidth(item) {
+            if(item.addName) {
+                if(item.addName.length === 2) {
+                    return 100
+                }
+                return item.addName.length * 26
+            }
+        },
+        /**
+         * 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: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4,6}[A-Z0-9挂学警港澳]{1}$/,
+                // plateNumber: /(^[\u4E00-\u9FA5]{1}[A-Z0-9]{6}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9\u4E00-\u9FA5]{1}[A-Z0-9]{4}$)|(^[\u4E00-\u9FA5]{1}[A-Z0-9]{5}[挂学警军港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9挂学警军港澳]{1}$)/,
+                
+                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
+            }
+        },
+        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')
+                }
+            }
+        },
+ 
+        // 点击车辆列表
+        vehicleListBtnClick() {
+            this.queryCustomAndVehicle({
+                carOwnerMobile: this.customInfo.mobilePhone
+            })
+            this.showVehicleList = true
+        },
+        // 点击新增车辆
+        insertVehicleBtnClick() {
+            this.showVehicleList = false
+            this.insertClicked = true
+
+            this.assignment(this.vehicleInfo, {
+                isMainCar: true,
+                customVehicleInfoVos: []
+            })
+            this.$refs.selectCarExtendProp.reset()
+
+            this.$refs.search.setValue()
+            this.$refs._search.setValue()
+
+            this.selIndex = 0
+        },
+
+        isMainCarInfoChange(customVehicleInfoVos) {
+            let res = false
+            const carInfoProps = ['factoryCode', 'brandCode', 'seriesCode', 'modelCode', 'displayName']
+            carInfoProps.forEach(key => {
+                if(this.vehicleInfo[key] !== customVehicleInfoVos[0][key]) {
+                    res = true
+                }
+            })
+            return res
+        },
+        getCarExtendInfo(carInfo, extendInfo) {
+            for(let key in carInfo) {
+                if(key.includes('Code') || key == 'displayName') {
+                    this.vehicleInfo[key] = carInfo[key]
+                }
+            }
+            if(extendInfo.length) {
+            	this.extendList = extendInfo
+            }
+            // 如果主车型发生变化了, 清空已选扩展属性
+            // const { customVehicleInfoVos } = this.tempCustomVehicleInfo
+            // if(customVehicleInfoVos.length == 1 && this.isMainCarInfoChange(customVehicleInfoVos)) {
+            //     this.$refs.selectCarExtendProp.setValue(carInfo, [])
+            // }
+        },
+
+        // 各种失去焦点校验 => 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: false
+            })
+        },
+        vinCodeBlur() {
+            this.checkState({
+                info: 'vehicleInfo',
+                prop: 'vinCode',
+                required: false
+            })
+        },
+        // 各种失去焦点校验 => end
+
+        // 点击选择
+        selectBtnClick() {
+            // 车主卡
+            if(!this.isVehicleCard) {
+                const customParams = {...this.customInfo}
+                this.formatDate(customParams)                
+                // 新增车主信息
+                if(!this.tempCustomVehicleInfo.id) {
+                    getSequence(CUSTOM, res => {
+                        delete customParams.id
+                        customParams.customCode = res
+                        this.insertCustomInfo(customParams)
+                    })
+                }
+                // 编辑车主信息
+                else {
+                    customParams.id = this.tempCustomVehicleInfo.id
+                    customParams.customCode = this.tempCustomVehicleInfo.customCode                  
+                    this.updateCustomInfo(customParams)
+                }
+            }
+            // 车辆卡 => 查询结果是( 人套车 ), 新增或者编辑客户车辆是入参格式为( 车套人 )
+            else {
+                this.$refs.selectCarExtendProp.requireCheck()
+                const customVehicleParams = {...this.vehicleInfo},
+                    { customVehicleInfoVos } = this.tempCustomVehicleInfo
+                if(!this.showVehicleList && !customVehicleParams.displayName) {
+                    Message({
+                        type: 'warning',
+                        message: '车型主信息必填'
+                    })
+                    return
+                }
+                const { plateNumber, plateNumberTmp } = this.vehicleInfo
+                if(!this.showVehicleList && !plateNumber && !plateNumberTmp) {
+                    Message({
+                        type: 'warning',
+                        message: '车牌和临牌必填一个'
+                    })
+                    return
+                }
+                // 新增客户车辆 => 无人无车
+                if(!this.tempCustomVehicleInfo.id) {
+                    getSequence(CUSTOM, _customCode => {
+                        getSequence(CUSTOM_VEHICLE_SEQ, _vehicleCode => {
+                            delete customVehicleParams.id
+                            customVehicleParams.vehicleCode = _vehicleCode
+                            customVehicleParams.customCode = _customCode
+                            customVehicleParams.isMainCar = customVehicleParams.isMainCar ? 1 : 0
+
+                            customVehicleParams.customInfoVo = {...this.customInfo}
+                            delete customVehicleParams.customInfoVo.id
+                            customVehicleParams.customInfoVo.customCode = _customCode
+
+                            this.formatDate(customVehicleParams)
+                            this.formatDate(customVehicleParams.customInfoVo)
+
+                            if(this.extendList.length) {
+                                const seqListParams = {
+                                    serviceCode: CUSTOM_VEHICLE_ADD_SEQ,
+                                    getNums: this.extendList.length
+                                },
+                                carCodeParams = {
+                                    factoryCode: customVehicleParams.factoryCode,
+                                    brandCode: customVehicleParams.brandCode,
+                                    seriesCode: customVehicleParams.seriesCode,
+                                    modelCode: customVehicleParams.modelCode,
+                                    displayName: customVehicleParams.displayName
+                                }
+
+                                this.getMainCarInfo(carCodeParams, obj => {
+                                    getSequenceList(seqListParams, carDetailCodes => {
+                                        customVehicleParams.customVehicleAddInfoVos = []
+                                        this.extendList.forEach((item, i) => {
+                                            customVehicleParams.customVehicleAddInfoVos.push({
+                                                carCode: obj[0].carCode,
+                                                addCode: item.propCode,
+                                                addValue: item.selectedProps[0],
+                                                vehicleCode: _vehicleCode,
+                                                carDetailCode: carDetailCodes[i]
+                                            })
+                                        })
+                                        
+                                        this.insertCustomVehicleInfo(customVehicleParams, () => {
+                                            const emitParams = {...customVehicleParams.customInfoVo},
+                                                vehicleInfo = {...customVehicleParams}
+                                                delete vehicleInfo.customInfoVo
+                                            emitParams.customVehicleInfoVos = [{...vehicleInfo}]
+                                            this.setCustomVehicleInfo(emitParams, true)
+                                        })
+
+                                    })
+                                })
+                            }else {
+                                this.insertCustomVehicleInfo(customVehicleParams, () => {
+                                    const emitParams = {...customVehicleParams.customInfoVo},
+                                        vehicleInfo = {...customVehicleParams}
+                                        delete vehicleInfo.customInfoVo
+                                    emitParams.customVehicleInfoVos = [{...vehicleInfo}]
+                                    this.setCustomVehicleInfo(emitParams, true)
+                                })
+                            }
+                            
+                        })
+                    })
+                }else {
+                    // 新增客户车辆 => 一人无车 或者 任何情况下点击了新增车辆
+                    if((!this.showVehicleList && !customVehicleInfoVos) || this.insertClicked) {
+                        getSequence(CUSTOM_VEHICLE_SEQ, _vehicleCode => {
+                            delete customVehicleParams.id
+                            customVehicleParams.vehicleCode = _vehicleCode
+                            customVehicleParams.customCode = this.tempCustomVehicleInfo.customCode
+                            customVehicleParams.isMainCar = customVehicleParams.isMainCar ? 1 : 0
+
+                            customVehicleParams.customInfoVo = {...this.customInfo}
+                            customVehicleParams.customInfoVo.id = this.tempCustomVehicleInfo.id
+                            customVehicleParams.customInfoVo.customCode = this.tempCustomVehicleInfo.customCode
+
+                            
+                            this.formatDate(customVehicleParams)
+                            this.formatDate(customVehicleParams.customInfoVo)
+
+                            if(this.extendList.length) {
+                                const seqListParams = {
+                                    serviceCode: CUSTOM_VEHICLE_ADD_SEQ,
+                                    getNums: this.extendList.length
+                                },
+                                carCodeParams = {
+                                    factoryCode: customVehicleParams.factoryCode,
+                                    brandCode: customVehicleParams.brandCode,
+                                    seriesCode: customVehicleParams.seriesCode,
+                                    modelCode: customVehicleParams.modelCode,
+                                    displayName: customVehicleParams.displayName
+                                }
+
+                                this.getMainCarInfo(carCodeParams, obj => {
+                                    getSequenceList(seqListParams, carDetailCodes => {
+                                        customVehicleParams.customVehicleAddInfoVos = []
+                                        this.extendList.forEach((item, i) => {
+                                            customVehicleParams.customVehicleAddInfoVos.push({
+                                                carCode: obj[0].carCode,
+                                                addCode: item.propCode,
+                                                addValue: item.selectedProps[0],
+                                                vehicleCode: _vehicleCode,
+                                                carDetailCode: carDetailCodes[i]
+                                            })
+                                        })
+                                        
+                                        this.insertCustomVehicleInfo(customVehicleParams, () => {
+                                            const emitParams = {...customVehicleParams.customInfoVo},
+                                                vehicleInfo = {...customVehicleParams}
+                                                delete vehicleInfo.customInfoVo
+                                            emitParams.customVehicleInfoVos = [{...vehicleInfo}]
+                                            this.setCustomVehicleInfo(emitParams, true)
+                                        })
+                                    })
+                                })
+                            }else {
+                                this.insertCustomVehicleInfo(customVehicleParams, () => {
+                                    const emitParams = {...customVehicleParams.customInfoVo},
+                                        vehicleInfo = {...customVehicleParams}
+                                        delete vehicleInfo.customInfoVo
+                                    emitParams.customVehicleInfoVos = [{...vehicleInfo}]
+                                    this.setCustomVehicleInfo(emitParams, true)
+                                })
+                            }
+                            
+                        })
+                    }
+                    // 编辑客户车辆 => 一人一车
+                    if(!this.showVehicleList && customVehicleInfoVos.length == 1 && !this.insertClicked) {
+                        const selCustomVehicleInfo = customVehicleInfoVos[0]
+
+                        customVehicleParams.id = selCustomVehicleInfo.id
+                        customVehicleParams.vehicleCode = selCustomVehicleInfo.vehicleCode
+                        customVehicleParams.customCode = this.tempCustomVehicleInfo.customCode
+                        customVehicleParams.isMainCar = customVehicleParams.isMainCar ? 1 : 0
+
+                        customVehicleParams.customInfoVo = {...this.customInfo}
+                        customVehicleParams.customInfoVo.id = this.tempCustomVehicleInfo.id
+                        customVehicleParams.customInfoVo.customCode = this.tempCustomVehicleInfo.customCode
+
+                        this.formatDate(customVehicleParams)
+                        this.formatDate(customVehicleParams.customInfoVo)
+
+                        this.getCarAddInfoParams(customVehicleParams).then(({count, tempArr}) => {
+                            // 存在新的扩展属性
+                            if(count > 0) {
+                                const seqListParams = {
+                                    serviceCode: CUSTOM_VEHICLE_ADD_SEQ,
+                                    getNums: count
+                                },
+                                carCodeParams = {
+                                    factoryCode: customVehicleParams.factoryCode,
+                                    brandCode: customVehicleParams.brandCode,
+                                    seriesCode: customVehicleParams.seriesCode,
+                                    modelCode: customVehicleParams.modelCode,
+                                    displayName: customVehicleParams.displayName
+                                }
+
+                                this.getMainCarInfo(carCodeParams, obj => {
+                                    getSequenceList(seqListParams, carDetailCodes => {
+                                        tempArr.forEach((item, i) => {
+                                            customVehicleParams.customVehicleAddInfoVos.push({
+                                                carCode: obj[0].carCode,
+                                                addCode: item.propCode,
+                                                addValue: item.selectedProps[0],
+                                                vehicleCode: customVehicleParams.vehicleCode,
+                                                carDetailCode: carDetailCodes[i]
+                                            })
+                                        })
+                                        this.updateCustomVehicleInfo(customVehicleParams, () => {
+                                            const emitParams = {...customVehicleParams.customInfoVo},
+                                                vehicleInfo = {...customVehicleParams}
+                                                delete vehicleInfo.customInfoVo
+                                            emitParams.customVehicleInfoVos = [{...vehicleInfo}]
+                                            this.setCustomVehicleInfo(emitParams, true)
+                                        })
+                                    })
+                                })
+                            }
+                            // 扩展属性没变或者减少
+                            else {
+                                this.updateCustomVehicleInfo(customVehicleParams, () => {
+                                    const emitParams = {...customVehicleParams.customInfoVo},
+                                        vehicleInfo = {...customVehicleParams}
+                                        delete vehicleInfo.customInfoVo
+                                    emitParams.customVehicleInfoVos = [{...vehicleInfo}]
+                                    this.setCustomVehicleInfo(emitParams, true)
+                                })
+                            }
+                        })
+                    }
+                    // 编辑客户车辆 => 一人多车
+                    if(this.showVehicleList && !this.insertClicked) {
+                        const selCustomVehicleInfo = customVehicleInfoVos[this.selIndex]
+
+                        this.assignment(customVehicleParams, selCustomVehicleInfo)
+
+                        customVehicleParams.id = selCustomVehicleInfo.id
+                        customVehicleParams.vehicleCode = selCustomVehicleInfo.vehicleCode
+                        customVehicleParams.customCode = this.tempCustomVehicleInfo.customCode
+
+                        customVehicleParams.customInfoVo = {...this.customInfo}
+                        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()          
+        },
+        getCarAddInfoParams(cusCarParams) {
+            return new Promise(resolve => {
+                const { customVehicleAddInfoVos } = this.tempCustomVehicleInfo.customVehicleInfoVos[0]
+                cusCarParams.customVehicleAddInfoVos = customVehicleAddInfoVos || []
+                cusCarParams.customVehicleAddInfoVos.forEach(item => {
+                    let i = this.extendList.findIndex(v => v.propCode === item.addCode)
+                    if(i === -1) {
+                        item.isDeleted = 1
+                    }else {
+                        item.addValue = this.extendList[i].selectedProps[0]
+                    }
+                })
+                let params = {
+                    count: 0,
+                    tempArr: []
+                } 
+            
+                this.extendList.forEach(item => {
+                    let i = cusCarParams.customVehicleAddInfoVos.findIndex(v => v.addCode === item.propCode)
+                    if(i === -1) {
+                        params.count++
+                        params.tempArr.push(item)
+                    }else {
+                        cusCarParams.customVehicleAddInfoVos[i].addCode = item.propCode
+                        cusCarParams.customVehicleAddInfoVos[i].addName = item.propName
+                        cusCarParams.customVehicleAddInfoVos[i].addValue = item.selectedProps[0]
+                    }
+                })
+                resolve(params)
+            })
+        },
+        // 根据主车型获取carCode
+        getMainCarInfo(params, next) {
+            api.storeManage.getCarStyles(params, res => {
+                if(res.data.code === 'success') {
+                    next(res.data.obj)
+                }
+            })
+        },
+
+        assignment(info, newInfo) {
+            const { keys } = Object
+            for (let key of keys(info)) {
+                info[key] = newInfo[key]
+            }
+        },
+
+        initModal() {
+            this.tempCustomVehicleInfo = {}
+            this.assignment(this.customInfo, {
+                mobilePhone: this.customInfo.mobilePhone,
+                customType: 'customTypeIndividualCus'
+            })
+            this.assignment(this.vehicleInfo, {
+                isMainCar: true,
+                customVehicleInfoVos: []
+            })
+            this.showVehicleList = false
+            this.insertClicked = false
+            this.extendList = []
+            this.$nextTick(() => {
+                this.$refs.selectCarExtendProp.reset()
+                this.$refs.search.setValue()
+                this.$refs._search.setValue()
+            })
+        },
+
+        queryCustomAndVehicle(params, next = () => {}) {
+            // 查询前应该初始化一下
+            this.initModal()
+            api.mancar.queryCustomAndVehicle(params, res => {
+                const obj = res.data.obj
+                if(res.data.code === 'success' && obj) {
+                    const { customVehicleInfoVos } = obj
+                    this.tempCustomVehicleInfo = {...obj}
+
+                    this.assignment(this.customInfo, obj)
+                    // 有人无车
+                    if(customVehicleInfoVos == null) {
+                        this.assignment(this.vehicleInfo, {
+                            isMainCar: true,
+                            customVehicleInfoVos: []
+                        })
+                        this.showVehicleList = false
+                    }
+                    // 有人一车
+                    else if(customVehicleInfoVos.length == 1) {
+                        this.assignment(this.vehicleInfo, customVehicleInfoVos[0])
+                        this.vehicleInfo.isMainCar = this.vehicleInfo.isMainCar == 1 ? true : false
+                        const carInfo = {
+                            factoryCode: this.vehicleInfo.factoryCode,
+                            brandCode: this.vehicleInfo.brandCode,
+                            seriesCode: this.vehicleInfo.seriesCode,
+                            modelCode: this.vehicleInfo.modelCode,
+                            displayName: this.vehicleInfo.displayName
+                        },
+                        extendProps = customVehicleInfoVos[0].customVehicleAddInfoVos || []
+                        let _extendList = [] 
+                        _extendList = extendProps.map(item => {
+                            return {
+                                propName: item.addName,
+                                propCode: item.addCode,
+                                selectedProps: [item.addValue]
+                            }
+                        })
+                        this.$refs.selectCarExtendProp.setValue(carInfo, _extendList)
+
+                        this.$refs.search.setValue(customVehicleInfoVos[0].commercialInsuranceCompanyName)
+                        this.$refs._search.setValue(customVehicleInfoVos[0].compulsoryInsuranceCompanyName)
+
+                        this.showVehicleList = false
+                    }
+                    // 有人多车
+                    else if(customVehicleInfoVos.length > 1) {
+                        this.assignment(this.vehicleInfo, {})
+                        this.showVehicleList = true
+                    }
+                }else {
+                    next()
+                }
+            })
+        },
+
+        // 新增客户信息
+        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
+    }
+}
+</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;
+}
+</style>