<template>
|
<div class="contact">
|
<p>
|
<span></span>
|
联系人
|
</p>
|
<el-button
|
type="primary"
|
icon="el-icon-circle-plus-outline"
|
@click="addcontact"
|
v-if="show"
|
size="medium"
|
>新增联系人</el-button>
|
<el-table
|
stripe
|
:data="contactData"
|
style="margin-top:30px"
|
:cell-style="cell"
|
:header-cell-style="{background:'#f5f5f5',color:'#222222'}"
|
highlight-current-row
|
>
|
<el-table-column min-width="200">
|
<template slot="header">
|
<span>
|
<span class="red-star">*</span>
|
<span style="padding-left:8px">联系人姓名</span>
|
</span>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px" v-show="!row.isEdit">{{row.relativecustomername}}</span>
|
<el-input
|
style="padding-left:15px"
|
size="small"
|
v-show="row.isEdit"
|
v-model="row.relativecustomername"
|
placeholder="请输入"
|
require
|
></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column min-width="200">
|
<template slot="header">
|
<span>
|
<span class="red-star">*</span>
|
<span style="padding-left:8px">联系人手机号</span>
|
</span>
|
</template>
|
<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="200">
|
<template slot="header">
|
<span>
|
<span class="red-star">*</span>
|
<span style="padding-left:8px">联系人与借款人关系</span>
|
</span>
|
</template>
|
<template slot-scope="{row}">
|
<span style="padding-left:15px" v-show="!row.isEdit">{{row.relationshipDesc}}</span>
|
<el-select
|
style="padding-left:15px;display:block;"
|
v-model="row.relationship"
|
filterable
|
placeholder="请选择"
|
size="small"
|
v-show="row.isEdit"
|
>
|
<el-option
|
v-for="item in relationshipList"
|
:key="item.itemno"
|
:label="item.itemname"
|
:value="item.itemno"
|
></el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column label="联系人管理" min-width="110" v-if="show">
|
<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)" 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 {
|
qryContactList,
|
getDictionaryList,
|
saveContact,
|
delContact
|
} from "@api/product";
|
import common from "@/utils/common";
|
import { setStorage, getStorage } from "@/utils/storage";
|
export default {
|
props: ["show"],
|
data() {
|
return {
|
applyInfo: this.$store.state.product.applyInfo,
|
contactData: [],
|
contactArr: [],
|
initialArr: [],
|
relationshipList: []
|
};
|
},
|
async created() {
|
// 查询联系人
|
this.getContactList();
|
// 获取联系人与客户关系列表
|
this.relationshipList = await this.qryDictionaryList(
|
"CustomerRelationShip"
|
);
|
},
|
methods: {
|
cell({ row, column, rowIndex, columnIndex }) {
|
const { applyInfo } = this;
|
const { refuseFlag } = applyInfo;
|
if (refuseFlag == 1) {
|
const { customerInfo } = this.$store.state.product.fields;
|
const { customerRelativeList } = customerInfo;
|
if(customerRelativeList&&customerRelativeList.length){
|
for (let i = 0; i < customerRelativeList.length; i++) {
|
const object = customerRelativeList[i];
|
for (const key in object) {
|
if (row[key] != object[key] && column.property == key) {
|
return { color: "#222", "font-weight": "700" };
|
}
|
}
|
}
|
}
|
}
|
},
|
qryDictionaryList(code) {
|
return new Promise(resolve => {
|
getDictionaryList({
|
codeNo: code
|
}).then(res => {
|
resolve(res.result);
|
});
|
});
|
},
|
// 查询联系人
|
getContactList() {
|
qryContactList({
|
applySerialNo: this.applyInfo.serialNo,
|
customerId: this.applyInfo.customerid,
|
relationtype: "03"
|
}).then(res => {
|
this.contactData = [];
|
this.initialArr = [];
|
this.contactArr = res.result;
|
res.result.forEach(val => {
|
const obj = {};
|
for (const key in val) {
|
obj[key] = val[key].value;
|
obj.relationshipDesc = val.relationship.valueDesc;
|
}
|
this.contactData.push(obj);
|
this.initialArr.push(Object.assign({}, obj));
|
});
|
});
|
},
|
// 新增联系人
|
addcontact() {
|
for (let i = 0; i < this.contactData.length; i++) {
|
if (this.contactData[i].isEdit) {
|
this.$message.warning("请先保存当前联系人再新增");
|
return;
|
}
|
}
|
this.contactData.unshift({
|
relativecustomername: "",
|
phone: "",
|
relationship: "",
|
applyserialno: this.applyInfo.serialNo,
|
customerid: this.applyInfo.customerid,
|
isEdit: true
|
});
|
},
|
// 保存联系人
|
handleSave(row) {
|
if (!row.relativecustomername) {
|
this.$message.warning("联系人姓名不能为空");
|
return;
|
}
|
if (!/^[\u4e00-\u9fa5]{2,4}$/.test(row.relativecustomername)) {
|
this.$message.warning("联系人姓名格式不正确");
|
return;
|
}
|
if (!row.phone) {
|
this.$message.warning("联系人手机号不能为空");
|
return;
|
}
|
if (!/^[1][0-9]{10}$/.test(row.phone)) {
|
this.$message.warning("联系人手机号格式不正确");
|
return;
|
}
|
if (!row.relationship) {
|
this.$message.warning("联系人与客户关系不能为空");
|
return;
|
}
|
for (let i = 0; i < this.contactData.length; i++) {
|
if (
|
this.contactData.length > 1 &&
|
!this.contactData[i].isEdit &&
|
row.phone == this.contactData[i].phone &&
|
row.relativecustomername == this.contactData[i].relativecustomername
|
) {
|
this.$message.warning("联系人已存在,请重新填写");
|
return;
|
}
|
}
|
saveContact(row).then(res => {
|
if (res.code == "00") {
|
this.$message.success("保存成功");
|
this.getContactList();
|
}
|
});
|
},
|
// 修改
|
handleEdit(row) {
|
for (let i = 0; i < this.contactData.length; i++) {
|
if (this.contactData.length > 1 && this.contactData[i].isEdit) {
|
this.$message.warning("请先保存当前联系人");
|
return;
|
}
|
}
|
this.$set(row, "isEdit", true);
|
this.$set(row, "isCancel", true);
|
},
|
// 取消
|
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]
|
) {
|
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.contactData[index][key] = this.initialArr[index][key];
|
}
|
}
|
});
|
});
|
} else {
|
this.$set(row, "isEdit", false);
|
this.$set(row, "isCancel", false);
|
}
|
},
|
// 删除
|
handleDelete(row, index) {
|
for (let i = 0; i < this.contactData.length; i++) {
|
if (this.contactData.length == 1 && !this.contactData[i].isEdit) {
|
this.$message.warning("至少保留一个联系人信息");
|
return;
|
}
|
}
|
if (row.serialno) {
|
common.comfirm(
|
"提示",
|
`请确认是否需要联系人：${row.relativecustomername}?`,
|
() => {
|
if (row.serialno) {
|
delContact([row.serialno]).then(res => {
|
if (res.code == "00") {
|
this.$message.success("删除成功");
|
this.getContactList();
|
}
|
});
|
}
|
}
|
);
|
} else {
|
this.getContactList();
|
}
|
}
|
}
|
};
|
</script>
|
<style lang="stylus">
|
.contact {
|
>.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%);
|
}
|
}
|
|
.red-star {
|
width: 7px;
|
display: inline-block;
|
vertical-align: middle;
|
color: #FF4300;
|
}
|
}
|
</style>
|
