<template>
|
<div class="product">
|
<el-button type="primary" size="mini" @click="handleAdd" v-if="type == 'add'">新增</el-button>
|
<el-table stripe :data="customerData" style="margin-top: 30px" highlight-current-row
|
:header-cell-style="{ background: '#f5f5f5', color: '#222222' }">
|
<el-table-column min-width="200">
|
<template slot="header">
|
<span>
|
<span style="padding-left: 8px">姓名</span>
|
</span>
|
</template>
|
<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" v-if="this.specialtype == '02'">
|
<template slot="header">
|
<span>
|
<span style="padding-left: 8px">手机号</span>
|
</span>
|
</template>
|
<template slot-scope="{ row }">
|
<span style="padding-left: 8px" v-show="!row.isEdit">{{
|
row.phone
|
}}</span>
|
<el-input style="padding-left: 15px" size="small" v-show="row.isEdit" v-model.trim="row.phone" placeholder="请输入">
|
</el-input>
|
</template> -->
|
</el-table-column>
|
|
<el-table-column min-width="200">
|
<template slot="header">
|
<span>
|
<span style="padding-left: 8px">身份证号</span>
|
</span>
|
</template>
|
<template slot-scope="{ row }">
|
<span style="padding-left: 8px" v-show="!row.isEdit">{{
|
row.certid
|
}}</span>
|
<el-input style="padding-left: 15px" maxlength="50" size="small" v-show="row.isEdit" v-model.trim="row.certid"
|
placeholder="请输入" @change="row.certid = row.certid.toUpperCase()"></el-input>
|
</template>
|
</el-table-column>
|
|
<el-table-column min-width="200">
|
<template slot="header">
|
<span>
|
<span style="padding-left: 8px">产品名称</span>
|
</span>
|
</template>
|
<template slot-scope="{ row }">
|
<span style="padding-left: 8px" v-show="!row.isEdit">{{
|
row.productname
|
}}</span>
|
<el-select v-show="row.isEdit" size="small" v-model="row.productno" filterable placeholder="请选择产品名称"
|
@change="productChange(row, row.productno)">
|
<el-option v-for="item in productList" :key="item.value" :label="item.valueDesc" :value="item.value">
|
</el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
|
<el-table-column min-width="200" v-if="this.specialtype == '03'">
|
<template slot="header">
|
<span>
|
<span style="padding-left: 8px">最大贷款金额</span>
|
</span>
|
</template>
|
<template slot-scope="{ row }">
|
<span style="padding-left: 8px" v-show="!row.isEdit">{{
|
row.productpresetlimit
|
}}</span>
|
<el-input style="padding-left: 15px" size="small" v-show="row.isEdit" type="number" v-model.trim="row.productpresetlimit" placeholder="请输入">
|
</el-input>
|
</template>
|
</el-table-column>
|
|
<el-table-column min-width="200" v-if="this.specialtype == '02'">
|
<template slot="header">
|
<span>
|
<span style="padding-left: 8px">客群标签</span>
|
</span>
|
</template>
|
<template slot-scope="{ row }">
|
<span style="padding-left: 8px" v-show="!row.isEdit">{{
|
row.productcustomerbasename
|
}}</span>
|
<el-select v-show="row.isEdit" size="small" v-model="row.productCustomerBase" filterable
|
placeholder="请选择客群标签" @change="productcustomerbaseChange(row, row.productCustomerBase)">
|
<el-option v-for="item in customerBaseList" :key="item.customersCode" :label="item.customersName"
|
:value="item.customersCode">
|
</el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
|
<el-table-column min-width="200" v-if="this.specialtype == '03'">
|
<template slot="header">
|
<span>
|
<span style="padding-left: 8px">状态</span>
|
</span>
|
</template>
|
<template slot-scope="{ row }">
|
<span style="padding-left: 8px" v-show="!row.isEdit">{{
|
row.isDelete == '' ? '' : row.isDelete == '0' ? '生效':'失效'
|
}}</span>
|
<el-select v-show="row.isEdit" size="small" v-model="row.isDelete" filterable
|
placeholder="请选择状态">
|
<el-option v-for="item in isDeleteList" :key="item.value" :label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="操作" min-width="110" v-if="type == 'add'">
|
<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>
|
|
<pagination v-show="total > 0" :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
|
@pagination="tableList" />
|
</div>
|
</template>
|
<script>
|
import Pagination from '@/components/Pagination'
|
import {
|
getDictionaryList,
|
qryWhiteCustomerList, //查询担保人信息
|
updateWhiteCusInfo, //新增担保人信息
|
saveWhiteCustomer,
|
qryCustomerBaseList,
|
deleteWhiteCustomer, //删除担保人信息
|
} from "@api/product";
|
import {
|
projectQrycondition
|
} from "@api/area";
|
|
|
import common from "@/utils/common";
|
import { mapState } from 'vuex'
|
let phoneExp = new RegExp(/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/);
|
let representativeIDExp = new RegExp(
|
/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$/
|
);
|
|
export default {
|
data() {
|
return {
|
ownerData: [],
|
ownerForm: [],
|
initialArr: [],
|
certtypeList: [],
|
productList: [],
|
customerBaseList: [],
|
isDeleteList:[
|
{
|
label:'有效',
|
value:'0'
|
},
|
{
|
label:'失效',
|
value:'1'
|
}
|
],
|
total: 0,
|
listQuery: {
|
currentPage: 1,
|
pageSize: 10
|
},
|
customerData: [], //担保人数据本地增删改
|
customerTypeList: [], //担保人类型
|
};
|
},
|
props: ['config', 'type', 'specialtype'],
|
components: { Pagination },
|
computed: {
|
...mapState({
|
detailsParams: state => state.risk.detailsParams
|
}),
|
// isowner() {
|
// return this.propertyData.isowner;
|
// },
|
},
|
watch: {
|
// isowner(val) {
|
// this.getOwnerInfo(val);
|
// },
|
// propertyData() {
|
// this.getEnpCustomerInfo();
|
// },
|
},
|
created() {
|
const that = this;
|
//查询白名单
|
this.tableList()
|
|
projectQrycondition({ conditionName: 'product' }).then(res => {
|
this.productList = res.result
|
})
|
|
},
|
methods: {
|
// 限制最大金额
|
productpresetlimit(row){
|
if(row.productpresetlimit > 300000){
|
this.$message.warning("最大金额不能超过300000");
|
row.productpresetlimit = ''
|
return
|
}
|
if(row.productpresetlimit < 0){
|
this.$message.warning("最大金额不能小于0");
|
row.productpresetlimit = ''
|
return
|
}
|
},
|
tableList() {
|
let detailsParams = {
|
projectserialno: this.detailsParams.objectNo,
|
specialtype:this.specialtype
|
}
|
let params = Object.assign({}, this.listQuery, detailsParams)
|
if(!this.detailsParams.objectNo) return
|
qryWhiteCustomerList(params).then((res) => {
|
// customerData
|
this.customerData = res.result.records
|
this.initialArr = JSON.parse(JSON.stringify(this.customerData))
|
this.total = res.result.total
|
|
});
|
},
|
productChange(row, val) {
|
row.productname = this.productList.find(res => res.value == val).valueDesc
|
// this.$set(form,'productname', productname)
|
row.productcustomerbasename = ''
|
row.productCustomerBase = ''
|
qryCustomerBaseList({
|
productCode: val,
|
specialtype:this.specialtype
|
}).then((res) => {
|
this.customerBaseList = res.result;
|
});
|
},
|
productcustomerbaseChange(row, val) {
|
row.productcustomerbasename = this.customerBaseList.find(res => res.customersCode == val).customersName
|
// this.$set(form,'productname', productname)
|
},
|
|
|
// 新增担保人
|
handleAdd() {
|
this.customerData.unshift({
|
certid: "",
|
productno: "",
|
productname: "",
|
productCustomerBase: "",
|
productCustomerBase: "",
|
customername: "",
|
// phone: "",
|
isDelete: '0',
|
projectserialno: this.detailsParams.objectNo,
|
projectname: this.config.productname.value,
|
isEdit: true
|
});
|
},
|
handleSave(row, index) {
|
|
if (!row.customername) {
|
this.$message.warning("姓名不能为空");
|
return;
|
}
|
if (!row.productno) {
|
this.$message.warning("产品名称不能为空");
|
return;
|
}
|
// if (!phoneExp.test(row.phone) && this.specialtype == '02') {
|
// this.$message.warning("手机号码格式不正确");
|
// return;
|
// }
|
if (!row.productpresetlimit && this.specialtype == '03') {
|
this.$message.warning("最大贷款金额不能为空");
|
return;
|
} else if (row.productpresetlimit > 300000 && this.specialtype == '03') {
|
this.productpresetlimit(row)
|
return;
|
}
|
else if (row.productpresetlimit < 0 && this.specialtype == '03') {
|
this.productpresetlimit(row)
|
return;
|
}
|
if (!representativeIDExp.test(row.certid) ) {
|
this.$message.warning("身份证号码格式不正确");
|
return;
|
}
|
if (row.serialno) {
|
delete row.updatedate
|
delete row.updateuser
|
row.specialtype = this.specialtype
|
updateWhiteCusInfo(row).then(res => {
|
if (res.code == "00") {
|
this.tableList();
|
} else {
|
// this.$message.warning("系统错误，请重试");
|
return;
|
}
|
});
|
} else {
|
row.specialtype = this.specialtype
|
saveWhiteCustomer(row).then(res => {
|
if (res.code == "00") {
|
this.tableList();
|
} else {
|
// this.$message.warning("系统错误，请重试");
|
return;
|
}
|
});
|
}
|
},
|
// 取消
|
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.customerData[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 deleteWhiteCustomer({serialno:[row.serialno]})
|
if (res.code != '00') return
|
}
|
this.$message.success("删除成功");
|
this.customerData.splice(index, 1);
|
this.initialArr.splice(index, 1);
|
})
|
} else {
|
this.customerData.splice(index, 1);
|
this.initialArr.splice(index, 1);
|
}
|
},
|
// 修改
|
handleEdit(row) {
|
for (let i = 0; i < this.customerData.length; i++) {
|
if (this.customerData.length > 1 && this.customerData[i].isEdit) {
|
this.$message.warning("请先保存当前客户信息");
|
return;
|
}
|
}
|
if(row.productno) {
|
qryCustomerBaseList({
|
productCode: row.productno
|
}).then((res) => {
|
this.customerBaseList = res.result;
|
});
|
}
|
this.$set(row, "isEdit", true);
|
this.$set(row, "isCancel", true);
|
},
|
},
|
};
|
</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%);
|
}
|
}
|
}
|
</style>
|
