<template>
|
<div class="product">
|
<div class="borrower">
|
<p class="title">
|
<span></span>
|
借款人基本信息
|
</p>
|
<div class="tab-section">
|
<el-tabs v-model="activeName" type="card" v-loading="loading">
|
<el-tab-pane
|
v-for="(item, index) in customerTotalList"
|
:key="index"
|
:label="item.customername.value"
|
:name="`${index}`"
|
>
|
<p
|
class="title"
|
style="
|
width: 100%;
|
height: 20px;
|
color: #222;
|
font-size: 14px;
|
position: relative;
|
padding-left: 10px;
|
margin: 20px 0;
|
border-left: 2px solid #0081f0;
|
"
|
>
|
<span></span>
|
借款人基本信息
|
</p>
|
<el-form
|
:model="item"
|
:ref="`borrowerForm${index}`"
|
size="small"
|
inline
|
label-width="165px"
|
>
|
<el-row :gutter="20">
|
<el-col
|
v-for="(field, key) in formFields"
|
:key="key"
|
:span="field.span"
|
>
|
<el-form-item
|
v-if="field.visible(item)"
|
:label="field.label"
|
:prop="field.prop"
|
>
|
<el-input
|
v-if="field.type === 'input'"
|
v-model="item[field.prop].value"
|
:disabled="field.disabled"
|
:placeholder="field.placeholder"
|
></el-input>
|
|
<el-select
|
v-else-if="field.type === 'select'"
|
v-model="item[field.prop].value"
|
:disabled="field.disabled"
|
clearable
|
filterable
|
:placeholder="field.placeholder"
|
>
|
<el-option
|
v-for="(option, idx) in field.options"
|
:key="idx"
|
:label="option.itemname"
|
:value="option.itemno"
|
></el-option>
|
</el-select>
|
|
<el-input
|
v-else-if="field.type === 'textarea'"
|
type="textarea"
|
v-model="item[field.prop].value"
|
:disabled="field.disabled"
|
:placeholder="field.placeholder"
|
style="width: 800px"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<el-button
|
size="small"
|
type="primary"
|
:loading="loading"
|
style="margin: 0 0 20px 10px"
|
@click="saveCustomerInfo()"
|
>保存基本信息</el-button
|
>
|
<FormInfo
|
:info="item"
|
title="借款信息"
|
:keys="queryAcctLoanInfo"
|
:loading="loading"
|
></FormInfo>
|
<KeysTable
|
:list="item.paymentScheduleList"
|
:header="paymentScheduleTableHeader"
|
:isShowPages="false"
|
title="还款计划"
|
></KeysTable>
|
|
<KeysTable
|
:list="item.tranList"
|
:header="paymentLogTableHeader"
|
:isShowPages="false"
|
title="交易记录"
|
></KeysTable>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
<div class="btn">
|
<el-button size="medium" plain @click="prevPage()">上一页</el-button>
|
<el-button size="medium" type="primary" @click="nextPage()"
|
>下一页</el-button
|
>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
// 借款人信息
|
import {
|
qryMainCreditInfo, //查询主授信人信息
|
qryCustomerBasicInfo,
|
saveApplyBusInfo, // 保存借款人基本信息
|
queryAcctLoan, //查询借据信息
|
queryPaymentScheduleList, //还款计划
|
queryPaymentLog, //还款入账记录
|
} from "@comprehensive/serve/public";
|
import { getDictionaryList } from "@/api/product";
|
import FormInfo from "../../../../comprehensiveTransaction/components/FormInfo.vue";
|
import KeysTable from "../../../../comprehensiveTransaction/components/KeysTable";
|
import common from "@/utils/common";
|
import {
|
userBaseInfo,
|
queryAcctLoanInfo,
|
vLoanqueryAcctLoanInfo,
|
} from "@comprehensive/utils/formHeaders";
|
import {
|
queryAcctPaymentScheduleHeader,
|
queryAcctPaymentHeader,
|
} from "@comprehensive/utils/tableHeaders";
|
export default {
|
data() {
|
return {
|
mainCredit: {},
|
applyMenu: this.$store.state.product.applyMenu,
|
userBaseInfoHeader: [],
|
info: {},
|
queryAcctLoanInfo: [...vLoanqueryAcctLoanInfo],
|
customerTotalList: [], //列表顶部选项卡，保存总借款人的数组
|
loading: false,
|
activeName: "0",
|
borrowerForm: [],
|
borrowerArr: [],
|
initialArr: [], //初始化数据
|
rules: {},
|
sexlist: [],
|
paymentScheduleTableHeader: [...queryAcctPaymentScheduleHeader],
|
paymentLogTableHeader: [...queryAcctPaymentHeader],
|
formDisabled: true,
|
formFields: [
|
{
|
label: "借款人姓名",
|
prop: "customername",
|
type: "input",
|
placeholder: "请输入借款人名称",
|
visible: (item) => item.borrowertype.value === "02",
|
disabled: true,
|
span: 8,
|
},
|
{
|
label: "性别",
|
prop: "cardSex",
|
type: "select",
|
placeholder: "请选择",
|
visible: (item) => item.borrowertype.value === "02",
|
disabled: true,
|
options: this.sexlist,
|
span: 8,
|
},
|
{
|
label: "身份证号码",
|
prop: "certid",
|
type: "input",
|
placeholder: "请输入",
|
visible: (item) => item.borrowertype.value === "02",
|
disabled: true,
|
span: 8,
|
},
|
{
|
label: "手机号码",
|
prop: "phone",
|
type: "input",
|
placeholder: "请输入",
|
visible: (item) => item.borrowertype.value === "02",
|
span: 8,
|
},
|
{
|
label: "邮箱",
|
prop: "email",
|
type: "input",
|
placeholder: "请输入",
|
visible: (item) => item.borrowertype.value === "02",
|
span: 8,
|
},
|
{
|
label: "借款企业名称",
|
prop: "customername",
|
type: "input",
|
placeholder: "请输入借款人名称",
|
visible: (item) => item.borrowertype.value === "01",
|
disabled: true,
|
span: 8,
|
},
|
{
|
label: "企业识别码",
|
prop: "certid",
|
type: "input",
|
placeholder: "请输入",
|
visible: (item) => item.borrowertype.value === "01",
|
disabled: true,
|
span: 8,
|
},
|
{
|
label: "法人姓名",
|
prop: "corporatename",
|
type: "input",
|
placeholder: "请输入",
|
visible: (item) => item.borrowertype.value === "01",
|
span: 8,
|
},
|
{
|
label: "法人证件号码",
|
prop: "corporatecertid",
|
type: "input",
|
placeholder: "请输入",
|
visible: (item) => item.borrowertype.value === "01",
|
span: 8,
|
},
|
{
|
label: "法人手机号",
|
prop: "corporatecertphone",
|
type: "input",
|
placeholder: "请输入",
|
visible: (item) => item.borrowertype.value === "01",
|
span: 8,
|
},
|
{
|
label: "邮箱",
|
prop: "email",
|
type: "input",
|
placeholder: "请输入",
|
visible: (item) => item.borrowertype.value === "01",
|
span: 8,
|
},
|
{
|
label: "联系地址",
|
prop: "permanentaddress",
|
type: "textarea",
|
placeholder: "请输入",
|
visible: (item) => true,
|
span: 24,
|
},
|
],
|
};
|
},
|
computed: {
|
dynamicFormFields() {
|
return this.formFields.map((field) => {
|
// 如果字段没有固定的 disabled，则动态绑定
|
if (typeof field.disabled !== "boolean") {
|
return {
|
...field,
|
disabled: this.formDisabled,
|
};
|
}
|
return field; // 保留原始字段的 disabled
|
});
|
},
|
},
|
components: {
|
FormInfo,
|
KeysTable,
|
},
|
created() {
|
this.mainCredit = this.$store.state.product.mainCredit;
|
console.log("mainCredit", this.mainCredit);
|
this.init();
|
},
|
methods: {
|
init() {
|
this.userBaseInfoHeader = [...userBaseInfo];
|
this.requestQryMainCreditInfo();
|
this.requestSexList();
|
},
|
//客户主信息，获取主授信人关联的借款人借据编号
|
async requestQryMainCreditInfo() {
|
const { serialNo } = this.mainCredit;
|
this.loading = true;
|
const resp = await qryMainCreditInfo({ applySerialNo: serialNo });
|
if (resp.result.applySerialList) {
|
if (resp.result.applySerialList.length > 0) {
|
//初审状态下，借款人基本信息才允许编辑
|
if (resp.result.phaseno == "0060") {
|
this.formDisabled = false;
|
} else {
|
this.formDisabled = true;
|
}
|
this.formFields = this.formFields.map((field) => {
|
// 如果字段没有固定的 disabled，则动态绑定
|
if (typeof field.disabled !== "boolean") {
|
return {
|
...field,
|
disabled: this.formDisabled,
|
};
|
}
|
return field; // 保留原始字段的 disabled
|
});
|
|
resp.result.applySerialList.forEach(async (item) => {
|
try {
|
const customerItem = await this.requestQryCustomerBasicInfo(item);
|
const acctLoanItem = await this.requestQueryAcctLoan(item);
|
const paymentScheduleItem =
|
await this.requestQueryPaymentScheduleList(item);
|
const paymentLogItem = await this.requestQueryPaymentLog(item);
|
const combinedItem = {
|
...customerItem,
|
...acctLoanItem,
|
paymentScheduleList: paymentScheduleItem.records,
|
tranList: paymentLogItem.records,
|
};
|
this.loading = false;
|
this.customerTotalList.push(combinedItem);
|
} catch (error) {
|
this.loading = false;
|
console.error("Error combining customer and loan info", error);
|
}
|
});
|
}
|
}
|
},
|
//获取主授信人关联的借款人信息
|
async requestQryCustomerBasicInfo(item) {
|
return new Promise((resolve) => {
|
const res = qryCustomerBasicInfo({
|
applySerialNo: item,
|
});
|
res.then((response) => {
|
if (response.result) {
|
resolve(response.result);
|
}
|
});
|
});
|
},
|
//获取主授信人关联的借款人借款信息
|
async requestQueryAcctLoan(item) {
|
return new Promise((resolve) => {
|
const res = queryAcctLoan({ serialno: item });
|
res.then((response) => {
|
if (response.result) {
|
resolve(response.result);
|
}
|
});
|
});
|
},
|
//获取主授信人关联的借款人还款计划
|
async requestQueryPaymentScheduleList(item) {
|
return new Promise((resolve) => {
|
const res = queryPaymentScheduleList({ applySerialno: item });
|
res.then((response) => {
|
if (response.result) {
|
resolve(response.result);
|
}
|
});
|
});
|
},
|
//获取主授信人关联的借款人还款入账记录
|
async requestQueryPaymentLog(item) {
|
return new Promise((resolve) => {
|
const res = queryPaymentLog({ applySerialNo: item });
|
res.then((response) => {
|
if (response.result) {
|
resolve(response.result);
|
}
|
});
|
});
|
},
|
//获取性别字典
|
async requestSexList() {
|
// 性别
|
const resp = await getDictionaryList({ codeNo: "Sex" });
|
if (resp.result) {
|
this.sexlist = resp.result;
|
}
|
},
|
//保存借款人基本信息
|
async saveCustomerInfo() {
|
this.loading = true;
|
const resp = await saveApplyBusInfo({
|
applySerialNo:
|
this.customerTotalList[this.activeName].applyserialno.value,
|
permanentaddress:
|
this.customerTotalList[this.activeName].permanentaddress.value,
|
phone: this.customerTotalList[this.activeName].phone.value,
|
email: this.customerTotalList[this.activeName].email.value,
|
corporatename:
|
this.customerTotalList[this.activeName].corporatename.value,
|
corporatecertid:
|
this.customerTotalList[this.activeName].corporatecertid.value,
|
corporatecertphone:
|
this.customerTotalList[this.activeName].corporatecertphone.value,
|
});
|
this.loading = false;
|
this.$message.success("保存借款人信息成功");
|
},
|
|
prevPage() {
|
this.applyMenu.forEach((val, index) => {
|
if (val.tabname == "借款人基本信息") {
|
common.vLoanTabInfo(
|
this.applyMenu[index - 1].tabname,
|
"CreditFlowPublic",
|
this
|
);
|
}
|
});
|
},
|
nextPage() {
|
this.$parent.updateApplyTabTree("借款人基本信息");
|
},
|
},
|
beforeRouteLeave(to, from, next) {
|
next();
|
},
|
};
|
</script>
|
<style lang="stylus">
|
.owner {
|
width: 100%;
|
padding-left: 10px;
|
|
.red-star {
|
width: 7px;
|
display: inline-block;
|
vertical-align: middle;
|
color: #FF4300;
|
}
|
|
>.el-button {
|
padding: 9px 12px;
|
}
|
|
>p {
|
height: 20px;
|
color: #222222;
|
font-weight: 500;
|
font-size: 14px;
|
position: relative;
|
margin-bottom: 30px;
|
|
span {
|
width: 2px;
|
height: 14px;
|
background-color: #0081F0;
|
position: absolute;
|
left: -10px;
|
top: 50%;
|
transform: translateY(-50%);
|
}
|
}
|
}
|
|
.permanentprovinceCn .el-input__inner::placeholder {
|
color: #333;
|
}
|
</style>
|
