463 lines
20 KiB
Vue
463 lines
20 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-dialog title="客户信息" ref="dialogRef" :visible.sync="dialogVisible" width="80%" v-dialogDrag append-to-body v-loading="dialogLoading">
|
|
<el-form size="small" ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading"
|
|
label-width="100px">
|
|
<el-collapse v-model="activeNames">
|
|
<!--客户基本信息面板-->
|
|
<el-collapse-item title="客户基本信息" name="1">
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="客户名称" prop="userInfo.cusName">
|
|
<el-input v-model="formData.userInfo.cusName" placeholder="请输入客户名称"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="客户类型" prop="userInfo.typeCode">
|
|
<el-select v-model="formData.userInfo.typeCode" placeholder="请选择客户类型">
|
|
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_CUS_TYPE)" :key="dict.value"
|
|
:label="dict.label" :value="dict.value"/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item v-if="formData.userInfo.typeCode !== '03'" label="身份证号" prop="userInfo.idCard">
|
|
<el-input v-model="formData.userInfo.idCard" placeholder="请输入客户身份证号"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item v-if="formData.userInfo.typeCode !== '03'" label="性别" prop="userInfo.sex">
|
|
<el-radio-group v-model="formData.userInfo.sex">
|
|
<el-radio v-for="dict in sexDictDatas" :key="dict.value" :label="dict.value">
|
|
{{ dict.label }}
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item v-if="formData.userInfo.typeCode !== '03'" label="生日" prop="userInfo.birthday">
|
|
<el-date-picker v-model="formData.userInfo.birthday" type="date" placeholder="选择日期">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="联系方式" prop="userInfo.phoneNumber">
|
|
<el-input v-model="formData.userInfo.phoneNumber" placeholder="请输入客户联系方式"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="2">
|
|
<el-col :span="12">
|
|
<el-form-item label="客户来源" prop="userInfo.dataFrom">
|
|
<el-select v-model="formData.userInfo.dataFrom" placeholder="请选择客户来源">
|
|
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_CUS_DATA_FROM)" :key="dict.value"
|
|
:label="dict.label" :value="dict.value"/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="注册方式" prop="userInfo.inviterType">
|
|
<el-select v-model="formData.userInfo.inviterType" placeholder="请选择注册方式">
|
|
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_SIGN_TYPE)" :key="dict.value"
|
|
:label="dict.label" :value="dict.value"/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- <el-row :gutter="2">-->
|
|
<!-- <el-col :span="12">-->
|
|
<!-- <el-form-item label="选择会员" prop="userInfo.memberLevelId">-->
|
|
<!-- <el-select v-model="formData.userInfo.memberLevelId" placeholder="请选择会员">-->
|
|
<!-- <el-option v-for="(item,index) in levelList" :key="item.id"-->
|
|
<!-- :label="item.name" :value="item.id"/>-->
|
|
<!-- </el-select>-->
|
|
<!-- </el-form-item>-->
|
|
<!-- </el-col>-->
|
|
<!-- </el-row>-->
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-form-item label="联系地址" prop="userInfo.address">
|
|
<el-input type="textarea" v-model="formData.userInfo.address" placeholder="请输入客户联系地址"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-collapse-item>
|
|
<el-collapse-item v-if="formData.userInfo.typeCode !== '03'" title="身份证件信息" name="2">
|
|
<el-row>
|
|
<el-col>
|
|
<el-form-item>
|
|
<ImageUpload v-model="formData.userInfo.idCardImage"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-collapse-item>
|
|
<el-collapse-item title="车辆基本信息" name="3">
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<el-form-item label="车牌号" prop="carInfo.licenseNumber">
|
|
<el-input v-model="formData.carInfo.licenseNumber" placeholder="请输入车牌号"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="发动机号码" prop="carInfo.engineNumber">
|
|
<el-input v-model="formData.carInfo.engineNumber" placeholder="请输入发动机号码"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="车架号" prop="carInfo.vin">
|
|
<el-input v-model="formData.carInfo.vin" placeholder="请输入车架号"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<el-form-item label="车辆品牌" prop="carInfo.brandAndModel">
|
|
<CarBrandSelector v-model="formData.carInfo.brandAndModel" ref="brandForm"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="车辆型号" prop="carInfo.carModel">
|
|
<el-input type="text" v-model="formData.carInfo.carModel" placeholder="请输入车辆型号" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="车辆类别" prop="carInfo.carCategory">
|
|
<el-select v-model="formData.carInfo.carCategory" placeholder="请选择车辆类别">
|
|
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_CAR_CATEGORY)" :key="dict.value"
|
|
:label="dict.label" :value="dict.value"/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<el-form-item label="车辆性质" prop="carInfo.carNature">
|
|
<el-select v-model="formData.carInfo.carNature" placeholder="请选择车辆性质">
|
|
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_CAR_NATURE)" :key="dict.value"
|
|
:label="dict.label" :value="dict.value"/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="注册日期" prop="carInfo.carRegisterDate">
|
|
<el-date-picker clearable v-model="formData.carInfo.carRegisterDate" type="date" value-format="timestamp"
|
|
placeholder="选择车辆注册日期"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-collapse-item>
|
|
<el-collapse-item title="车辆业务信息" name="4">
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<el-form-item label="最近办理业务" prop="carInfo.recentlyHandledBusiness">
|
|
<el-select v-model="formData.carInfo.recentlyHandledBusiness" placeholder="请选择业务类别" clearable>
|
|
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.DICT_CUS_BUSI_TYPE)" :key="dict.value"
|
|
:label="dict.label" :value="dict.value"/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="最近业务时间" prop="carInfo.recentlyHandleBusinessTime">
|
|
<el-date-picker clearable v-model="formData.carInfo.recentlyHandleBusinessTime" type="date"
|
|
value-format="timestamp" placeholder="选择最近办理业务的时间"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="二级维护时间" prop="carInfo.checkDate">
|
|
<el-date-picker clearable v-model="formData.carInfo.checkDate" type="date" value-format="timestamp"
|
|
placeholder="选择二级维护时间"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<el-form-item label="保养日期" prop="carInfo.maintenanceDate">
|
|
<el-date-picker clearable v-model="formData.carInfo.maintenanceDate" type="date" value-format="timestamp"
|
|
placeholder="选择保养日期"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="年检日期" prop="carInfo.inspectionDate">
|
|
<el-date-picker clearable v-model="formData.carInfo.inspectionDate" type="date" value-format="timestamp"
|
|
placeholder="选择年检日期"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="保险日期" prop="carInfo.insuranceDate">
|
|
<el-date-picker clearable v-model="formData.carInfo.insuranceDate" type="date" value-format="timestamp"
|
|
placeholder="选择保险日期"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<el-form-item label="保养里程" prop="carInfo.maintenanceMileage">
|
|
<el-input v-model="formData.carInfo.maintenanceMileage" placeholder="请输入保养里程"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="16">
|
|
<el-button :loading="buttonLoading" icon="el-icon-date" @click="compute" size="small" type="primary">计算</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</el-collapse-item>
|
|
<el-collapse-item title="测算" name="5">
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<el-form-item label="保险到期时间" prop="carInfo.insuranceExpiryDate">
|
|
<el-date-picker clearable v-model="formData.carInfo.insuranceExpiryDate" type="date" value-format="timestamp"
|
|
placeholder="选择下次保险时间"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="下次年检时间" prop="carInfo.nextInspectionDate">
|
|
<el-date-picker clearable v-model="formData.carInfo.nextInspectionDate" type="date" value-format="timestamp"
|
|
placeholder="选择下次年检时间"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="下次保养时间" prop="carInfo.nextMaintenanceDate">
|
|
<el-date-picker clearable v-model="formData.carInfo.nextMaintenanceDate" type="date" value-format="timestamp"
|
|
placeholder="选择下次保养时间"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="下次保养里程" prop="carInfo.nextMaintenanceMileage">
|
|
<el-input v-model="formData.carInfo.nextMaintenanceMileage" placeholder="请输入下次保养里程"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-collapse-item>
|
|
<el-collapse-item title="附件信息" name="6">
|
|
<el-form-item>
|
|
<ImageUpload v-model="formData.carInfo.carLicenseImg"/>
|
|
</el-form-item>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
|
|
import CarBrandSelector from "@/layout/components/CarBrandSelector/index.vue";
|
|
import {getLevelAll} from "@/api/member/level";
|
|
import {updateCustomerAndCar} from "@/api/repair/tickets/Tickets";
|
|
import * as CarMainApi from "@/api/base/carmain";
|
|
|
|
export default {
|
|
name: "UserAndCarForm",
|
|
components: {CarBrandSelector},
|
|
data() {
|
|
return {
|
|
dialogVisible: false,
|
|
formData: {
|
|
userInfo: {
|
|
memberLevelId: undefined,
|
|
id: undefined,
|
|
userId: undefined,
|
|
typeCode: '01',
|
|
deptCode: undefined,
|
|
cusName: undefined,
|
|
phoneNumber: undefined,
|
|
birthday: undefined,
|
|
address: undefined,
|
|
sex: '1',
|
|
idCard: undefined,
|
|
idCardImage: undefined,
|
|
dataFrom: '08',
|
|
nearDoTime: undefined,
|
|
nearDoContent: undefined,
|
|
inviter: undefined,
|
|
inviterType: '01',
|
|
status: undefined,
|
|
itemList: [
|
|
{
|
|
systemCode: '',
|
|
serContent: '',
|
|
serTimeStart: '',
|
|
serTimeEnd: ''
|
|
}
|
|
],
|
|
},
|
|
carInfo: {
|
|
id: undefined,
|
|
engineNumber: undefined,
|
|
vin: undefined,
|
|
licenseNumber: undefined,
|
|
brandAndModel: [],
|
|
maintenanceDate: undefined,
|
|
maintenanceMileage: undefined,
|
|
inspectionDate: undefined,
|
|
insuranceDate: undefined,
|
|
checkDate: undefined,
|
|
carBrand: undefined,
|
|
carNature: undefined,
|
|
carRegisterDate: undefined,
|
|
carLicenseImg: undefined,
|
|
carCategory: undefined,
|
|
insuranceExpiryDate: undefined,
|
|
nextInspectionDate: undefined,
|
|
nextMaintenanceDate: undefined,
|
|
nextMaintenanceMileage: undefined,
|
|
carModel: undefined
|
|
}
|
|
},
|
|
formRules: {
|
|
'userInfo.cusName':[{required: true, message: "客户名称不能为空", trigger: 'blur'}],
|
|
'userInfo.phoneNumber': [{required: true, message: "联系方式不能为空", trigger: 'blur'}],
|
|
'carInfo.licenseNumber': [{required: true, message: "车牌号不能为空", trigger: 'blur'}],
|
|
'carInfo.brandAndModel': [{required: true, message: "品牌型号不能为空", trigger: 'blur'}],
|
|
'carInfo.carCategory': [{required: true, message: '车辆类别不能为空', trigger: 'blur'}],
|
|
'carInfo.carNature': [{required: true, message: '车辆性质不能为空', trigger: 'blur'}],
|
|
'carInfo.carModel': [{required: true, message: '车辆型号不能为空', trigger: 'blur'}]
|
|
},
|
|
formLoading: false,
|
|
//折叠面板默认展开
|
|
activeNames: ['1', '2', '3', '4', '5', '6'],
|
|
levelList: [],
|
|
// 性别数据字典
|
|
sexDictDatas: getDictDatas(DICT_TYPE.DICT_SYS_USER_SEX),
|
|
cusBusiTypeDictDatas: getDictDatas(DICT_TYPE.DICT_CUS_BUSI_TYPE),
|
|
buttonLoading: false,
|
|
dialogLoading: null,
|
|
}
|
|
},
|
|
methods: {
|
|
async open(data) {
|
|
this.dialogVisible = true
|
|
try {
|
|
this.reset()
|
|
// this.dialogLoading = this.$loading({
|
|
// target: this.$refs.dialogRef.$el
|
|
// })
|
|
if (data?.userInfo?.id){
|
|
this.formData.userInfo = {
|
|
...this.formData.userInfo,
|
|
...data.userInfo
|
|
}
|
|
}
|
|
if (data?.carInfo?.id){
|
|
this.formData.carInfo = {
|
|
...this.formData.carInfo,
|
|
...data.carInfo,
|
|
brandAndModel: data.carInfo?.carBrand,
|
|
carModel: data.carInfo?.carModel
|
|
}
|
|
}
|
|
// await this.listLevel()
|
|
}finally {
|
|
// this.dialogLoading.close()
|
|
}
|
|
},
|
|
async compute(){
|
|
this.buttonLoading = true
|
|
try{
|
|
const data = this.formData.carInfo;
|
|
const brand = data.brandAndModel
|
|
if (typeof brand === 'string'){
|
|
data.brandAndModel = [brand, data?.carModel]
|
|
}
|
|
const res = await CarMainApi.compute(data);
|
|
const result = res.data;
|
|
this.formData.carInfo.insuranceExpiryDate = result.insuranceExpiryDate
|
|
this.formData.carInfo.nextInspectionDate = result.nextInspectionDate
|
|
this.formData.carInfo.nextMaintenanceDate = result.nextMaintenanceDate
|
|
this.formData.carInfo.nextMaintenanceMileage = result.nextMaintenanceMileage
|
|
} finally {
|
|
this.buttonLoading = false
|
|
}
|
|
},
|
|
async submitForm(){
|
|
await this.$refs["formRef"].validate();
|
|
this.formLoading = true
|
|
const brand = this.formData.carInfo.brandAndModel
|
|
if (typeof brand === 'string'){
|
|
this.formData.carInfo.brandAndModel = [brand, this.formData.carInfo?.carModel]
|
|
}
|
|
try {
|
|
await updateCustomerAndCar(this.formData)
|
|
this.$modal.msgSuccess(this.formData?.userInfo?.id ? "修改成功" : "新增成功")
|
|
this.$emit("success", this.formData)
|
|
this.formLoading = false
|
|
this.dialogVisible = false
|
|
}catch {}
|
|
finally {
|
|
this.formLoading = false
|
|
}
|
|
},
|
|
reset(){
|
|
this.formData = {
|
|
userInfo: {
|
|
memberLevelId: undefined,
|
|
id: undefined,
|
|
userId: undefined,
|
|
typeCode: '01',
|
|
deptCode: undefined,
|
|
cusName: undefined,
|
|
phoneNumber: undefined,
|
|
birthday: undefined,
|
|
address: undefined,
|
|
sex: '1',
|
|
idCard: undefined,
|
|
idCardImage: undefined,
|
|
dataFrom: '08',
|
|
nearDoTime: undefined,
|
|
nearDoContent: undefined,
|
|
inviter: undefined,
|
|
inviterType: '01',
|
|
status: undefined,
|
|
itemList: [
|
|
{
|
|
systemCode: '',
|
|
serContent: '',
|
|
serTimeStart: '',
|
|
serTimeEnd: ''
|
|
}
|
|
],
|
|
},
|
|
carInfo: {
|
|
id: undefined,
|
|
engineNumber: undefined,
|
|
vin: undefined,
|
|
licenseNumber: undefined,
|
|
brandAndModel: [],
|
|
maintenanceDate: undefined,
|
|
maintenanceMileage: undefined,
|
|
inspectionDate: undefined,
|
|
insuranceDate: undefined,
|
|
checkDate: undefined,
|
|
carBrand: undefined,
|
|
carNature: undefined,
|
|
carRegisterDate: undefined,
|
|
carLicenseImg: undefined,
|
|
carCategory: undefined,
|
|
insuranceExpiryDate: undefined,
|
|
nextInspectionDate: undefined,
|
|
nextMaintenanceDate: undefined,
|
|
nextMaintenanceMileage: undefined,
|
|
carModel: undefined
|
|
}
|
|
}
|
|
this.resetForm("formRef")
|
|
},
|
|
async listLevel(){
|
|
const res = await getLevelAll()
|
|
this.levelList = res.data
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style>
|