<template>
|
<div class="product">
|
<el-tabs v-model="tabIndex" type="card" @tab-remove="delCoBorrower">
|
<el-tab-pane
|
v-for="(item, index) in coBorrowerForm"
|
:key="index"
|
:label="item.customername ? item.customername : '共借人'"
|
:name="index + ''"
|
:closable="coBorrowerForm.length > 1 && writeAble"
|
>
|
<el-form
|
:model="coBorrowerForm[index]"
|
:rules="rules"
|
ref="coBorrowerForm"
|
inline
|
label-width="165px"
|
size="small"
|
style="margin-bottom: 36px"
|
>
|
<el-form-item
|
label="与借款人关系"
|
v-if="coBorrowerArr[index].borrowerrelationship.visible"
|
prop="borrowerrelationship"
|
:class="{
|
isDifferent:
|
coBorrowerArr[index].borrowerrelationship.isDifferent,
|
}"
|
>
|
<el-select
|
v-model="coBorrowerForm[index].borrowerrelationship"
|
filterable
|
clearable
|
:disabled="!coBorrowerArr[index].borrowerrelationship.writeAble"
|
placeholder="支持输入搜索选择"
|
>
|
<el-option
|
v-for="(i, index) in borrowerrelationshiplist"
|
:key="index"
|
:label="i.itemname"
|
:value="i.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="客户编号">
|
<el-input
|
v-model="coBorrowerForm[index].customerid"
|
disabled
|
></el-input>
|
</el-form-item>
|
<el-form-item
|
label="客户名称"
|
v-if="coBorrowerArr[index].customername.visible"
|
prop="customername"
|
:class="{
|
isDifferent: coBorrowerArr[index].customername.isDifferent,
|
}"
|
>
|
<el-input
|
v-model="coBorrowerForm[index].customername"
|
:disabled="!coBorrowerArr[index].customername.writeAble"
|
></el-input>
|
</el-form-item>
|
<el-form-item
|
label="手机号码"
|
v-if="coBorrowerArr[index].phone.visible"
|
prop="phone"
|
:class="{ isDifferent: coBorrowerArr[index].phone.isDifferent }"
|
>
|
<el-input
|
maxlength="11"
|
v-model="coBorrowerForm[index].phone"
|
:disabled="!coBorrowerArr[index].phone.writeAble"
|
></el-input>
|
</el-form-item>
|
<el-form-item
|
label="证件类型"
|
v-if="coBorrowerArr[index].certtype.visible"
|
prop="certtype"
|
:class="{ isDifferent: coBorrowerArr[index].certtype.isDifferent }"
|
>
|
<el-select
|
v-model="coBorrowerForm[index].certtype"
|
clearable
|
filterable
|
:disabled="!coBorrowerArr[index].certtype.writeAble"
|
placeholder="支持输入搜索选择"
|
>
|
<el-option
|
v-for="(i, index) in certtypeList"
|
:key="index"
|
:label="i.itemname"
|
:value="i.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
label="证件号码"
|
v-if="coBorrowerArr[index].certid.visible"
|
prop="certid"
|
:class="{ isDifferent: coBorrowerArr[index].certid.isDifferent }"
|
>
|
<el-input
|
v-model="coBorrowerForm[index].certid"
|
:disabled="!coBorrowerArr[index].certid.writeAble"
|
@change="
|
coBorrowerForm[index].certid = coBorrowerForm[
|
index
|
].certid.toUpperCase()
|
"
|
>
|
<el-button
|
slot="append"
|
icon="el-icon-camera"
|
:disabled="isUploadAble"
|
@click="handleCeridUploadOpen"
|
></el-button>
|
</el-input>
|
</el-form-item>
|
<el-form-item
|
label="性别"
|
v-if="coBorrowerArr[index].cardSex.visible"
|
prop="cardSex"
|
:class="{ isDifferent: coBorrowerArr[index].cardSex.isDifferent }"
|
>
|
<el-select
|
v-model="coBorrowerForm[index].cardSex"
|
clearable
|
filterable
|
:disabled="!coBorrowerArr[index].cardSex.writeAble"
|
placeholder="支持输入搜索选择"
|
>
|
<el-option
|
v-for="(i, index) in sexlist"
|
:key="index"
|
:label="i.itemname"
|
:value="i.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
label="民族"
|
v-if="coBorrowerArr[index].nation.visible"
|
prop="nation"
|
:class="{ isDifferent: coBorrowerArr[index].nation.isDifferent }"
|
>
|
<el-select
|
v-model="coBorrowerForm[index].nation"
|
clearable
|
filterable
|
:disabled="!coBorrowerArr[index].nation.writeAble"
|
placeholder="支持输入搜索选择"
|
>
|
<el-option
|
v-for="(i, index) in nationlist"
|
:key="index"
|
:label="i.itemname"
|
:value="i.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
label="出生年月"
|
prop="cardBirthday"
|
v-if="coBorrowerArr[index].cardBirthday.visible"
|
:class="{isDifferent: coBorrowerArr[index].cardBirthday.isDifferent}"
|
>
|
<el-date-picker
|
v-model="coBorrowerForm[index].cardBirthday"
|
type="date"
|
format="yyyy/MM/dd"
|
value-format="yyyy/MM/dd"
|
placeholder="选择日期"
|
:disabled="!coBorrowerArr[index].cardBirthday.writeAble"
|
>
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item
|
label="签发机关"
|
prop="issuer"
|
v-if="coBorrowerArr[index].issuer.visible"
|
:class="{ isDifferent: coBorrowerArr[index].issuer.isDifferent }"
|
>
|
<el-input
|
v-model="coBorrowerForm[index].issuer"
|
:disabled="!coBorrowerArr[index].issuer.writeAble"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="身份证有效期开始日期"
|
prop="validBegin"
|
v-if="coBorrowerArr[index].validBegin.visible"
|
:class="{isDifferent: coBorrowerArr[index].validBegin.isDifferent}"
|
>
|
<el-date-picker
|
v-model="coBorrowerForm[index].validBegin"
|
type="date"
|
format="yyyy/MM/dd"
|
value-format="yyyy/MM/dd"
|
placeholder="选择日期"
|
:disabled="!coBorrowerArr[index].validBegin.writeAble"
|
>
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item
|
label="身份证有效期结束日期"
|
prop="validEnd"
|
v-if="coBorrowerArr[index].validEnd.visible"
|
:class="{isDifferent: coBorrowerArr[index].validEnd.isDifferent}"
|
>
|
<el-date-picker
|
v-model="coBorrowerForm[index].validEnd"
|
type="date"
|
format="yyyy/MM/dd"
|
value-format="yyyy/MM/dd"
|
placeholder="选择日期"
|
:disabled="!coBorrowerArr[index].validEnd.writeAble"
|
>
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item
|
label="婚姻状况"
|
v-if="coBorrowerArr[index].marriage.visible"
|
prop="marriage"
|
:class="{ isDifferent: coBorrowerArr[index].marriage.isDifferent }"
|
>
|
<el-select
|
v-model="coBorrowerForm[index].marriage"
|
clearable
|
filterable
|
:disabled="!coBorrowerArr[index].marriage.writeAble"
|
placeholder="支持输入搜索选择"
|
>
|
<el-option
|
v-for="(i, index) in marriageList"
|
:key="index"
|
:label="i.itemname"
|
:value="i.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
label="最高学历"
|
v-if="coBorrowerArr[index].education.visible"
|
prop="education"
|
:class="{ isDifferent: coBorrowerArr[index].education.isDifferent }"
|
>
|
<el-select
|
v-model="coBorrowerForm[index].education"
|
clearable
|
filterable
|
:disabled="!coBorrowerArr[index].education.writeAble"
|
placeholder="支持输入搜索选择"
|
>
|
<el-option
|
v-for="(i, index) in educationList"
|
:key="index"
|
:label="i.itemname"
|
:value="i.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
label="工作/经营城市"
|
v-if="coBorrowerArr[index].workcity.visible"
|
prop="workcity"
|
:class="{ isDifferent: coBorrowerArr[index].workcity.isDifferent }"
|
>
|
<el-select
|
v-model="coBorrowerForm[index].workcity"
|
clearable
|
filterable
|
:disabled="!coBorrowerArr[index].workcity.writeAble"
|
placeholder="支持输入搜索选择"
|
>
|
<el-option
|
v-for="(i, index) in workCityList"
|
:key="index"
|
:label="i.itemname"
|
:value="i.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
label="职业类型"
|
v-if="coBorrowerArr[index].headship.visible"
|
prop="headship"
|
:class="{ isDifferent: coBorrowerArr[index].headship.isDifferent }"
|
>
|
<el-select
|
v-model="coBorrowerForm[index].headship"
|
clearable
|
filterable
|
:disabled="!coBorrowerArr[index].headship.writeAble"
|
placeholder="支持输入搜索选择"
|
@change="handleHeadship(coBorrowerForm[index].headship, index)"
|
>
|
<el-option
|
v-for="(i, index) in headshiplist"
|
:key="index"
|
:label="i.itemname"
|
:value="i.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
label="职业种类"
|
v-if="coBorrowerArr[index].occupation.visible"
|
prop="occupation"
|
:class="{ isDifferent: coBorrowerArr[index].occupation.isDifferent }"
|
>
|
<el-select
|
v-model="coBorrowerForm[index].occupation"
|
clearable
|
filterable
|
:disabled="!coBorrowerArr[index].occupation.writeAble"
|
placeholder="支持输入搜索选择"
|
@change="handleoccupation(coBorrowerForm[index].occupation, index)"
|
>
|
<el-option
|
v-for="(i, index) in occupationlist"
|
:key="index"
|
:label="i.itemname"
|
:value="i.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
label="是否企业主/个体户"
|
v-if="coBorrowerArr[index].isindividualhousehold.visible"
|
prop="isindividualhousehold"
|
:class="{
|
isDifferent:
|
coBorrowerArr[index].isindividualhousehold.isDifferent,
|
}"
|
>
|
<el-input
|
v-show="false"
|
v-model="coBorrowerForm[index].isindividualhousehold"
|
></el-input>
|
<el-input
|
v-model="coBorrowerForm[index].isindividualhouseholdDesc"
|
:disabled="!coBorrowerArr[index].isindividualhousehold.writeAble"
|
></el-input>
|
</el-form-item>
|
<el-form-item
|
label="征信查询类型"
|
v-if="coBorrowerArr[index].querycredittype.visible"
|
prop="querycredittype"
|
:class="{
|
isDifferent: coBorrowerArr[index].querycredittype.isDifferent,
|
}"
|
>
|
<el-select
|
v-model="coBorrowerForm[index].querycredittype"
|
clearable
|
filterable
|
:disabled="!coBorrowerArr[index].querycredittype.writeAble"
|
placeholder="支持输入搜索选择"
|
>
|
<el-option
|
v-for="(i, index) in creditList"
|
:key="index"
|
:label="i.itemname"
|
:value="i.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
label="单位名称/注册号"
|
v-if="coBorrowerArr[index].companyname.visible"
|
prop="companyname"
|
:rules="
|
coBorrowerForm[index].headship != '04'
|
? [{ required: true, message: '请输入单位名称/注册号' }]
|
: [{ required: false }]
|
"
|
:class="{
|
isDifferent: coBorrowerArr[index].companyname.isDifferent,
|
}"
|
>
|
<el-input
|
v-model="coBorrowerForm[index].companyname"
|
:disabled="!coBorrowerArr[index].companyname.writeAble || coBorrowerForm[index].headship == '04'"
|
></el-input>
|
</el-form-item>
|
<el-form-item
|
label="单位电话"
|
v-if="coBorrowerArr[index].companyphone.visible"
|
prop="companyphone"
|
:class="{isDifferent: coBorrowerArr[index].companyphone.isDifferent}"
|
>
|
<el-input
|
v-model="coBorrowerForm[index].companyphone"
|
:disabled="!coBorrowerArr[index].companyphone.writeAble || coBorrowerForm[index].headship == '04'"
|
></el-input>
|
</el-form-item>
|
<el-form-item
|
label="单位地址(省)"
|
v-if="coBorrowerArr[index].companyprovince.visible"
|
prop="companyprovince"
|
:rules="
|
coBorrowerForm[index].headship != '04'
|
? [{ required: true, message: '请输入单位地址(省)' }]
|
: [{ required: false }]
|
"
|
:class="{
|
isDifferent: coBorrowerArr[index].companyprovince.isDifferent,
|
}"
|
>
|
<el-select
|
v-model="coBorrowerForm[index].companyprovince"
|
clearable
|
filterable
|
:disabled="!coBorrowerArr[index].companyprovince.writeAble || coBorrowerForm[index].headship == '04'"
|
placeholder="支持输入搜索选择"
|
@change="
|
getprovince(
|
coBorrowerForm[index].companyprovince,
|
'companycityList',
|
coBorrowerForm[index],
|
function (arr) {
|
(coBorrowerArr[index].companycityList = arr),
|
$set(coBorrowerArr, index, coBorrowerArr[index]);
|
}
|
)
|
"
|
>
|
<el-option
|
v-for="(i, index) in provinceList"
|
:key="index"
|
:label="i.itemname"
|
:value="i.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
label="单位地址(市)"
|
v-if="coBorrowerArr[index].companycity.visible"
|
prop="companycity"
|
:rules="
|
coBorrowerForm[index].headship != '04'
|
? [{ required: true, message: '请输入单位地址(市)' }]
|
: [{ required: false }]
|
"
|
:class="{
|
isDifferent: coBorrowerArr[index].companycity.isDifferent,
|
}"
|
>
|
<el-select
|
v-model="coBorrowerForm[index].companycity"
|
clearable
|
filterable
|
:disabled="!coBorrowerArr[index].companycity.writeAble || coBorrowerForm[index].headship == '04'"
|
placeholder="支持输入搜索选择"
|
@change="
|
getcity(
|
coBorrowerForm[index].companycity,
|
'companycountyList',
|
coBorrowerForm[index],
|
function (arr) {
|
(coBorrowerArr[index].companycountyList = arr),
|
$set(coBorrowerArr, index, coBorrowerArr[index]);
|
}
|
)
|
"
|
>
|
<el-option
|
v-for="(i, index) in coBorrowerArr[index].companycityList"
|
:key="index"
|
:label="i.itemname"
|
:value="i.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
label="单位地址(区)"
|
v-if="coBorrowerArr[index].companycounty.visible"
|
prop="companycounty"
|
:rules="
|
coBorrowerForm[index].headship != '04'
|
? [{ required: true, message: '请输入单位地址(区)' }]
|
: [{ required: false }]
|
"
|
:class="{
|
isDifferent: coBorrowerArr[index].companycounty.isDifferent,
|
}"
|
>
|
<el-select
|
v-model="coBorrowerForm[index].companycounty"
|
clearable
|
filterable
|
:disabled="!coBorrowerArr[index].companycounty.writeAble || coBorrowerForm[index].headship == '04'"
|
placeholder="支持输入搜索选择"
|
>
|
<el-option
|
v-for="(i, index) in coBorrowerArr[index].companycountyList"
|
:key="index"
|
:label="i.itemname"
|
:value="i.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
label="单位地址(街道/小区名/单元/房号)"
|
v-if="coBorrowerArr[index].companyaddress.visible"
|
prop="companyaddress"
|
:rules="
|
coBorrowerForm[index].headship != '04'
|
? [
|
{
|
required: true,
|
message: '请输入单位地址(街道/小区名/单元/房号)',
|
},
|
]
|
: [{ required: false }]
|
"
|
:class="{
|
isDifferent: coBorrowerArr[index].companyaddress.isDifferent,
|
}"
|
>
|
<el-input
|
v-model="coBorrowerForm[index].companyaddress"
|
:disabled="!coBorrowerArr[index].companyaddress.writeAble || coBorrowerForm[index].headship == '04'"
|
></el-input>
|
</el-form-item>
|
<el-form-item
|
label="家庭电话"
|
v-if="coBorrowerArr[index].hometel.visible"
|
prop="hometel"
|
:class="{ isDifferent: coBorrowerArr[index].hometel.isDifferent }"
|
>
|
<el-input
|
v-model="coBorrowerForm[index].hometel"
|
:disabled="!coBorrowerArr[index].hometel.writeAble"
|
></el-input>
|
</el-form-item>
|
<el-form-item
|
label="家庭地址(省)"
|
v-if="coBorrowerArr[index].familyprovince.visible"
|
prop="familyprovince"
|
:class="{
|
isDifferent: coBorrowerArr[index].familyprovince.isDifferent,
|
}"
|
>
|
<el-select
|
v-model="coBorrowerForm[index].familyprovince"
|
clearable
|
filterable
|
:disabled="!coBorrowerArr[index].familyprovince.writeAble"
|
placeholder="支持输入搜索选择"
|
@change="
|
getprovince(
|
coBorrowerForm[index].familyprovince,
|
'familycityList',
|
coBorrowerForm[index],
|
function (arr) {
|
(coBorrowerArr[index].familycityList = arr),
|
$set(coBorrowerArr, index, coBorrowerArr[index]);
|
}
|
)
|
"
|
>
|
<el-option
|
v-for="(i, index) in provinceList"
|
:key="index"
|
:label="i.itemname"
|
:value="i.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
label="家庭地址(市)"
|
v-if="coBorrowerArr[index].familycity.visible"
|
prop="familycity"
|
:class="{
|
isDifferent: coBorrowerArr[index].familycity.isDifferent,
|
}"
|
>
|
<el-select
|
v-model="coBorrowerForm[index].familycity"
|
clearable
|
filterable
|
:disabled="!coBorrowerArr[index].familycity.writeAble"
|
placeholder="支持输入搜索选择"
|
@change="
|
getcity(
|
coBorrowerForm[index].familycity,
|
'familycountyList',
|
coBorrowerForm[index],
|
function (arr) {
|
(coBorrowerArr[index].familycountyList = arr),
|
$set(coBorrowerArr, index, coBorrowerArr[index]);
|
}
|
)
|
"
|
>
|
<el-option
|
v-for="(i, index) in coBorrowerArr[index].familycityList"
|
:key="index"
|
:label="i.itemname"
|
:value="i.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
label="家庭地址(区)"
|
v-if="coBorrowerArr[index].familycounty.visible"
|
prop="familycounty"
|
:class="{
|
isDifferent: coBorrowerArr[index].familycounty.isDifferent,
|
}"
|
>
|
<el-select
|
v-model="coBorrowerForm[index].familycounty"
|
clearable
|
filterable
|
:disabled="!coBorrowerArr[index].familycounty.writeAble"
|
placeholder="支持输入搜索选择"
|
>
|
<el-option
|
v-for="(i, index) in coBorrowerArr[index].familycountyList"
|
:key="index"
|
:label="i.itemname"
|
:value="i.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
label="家庭地址(街道/小区名/单元/房号)"
|
v-if="coBorrowerArr[index].familyaddress.visible"
|
prop="familyaddress"
|
:class="{
|
isDifferent: coBorrowerArr[index].familyaddress.isDifferent,
|
}"
|
>
|
<el-input
|
v-model="coBorrowerForm[index].familyaddress"
|
:disabled="!coBorrowerArr[index].familyaddress.writeAble"
|
></el-input>
|
</el-form-item>
|
<el-form-item
|
label="户籍地址(省)"
|
v-if="coBorrowerArr[index].kosekiprovince.visible"
|
prop="kosekiprovince"
|
:class="{
|
isDifferent: coBorrowerArr[index].kosekiprovince.isDifferent,
|
}"
|
>
|
<el-select
|
v-model="coBorrowerForm[index].kosekiprovince"
|
clearable
|
filterable
|
v-if="coBorrowerArr[index].kosekiprovince.writeAble"
|
placeholder="支持输入搜索选择"
|
@change="
|
getprovince(
|
coBorrowerForm[index].kosekiprovince,
|
'kosekicityList',
|
coBorrowerForm[index],
|
function (arr) {
|
(coBorrowerArr[index].kosekicityList = arr),
|
$set(coBorrowerArr, index, coBorrowerArr[index]);
|
}
|
)
|
"
|
>
|
<el-option
|
v-for="(i, index) in provinceList"
|
:key="index"
|
:label="i.itemname"
|
:value="i.itemno"
|
></el-option>
|
</el-select>
|
<el-input
|
v-else
|
v-model="coBorrowerArr[index].kosekiprovince.valueDesc"
|
disabled
|
></el-input>
|
</el-form-item>
|
<el-form-item
|
label="户籍地址(市)"
|
v-if="coBorrowerArr[index].kosekicity.visible"
|
prop="kosekicity"
|
:class="{
|
isDifferent: coBorrowerArr[index].kosekicity.isDifferent,
|
}"
|
>
|
<el-select
|
v-model="coBorrowerForm[index].kosekicity"
|
clearable
|
filterable
|
:disabled="!coBorrowerArr[index].kosekicity.writeAble"
|
placeholder="支持输入搜索选择"
|
@change="
|
getcity(
|
coBorrowerForm[index].kosekicity,
|
'kosekicountyList',
|
coBorrowerForm[index],
|
function (arr) {
|
(coBorrowerArr[index].kosekicountyList = arr),
|
$set(coBorrowerArr, index, coBorrowerArr[index]);
|
}
|
)
|
"
|
>
|
<el-option
|
v-for="(i, index) in coBorrowerArr[index].kosekicityList"
|
:key="index"
|
:label="i.itemname"
|
:value="i.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
label="户籍地址(区)"
|
v-if="coBorrowerArr[index].kosekicounty.visible"
|
prop="kosekicounty"
|
:class="{
|
isDifferent: coBorrowerArr[index].kosekicounty.isDifferent,
|
}"
|
>
|
<el-select
|
v-model="coBorrowerForm[index].kosekicounty"
|
clearable
|
filterable
|
:disabled="!coBorrowerArr[index].kosekicounty.writeAble"
|
placeholder="支持输入搜索选择"
|
>
|
<el-option
|
v-for="(i, index) in coBorrowerArr[index].kosekicountyList"
|
:key="index"
|
:label="i.itemname"
|
:value="i.itemno"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
label="户籍地址(街道/小区名/单元/房号)"
|
v-if="coBorrowerArr[index].kosekifulladd.visible"
|
prop="kosekifulladd"
|
:class="{
|
isDifferent: coBorrowerArr[index].kosekifulladd.isDifferent,
|
}"
|
>
|
<el-input
|
v-model="coBorrowerForm[index].kosekifulladd"
|
:disabled="!coBorrowerArr[index].kosekifulladd.writeAble"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
</el-tab-pane>
|
</el-tabs>
|
<div class="btn">
|
<el-button size="medium" plain @click="noCoBorrower" v-if="writeAble"
|
>无共借人</el-button
|
>
|
<el-button size="medium" plain @click="addCoBorrower" v-if="writeAble"
|
>添加共借人</el-button
|
>
|
<el-button
|
size="medium"
|
plain
|
@click="saveDraft(coBorrowerForm)"
|
v-if="applyInfo.phaseNo == '0040' || applyInfo.phaseNo == '0010'"
|
>保存草稿</el-button
|
>
|
<el-button
|
size="medium"
|
plain
|
@click="prevStep"
|
v-if="applyInfo.phaseNo == '0040' || applyInfo.phaseNo == '0010'"
|
>上一步</el-button
|
>
|
<el-button
|
size="medium"
|
type="primary"
|
@click="submit(coBorrowerForm)"
|
v-if="applyInfo.phaseNo == '0040' || applyInfo.phaseNo == '0010'"
|
>下一步</el-button
|
>
|
<el-button
|
size="medium"
|
plain
|
@click="save(coBorrowerForm)"
|
v-if="applyInfo.phaseNo > '0040' && writeAble"
|
>保存</el-button
|
>
|
<el-button
|
size="medium"
|
plain
|
@click="prevStep"
|
v-if="applyInfo.phaseNo != '0040' && applyInfo.phaseNo != '0010'"
|
>上一页</el-button
|
>
|
<el-button
|
size="medium"
|
type="primary"
|
@click="nextPage()"
|
v-if="applyInfo.phaseNo != '0040' && applyInfo.phaseNo != '0010'"
|
>下一页</el-button
|
>
|
</div>
|
<!-- 证件图片上传 -->
|
<CertUpload
|
:visible="showCeridUploadImg"
|
@close="handleCeridUploadClose"
|
@submit="subimtCeridUpload"
|
></CertUpload>
|
</div>
|
</template>
|
<script>
|
import {
|
qryCoBorrowerDetail,
|
getDictionaryList,
|
getAllCityAreaList,
|
saveMultipleCoBorrower,
|
noBorrowerFlag,
|
submitBatchGuarantCoBorrowDetail,
|
delGuarantorOrCoBorrower,
|
getProvinceCodeList,
|
} from "@/api/product";
|
import { setStorage, getStorage, removeStorage } from "@/utils/storage";
|
import common from "@/utils/common";
|
import CertUpload from "@views/product/components/CertUpload";
|
export default {
|
data() {
|
return {
|
applyInfo: this.$store.state.product.applyInfo,
|
applyMenu: this.$store.state.product.applyMenu,
|
isUploadAble: false,
|
initialArr: [], //初始数据
|
coBorrowerArr: [], //清空初始化value值,作为校验动态字段
|
coBorrowerForm: [],
|
borrowerrelationshiplist: [],
|
certtypeList: [],
|
marriageList: [],
|
educationList: [],
|
workCityList: [],
|
headshiplist: [],
|
occupationlist: [],
|
nationlist: [],
|
sexlist: [],
|
provinceList: [],
|
creditList: [],
|
rules: {},
|
writeAble: false,
|
tabIndex: "0",
|
showCeridUploadImg: false,
|
rulesDate: {
|
required: true,
|
message: "请输入日期",
|
trigger: "blur",
|
},
|
};
|
},
|
async created() {
|
this.$parent._data.loading = true;
|
// 获取共借人信息
|
let result = await this.getCoBorrowerDetail();
|
result = this.compareFields(result);
|
this.getCoBorrowerData(result);
|
// 获取与借款人关系列表
|
this.borrowerrelationshiplist = await this.qryDictionaryList(
|
"CustomerRelationShip"
|
);
|
//获取证件类型列表
|
this.certtypeList = await this.qryDictionaryList("CertType");
|
// 获取婚姻状况下拉
|
this.marriageList = await this.qryDictionaryList("MarRiage");
|
// 最高学历下拉
|
this.educationList = await this.qryDictionaryList("EducationCode");
|
// 职业类型
|
this.headshiplist = await this.qryDictionaryList("HeadShip");
|
// 职业种类
|
this.occupationlist = await this.qryDictionaryList("Occupation");
|
// 民族
|
this.nationlist = await this.qryDictionaryList("Rh_NATION");
|
// 性别
|
this.sexlist = await this.qryDictionaryList("Sex");
|
//获取工作经营城市
|
getAllCityAreaList({ queryFlag: "02" }).then((res) => {
|
this.workCityList = res.result;
|
});
|
this.$parent._data.loading = false;
|
},
|
components: {
|
CertUpload,
|
},
|
methods: {
|
compareFields(result) {
|
const { applyInfo } = this;
|
const { refuseFlag, phaseNo } = applyInfo;
|
this.isUploadAble = applyInfo.phaseNo <= '0040'? false :true
|
if (refuseFlag == 1) {
|
const { coBorrowerGuarantor } = this.$store.state.product.fields;
|
coBorrowerGuarantor.forEach((val, index) => {
|
for (const key in val) {
|
if (result[index][key].value != val[key]) {
|
result[index][key]["isDifferent"] = true;
|
}
|
}
|
});
|
}
|
return result;
|
},
|
// 处理数据,将数据重新排列
|
async getCoBorrowerData(result) {
|
const { applyInfo } = this;
|
const { productID, phaseNo } = applyInfo;
|
// 初始化数据
|
this.coBorrowerArr = result;
|
this.coBorrowerForm = [];
|
this.initialArr = [];
|
this.coBorrowerArr.forEach(async (val, index) => {
|
// 取数组第一个作为校验规则
|
if (index == 0) {
|
for (const key in val) {
|
this.rules[key] = [];
|
// 自定义规则校验
|
switch (key) {
|
case "customername":
|
this.rules[key].push(common.validate("name"));
|
break;
|
case "phone":
|
this.rules[key].push(common.validate("phone"));
|
break;
|
case "certid":
|
const checkCertid = (rule, value, callback) =>
|
common.checkCertid(
|
this.coBorrowerForm[index].certtype,
|
value,
|
callback
|
);
|
this.rules[key].push({
|
validator: checkCertid,
|
trigger: "change",
|
});
|
break;
|
case "companyname":
|
this.rules[key].push(common.validate("companyname"));
|
break;
|
case "companyphone":
|
case "hometel":
|
this.rules[key].push(common.validate("telephone"));
|
break;
|
case "cardBirthday":
|
case "validBegin":
|
case "validEnd":
|
this.rules[key].push({
|
required: true,
|
message: "请输入日期",
|
trigger: "change"
|
});
|
break;
|
default:
|
break;
|
}
|
// 必填校验
|
if (val[key].required) {
|
this.rules[key].push({
|
required: true,
|
message: `请输入${val[key].filedDescription}`,
|
trigger: "change",
|
});
|
}
|
}
|
}
|
//是否企业主/个体户
|
if (val.headship.value) {
|
val.isindividualhouseholdDesc = {};
|
if (val.headship.value == "01") {
|
val.isindividualhousehold.value = "1";
|
val.isindividualhouseholdDesc.value = "是";
|
} else {
|
val.isindividualhousehold.value = "0";
|
val.isindividualhouseholdDesc.value = "否";
|
}
|
}
|
// 将数据重新排列
|
let obj = {};
|
for (const key in val) {
|
obj[key] = val[key].value;
|
if (key != "querycredittype") {
|
val[key].value = "";
|
}
|
}
|
this.coBorrowerForm.push(obj);
|
this.initialArr.push(Object.assign({}, obj));
|
});
|
// 根据与借款人关系判断页面是否都是只读
|
this.writeAble = this.coBorrowerArr[0].borrowerrelationship.writeAble;
|
// 判断如果是贷款就要添加下面的逻辑
|
if (phaseNo >= "0040") {
|
// 征信类型查询
|
this.creditList = await this.qryDictionaryList("queryCreditType");
|
// 产品为乐贷、精装贷、车位贷时,下拉框值需要修改.接口直接修改返回值会影像到其他使用该接口的数据,所以前端做修改
|
if (productID === "LD" || productID === "JZ" || productID === "CW") {
|
const itemnameIndex = this.creditList.findIndex(
|
(item) => item.itemname === "无需客户征信"
|
);
|
if (itemnameIndex > -1) {
|
this.creditList[itemnameIndex].itemname += "(贷款额≤10万必选)";
|
}
|
}
|
// 获取省枚举值
|
getProvinceCodeList({}).then((res) => {
|
this.provinceList = res.result;
|
});
|
this.coBorrowerForm.forEach(async (val, index) => {
|
// 根据省获取市
|
val.companyprovince
|
? (this.coBorrowerArr[
|
index
|
].companycityList = await common.qryCityCodeList(
|
val.companyprovince
|
))
|
: "";
|
val.familyprovince
|
? (this.coBorrowerArr[
|
index
|
].familycityList = await common.qryCityCodeList(
|
val.familyprovince
|
))
|
: "";
|
val.kosekiprovince
|
? (this.coBorrowerArr[
|
index
|
].kosekicityList = await common.qryCityCodeList(
|
val.kosekiprovince
|
))
|
: "";
|
// 根据市获取区
|
val.companycity
|
? (this.coBorrowerArr[
|
index
|
].companycountyList = await common.qryAreaCodeList(
|
val.companycity
|
))
|
: "";
|
val.familycity
|
? (this.coBorrowerArr[
|
index
|
].familycountyList = await common.qryAreaCodeList(val.familycity))
|
: "";
|
val.kosekicity
|
? (this.coBorrowerArr[
|
index
|
].kosekicountyList = await common.qryAreaCodeList(val.kosekicity))
|
: "";
|
this.$set(this.coBorrowerArr, index, this.coBorrowerArr[index]);
|
});
|
}
|
},
|
// 获取共借人信息
|
getCoBorrowerDetail() {
|
return new Promise((resolve) => {
|
qryCoBorrowerDetail({
|
applySerialNo: this.applyInfo.serialNo,
|
customerId: this.applyInfo.customerid,
|
relationtype: "01",
|
}).then((res) => {
|
resolve(res.result);
|
});
|
});
|
},
|
qryDictionaryList(code) {
|
return new Promise((resolve) => {
|
getDictionaryList({
|
codeNo: code,
|
}).then((res) => {
|
resolve(res.result);
|
});
|
});
|
},
|
// 提交共借人接口
|
submitCoBorrower(arr) {
|
return new Promise((resolve) => {
|
submitBatchGuarantCoBorrowDetail({
|
customerInfolist: arr,
|
}).then((res) => {
|
resolve(res);
|
});
|
});
|
},
|
// 保存共借人接口
|
saveCoBorrower(arr) {
|
return new Promise((resolve) => {
|
saveMultipleCoBorrower({
|
customerInfolist: arr,
|
}).then((res) => {
|
resolve(res);
|
});
|
});
|
},
|
// 添加共借人
|
addCoBorrower() {
|
const validateForm = common.validateForm(this.$refs.coBorrowerForm);
|
this.tabIndex =
|
validateForm.index === undefined
|
? this.tabIndex
|
: "" + validateForm.index;
|
if (!validateForm.flag) return;
|
if (this.$refs.coBorrowerForm.length > 2) {
|
this.$message.warning("只能添加三个共借人信息");
|
return;
|
}
|
const obj = {};
|
for (const key in this.coBorrowerArr[0]) {
|
obj[key] = this.coBorrowerArr[0][key].value;
|
}
|
this.coBorrowerForm.push(obj);
|
this.initialArr.push(Object.assign({}, obj));
|
this.coBorrowerArr.push(this.coBorrowerArr[0]);
|
this.tabIndex = `${this.coBorrowerForm.length - 1}`;
|
},
|
// 共借人保存草稿
|
async saveDraft(arr) {
|
for (let i = 0; i < arr.length; i++) {
|
if (!arr[i].customername && !arr[i].certtype && !arr[i].certid) {
|
this.$message.warning("客户名称,证件类型,证件号码不能为空");
|
return;
|
}
|
}
|
this.$parent._data.loading = true;
|
arr.forEach((val) => {
|
val.relationtype = "01";
|
val.applyserialno = this.applyInfo.serialNo;
|
});
|
const res = await this.saveCoBorrower(arr);
|
if (res.code == "00") {
|
const result = await this.getCoBorrowerDetail();
|
this.getCoBorrowerData(result);
|
this.$message.success("保存成功");
|
// 保存草稿需要调用父组件的查询左侧tab的方法
|
this.$parent.getApplyTabTree();
|
}
|
this.$parent._data.loading = false;
|
},
|
// 共借人保存并校验数据完整性
|
async save(arr) {
|
const validateForm = common.validateForm(this.$refs.coBorrowerForm);
|
this.tabIndex =
|
validateForm.index === undefined
|
? this.tabIndex
|
: "" + validateForm.index;
|
if (!validateForm.flag) return;
|
this.$parent._data.loading = true;
|
arr.forEach((val) => {
|
val.relationtype = "01";
|
val.applyserialno = this.applyInfo.serialNo;
|
});
|
const res = await this.saveCoBorrower(arr);
|
if (res.code == "00") {
|
const result = await this.getCoBorrowerDetail();
|
this.getCoBorrowerData(result);
|
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
|
);
|
}
|
});
|
},
|
// 下一页
|
nextPage() {
|
// 调用父组件的查询左侧tab的方法
|
this.$parent.updateApplyTabTree("共借人信息");
|
},
|
// 提交
|
async submit(arr) {
|
const validateForm = common.validateForm(this.$refs.coBorrowerForm);
|
this.tabIndex =
|
validateForm.index === undefined
|
? this.tabIndex
|
: "" + validateForm.index;
|
if (!validateForm.flag) return;
|
this.$parent._data.loading = true;
|
arr.forEach((val) => {
|
val.relationtype = "01";
|
val.applyserialno = this.applyInfo.serialNo;
|
});
|
const res = await this.submitCoBorrower(arr);
|
if (res.code == "00") {
|
const result = await this.getCoBorrowerDetail();
|
this.getCoBorrowerData(result);
|
this.nextPage();
|
}
|
this.$parent._data.loading = false;
|
},
|
// 无共借人
|
noBorrowerFlag() {
|
this.$parent._data.loading = true;
|
noBorrowerFlag({
|
applySerialNo: this.applyInfo.serialNo,
|
customerId: this.applyInfo.customerid,
|
requesttype: "01",
|
}).then((res) => {
|
this.$parent._data.loading = false;
|
if (res.code == "00") {
|
this.nextPage();
|
}
|
});
|
},
|
noCoBorrower() {
|
if (this.coBorrowerForm.length == 1 && !this.coBorrowerForm[0].serialno) {
|
this.noBorrowerFlag();
|
} else {
|
common.comfirm(
|
"提示",
|
"该操作会删除申请单下的所有共借人，请确认是否继续删除？",
|
() => {
|
this.noBorrowerFlag();
|
}
|
);
|
}
|
},
|
// 删除共借人
|
delCoBorrower(index) {
|
if (this.coBorrowerForm[index].serialno) {
|
common.comfirm(
|
"提示",
|
`请确认是否删除共借人：${this.coBorrowerForm[index].customername}`,
|
() => {
|
this.$parent._data.loading = true;
|
delGuarantorOrCoBorrower([
|
this.coBorrowerForm[index].serialno,
|
]).then((res) => {
|
if (res.code == "00") {
|
this.$parent._data.loading = false;
|
this.$message.success("删除成功");
|
this.coBorrowerForm.splice(index, 1);
|
this.coBorrowerArr.splice(index, 1);
|
this.tabIndex = `${index - 1 >= 0 ? index - 1 : index}`;
|
}
|
});
|
}
|
);
|
} else {
|
this.coBorrowerForm.splice(index, 1);
|
this.coBorrowerArr.splice(index, 1);
|
this.tabIndex = `${index - 1 >= 0 ? index - 1 : index}`;
|
}
|
},
|
// 根据职业类型自动填充是否企业主字段
|
handleHeadship(val, index) {
|
// 判断是否是贷款申请编辑
|
if (this.applyInfo.phaseNo >= "0040") {
|
if (val == "01") {
|
this.coBorrowerForm[index].isindividualhousehold = "1";
|
this.coBorrowerForm[index].isindividualhouseholdDesc = "是";
|
} else {
|
this.coBorrowerForm[index].isindividualhousehold = "0";
|
this.coBorrowerForm[index].isindividualhouseholdDesc = "否";
|
}
|
if (val == '04') {
|
let coBorrowerForm = this.coBorrowerForm[0]
|
coBorrowerForm.companyname = null
|
coBorrowerForm.companyphone = null
|
coBorrowerForm.companyprovince = null
|
coBorrowerForm.companycity = null
|
coBorrowerForm.companycounty = null
|
coBorrowerForm.companyaddress = null
|
}
|
}
|
},
|
// 上传证件照片 - 打开
|
handleCeridUploadOpen() {
|
this.showCeridUploadImg = true;
|
},
|
// 上传证件照片 - 关闭
|
handleCeridUploadClose() {
|
this.showCeridUploadImg = false;
|
},
|
subimtCeridUpload(info) {
|
const certKeys = Object.keys(info);
|
certKeys.map((key) => {
|
if(key !== 'certid') {
|
this.coBorrowerForm[0][key] = info[key];
|
} else {
|
if(this.coBorrowerArr[0].certid.writeAble) {
|
this.coBorrowerForm[0][key] = info[key];
|
}
|
}
|
});
|
this.showCeridUploadImg = false;
|
Object.assign({}, this.coBorrowerForm);
|
},
|
},
|
beforeRouteLeave(to, from, next) {
|
for (let i = 0; i < this.coBorrowerForm.length; i++) {
|
for (const key in this.coBorrowerForm[i]) {
|
if (this.initialArr[i].hasOwnProperty(key)) {
|
if (this.coBorrowerForm[i][key] != this.initialArr[i][key]) {
|
// 页面有数据未保存
|
common.comfirm(
|
"提示",
|
"当前页面有数据未保存，是否放弃保存？",
|
() => {
|
next();
|
}
|
);
|
return;
|
}
|
}
|
}
|
}
|
next();
|
},
|
};
|
</script>
|
