<template>
|
<div class="product" ref="product">
|
<div v-for="(item, index) in loanArr" :key="index">
|
<el-form
|
:model="loanForm[index]"
|
:rules="rules"
|
ref="loanForm"
|
label-width="165px"
|
inline
|
size="small"
|
>
|
<div class="_block">
|
<p class="title">
|
<span></span>
|
贷款车辆信息
|
</p>
|
<div class="form">
|
<el-form-item
|
label="车辆所属"
|
prop="customerType"
|
>
|
<el-select
|
v-model="loanForm[index].customerType"
|
filterable
|
clearable
|
@change="changeCustomerType(loanForm[index].customerType)"
|
:disabled="!loanArr[index].customerType.writeAble"
|
placeholder="支持输入搜索选择"
|
>
|
<el-option
|
key="02"
|
label="企业"
|
:value="`02`"
|
></el-option>
|
<el-option
|
key="01"
|
label="个人"
|
:value="`01`"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<div style="width:1200px"></div>
|
<template v-if="loanForm[index].customerType == '01'">
|
<el-form-item
|
label="车主姓名"
|
v-if="loanArr[index].possessor.visible"
|
prop="possessor"
|
>
|
<el-input
|
v-model="loanForm[index].possessor"
|
></el-input>
|
</el-form-item>
|
<el-form-item
|
label="车主身份证号码"
|
v-if="loanArr[index].idCard.visible"
|
prop="idCard"
|
>
|
<el-input v-model="loanForm[index].idCard"
|
></el-input>
|
</el-form-item>
|
<el-form-item
|
label="车主手机号码"
|
v-if="loanArr[index].phone.visible"
|
prop="phone"
|
>
|
<el-input v-model="loanForm[index].phone"
|
></el-input>
|
</el-form-item>
|
</template>
|
<template v-if="loanForm[index].customerType == '02'">
|
<el-form-item
|
label="公司名称"
|
prop="possessor"
|
>
|
<el-input
|
v-model="loanForm[index].possessor"
|
></el-input>
|
</el-form-item>
|
<el-form-item
|
label="企业识别码"
|
prop="idCard"
|
>
|
<el-input v-model="loanForm[index].idCard"
|
></el-input>
|
</el-form-item>
|
<el-form-item
|
label="公司联系人姓名"
|
prop="contactName"
|
>
|
<el-input v-model="loanForm[index].contactName"
|
></el-input>
|
</el-form-item>
|
<el-form-item
|
label="公司联系人身份证号码"
|
prop="contactCertId"
|
>
|
<el-input v-model="loanForm[index].contactCertId"
|
></el-input>
|
</el-form-item>
|
<el-form-item
|
label="公司联系人手机号"
|
prop="contactPhone"
|
>
|
<el-input v-model="loanForm[index].contactPhone"
|
></el-input>
|
</el-form-item>
|
</template>
|
<!-- 通讯地址（省） -->
|
<el-form-item
|
:label="loanArr[index].province.filedDescription"
|
v-if="loanArr[index].province.visible"
|
prop="province"
|
>
|
<el-select
|
v-model="loanForm[index].province"
|
filterable
|
clearable
|
:disabled="!loanArr[index].province.writeAble"
|
placeholder="支持输入搜索选择"
|
@change="
|
getprovince(
|
loanForm[index].province,
|
'cityList',
|
loanForm[index],
|
function (arr) {
|
cityList = arr;
|
}
|
)
|
"
|
>
|
<el-option
|
v-for="(item, index) in provinceList"
|
:key="index"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
|
<!-- 通讯地址（市） -->
|
<el-form-item
|
:label="loanArr[index].city.filedDescription"
|
v-if="loanArr[index].city.visible"
|
prop="city"
|
>
|
<el-select
|
v-model="loanForm[index].city"
|
filterable
|
clearable
|
:disabled="!loanArr[index].city.writeAble"
|
placeholder="支持输入搜索选择"
|
@change="
|
getcity(
|
loanForm[index].city,
|
'countyList',
|
loanForm[index],
|
function (arr) {
|
countyList = arr;
|
}
|
)
|
"
|
>
|
<el-option
|
v-for="(item, index) in cityList"
|
:key="index"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
|
<!-- 通讯地址（区） -->
|
<el-form-item
|
:label="loanArr[index].county.filedDescription"
|
v-if="loanArr[index].county.visible"
|
prop="county"
|
>
|
<el-select
|
v-model="loanForm[index].county"
|
filterable
|
clearable
|
:disabled="!loanArr[index].county.writeAble"
|
placeholder="支持输入搜索选择"
|
>
|
<el-option
|
v-for="(item, index) in countyList"
|
:key="index"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<!-- 通讯地址（详细） -->
|
<el-form-item
|
:label="loanArr[index].address.filedDescription"
|
:disabled="!loanArr[index].address.writeAble"
|
|
prop="address"
|
>
|
<el-input
|
v-model="loanForm[index].address"
|
:disabled="!loanArr[index].address.writeAble"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item
|
label="车架号"
|
:label="loanArr[index].chassisCode.filedDescription"
|
v-if="loanArr[index].chassisCode.visible"
|
prop="chassisCode"
|
>
|
<el-input
|
v-model="loanForm[index].chassisCode"
|
:disabled="!loanArr[index].chassisCode.writeAble"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item
|
label="发动机号"
|
v-if="loanArr[index].engineCode.visible"
|
prop="engineCode"
|
>
|
<el-input
|
v-model="loanForm[index].engineCode"
|
:disabled="!loanArr[index].engineCode.writeAble"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item
|
label="车牌号"
|
v-if="loanArr[index].vehicleNumber.visible"
|
prop="vehicleNumber"
|
>
|
<el-input
|
v-model="loanForm[index].vehicleNumber"
|
:disabled="!loanArr[index].vehicleNumber.writeAble"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item
|
label="车辆估值"
|
v-if="loanArr[index].valuation.visible"
|
prop="valuation"
|
>
|
<el-input
|
v-model="loanForm[index].valuation"
|
:disabled="!loanArr[index].valuation.writeAble"
|
@blur="loanForm[index].valuation = formatMoney(loanForm[index].valuation)"
|
>
|
<template slot="append">元</template>
|
</el-input>
|
</el-form-item>
|
|
</div>
|
</div>
|
</el-form>
|
</div>
|
<div class="fixedBtn">
|
<el-button
|
size="medium"
|
plain
|
@click="saveDraft(loanForm)"
|
v-if="applyInfo.phaseNo == '0040'"
|
>保存草稿</el-button
|
>
|
<el-button
|
size="medium"
|
plain
|
@click="save(loanForm)"
|
v-if="applyInfo.phaseNo == '0060'"
|
>保存</el-button
|
>
|
<el-button
|
size="medium"
|
plain
|
@click="prevStep"
|
v-if="applyInfo.phaseNo == '0040' || applyInfo.phaseNo == '0060'"
|
>上一步</el-button
|
>
|
<el-button size="medium" plain @click="prevStep" v-else>上一步</el-button>
|
<el-button
|
size="medium"
|
type="primary"
|
@click="submit(loanForm)"
|
v-if="applyInfo.phaseNo == '0040' || applyInfo.phaseNo == '0060'"
|
>下一步</el-button
|
>
|
<el-button size="medium" type="primary" @click="nextPage()" v-else
|
>下一步</el-button
|
>
|
</div>
|
</div>
|
</template>
|
<script>
|
import {
|
saveCarInfo,
|
submitCarInfo,
|
qryLoanOrgList,
|
qryCarInfo,
|
getProvinceCodeList,
|
getCityCodeList,
|
getAreaCodeList
|
} from "@/api/product";
|
import common from "@/utils/common";
|
import Branch from "@views/product/components/Branch";
|
export default {
|
data() {
|
return {
|
applyInfo: this.$store.state.product.applyInfo,
|
applyMenu: this.$store.state.product.applyMenu,
|
initialArr: [], //初始数据
|
loanForm: [],
|
loanArr: [],
|
rules: {},
|
repayTypeList: [],
|
fundUnitList: [],
|
provinceList: [],
|
cityList: [],
|
countyList: [],
|
areaList: [],
|
};
|
},
|
async created() {
|
this.$parent._data.loading = true;
|
const carResult = await this.qryCarInfo();
|
this.getLoanData(carResult)
|
this.$parent._data.loading = false;
|
},
|
components: {
|
Branch,
|
},
|
methods: {
|
// 金额格式化
|
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;
|
}
|
},
|
|
//金额变成数字
|
moneyFomatNumber(number, n) {
|
if(typeof number == 'number') return number
|
if (number != null && number != "" && number != undefined) {
|
number = number.replace(/,/g, ""); //去除千分位的','
|
if (isNaN(number)) {
|
//判断是否是数字
|
number = "0";
|
} else {
|
number = Math.round(number * Math.pow(10, n)) / Math.pow(10, n); //n幂
|
number = number.toString();
|
}
|
} else {
|
number = "0";
|
}
|
//a.indexOf(x,y);返回x值在a字符串值中从y位置开始检索首次出现的位置
|
var numLength = number.indexOf(".");
|
//判断传递的值是整数增加小数点再补"0"
|
if (numLength < 0) {
|
numLength = number.length;
|
number += ".";
|
}
|
//不足n位小数的，循环补"0"
|
while (number.length <= numLength + n) {
|
number += "0";
|
}
|
return number;
|
},
|
//查询核心企业信息
|
qryCarInfo() {
|
return new Promise((resolve) => {
|
qryCarInfo({
|
businessNo: this.applyInfo.serialNo,
|
}).then((res) => {
|
resolve(res.result);
|
});
|
});
|
},
|
changeCustomerType(e){
|
|
},
|
async getLoanData(result) {
|
|
this.loanArr = [];
|
this.loanForm = [];
|
this.initialArr = [];
|
this.loanArr.push(result);
|
this.loanArr = [this.loanArr[0]]
|
|
// 初始化数据和校验规则
|
this.loanArr.forEach(async (val, index) => {
|
const obj = {};
|
for (const key in val) {
|
// 格式化金额
|
if (
|
key == "valuation"
|
) {
|
val[key].value = this.formatMoney(val[key].value);
|
}
|
// 自定义校验规则,涉及金额将进行格式化
|
this.rules[key] = [];
|
if (val[key].required || key=='contactName' || key=='contactCertId'|| key=='contactPhone') {
|
this.rules[key].push({
|
required: true,
|
message: `请输入${val[key].filedDescription}`,
|
trigger: "change",
|
});
|
}
|
obj[key] = val[key].value;
|
}
|
this.loanForm.push(obj);
|
this.initialArr.push(Object.assign({}, obj));
|
});
|
|
this.onGetProCityArea()
|
},
|
|
|
async onGetProCityArea() {
|
// 获取省枚举值
|
getProvinceCodeList({}).then((res) => {
|
this.provinceList = res.result;
|
});
|
this.loanForm[0].province
|
? (this.cityList = await common.qryCityCodeList(
|
this.loanForm[0].province
|
))
|
: "";
|
this.loanForm[0].city
|
? (this.countyList = await common.qryAreaCodeList(
|
this.loanForm[0].city
|
))
|
: "";
|
},
|
|
// 保存接口
|
saveLoanCar(arr) {
|
return new Promise((resolve) => {
|
arr[0].businessNo = this.applyInfo.serialNo
|
arr[0].valuation = this.moneyFomatNumber(arr[0].valuation, 2)
|
saveCarInfo(arr[0]).then((res) => {
|
resolve(res);
|
});
|
});
|
},
|
// 提交接口
|
getSubmitLoanCar(arr) {
|
return new Promise((resolve) => {
|
arr[0].businessNo = this.applyInfo.serialNo
|
arr[0].valuation = this.moneyFomatNumber(arr[0].valuation, 2)
|
submitCarInfo(arr[0]).then((res) => {
|
resolve(res);
|
});
|
});
|
},
|
// 保存草稿
|
async saveDraft(arr) {
|
this.$parent._data.loading = true;
|
|
const res = await this.saveLoanCar(arr);
|
if (res.code == "00") {
|
// const result = await this.getApplyDetail();
|
const carResult = await this.qryCarInfo();
|
this.getLoanData(carResult)
|
// this.getApplyData(result);
|
this.$message.success("保存成功");
|
// 保存草稿需要调用父组件的查询左侧tab的方法
|
}
|
this.$parent._data.loading = false;
|
},
|
// 保存并校验数据完整性
|
async save(arr) {
|
if (!common.validateForm(this.$refs.loanForm).flag) return;
|
this.$parent._data.loading = true;
|
const res = await this.saveLoanCar(arr);
|
if (res.code == "00") {
|
const carResult = await this.qryCarInfo();
|
this.getLoanData(carResult)
|
this.$message.success("保存成功");
|
}
|
this.$parent._data.loading = false;
|
},
|
// 上一步或上一页
|
prevStep() {
|
this.applyMenu.forEach((val, index) => {
|
if (val.tabname == "贷款车辆信息") {
|
common.tabInfo(
|
this.applyMenu[index - 1].tabname,
|
this.applyInfo.flowno,
|
this
|
);
|
}
|
});
|
},
|
// 提交
|
async submit(arr) {
|
if (!common.validateForm(this.$refs.loanForm).flag) return;
|
this.$parent._data.loading = true;
|
const res = await this.saveLoanCar(arr);
|
if (res.code == "00") {
|
const carResult = await this.qryCarInfo();
|
this.getLoanData(carResult)
|
this.$parent._data.loading = false;
|
this.nextPage();
|
}
|
},
|
// 下一页
|
nextPage() {
|
// 调用父组件的查询左侧tab的方法
|
this.$parent.updateApplyTabTree("贷款车辆信息");
|
},
|
},
|
beforeRouteLeave(to, from, next) {
|
!this.loanForm.length ||
|
common.compareFormData(this.initialArr, this.loanForm, next)
|
? next()
|
: "";
|
},
|
};
|
</script>
|
