<!-- 担保人 -->
|
<template>
|
<div class="subGuarantor">
|
<!-- <el-button
|
v-if="applyInfo.occurtype=='01'"
|
type="primary"
|
style="margin-bottom:30px"
|
icon="el-icon-circle-plus-outline"
|
@click="addGuarantor"
|
size="medium"
|
>新增担保人</el-button> -->
|
<el-table
|
stripe
|
:data="guarantorData"
|
:header-cell-style="{background:'#f5f5f5',color:'#222222'}"
|
highlight-current-row
|
>
|
<el-table-column min-width="200" prop="customername" label="担保人姓名">
|
<template slot-scope="{row}">
|
<span style="padding-left:15px" v-show="!row.isEdit">{{row.customername}}</span>
|
<el-input
|
style="padding-left:15px"
|
size="small"
|
v-show="row.isEdit"
|
v-model="row.customername"
|
placeholder="请输入"
|
></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="200" prop="jobtitle" label="担保人职务">
|
<template slot-scope="{row}">
|
<span style="padding-left:15px" v-show="!row.isEdit">{{row.jobtitle}}</span>
|
<el-input
|
style="padding-left:15px"
|
maxlength="50"
|
size="small"
|
v-show="row.isEdit"
|
v-model="row.jobtitle"
|
placeholder="请输入"
|
></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="200" prop="certtype" label="担保人证件类型">
|
<template slot-scope="{row}">
|
<span style="padding-left:15px" v-show="!row.isEdit">{{row.certtypedesc}}</span>
|
<el-select
|
v-model="row.certtype"
|
clearable
|
placeholder="请选择"
|
style="padding-left:15px;display:block;"
|
v-show="row.isEdit"
|
@change="selcerttype(row)"
|
size="small"
|
>
|
<el-option
|
v-for="item in certtypeList"
|
:key="item.itemno"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="200" prop="certid" label="担保人身份证号码">
|
<template slot-scope="{row}">
|
<span style="padding-left:15px" v-show="!row.isEdit">{{row.certid}}</span>
|
<el-input
|
maxlength="50"
|
style="padding-left:15px"
|
size="small"
|
v-show="row.isEdit"
|
v-model="row.certid"
|
placeholder="请输入"
|
@change="row.certid=row.certid.toUpperCase()"
|
></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="200" prop="phone" label="担保人手机号码">
|
<template slot-scope="{row}">
|
<span style="padding-left:15px" v-show="!row.isEdit">{{row.phone}}</span>
|
<el-input
|
style="padding-left:15px"
|
size="small"
|
v-show="row.isEdit"
|
v-model="row.phone"
|
placeholder="请输入"
|
></el-input>
|
</template>
|
</el-table-column>
|
<!-- <el-table-column min-width="110" v-if="applyInfo.occurtype=='01'" label="操作">
|
<template slot-scope="scope">
|
<el-button type="text" @click.native="handleEdit(scope.row)" v-if="!scope.row.isEdit">修改</el-button>
|
<el-button type="text" @click.native="handleSave(scope.row,scope.$index)" v-else>保存</el-button>
|
<el-button type="text" @click.native="handleCancel(scope.row,scope.$index)" v-if="scope.row.isCancel">取消</el-button>
|
<el-button type="text" @click.native="handleDelete(scope.row,scope.$index)" v-else>删除</el-button>
|
</template>
|
</el-table-column> -->
|
</el-table>
|
</div>
|
</template>
|
<script>
|
import {
|
saveGuarantorOrCoBorrower,
|
delGuarantorOrCoBorrower
|
} from "@/api/product";
|
import common from '@/utils/common'
|
export default {
|
props: ["guarantors", "certtypeList"],
|
data() {
|
return {
|
applyInfo: this.$store.state.product.applyInfo,
|
guarantorData: [],
|
initialArr: []
|
};
|
},
|
created() {
|
this.getGuarantor();
|
},
|
methods: {
|
// 处理数据
|
getGuarantor() {
|
const arr = [];
|
const copyArr = [];
|
this.guarantors.forEach(val => {
|
const obj = {};
|
for (const key in val) {
|
obj[key] = val[key].value;
|
}
|
for (let i = 0; i < this.certtypeList.length; i++) {
|
if (this.certtypeList[i].itemno == obj.certtype) {
|
obj.certtypedesc = this.certtypeList[i].itemname;
|
break;
|
}
|
}
|
arr.push(obj);
|
copyArr.push(Object.assign({}, obj));
|
});
|
this.guarantorData = arr;
|
this.initialArr = copyArr
|
},
|
// 新增担保人
|
addGuarantor() {
|
for (let i = 0; i < this.guarantorData.length; i++) {
|
if (this.guarantorData[i].isEdit) {
|
this.$message.warning("请先保存当前业务对接人信息再新增");
|
return;
|
}
|
}
|
this.guarantorData.unshift({
|
certid: "",
|
certtype: "",
|
customername: "",
|
jobtitle: "",
|
phone: "",
|
isEdit: true
|
});
|
},
|
handleEdit(row) {
|
this.$set(row, "isEdit", true);
|
this.$set(row, "isCancel", true);
|
},
|
selcerttype(row) {
|
for (let i = 0; i < this.certtypeList.length; i++) {
|
if (this.certtypeList[i].itemno == row.certtype) {
|
this.$set(row, "certtypedesc", this.certtypeList[i].itemname);
|
break;
|
}
|
}
|
},
|
handleSave(row,index) {
|
if (!row.customername) {
|
this.$message.warning("担保人姓名不能为空");
|
return;
|
}
|
if (!/^[\u4e00-\u9fa5]{2,50}$/.test(row.customername)) {
|
this.$message.warning("担保人姓名输入有误");
|
return;
|
}
|
if (!row.jobtitle) {
|
this.$message.warning("担保人职务不能为空");
|
return;
|
}
|
if (!row.certtype) {
|
this.$message.warning("担保人证件类型不能为空");
|
return;
|
}
|
if (!row.certid) {
|
this.$message.warning("担保人身份证号码不能为空");
|
return;
|
}
|
if (
|
!/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$/.test(
|
row.certid
|
) &&
|
row.certtype == "01"
|
) {
|
this.$message.warning("担保人身份证号码输入有误");
|
return;
|
}
|
if (!row.phone) {
|
this.$message.warning("担保人手机号码不能为空");
|
return;
|
}
|
if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(row.phone)) {
|
this.$message.warning("担保人手机号码输入有误");
|
return;
|
}
|
(row.applyserialno = this.applyInfo.serialNo),
|
(row.customerid = this.applyInfo.customerid),
|
(row.relationtype = "02"),
|
saveGuarantorOrCoBorrower(row).then(res => {
|
if (res.code == "00") {
|
this.$message.success("保存成功");
|
this.$set(row, "isEdit", false);
|
for (let i = 0; i < this.initialArr.length; i++) {
|
if(i == index){
|
return;
|
}
|
}
|
this.initialArr.push(Object.assign({}, row));
|
}
|
});
|
},
|
// 取消
|
handleCancel(row,index){
|
const arr = []
|
for (let i = 0; i < this.initialArr.length; i++) {
|
if(i == index){
|
for (const key in row) {
|
if(key != 'isEdit' && key != 'isCancel' && row[key] != this.initialArr[i][key]){
|
console.log(this.initialArr)
|
arr.push(key)
|
}
|
}
|
}
|
}
|
if(arr.length){
|
common.comfirm('提示','当前有数据未保存，是否放弃保存？',()=>{
|
this.$set(row,'isEdit',false)
|
this.$set(row,'isCancel',false)
|
arr.forEach(val => {
|
for (const key in this.initialArr[index]) {
|
if (this.initialArr[index].hasOwnProperty(val)) {
|
this.guarantorData[index][key] = this.initialArr[index][key]
|
}
|
}
|
});
|
})
|
}else{
|
this.$set(row,'isEdit',false)
|
this.$set(row,'isCancel',false)
|
}
|
},
|
handleDelete(row, index) {
|
if(!row.isEdit){
|
common.comfirm('提示',`请确认是否删除担保人: ${row.customername}`,async ()=>{
|
if(row.serialno){
|
const res = await delGuarantorOrCoBorrower([row.serialno])
|
if(res.code!='00')return
|
}
|
this.$message.success("删除成功");
|
this.guarantorData.splice(index, 1);
|
this.initialArr.splice(index, 1);
|
})
|
}else{
|
this.guarantorData.splice(index, 1);
|
this.initialArr.splice(index, 1);
|
}
|
}
|
}
|
};
|
</script>
|
<style lang="stylus">
|
.subGuarantor
|
width: 100%;
|
>.el-button
|
padding 9px 12px
|
</style>
|
