<template>
|
<div
|
class="product"
|
>
|
<div class="borrower" v-for="(item,index) in borrowerArr" :key="index">
|
<p class="title">
|
<span></span>
|
车辆信息
|
</p>
|
<el-form
|
:model="vehicleForm[index]"
|
:rules="rules"
|
ref="vehicleForm"
|
size="small"
|
inline
|
label-width="165px"
|
>
|
<div class="form">
|
<el-form-item label="4S店名称" v-if="borrowerArr[index].servicshopName.visible" prop="servicshopName">
|
<el-input v-model="vehicleForm[index].servicshopName" disabled></el-input>
|
</el-form-item>
|
<el-form-item label="延保类型" v-if="borrowerArr[index].insuranceType.visible" prop="insuranceType">
|
<el-input v-model="vehicleForm[index].insuranceType" disabled></el-input>
|
</el-form-item>
|
<el-form-item label="车辆购买类型" v-if="borrowerArr[index].vehiclePurchaseType.visible" prop="vehiclePurchaseType" :rules="!isDisabled?[{required: true,message:'请选择车辆购买类型'}]:[{ required: false }]">
|
<el-select v-model="vehicleForm[index].vehiclePurchaseType" filterable placeholder="请选择" :disabled="isDisabled" >
|
<el-option label="新车" value="1"></el-option>
|
<el-option label="次新车" value="2"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="车牌号码" v-if="borrowerArr[index].vehicleNumber.visible" prop="vehicleNumber" :rules="[{ required: false }]">
|
<el-input v-model="vehicleForm[index].vehicleNumber" :disabled="isDisabled"></el-input>
|
</el-form-item>
|
<el-form-item label="车辆品牌" v-if="borrowerArr[index].vehicleBrand.visible" prop="vehicleBrand" :rules="!isDisabled?[{required: true,message:'请输入车辆品牌'}]:[{ required: false }]">
|
<el-input v-model="vehicleForm[index].vehicleBrand" :disabled="isDisabled"></el-input>
|
</el-form-item>
|
<el-form-item label="车型" v-if="borrowerArr[index].vehicleModel.visible" prop="vehicleModel" :rules="!isDisabled?[{required: true,message:'请输入车型'}]:[{ required: false }]">
|
<el-input v-model="vehicleForm[index].vehicleModel" :disabled="isDisabled"></el-input>
|
</el-form-item>
|
<el-form-item label="购车总价" v-if="borrowerArr[index].vehicleTotalPrice.visible" prop="vehicleTotalPrice" :rules="[{ required: false }]">
|
<el-input v-model="vehicleForm[index].vehicleTotalPrice" :disabled="isDisabled"></el-input>
|
</el-form-item>
|
<el-form-item label="车辆识别代码-车架号VIN" v-if="borrowerArr[index].identVinCode.visible" prop="identVinCode" :rules="!isDisabled?[{required: true,message:'请输入车辆识别代码'}]:[{ required: false }]">
|
<el-input v-model="vehicleForm[index].identVinCode" :disabled="isDisabled"></el-input>
|
</el-form-item>
|
<el-form-item label="发动机号" v-if="borrowerArr[index].engineCode.visible" prop="engineCode" :rules="[{ required: false }]">
|
<el-input v-model="vehicleForm[index].engineCode" :disabled="isDisabled"></el-input>
|
</el-form-item>
|
<el-form-item label="购车发票日期" v-if="borrowerArr[index].vehicleBillDate.visible" prop="vehicleBillDate" :rules="[{ required: false }]">
|
<el-date-picker
|
v-model="vehicleForm[index].vehicleBillDate"
|
type="date"
|
value-format="yyyy/MM/dd"
|
format="yyyy/MM/dd"
|
:disabled="isDisabled"
|
></el-date-picker>
|
</el-form-item>
|
<el-form-item label="合同签订日期" v-if="borrowerArr[index].contractSignDate.visible" prop="contractSignDate" :rules="[{ required: false }]">
|
<el-date-picker
|
v-model="vehicleForm[index].contractSignDate"
|
type="date"
|
value-format="yyyy/MM/dd"
|
format="yyyy/MM/dd"
|
:disabled="isDisabled"
|
></el-date-picker>
|
</el-form-item>
|
<el-form-item label="合同购买时的公里数" v-if="borrowerArr[index].contractKilometers.visible" prop="contractKilometers" :rules="[{ required: false }]">
|
<el-input v-model="vehicleForm[index].contractKilometers" :disabled="isDisabled"></el-input>
|
</el-form-item>
|
<el-form-item label="保障期限" v-if="borrowerArr[index].guaranteeDeadline.visible" prop="guaranteeDeadline" :rules="[{ required: false }]">
|
<el-input v-model="vehicleForm[index].guaranteeDeadline" :disabled="isDisabled"></el-input>
|
</el-form-item>
|
<el-form-item label="厂保期限" v-if="borrowerArr[index].facGuaranteeDeadline.visible" prop="facGuaranteeDeadline" :rules="[{ required: false }]">
|
<el-input v-model="vehicleForm[index].facGuaranteeDeadline" :disabled="isDisabled"></el-input>
|
</el-form-item>
|
<el-form-item label="合同金额" v-if="borrowerArr[index].contractAmount.visible" prop="contractAmount" :rules="!isDisabled?[{required: true,message:'请输入合同金额'}]:[{ required: false }]">
|
<el-input v-model="vehicleForm[index].contractAmount" :disabled="isDisabled"></el-input>
|
</el-form-item>
|
<el-form-item label="合同起期" v-if="borrowerArr[index].contractStartDate.visible" prop="contractStartDate" :rules="[{ required: false }]">
|
<el-date-picker
|
v-model="vehicleForm[index].contractStartDate"
|
type="date"
|
value-format="yyyy/MM/dd"
|
format="yyyy/MM/dd"
|
:disabled="isDisabled"
|
></el-date-picker>
|
</el-form-item>
|
<el-form-item label="合同止期" v-if="borrowerArr[index].contractEndDate.visible" prop="contractEndDate" :rules="[{ required: false }]">
|
<el-date-picker
|
v-model="vehicleForm[index].contractEndDate"
|
type="date"
|
value-format="yyyy/MM/dd"
|
format="yyyy/MM/dd"
|
:disabled="isDisabled"
|
></el-date-picker>
|
</el-form-item>
|
<el-form-item label="首付比例" v-if="borrowerArr[index].firstPayProportion.visible" prop="firstPayProportion" :rules="[{ required: false }]">
|
<el-input v-model="vehicleForm[index].firstPayProportion" :disabled="isDisabled"></el-input>
|
</el-form-item>
|
<el-form-item label="首付金额" v-if="borrowerArr[index].firstPayAmount.visible" prop="firstPayAmount" :rules="!isDisabled?[{required: true,message:'请输入首付金额'}]:[{ required: false }]">
|
<el-input v-model="vehicleForm[index].firstPayAmount" :disabled="isDisabled"></el-input>
|
</el-form-item>
|
<el-form-item label="保障计划" v-if="borrowerArr[index].guaranteePlan.visible" prop="guaranteePlan" :rules="[{ required: false }]">
|
<el-input v-model="vehicleForm[index].guaranteePlan" :disabled="isDisabled"></el-input>
|
</el-form-item>
|
<el-form-item label="厂保公里数" v-if="borrowerArr[index].factoryWarrantyKio.visible" prop="factoryWarrantyKio" :rules="[{ required: false }]">
|
<el-input v-model="vehicleForm[index].factoryWarrantyKio" :disabled="isDisabled"></el-input>
|
</el-form-item>
|
</div>
|
</el-form>
|
</div>
|
<div :class="[applyInfo.phaseNo >= '0040' ? 'fixedBtn':'btn']">
|
<!-- <el-button
|
size="medium"
|
plain
|
@click="saveDraft"
|
v-if="applyInfo.phaseNo=='0040'||applyInfo.phaseNo=='0010'"
|
>保存草稿</el-button>
|
<el-button
|
size="medium"
|
type="primary"
|
@click="submit()"
|
v-if="applyInfo.phaseNo=='0040'||applyInfo.phaseNo=='0010'"
|
>下一步</el-button> -->
|
|
<el-button size="medium" plain @click="save" v-if="!isDisabled">保存</el-button>
|
|
<el-button
|
size="medium"
|
plain
|
@click="prevStep"
|
>上一页</el-button>
|
<el-button
|
size="medium"
|
type="primary"
|
@click="nextPage()"
|
v-if="applyInfo.phaseNo!='0040'&&applyInfo.phaseNo!='0010'"
|
>下一页</el-button>
|
</div>
|
</div>
|
</template>
|
<script>
|
import {
|
qryCustomerBasicInfo,
|
getDictionaryList,
|
getAllCityAreaList,
|
submitCustomerBasicInfo,
|
saveCustomerBasicInfo,
|
getProvinceCodeList,
|
qryContactList,
|
qryVirtualSettleAcct
|
} from "@/api/product";
|
import { queryVehicleData, updateVehicleData } from '@comprehensive/serve/public'
|
|
import { setStorage, getStorage, removeStorage } from "@/utils/storage";
|
import common from "@/utils/common";
|
export default {
|
data() {
|
return {
|
applyInfo:this.$store.state.product.applyInfo,
|
applyMenu: this.$store.state.product.applyMenu,
|
initialArr: [], //初始化数据
|
vehicleForm: [],
|
borrowerArr: [],
|
certtypeList: [],
|
workCityList: [],
|
marriageList: [],
|
educationList: [],
|
headshiplist: [],
|
positionranks: [],
|
provinceList: [],
|
companycityList: [],
|
companycountyList: [],
|
familycityList: [],
|
familycountyList: [],
|
kosekicityList: [],
|
kosekicountyList: [],
|
unitproperties: [],
|
hashomes: [],
|
arr: [],
|
rules: {},
|
writeAble:''
|
};
|
},
|
computed: {
|
isDisabled() {
|
// 初审0060、复审0070、面签0100 (可编辑)
|
const {applyInfo } = this;
|
return applyInfo.phaseNo !== '0060' && applyInfo.phaseNo !== '0070' && applyInfo.phaseNo !== '0100';
|
}
|
},
|
async created() {
|
this.$parent._data.loading = true;
|
// 查询车辆信息信息
|
let result = await this.getVehicleData();
|
this.getBorrowerData(result);
|
|
this.$parent._data.loading = false;
|
},
|
methods: {
|
// 处理数据,将数据重新排列
|
getBorrowerData(result) {
|
this.borrowerArr = [];
|
this.vehicleForm = [];
|
this.initialArr = [];
|
const params = {
|
value: '',
|
codeNo: '',
|
valueDesc: '',
|
name: "customerid",
|
type: '',
|
orders: '',
|
filedDescription: "",
|
writeAble: false,
|
required: false,
|
visible: true
|
}
|
let formatData = {}
|
for (const key in result) {
|
formatData[key] = {...params, value: result[key]};
|
}
|
this.borrowerArr.push(formatData);
|
// 取数组第一个作为校验规则
|
this.borrowerArr.forEach((val, index) => {
|
const obj = {};
|
for (const key in val) {
|
obj[key] = val[key].value;
|
}
|
this.vehicleForm.push(obj);
|
});
|
|
|
// 将数组进行浅克隆,作为数据比较
|
this.vehicleForm.forEach(element => {
|
this.initialArr.push(Object.assign({}, element));
|
});
|
|
|
},
|
// 查询车辆信息
|
async getVehicleData() {
|
this.loading = true
|
const { serialNo } = this.applyInfo
|
const res = await queryVehicleData({
|
businessNo: serialNo
|
})
|
let { data } = res
|
data.vehiclePurchase = data.vehiclePurchaseType === '1' ? '新车' : '次新车'
|
return data
|
},
|
// 保存车辆信息接口
|
getSaveCustomerBasicInfo(form) {
|
return new Promise(resolve => {
|
updateVehicleData(form).then(res => {
|
resolve(res);
|
});
|
});
|
},
|
// 提交车辆信息接口
|
getSubmitCustomerBasicInfo(form) {
|
return new Promise(resolve => {
|
submitCustomerBasicInfo(this.vehicleForm[0]).then(res => {
|
resolve(res);
|
});
|
});
|
},
|
// 上一页
|
prevStep() {
|
this.applyMenu.forEach((val, index) => {
|
if (val.tabname == "车辆信息") {
|
common.tabInfo(
|
this.applyMenu[index - 1].tabname,
|
this.applyInfo.flowno,
|
this
|
);
|
}
|
});
|
},
|
// 下一页
|
nextPage() {
|
// 调用父组件的查询左侧tab的方法
|
this.$parent.updateApplyTabTree('车辆信息');
|
},
|
// 提交
|
async submit() {
|
if(!common.validateForm(this.$refs.vehicleForm).flag)return;
|
const contacts = await this.getContactList();
|
if (this.applyInfo.phaseNo >= "0040") {
|
if (!contacts.length) {
|
this.$message.warning("至少填写一个联系人信息");
|
return;
|
}
|
}
|
this.$parent._data.loading = true;
|
const res = await this.getSubmitCustomerBasicInfo(
|
this.vehicleForm[0]
|
);
|
if (res.code == "00") {
|
const result = await this.getVehicleData();
|
this.getBorrowerData(result);
|
this.nextPage()
|
}
|
this.$parent._data.loading = false;
|
},
|
// 保存需要校验数据完整性
|
async save() {
|
if(!common.validateForm(this.$refs.vehicleForm).flag)return;
|
this.$parent._data.loading = true;
|
// 保存
|
let formData = this.vehicleForm[0]
|
formData.vehicleBillDate = !formData.vehicleBillDate ? '' : formData.vehicleBillDate
|
formData.contractSignDate = !formData.contractSignDate ? '' : formData.contractSignDate
|
formData.contractStartDate = !formData.contractStartDate ? '' : formData.contractStartDate
|
formData.contractEndDate = !formData.contractEndDate ? '' : formData.contractEndDate
|
|
const res = await this.getSaveCustomerBasicInfo(this.vehicleForm[0]);
|
// 保存成功查询列表数据
|
if (res.code == "00") {
|
const result = await this.getVehicleData();
|
// 将数据重新排列
|
this.getBorrowerData(result);
|
this.$message.success("保存成功");
|
}
|
this.$parent._data.loading = false;
|
},
|
// 保存草稿
|
async saveDraft() {
|
this.$parent._data.loading = true;
|
// 保存
|
const res = await this.getSaveCustomerBasicInfo(this.vehicleForm[0]);
|
// 保存成功查询列表数据
|
if (res.code == "00") {
|
const result = await this.getVehicleData();
|
// 将数据重新排列
|
this.getBorrowerData(result);
|
this.$message.success("保存成功");
|
// 保存草稿需要调用父组件的查询左侧tab的方法
|
this.$parent.getApplyTabTree();
|
}
|
this.$parent._data.loading = false;
|
},
|
|
// 金额格式化
|
formatMoney(value) {
|
if (value) {
|
value =
|
parseFloat((value + "").replace(/[^\d\.-]/g, "")).toFixed(2) + "";
|
if (value == "NaN") return;
|
let l = value
|
.split(".")[0]
|
.split("")
|
.reverse();
|
let r = value.split(".")[1];
|
let t = "";
|
for (let i = 0; i < l.length; i++) {
|
t += l[i] + ((i + 1) % 3 === 0 && i + 1 !== l.length ? "," : "");
|
}
|
return (
|
t
|
.split("")
|
.reverse()
|
.join("") +
|
"." +
|
r
|
);
|
}
|
},
|
},
|
beforeRouteLeave(to, from, next) {
|
for (let i = 0; i < this.vehicleForm.length; i++) {
|
for (const key in this.vehicleForm[i]) {
|
if (this.initialArr[i].hasOwnProperty(key)) {
|
if (this.vehicleForm[i][key] != this.initialArr[i][key]) {
|
// 页面有数据未保存
|
common.comfirm("提示","当前页面有数据未保存，是否放弃保存？", ()=> {
|
next();
|
})
|
return;
|
}
|
}
|
}
|
}
|
next();
|
}
|
};
|
</script>
|
