<!-- 业务对接人信息 -->
|
<template>
|
<div class="docker">
|
<!-- <el-button v-if="applyInfo.occurtype=='01'" style="margin-bottom:30px" type="primary" icon="el-icon-circle-plus-outline" @click="addDocker" size="medium">新增业务对接人</el-button> -->
|
<el-table stripe highlight-current-row :data="dockerForm" :header-cell-style="{background:'#f5f5f5',color:'#222222'}">
|
<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 v-if="applyInfo.occurtype=='01'" 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
|
} from "@api/product";
|
import common from '@/utils/common'
|
export default {
|
props: ['dockers'],
|
data () {
|
return {
|
applyInfo:this.$store.state.product.applyInfo,
|
dockerForm:[],
|
initialArr:[],
|
}
|
},
|
created () {
|
this.getDockers()
|
},
|
computed: {
|
dockerData:{
|
get(){
|
return this.dockers
|
},
|
set(){}
|
}
|
},
|
methods: {
|
// 处理数据
|
getDockers(){
|
const arr = []
|
const copyArr = []
|
this.dockerData.forEach(val => {
|
const obj = {}
|
for (const key in val) {
|
obj[key] = val[key].value
|
}
|
arr.push(obj)
|
copyArr.push(Object.assign({}, obj));
|
});
|
this.dockerForm = arr
|
this.initialArr = copyArr
|
this.$emit('sendDocker',this.dockerForm)
|
},
|
// 添加业务对接人
|
addDocker(){
|
for (let i = 0; i < this.dockerForm.length; i++) {
|
if(this.dockerForm[i].isEdit){
|
this.$message.warning('请先保存当前业务对接人信息再新增')
|
return;
|
}
|
};
|
this.dockerForm.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;
|
}
|
row.applyserialno = this.applyInfo.serialNo,
|
row.customerid = this.applyInfo.customerid,
|
saveZbdPickUpPeopleInfo(row).then(res=>{
|
if(res.code=='00'){
|
this.$message.success('保存成功')
|
this.$emit('sendDocker',this.dockerForm)
|
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]){
|
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.dockerForm[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.dockerForm.splice(index,1)
|
this.initialArr.splice(index, 1);
|
this.$emit('sendDocker',this.dockerForm)
|
})
|
}else{
|
this.dockerForm.splice(index,1)
|
this.initialArr.splice(index, 1);
|
this.$emit('sendDocker',this.dockerForm)
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="stylus">
|
.docker
|
width 100%
|
margin-bottom 24px
|
>.el-button
|
padding 9px 12px
|
.red-star
|
width 7px
|
display inline-block
|
vertical-align: middle;
|
color: #FF4300;
|
</style>
|
