|
|
@@ -1,17 +1,18 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <div class="row allAlignment">
|
|
|
- <leftNav />
|
|
|
+ <div class="row allAlignment" id="sessionHistory">
|
|
|
+ <leftNav/>
|
|
|
<div>
|
|
|
- <hader />
|
|
|
+ <hader/>
|
|
|
<messageCenter></messageCenter>
|
|
|
<div class="column allAlignment div_box" style="background:#F6F8FF; ">
|
|
|
<div style="height:8vh; background:#FFF; " class="row allAlignment">
|
|
|
<div class="name_box row center">
|
|
|
- <span>历史会话2222</span>
|
|
|
+ <span>历史会话</span>
|
|
|
</div>
|
|
|
<div style=" font-size: 0;" class="row center allAlignment">
|
|
|
- <el-select v-model="value" size="mini" style="width: 28%;" placeholder="请选择">
|
|
|
+ <el-select v-model="value" size="mini" style="width: 28%;" placeholder="请选择"
|
|
|
+ @change="searchDate(value)">
|
|
|
<el-option
|
|
|
v-for="item in options"
|
|
|
:key="item.value"
|
|
|
@@ -26,7 +27,7 @@
|
|
|
v-model="input3"
|
|
|
class="input-with-select"
|
|
|
>
|
|
|
- <el-button slot="append" icon="el-icon-search"></el-button>
|
|
|
+ <el-button slot="append" icon="el-icon-search" @click="searchText(input3)"></el-button>
|
|
|
</el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -37,23 +38,26 @@
|
|
|
element-loading-text="拼命加载中"
|
|
|
element-loading-spinner="el-icon-loading"
|
|
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
|
|
- :header-cell-style="{background:'#eef1f6',color:'#606266'}" :row-style="{background:'#ffffff',color:'#606266'}"
|
|
|
- :data="tableData" stripe @row-dblclick="click_row"style="width: 100%" >
|
|
|
- <el-table-column prop="servicelog_id" label="会话ID" width="100"></el-table-column>
|
|
|
+ :header-cell-style="{background:'#eef1f6',color:'#606266'}"
|
|
|
+ :row-style="{background:'#ffffff',color:'#606266'}"
|
|
|
+ :data="tableData" stripe @row-click="click_row" style="width: 100%">
|
|
|
+ <el-table-column prop="servicelog_id" label="会话ID" width="100"></el-table-column>
|
|
|
<el-table-column prop="intime" label="访客进线时间"></el-table-column>
|
|
|
<!-- <el-table-column prop="name" label="接待客服"></el-table-column> -->
|
|
|
<el-table-column prop="user_name" label="访客名"></el-table-column>
|
|
|
<el-table-column prop="start_time" label="会话开始时间"></el-table-column>
|
|
|
<el-table-column prop="end_time" label="会话结束时间"></el-table-column>
|
|
|
- <el-table-column prop="evaluate_id" label="满意度" width="80"></el-table-column>
|
|
|
+ <el-table-column prop="evaluate_id" label="满意度" width="80"></el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
<div v-show="pages > 9 " style=" padding: 10px;">
|
|
|
<el-pagination background layout="prev, pager, next" prev-text='上一页' next-text='下一页'
|
|
|
- @prev-click='upData' @next-click="downData" @current-change="current_page" :total="pages"></el-pagination>
|
|
|
+ @prev-click='upData' @next-click="downData" @current-change="current_page"
|
|
|
+ :total="pages"></el-pagination>
|
|
|
</div>
|
|
|
<div class="right_box" v-show="isShow">
|
|
|
- <historicalRecord :show="isShow" :uid="uid" :user_name="user_name" v-on:childValue="childValue" />
|
|
|
+ <historicalRecord :show="isShow" :uid="uid" :user_name="user_name"
|
|
|
+ v-on:childValue="childValue"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -74,28 +78,28 @@
|
|
|
return {
|
|
|
isShow: false,
|
|
|
uid: "",
|
|
|
- user_name:'',
|
|
|
+ user_name: '',
|
|
|
pages: 0,
|
|
|
tableData: [],
|
|
|
options: [
|
|
|
{
|
|
|
- value: "今日",
|
|
|
+ value: "1",
|
|
|
label: "今日"
|
|
|
},
|
|
|
{
|
|
|
- value: "最近3天",
|
|
|
+ value: "3",
|
|
|
label: "最近3天"
|
|
|
},
|
|
|
{
|
|
|
- value: "最近7天",
|
|
|
+ value: "7",
|
|
|
label: "最近7天"
|
|
|
},
|
|
|
{
|
|
|
- value: "最近15天",
|
|
|
+ value: "15",
|
|
|
label: "最近15天"
|
|
|
},
|
|
|
{
|
|
|
- value: "最近30天",
|
|
|
+ value: "30",
|
|
|
label: "最近30天"
|
|
|
}
|
|
|
],
|
|
|
@@ -104,6 +108,9 @@
|
|
|
token: "",
|
|
|
time: "",
|
|
|
loading: false,//加载条
|
|
|
+ startTime: "", // 开始时间
|
|
|
+ endTime: "",// 结束时间,
|
|
|
+ keyText:"" // 关键词
|
|
|
};
|
|
|
},
|
|
|
components: {
|
|
|
@@ -119,32 +126,91 @@
|
|
|
this.getSessionHistory(1);
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 关键字查询
|
|
|
+ searchText(value){
|
|
|
+ console.log(value);
|
|
|
+ this.keyText = value;
|
|
|
+ this.getSessionHistory();
|
|
|
+ },
|
|
|
+ // 时间查询
|
|
|
+ searchDate(value) {
|
|
|
+ var date = new Date();
|
|
|
+ var seperator1 = "-";
|
|
|
+ var year = date.getFullYear();
|
|
|
+ var month = date.getMonth() + 1;
|
|
|
+ var strDate = date.getDate();
|
|
|
+ if (month >= 1 && month <= 9) {
|
|
|
+ month = "0" + month;
|
|
|
+ }
|
|
|
+ if (strDate >= 0 && strDate <= 9) {
|
|
|
+ strDate = "0" + strDate;
|
|
|
+ }
|
|
|
+ var currentdate = year + seperator1 + month + seperator1 + strDate;
|
|
|
+
|
|
|
+ if (value == 1) {
|
|
|
+ this.startTime = currentdate;
|
|
|
+ this.getNewData(currentdate, 0);
|
|
|
+ this.getSessionHistory();
|
|
|
+ } else if (value == 3) {
|
|
|
+ this.startTime = currentdate;
|
|
|
+ this.getNewData(currentdate, 2);
|
|
|
+ this.getSessionHistory();
|
|
|
+ } else if(value == 7){
|
|
|
+ this.startTime = currentdate;
|
|
|
+ this.getNewData(currentdate, 6);
|
|
|
+ this.getSessionHistory();
|
|
|
+ } else if (value == 15){
|
|
|
+ this.startTime = currentdate;
|
|
|
+ this.getNewData(currentdate, 14);
|
|
|
+ this.getSessionHistory();
|
|
|
+ }else {
|
|
|
+ this.startTime = currentdate;
|
|
|
+ this.getNewData(currentdate, 29);
|
|
|
+ this.getSessionHistory();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取结束时间
|
|
|
+ getNewData(currentdate, days) {
|
|
|
+ var dateTemp = currentdate.split("-");
|
|
|
+ var nDate = new Date(dateTemp[1] + '-' + dateTemp[2] + '-' + dateTemp[0]);
|
|
|
+ var millSeconds = Math.abs(nDate) + (days * 24 * 60 * 60 * 1000);
|
|
|
+ var rDate = new Date(millSeconds);
|
|
|
+ var year = rDate.getFullYear();
|
|
|
+ var month = rDate.getMonth() + 1;
|
|
|
+ if (month < 10) month = "0" + month;
|
|
|
+ var date = rDate.getDate();
|
|
|
+ if (date < 10) date = "0" + date;
|
|
|
+ this.endTime = (year + "-" + month + "-" + date);
|
|
|
+ },
|
|
|
+
|
|
|
// 获取会话记录
|
|
|
- getSessionHistory(page,size = 10) {
|
|
|
+ getSessionHistory(page, size = 10) {
|
|
|
let obj = {
|
|
|
- headers:{
|
|
|
+ headers: {
|
|
|
// "Content-Type": "application/json",
|
|
|
'apiToken': this.$md5("historylist" + "customer-service" + "history" + this.time[0] + "service"),
|
|
|
'userToken': this.token
|
|
|
}
|
|
|
}
|
|
|
this.loading = true;
|
|
|
- this.post("api/service/history/historyList",{
|
|
|
+ this.post("api/service/history/historyList", {
|
|
|
currentPage: page,
|
|
|
- pageSize: size
|
|
|
- },obj).then(res => {
|
|
|
-
|
|
|
- if(res.data.code == 1){
|
|
|
- //console.log(res.data.data.list);
|
|
|
+ pageSize: size,
|
|
|
+ start: this.startTime,
|
|
|
+ end: this.endTime,
|
|
|
+ user_name: this.keyText,
|
|
|
+ }, obj).then(res => {
|
|
|
+ if (res.data.code == 1) {
|
|
|
+ console.log(res.data.data.list);
|
|
|
this.tableData = res.data.data.list;
|
|
|
- this.tableData.forEach(e=>{
|
|
|
+ this.tableData.forEach(e => {
|
|
|
e.end_time = this.$public.customFormatDateTime(e.end_time);
|
|
|
e.intime = this.$public.customFormatDateTime(e.intime);
|
|
|
e.start_time = this.$public.customFormatDateTime(e.start_time);
|
|
|
})
|
|
|
this.pages = res.data.data.total;
|
|
|
}
|
|
|
- this.loading =false;
|
|
|
+ this.loading = false;
|
|
|
});
|
|
|
},
|
|
|
/******************************************/
|
|
|
@@ -164,17 +230,17 @@
|
|
|
},
|
|
|
|
|
|
/******************上一页*****************/
|
|
|
- upData(e){
|
|
|
+ upData(e) {
|
|
|
this.getSessionHistory(e)
|
|
|
},
|
|
|
|
|
|
/*********************下一页******************/
|
|
|
- downData(e){
|
|
|
+ downData(e) {
|
|
|
this.getSessionHistory(e)
|
|
|
},
|
|
|
|
|
|
/*******************选择页数******************/
|
|
|
- current_page(e){
|
|
|
+ current_page(e) {
|
|
|
this.getSessionHistory(e)
|
|
|
|
|
|
}
|
|
|
@@ -184,19 +250,23 @@
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
- .el-pagination .btn-next .el-icon{
|
|
|
+ .el-pagination .btn-next .el-icon {
|
|
|
display: none;
|
|
|
}
|
|
|
+
|
|
|
.cell {
|
|
|
text-align: center;
|
|
|
}
|
|
|
+
|
|
|
.el-pagination {
|
|
|
text-align: center;
|
|
|
font-size: 0;
|
|
|
}
|
|
|
+
|
|
|
.el-table::before {
|
|
|
z-index: 0 !important;
|
|
|
}
|
|
|
+
|
|
|
/* .el-table td{
|
|
|
padding: 12px 0;
|
|
|
} */
|
|
|
@@ -204,15 +274,18 @@
|
|
|
.input-with-select {
|
|
|
width: 100%;
|
|
|
}
|
|
|
+
|
|
|
.name_box {
|
|
|
margin-left: 20px;
|
|
|
font-size: 14px;
|
|
|
font-weight: bold;
|
|
|
color: rgba(102, 102, 102, 1);
|
|
|
}
|
|
|
+
|
|
|
.div_box {
|
|
|
width: 100%;
|
|
|
}
|
|
|
+
|
|
|
.right_box {
|
|
|
position: fixed;
|
|
|
top: 33px;
|
