<template>
|
<div class="main">
|
|
<el-button size="mini"
|
@click="goBack">
|
<i class="el-icon-back">返回列表</i>
|
</el-button>
|
<TableList title="基本信息"
|
:isAutoIndex="true"
|
:isShowPages="false"
|
:loading="loading"
|
:list="list"
|
:header="complainBaseHeader"
|
@doAction="doAction"></TableList>
|
|
<TableList title="投诉记录"
|
:isAutoIndex="true"
|
:isShowPages="false"
|
:loading="loading"
|
:list="list"
|
:header="complainRecordHeader"
|
@doAction="doAction"></TableList>
|
|
<p class="section-title">投诉内容</p>
|
<el-input type="textarea"
|
readonly
|
resize="none"
|
:rows="5"
|
v-model="form.content">
|
</el-input>
|
|
<p class="section-title">跟进记录</p>
|
<div class="btn-block">
|
<el-button size="small"
|
type="primary"
|
v-if="this.updateType != 3"
|
@click="showAddComplainView('1')">新增</el-button>
|
</div>
|
<TableList :isAutoIndex="true"
|
:isShowPages="false"
|
:loading="loading"
|
:list="records"
|
:header="trackRecordHeader"
|
@doAction="doAction"></TableList>
|
|
<!-- 客服跟进-编辑 -->
|
<ComplainTrackUpdate :isComplainFlag="true"
|
:dialogVisible="dialogComplainVisible"
|
:serialNo="form.id"
|
:trackInfo="trackInfo"
|
:type="updateType"
|
@succ="addCustomerComplain"
|
@close="dialogComplainVisible = false" />
|
|
</div>
|
</template>
|
<script>
|
/**
|
* 查询客服投诉列表-详情
|
*/
|
import ComplainTrackUpdate from '@comprehensive/components/tabsComponent/ComplainTrackUpdate';
|
|
import {
|
qryComplainDetail,
|
deleteComplainTrack,
|
} from '@comprehensive/serve/public';
|
import {
|
complainBaseHeader,
|
complainRecordHeader,
|
trackRecordHeader,
|
} from '@comprehensive/utils/tableHeaders';
|
import TabContent from './components/TabContent';
|
import HeaderSteps from './components/HeaderSteps';
|
import ScrollToTab from './components/ScrollToTab';
|
import FormInfo from './components/FormInfo';
|
import TableList from './components/TableList';
|
|
export default {
|
components: {
|
TabContent,
|
HeaderSteps,
|
ScrollToTab,
|
FormInfo,
|
TableList,
|
ComplainTrackUpdate,
|
},
|
data() {
|
return {
|
form: {},
|
trackInfo: {},
|
list: [],
|
records: [],
|
complainBaseHeader,
|
complainRecordHeader,
|
trackRecordHeader,
|
serialNo: '',
|
loading: false,
|
dialogComplainVisible: false,
|
updateType: '1',
|
};
|
},
|
created() {
|
this.init();
|
},
|
mounted() {
|
this.setEleHeight();
|
window.addEventListener('resize', this.setEleHeight);
|
},
|
methods: {
|
// 投诉事件-显隐
|
showAddComplainView(type, func) {
|
this.trackInfo = {};
|
this.updateType = type;
|
this.dialogComplainVisible = !this.dialogComplainVisible;
|
const {records} = this
|
if(type === '1' && records.length) {
|
let data = records[records.length-1];
|
delete data.sequenceMark
|
this.trackInfo = data;
|
}
|
typeof func == 'function' && func();
|
},
|
|
addCustomerComplain() {
|
this.dialogComplainVisible = false;
|
this.fetch();
|
},
|
init() {
|
// const {
|
// menuId,
|
// from,
|
// flowno,
|
// objectType,
|
// customerID,
|
// customerId,
|
// occurType,
|
// alterobjectno,
|
// noBackBtn,
|
// } = this.$route.query;
|
|
this.serialNo = this.$route.params.id;
|
|
this.fetch();
|
},
|
async fetch() {
|
this.loading = true;
|
const res = await qryComplainDetail({ csId: this.serialNo });
|
if (res.code == '00') {
|
this.form = res.result;
|
this.list = [res.result];
|
this.updateType = this.form.dealStatus == '已完结' ? 3 : 1;
|
|
this.records = res.result.trackList.reduce((pre, curr) => {
|
let arr = [];
|
this.updateType == 3 && arr.push({ label: '详情', disabled: false });
|
this.updateType != 3 && arr.push({ label: '编辑', disabled: false });
|
this.updateType != 3 && arr.push({ label: '删除', disabled: false });
|
pre.push({
|
...curr,
|
buttons: [...arr],
|
});
|
|
return pre;
|
}, []);
|
}
|
this.loading = false;
|
},
|
// 表单事件回调
|
doAction(name, item, { label }) {
|
if (name === 'lastAction') {
|
if (label == '详情') {
|
this.showAddComplainView('3', () => {
|
this.trackInfo = item;
|
});
|
}
|
if (label == '编辑') {
|
this.showAddComplainView('2', () => {
|
this.trackInfo = item;
|
});
|
}
|
if (label == '删除') {
|
this.$confirm('将消除此跟进记录, 是否继续?', '提示', {
|
confirmButtonText: '是',
|
cancelButtonText: '否',
|
center: true,
|
}).then(async () => {
|
const res = await deleteComplainTrack({
|
id: item.id,
|
ceId: item.ceId,
|
});
|
if (res.code == '00') {
|
this.fetch();
|
}
|
});
|
}
|
}
|
},
|
|
setEleHeight() {
|
const clientHeight = document.documentElement.clientHeight;
|
this.clientHeight = clientHeight || 600;
|
},
|
|
// 返回列表
|
goBack() {
|
window.history.go(-1);
|
},
|
},
|
computed: {
|
currTabItem() {
|
let { tabIndex, treeList } = this;
|
return treeList[tabIndex] || {};
|
},
|
},
|
watch: {
|
$route() {
|
this.init();
|
},
|
},
|
beforeRouteEnter(to, from, next) {
|
next((vm) => {
|
vm.$store.commit('SET_detailBackRoute', from.path);
|
});
|
},
|
beforeDestroy() {
|
window.removeEventListener('resize', this.setEleHeight);
|
},
|
};
|
</script>
|
|
<style lang="postcss" scoped>
|
.main {
|
padding: 0 30px 30px;
|
background: #fff;
|
& .section-title {
|
margin: 30px 0 20px 0;
|
padding: 0 0 0 10px;
|
border-left: solid 2px #0081f0;
|
line-height: 16px;
|
font-size: 14px;
|
color: #222222;
|
}
|
& .btn-block {
|
margin-bottom: 20px;
|
}
|
}
|
</style>
|
