Customer-Service-Web/service/src/pages/SessionHistory.vue

<template>
	<div>
		<div class="row allAlignment">
			<leftNav />
			<div>
				<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>历史会话</span>
						</div>
						<div style=" font-size: 0;" class="row center allAlignment">
							<el-select v-model="value" size="mini" style="width: 28%;" placeholder="请选择">
								<el-option
										v-for="item in options"
										:key="item.value"
										:label="item.label"
										:value="item.value"
								></el-option>
							</el-select>
							<div style="font-size: 0;padding-right: 20px;">
								<el-input
										placeholder="请输入内容"
										size="mini"
										v-model="input3"
										class="input-with-select"
								>
									<el-button slot="append" icon="el-icon-search"></el-button>
								</el-input>
							</div>
						</div>
					</div>
					<div style="margin:0 20px;">
						<el-table
								v-loading="loading"
								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>
							<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>
					</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>
					</div>
					<div class="right_box" v-show="isShow">
						<historicalRecord :show="isShow" :uid="uid" :user_name="user_name" v-on:childValue="childValue" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import "@/css/index.css";
	import leftNav from "@/components/leftNav";
	import hader from "@/components/hader";
	import historicalRecord from "@/components/historicalRecord";
	import messageCenter from "@/components/messageCenter";

	export default {
		name: "SessionHistory",
		data() {
			return {
				isShow: false,
				uid: "",
				user_name:'',
				pages: 0,
				tableData: [],
				options: [
					{
						value: "今日",
						label: "今日"
					},
					{
						value: "最近3天",
						label: "最近3天"
					},
					{
						value: "最近7天",
						label: "最近7天"
					},
					{
						value: "最近15天",
						label: "最近15天"
					},
					{
						value: "最近30天",
						label: "最近30天"
					}
				],
				value: "",
				input3: "",
				token: "",
				time: "",
				loading: false,//加载条
			};
		},
		components: {
			leftNav,
			hader,
			historicalRecord,
			messageCenter
		},
		mounted() {
			this.value = this.options[2].value;
			this.token = this.$store.getters.get_user_info.token;
			this.time = JSON.parse(sessionStorage.getItem("time"));
			this.getSessionHistory(1);
		},
		methods: {
			// 获取会话记录
			getSessionHistory(page,size = 10) {
				let obj = {
					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",{
					currentPage: page,
					pageSize: size
				},obj).then(res => {

					if(res.data.code == 1){
						//console.log(res.data.data.list);
						this.tableData = res.data.data.list;
						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;
				});
			},
			/******************************************/
			//查看详情会话记录
			click_row(row, column, event) {
				//console.log('1231',row, column, event);
				this.user_name = row.user_name;
				this.uid = row.servicelog_id;
				this.isShow = true;
			},

			/******************************************/
			//关闭会话详情记录
			childValue(e) {
				//console.log(e);
				this.isShow = e;
			},

			/******************上一页*****************/
			upData(e){
				this.getSessionHistory(e)
			},

			/*********************下一页******************/
			downData(e){
				this.getSessionHistory(e)
			},

			/*******************选择页数******************/
			current_page(e){
				this.getSessionHistory(e)

			}

		}
	};
</script>

<style scoped>
	.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;
		} */

	.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;
		right: 0;
		width: 100%;
		/* height: 100vh;
			  background: red; */
		/* //background: rgba(255, 255, 255, 0.315); */
	}
</style>