|
@@ -14,10 +14,24 @@
|
|
|
</div>
|
|
</div>
|
|
|
<div class="mst-list">
|
|
<div class="mst-list">
|
|
|
<el-timeline >
|
|
<el-timeline >
|
|
|
- <el-timeline-item :timestamp="item.createTime" placement="top" v-for="(item, index) in list">
|
|
|
|
|
|
|
+ <el-timeline-item :timestamp="item.createTime" placement="top" v-for="(item, index) in list" :key="item.id || index">
|
|
|
<el-card>
|
|
<el-card>
|
|
|
- <h4>{{item.title}}</h4>
|
|
|
|
|
- <p>{{item.content}}</p>
|
|
|
|
|
|
|
+ <h4>{{ item.title }}</h4>
|
|
|
|
|
+ <div v-if="item._transferDisplay" class="transfer-msg">
|
|
|
|
|
+ <p class="msg-summary">{{ item._transferDisplay.summary }}</p>
|
|
|
|
|
+ <div v-if="item._transferDisplay.hasGroups" class="transfer-fail-block">
|
|
|
|
|
+ <div class="fail-reason-title">失败原因:</div>
|
|
|
|
|
+ <div
|
|
|
|
|
+ v-for="(group, gi) in item._transferDisplay.groups"
|
|
|
|
|
+ :key="gi"
|
|
|
|
|
+ class="fail-group-item"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div class="fail-group-reason">{{ group.reason }}</div>
|
|
|
|
|
+ <div class="fail-group-names">{{ group.names }}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <p v-else class="msg-content">{{ item.content }}</p>
|
|
|
<div><el-button type="text" v-if="item.isRead==0" @click="setRead(item)">标记为已读</el-button></div>
|
|
<div><el-button type="text" v-if="item.isRead==0" @click="setRead(item)">标记为已读</el-button></div>
|
|
|
</el-card>
|
|
</el-card>
|
|
|
</el-timeline-item>
|
|
</el-timeline-item>
|
|
@@ -32,6 +46,7 @@
|
|
|
<script>
|
|
<script>
|
|
|
|
|
|
|
|
import { setAllRead,getMsg,getMsgList,getMsgCount,setRead } from "@/api/crm/msg";
|
|
import { setAllRead,getMsg,getMsgList,getMsgCount,setRead } from "@/api/crm/msg";
|
|
|
|
|
+import { parseTransferContent } from "@/utils/transferMsg";
|
|
|
|
|
|
|
|
export default {
|
|
export default {
|
|
|
name: "msg",
|
|
name: "msg",
|
|
@@ -55,18 +70,21 @@ export default {
|
|
|
total: 0,
|
|
total: 0,
|
|
|
// 产品表格数据
|
|
// 产品表格数据
|
|
|
list: [],
|
|
list: [],
|
|
|
- queryParams: {
|
|
|
|
|
|
|
+ queryParams: {
|
|
|
pageNum: 1,
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
pageSize: 10,
|
|
|
},
|
|
},
|
|
|
|
|
+ transferPollTimer: null,
|
|
|
|
|
+ transferPollCount: 0,
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
created() {
|
|
created() {
|
|
|
-
|
|
|
|
|
this.getMsg();
|
|
this.getMsg();
|
|
|
|
|
+ this.$bus.$on('transfer-submitted', this.onTransferSubmitted);
|
|
|
},
|
|
},
|
|
|
- mounted() {
|
|
|
|
|
-
|
|
|
|
|
|
|
+ beforeDestroy() {
|
|
|
|
|
+ this.$bus.$off('transfer-submitted', this.onTransferSubmitted);
|
|
|
|
|
+ this.stopTransferPoll();
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
loadMore () {
|
|
loadMore () {
|
|
@@ -111,7 +129,11 @@ export default {
|
|
|
this.loading = true;
|
|
this.loading = true;
|
|
|
this.queryParams.type=this.currentTypeId;
|
|
this.queryParams.type=this.currentTypeId;
|
|
|
getMsgList(this.queryParams).then(response => {
|
|
getMsgList(this.queryParams).then(response => {
|
|
|
- this.list=this.list.concat( response.data.list);
|
|
|
|
|
|
|
+ const items = (response.data.list || []).map(item => ({
|
|
|
|
|
+ ...item,
|
|
|
|
|
+ _transferDisplay: parseTransferContent(item.content)
|
|
|
|
|
+ }));
|
|
|
|
|
+ this.list = this.list.concat(items);
|
|
|
this.total = response.data.total;
|
|
this.total = response.data.total;
|
|
|
this.loading = false;
|
|
this.loading = false;
|
|
|
this.isMore=response.data.hasNextPage;
|
|
this.isMore=response.data.hasNextPage;
|
|
@@ -122,8 +144,40 @@ export default {
|
|
|
this.msgType = response.counts;
|
|
this.msgType = response.counts;
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
|
|
+ /** 转接任务提交后刷新未读数,并轮询「转接通知」(type=4) 直至结果写入 */
|
|
|
|
|
+ onTransferSubmitted() {
|
|
|
|
|
+ getMsg().then(response => {
|
|
|
|
|
+ this.msgType = response.counts;
|
|
|
|
|
+ this.$emit('update-count');
|
|
|
|
|
+ });
|
|
|
|
|
+ this.startTransferPoll();
|
|
|
|
|
+ },
|
|
|
|
|
+ startTransferPoll() {
|
|
|
|
|
+ this.stopTransferPoll();
|
|
|
|
|
+ this.transferPollCount = 0;
|
|
|
|
|
+ this.transferPollTimer = setInterval(() => {
|
|
|
|
|
+ this.transferPollCount += 1;
|
|
|
|
|
+ getMsg().then(response => {
|
|
|
|
|
+ this.msgType = response.counts;
|
|
|
|
|
+ if (this.currentTypeId === 4) {
|
|
|
|
|
+ this.queryParams.pageNum = 1;
|
|
|
|
|
+ this.list = [];
|
|
|
|
|
+ this.getList();
|
|
|
|
|
+ }
|
|
|
|
|
+ this.$emit('update-count');
|
|
|
|
|
+ });
|
|
|
|
|
+ if (this.transferPollCount >= 40) {
|
|
|
|
|
+ this.stopTransferPoll();
|
|
|
|
|
+ }
|
|
|
|
|
+ }, 30000);
|
|
|
|
|
+ },
|
|
|
|
|
+ stopTransferPoll() {
|
|
|
|
|
+ if (this.transferPollTimer) {
|
|
|
|
|
+ clearInterval(this.transferPollTimer);
|
|
|
|
|
+ this.transferPollTimer = null;
|
|
|
|
|
+ }
|
|
|
|
|
+ this.transferPollCount = 0;
|
|
|
|
|
+ },
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
</script>
|
|
</script>
|
|
@@ -147,6 +201,46 @@ export default {
|
|
|
.mst-list{
|
|
.mst-list{
|
|
|
margin: 10px 0px;
|
|
margin: 10px 0px;
|
|
|
}
|
|
}
|
|
|
|
|
+.msg-content {
|
|
|
|
|
+ word-break: break-word;
|
|
|
|
|
+ white-space: pre-wrap;
|
|
|
|
|
+ line-height: 1.6;
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+}
|
|
|
|
|
+.transfer-msg {
|
|
|
|
|
+ line-height: 1.6;
|
|
|
|
|
+}
|
|
|
|
|
+.msg-summary {
|
|
|
|
|
+ margin: 0 0 8px;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ color: #303133;
|
|
|
|
|
+}
|
|
|
|
|
+.transfer-fail-block {
|
|
|
|
|
+ margin-top: 4px;
|
|
|
|
|
+}
|
|
|
|
|
+.fail-reason-title {
|
|
|
|
|
+ color: #606266;
|
|
|
|
|
+ margin-bottom: 6px;
|
|
|
|
|
+}
|
|
|
|
|
+.fail-group-item {
|
|
|
|
|
+ margin-bottom: 8px;
|
|
|
|
|
+ padding: 8px 10px;
|
|
|
|
|
+ background: #fef0f0;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ border-left: 3px solid #f56c6c;
|
|
|
|
|
+}
|
|
|
|
|
+.fail-group-item:last-child {
|
|
|
|
|
+ margin-bottom: 0;
|
|
|
|
|
+}
|
|
|
|
|
+.fail-group-reason {
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ color: #f56c6c;
|
|
|
|
|
+ margin-bottom: 4px;
|
|
|
|
|
+}
|
|
|
|
|
+.fail-group-names {
|
|
|
|
|
+ color: #606266;
|
|
|
|
|
+ word-break: break-word;
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
</style>
|
|
</style>
|
|
|
<style >
|
|
<style >
|