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

<template>
	<div>
		<div class="row allAlignment" id="sessionHistory">
			<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="请选择"
									   @change="searchDate(value)">
								<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" @click="searchText(input3)"></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-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 :formatter="evaluateId" 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: "1",
						label: "今日"
					},
					{
						value: "3",
						label: "最近3天"
					},
					{
						value: "7",
						label: "最近7天"
					},
					{
						value: "15",
						label: "最近15天"
					},
					{
						value: "30",
						label: "最近30天"
					}
				],
				value: "",
				input3: "",
				token: "",
				time: "",
				loading: false,//加载条
				startTime: "", // 开始时间
				endTime: "",// 结束时间,
				keyText:"" // 关键词
			};
		},
		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: {
			evaluateId(row, column) {
				// console.log(row.evaluate_id)
				if (row.evaluate_id == 0) {
					return '未评价'
				} else if (row.evaluate_id == 1) {
					return "满意"
				} else if (row.evaluate_id == 2) {
					return '一般'
				} else {
					return '不满意'
				}
			},

			// 关键字查询
			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);
				console.log(this.endTime);
			},

			// 获取会话记录
			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,
					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 => {
							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(row, "历史记录");

				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>