<!-- 业务对接人信息 -->
|
<template>
|
<div class="docker">
|
<ul>
|
<li>
|
<span>客户编号:</span>
|
<span>{{customerid}}</span>
|
</li>
|
<li>
|
<span>企业名称:</span>
|
<span>{{customerName}}</span>
|
</li>
|
<li>
|
<span>统一社会信用码:</span>
|
<span>{{reditcode}}</span>
|
</li>
|
</ul>
|
<el-button
|
style="margin-bottom:30px"
|
type="primary"
|
icon="el-icon-circle-plus-outline"
|
@click="addDocker"
|
size="medium"
|
>新增业务对接人</el-button>
|
<el-table
|
stripe
|
v-loading="loading"
|
highlight-current-row
|
:data="dockers"
|
:header-cell-style="{background:'#f5f5f5',color:'#222222'}"
|
:max-height="480"
|
>
|
<el-table-column prop="pickupusername" min-width="200" label="业务对接人姓名">
|
<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.pickupusername}}</span>
|
<el-input
|
style="padding-left:15px"
|
size="small"
|
v-show="row.isEdit"
|
v-model="row.pickupusername"
|
placeholder="请输入"
|
></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column prop="pickupuserjob" min-width="200" label="业务对接人职务">
|
<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.pickupuserjob}}</span>
|
<el-input
|
style="padding-left:15px"
|
maxlength="50"
|
size="small"
|
v-show="row.isEdit"
|
v-model="row.pickupuserjob"
|
placeholder="请输入"
|
></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column prop="pickupuserphone" min-width="200" label="业务对接人电话">
|
<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.pickupuserphone}}</span>
|
<el-input
|
style="padding-left:15px"
|
size="small"
|
v-show="row.isEdit"
|
v-model="row.pickupuserphone"
|
placeholder="请输入"
|
></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" min-width="110">
|
<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="handleDelete(scope.row,scope.$index)" v-else>删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</template>
|
<script>
|
import {
|
saveZbdPickUpPeopleInfo,
|
deletePickUpPeopleInfo,
|
qryPickUpPeopleList
|
} from "@api/product";
|
import common from "@/utils/common";
|
export default {
|
data() {
|
return {
|
applyInfo: this.$store.state.product.applyInfo,
|
dockers: [],
|
initialArr: [],
|
loading: false
|
};
|
},
|
props: {
|
serialNo: {
|
type: String,
|
default: ""
|
},
|
customerid: {
|
type: String,
|
default: ""
|
},
|
customerName: {
|
type: String,
|
default: ""
|
},
|
reditcode: {
|
type: String,
|
default: ""
|
}
|
},
|
created() {
|
this.getDockers();
|
},
|
methods: {
|
// 处理数据
|
async getDockers() {
|
this.loading = true;
|
const { serialNo, customerid } = this;
|
const { result } = await qryPickUpPeopleList({
|
applyserialno: serialNo,
|
customerid
|
});
|
this.dockers = result;
|
this.dockers.forEach(val => {
|
const obj = {};
|
for (const key in val) {
|
obj[key] = val[key];
|
}
|
this.initialArr.push(Object.assign({}, obj));
|
});
|
this.loading = false;
|
},
|
// 添加业务对接人
|
addDocker() {
|
for (let i = 0; i < this.dockers.length; i++) {
|
if (this.dockers[i].isEdit) {
|
this.$message.warning("请先保存当前业务对接人信息再新增");
|
return;
|
}
|
}
|
this.dockers.unshift({
|
pickupuserjob: "",
|
pickupusername: "",
|
pickupuserphone: "",
|
isEdit: true
|
});
|
},
|
handleEdit(row) {
|
this.$set(row, "isEdit", true);
|
this.$set(row, "isCancel", true);
|
},
|
handleSave(row, index) {
|
if (!row.pickupuserjob) {
|
this.$message.warning("业务对接人职务不能为空");
|
return;
|
}
|
if (!row.pickupusername) {
|
this.$message.warning("业务对接人姓名不能为空");
|
return;
|
}
|
if (!/^[\u4e00-\u9fa5]{2,50}$/.test(row.pickupusername)) {
|
this.$message.warning("业务对接人姓名输入有误");
|
return;
|
}
|
if (!row.pickupuserphone) {
|
this.$message.warning("业务对接人电话不能为空");
|
return;
|
}
|
if (!/^[0-9]([-0-9]+)$/.test(row.pickupuserphone)) {
|
this.$message.warning("业务对接人电话输入有误");
|
return;
|
}
|
const { serialNo, customerid } = this;
|
(row.applyserialno = serialNo),
|
(row.customerid = customerid),
|
saveZbdPickUpPeopleInfo(row).then(res => {
|
if (res.code == "00") {
|
this.$message.success("保存成功");
|
this.getDockers();
|
}
|
});
|
},
|
// 取消
|
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.dockers[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.pickupusername}`,
|
async () => {
|
if (row.serialno) {
|
const res = await deletePickUpPeopleInfo({
|
serialno: row.serialno
|
});
|
if (res.code != "00") return;
|
}
|
this.$message.success("删除成功");
|
this.getDockers();
|
}
|
);
|
} else {
|
this.dockers.splice(index, 1);
|
this.initialArr.splice(index, 1);
|
}
|
}
|
}
|
};
|
</script>
|
<style lang="stylus">
|
.docker {
|
width: 100%;
|
margin-bottom: 24px;
|
|
ul {
|
margin-bottom: 30px;
|
display: flex;
|
justify-items: flex-start;
|
|
li {
|
width: 33.33%;
|
}
|
}
|
|
.el-table {
|
.cellClass {
|
height: 48px;
|
padding: 0;
|
|
.cell {
|
line-height: 18px;
|
}
|
}
|
|
.headerCellClass {
|
height: 48px;
|
padding: 0;
|
background-color: #f5f5f5;
|
|
.cell {
|
line-height: 20px;
|
color: #222222;
|
}
|
}
|
|
.el-table__body-wrapper {
|
td {
|
height: 48px;
|
padding: 0;
|
|
.cell {
|
line-height: 18px;
|
}
|
}
|
}
|
}
|
|
>.el-button {
|
padding: 9px 12px;
|
}
|
|
.red-star {
|
width: 7px;
|
display: inline-block;
|
vertical-align: middle;
|
color: #FF4300;
|
}
|
}
|
</style>
|
