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

<template>
	<div class="row allAlignment" style=" position: relative;">
		<leftNav />
		<div>
			<hader />
			<messageCenter></messageCenter>
			<div>
				<el-container class="row">
					<!-- 私有库列表 -->
					<el-aside width="400px">
						<div class="tit">
							<span>私有库--快捷回复</span>
						</div>
						<!-- <div class="row library">
						  <div class="line hover" @click="FastReplyLibrarySwitchClick(1)">
							<span :class="FastReplyLibrarySwitch==1?'acty':''">公有库</span>
						  </div>
						  <div class="hover" @click="FastReplyLibrarySwitchClick(2)">
							<span :class="FastReplyLibrarySwitch==2?'acty':''">私有库</span>
						  </div>
						</div>
						<div class="search">
						  <el-input placeholder="搜索快捷回复" suffix-icon="el-icon-search" v-model="leftSerch"></el-input>
						</div>
						<div class="phrases md20">
						  <i class="el-icon-caret-bottom" style="color:#CCCCCC"></i>
						  <span>常用语</span>
						</div> -->
						<div class="phrasesList md20">
							<!-- <div class="list row" v-for="(item) in ReplyArr" :key="item.id">
							  <div style="width:100%;"  class="row item-center allAlignment">
								<div>
								  <span>#{{item.title}}</span>
								  <span>{{item.content}}</span>
								</div>
							  </div>
							</div> -->

							<!-- 私有库列表 -->
							<div class="list row" v-for="(item) in ReplyArr" :key="item.id">
								<div style="width:100%;" class="row item-center allAlignment" >
									<div class="row">
										<span class="ellipsis" style="display:block;max-width:100px;">#{{item.title}}</span>
										<span
												class="ellipsis"
												style="display:block;max-width:150px;margin-left:20px;"
										>{{item.content}}</span>
									</div>
									<div class="fnc">
										<i class="el-icon-edit-outline hover" style="margin-right:15px;" @click="popUpChange(item)"></i>
										<i class="el-icon-delete hover" @click="clickDel(item.id)"></i>
									</div>
								</div>
							</div>
						</div>
					</el-aside>

					<!-- 私有库列表新增删除模块 -->
					<el-main style="width:35.4%;background:#f6f8ff;border-left:1px solid #D5E5FF;">
						<div class="mainTitle row rightAlignment">
							<!-- <div style="height:40px;width:238px;border:1px solid #ddd;">
							  <input
								style="width:100%;height:100%;padding-left:10px;"
								placeholder="常用语组"
								type="text"
								v-model="matchingSerch"
							  />
							  <img style="width:16px;height:16px;" src="@/assets/img/serch.png" />
							</div> -->
							<div @click="popUpShow = true"  class="row center hover"
								 style="border-radius:5px;width:120px;margin-left:20px;height:40px;background:linear-gradient(180deg,rgba(245,245,245,1) 0%,rgba(238,238,238,1) 100%);border:1px solid #ddd;font-size:14px;color:#666;"
							>新增快捷回复</div>
							<div @click="deleteFastReply" class="row center hover"
								 style="border-radius:5px;width:60px;margin-left:10px;height:40px;background:linear-gradient(180deg,rgba(245,245,245,1) 0%,rgba(238,238,238,1) 100%);border:1px solid #ddd;font-size:14px;color:#666;"
							>删除</div>
						</div>
						<div class="mainBox scroll">
							<el-form ref="form" label-width="80px">
								<el-form-item label>
									<el-checkbox-group v-model="deleteArr">
										<el-checkbox name="type" label="all" disabled>
											<!--  -->
											<div class="row" style="width:100%;height:100%;background:#E6EBFF;">
												<div style="color:#666;font-weight:bold;color:#666;width:100%; position: relative;">
													<p style="padding-right:40px;">快捷语</p>
													<p class="row item-center"style="color:#666;font-size:14px; position: absolute;left:16%;top:0;">回复内容</p>
												</div>
											</div>
										</el-checkbox>

										<el-checkbox name="type" :label="item.id"  v-for="(item,index) in ReplyArr" :key="index">
											<div class="row" style="width:100%;height:100%;">
												<div style="color:#666;color:#666;width:100%; position: relative;">
													<!-- style="width:50px;" -->
													<p  class="ellipsis">{{item.title}}</p>
													<p class="row item-center ellipsis addContent"
													>{{item.content}}</p>
												</div>
											</div>
										</el-checkbox>
									</el-checkbox-group>
								</el-form-item>
							</el-form>
						</div>
					</el-main>
				</el-container>
			</div>
		</div>


		<!-- 私有库新增模块窗口 -->
		<div class="popUp" v-if="popUpShow">
			<div class="popUpBg" @click="popUpEsc"></div>
			<div class="popUpBox column item-center">
				<p class="editor">添加新的快捷回复</p>
				<div class="popUpBoxData row center">
					<div>
						<div class="row">
							<p>类别<span>*</span></p>
							<!-- v-model="popUp.type" -->
							<el-select v-model="popUp.type" disabled placeholder="私人库模版" class="often">
							</el-select>
						</div>
						<div  class="row" style="margin-top: 15px;">
							<p>关键词<span>*</span></p>
							<input class="oftenTitle" v-model="popUp.title" placeholder="请输入关键词" />
						</div>
						<div  class="row" style="margin-top: 15px;">
							<p>回复内容<span>*</span></p>
							<textarea class="text" v-model="popUp.content" placeholder="请输入你要回复的内容"></textarea>
						</div>
						<div style="height:40px;margin-top:20px;" class="row average">
							<div @click="popUpEsc" class="row center hover"
								 style="width:80px;height:40px;border:1px solid rgba(221,221,221,1);background:linear-gradient(180deg,rgba(245,245,245,1) 0%,rgba(238,238,238,1) 100%);border-radius:5px;font-size:16px;color:#666;"
							>取消</div>
							<div @click="newly()"  class="row center hover"
								 style="width:80px;height:40px;background:rgba(83,153,245,1);color:#FFF;border-radius:5px;font-size:16px;"
							>确定</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 私有库编辑模块窗口 -->
		<div class="popUp" v-if="popUpChangeShow">
			<div class="popUpBg" @click="popUpChangeShow = false,changePopUp = ''"></div>
			<div class="popUpBox column item-center">
				<p class="editor ">修改您的快捷回复</p>
				<div class="popUpBoxData row center">
					<div>
						<div class="row">
							<p>类别<span>*</span></p>
							<el-select disabled v-model="changePopUp.type" placeholder="私人库模版" class="often">
							</el-select>

						</div>
						<div class="row" style="margin-top: 15px;">
							<p>关键词<span>*</span></p>
							<input class="oftenTitle" v-model="changePopUp.title"  placeholder="请输入关键词" />
						</div>
						<div class="row" style="margin-top: 15px;">
							<p>回复内容<span>*</span></p>
							<textarea class="text" v-model="changePopUp.content" placeholder="请输入你要回复的内容"></textarea>
						</div>

						<div style="height:40px;margin-top:20px;" class="row average ">
							<div
									@click="popUpChangeShow = false,changePopUp = ''"
									class="row center hover"
									style="width:80px;height:40px;border:1px solid rgba(221,221,221,1);background:linear-gradient(180deg,rgba(245,245,245,1) 0%,rgba(238,238,238,1) 100%);border-radius:5px;font-size:16px;color:#666;"
							>取消</div>
							<div
									@click="changeFastreply()"
									class="row center hover"
									style="width:80px;height:40px;background:rgba(83,153,245,1);color:#FFF;border-radius:5px;font-size:16px;"
							>确定</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

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

	export default {
		name: "FastReply",
		data() {
			return {
				data: {},
				// FastReplyLibrarySwitch: 1,
				leftSerch: "", //左侧搜索
				matchingSerch: "", //右侧匹配搜索
				popUpShow: false, //添加常用语开关
				popUpChangeShow:false, // 修改常用语开关
				deleteArr: [],
				popUp: {
					//新增快捷回复
					status:1,
					content:'',//回复内容
					title:''//关键字
				},
				changePopUp:{ }, // 修改的快捷语
				ReplyArr: [], //快捷回复列表
				// page: 1, //分页
				// pageSize: 5, //分页大小
				// total: 25, //分页总条目
				time:{},
			};
		},
		methods: {

			/******************删除单条快捷回复*****************/
			clickDel(e){
				this.$confirm('您确定要删除该条快捷回复吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteArr.push(e);
					this.deleteFastReply()
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},

			/******************显示编辑快捷窗口*******************/
			popUpChange(e){
				this.changePopUp = e;
				this.popUpChangeShow = true
			},

			/***********************提示信息集合*********************/
			succeed(num) {
				if (num == 1) {
					this.$notify({
						title: "成功",
						message: "操作成功",
						type: "success",
						duration: 1500
					});
				} else if (num == 2) {
					this.$notify({
						title: "错误",
						message: "操作失败",
						type: "error",
						duration: 1500
					});
				} else if (num == 3) {
					this.$notify({
						title: "警告",
						message: "请先核对再提交",
						type: "warning",
						duration: 1500
					});
				}
			},

			/********************关闭新增**********************/
			popUpEsc() {
				this.popUpShow = false;
			},


			// changePage(val) {
			//   this.page = val;
			// },
			//

			/********************新增快捷回复******************/
			newly() {
				let obj = {
					headers: {
						apiToken: this.$md5("addwords" + "customer-service" + "words" + this.time[0] + "service"),
						userToken: this.token
					}
				};
				// this.popUp.status =  1;
				this.post("api"+ this.$ports.FastReply.addWords,this.popUp,obj).then(res => {
					if (res.data.code == 1) {
						this.succeed(1);
						this.ReplyArr.push({id:res.data.data.id,content:this.popUp.content,title:this.popUp.title});
						this.$set(this.popUp,'content','')
						this.$set(this.popUp,'title','')
						this.popUpShow = false;
					} else {
						this.succeed(2);
					}
				});
			},

			/**************查询快捷回复语列表***************/
			getFastReply() {
				let obj = {
					headers: {
						apiToken: this.$md5("userwords" + "customer-service" + "index" + this.time[0]+ "service"),
						userToken: this.token
					}
				};
				this.get("api" + this.$ports.FastReply.userWords, obj).then(res => {
					// console.log(res);
					if (res.data.code ==1) {
						//私有库
						this.ReplyArr = res.data.data.userWords; // res.data.data.sysWords
					}
				});
			},

			/********************删除快捷回复*****************/
			deleteFastReply() {
				let obj = {
					headers: {
						apiToken: this.$md5("deletewords" + "customer-service" + "words" + this.time[0] + "service"),
						userToken: this.token
					}
				};
				// console.log(this.deleteArr);
				if (this.deleteArr.length > 0) {
					this.post("api"+this.$ports.FastReply.deleteWords, this.deleteArr, obj).then(
						res => {
							if (res.data.code) {
								this.succeed(1);
								this.getFastReply();
								// this.showFastReply()
							} else {
								this.succeed(2);
							}
						}
					);
				} else {
					this.succeed(3);
				}
			},
			// // 库状态的更改
			// FastReplyLibrarySwitchClick(num) {
			//   this.FastReplyLibrarySwitch = num;
			// },
			// 获取快捷语 用于展示（可修改）
			// showFastReply() {
			//   let str =
			//     "userwords" + "customer-service" + "index" + this.time + "service";
			//   // str = str.toLowerCase();
			//   let obj = {
			//     headers: {
			//       // "Content-Type": "application/x-www-form-urlencoded",
			//       apiToken: this.$md5(str),
			//       userToken: this.token
			//     }
			//   };
			//   this.get("api/service/index/userWords", obj).then(res => {
			//     if (res.data.code) {
			//       this.data = res.data.data;
			//     }
			//     console.log(res);
			//   });
			// },

			/********************修改快捷语********************/
			changeFastreply(){
				let obj = {
					headers: {
						apiToken: this.$md5("updatewords" + "customer-service" + "words" + this.time[0] + "service"),
						userToken: this.token
					}
				};
				this.post('api'+this.$ports.FastReply.updateWords,{
					id:this.changePopUp.id,
					content:this.changePopUp.content,
					status:1,
					title:this.changePopUp.title
				},obj).then((res)=>{
					if(res.data.code == 1){
						//this.getFastReply();
						// this.showFastReply();
						this.popUpChangeShow = false;
						this.changePopUp = '';
						this.succeed(1)
					}else{
						this.succeed(2)
					}
					//console.log(res)
				})
			}
		},
		mounted() {
			this.token = this.$store.getters.get_user_info.token ;
			this.time = JSON.parse(sessionStorage.getItem("time"));
			this.getFastReply();
			//this.showFastReply();
		},
		components: {
			leftNav,
			hader,
			messageCenter
		}
	};
</script>

<style>
	.hover:hover{
		cursor: pointer;
	}
	.editor{
		color:#666;
		font-size:16px;
		font-weight:bold;
		font-family:PingFang SC;
		text-align: center;
		margin-top:20px;
	}
	p {
		margin: 0;
	}
	.tit {
		padding-left: 20px;
		font-size: 14px;
		color: #666666;
		height: 50px;
		line-height: 50px;
	}
	.library {
		height: 50px;
		line-height: 50px;
		border: 1px solid #d5e5ff;
		border-right: none;
	}
	.library div {
		width: 50%;
		text-align: center;
	}
	/* .library div span {
	} */
	.line {
		position: relative;
	}
	.line::after {
		content: "";
		display: inline-block;
		width: 1px;
		height: 20px;
		line-height: 20px;
		background: #666666;
		position: absolute;
		right: 0;
		top: 15px;
	}

	.tit {
		padding-left: 20px;
		font-size: 14px;
		color: #666666;
		height: 50px;
		line-height: 50px;
		font-weight: bold;
		border-bottom: 1px solid #d5e5ff;
	}
	.library {
		height: 50px;
		line-height: 50px;
		border: 1px solid #d5e5ff;
	}
	.library div {
		width: 50%;
		text-align: center;
	}
	.library div span {
		color: #666666;
		font-size: 14px;
		padding-bottom: 13px;
	}
	div span.acty {
		color: #5399f5;
		border-bottom: 2px solid #5399f5;
	}
	.line {
		position: relative;
	}
	.line::after {
		content: "";
		display: inline-block;
		width: 1px;
		height: 20px;
		line-height: 20px;
		background: #666666;
		position: absolute;
		right: 0;
		top: 15px;
	}
	.search {
		margin: 20px 20px 22px;
	}
	.md20 {
		margin-left: 20px;
		margin-bottom: 20px;
	}
	.phrases span {
		color: #666666;
		font-size: 14px;
	}
	.list div span {
		color: #999999;
		font-size: 14px;
	}
	.list div span:nth-child(1) {
		color: #666666;
		font-weight: 400;
	}
	.list div {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.fnc {
		margin-left: 37px;
	}
	.fnc i {
		color: #999999;
		display: inline-block;
		width: 20px;
		height: 20px;
	}

	/* main */
	.mainTitle {
		height: 60px;
	}
	.mainTitle div {
		position: relative;
	}
	.mainTitle div img {
		position: absolute;
		right: 12px;
		top: 0;
		bottom: 0;
		margin: auto 0;
	}
	.mainTitle div input {
		color: #ccc;
	}
	.mainTitle div input:focus {
		outline: none;
		color: #666;
	}
	.el-checkbox {
		width: 100%;
	}
	.el-form-item__content {
		margin-left: 0 !important;
		line-height: 0;
		height: 50px;
	}
	.el-checkbox {
		padding-left: 30px;
		height: 50px;
		display: flex;
		align-items: center;
	}
	/* .is-disabled{
	  background: #E6EBFF;
	} */

	.el-checkbox:nth-child(even) {
		background: #fff;
	}
	.el-checkbox:nth-child(odd) {
		background: #eff2fd;
	}
	.el-checkbox:first-child {
		background: #e6ebff;
	}
	.el-form-item {
		margin-bottom: 0;
	}
	.el-main {
		overflow: visible;
		height: 92.1vh;
	}
	.el-checkbox__label {
		padding-left: 50px;
		display: block;
		width: 100%;
	}
	.mainBox {
		width: 100%;
		height: 80%;
		overflow-x: hidden;
		overflow-y: auto;
		margin-right: 0;
	}
	.addContent{
		color:#666;
		font-size:14px;
		position: absolute;
		left:16%;top:0;
		width:70%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.popUp {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
	}
	.popUpBg {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.01);
	}
	.popUpBox {
		position: absolute;
		left: 0;
		right: 0;
		margin: auto auto;
		top: 0;
		bottom: 0;
		width: 380px;
		height: 400px;
		background: #fff;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	}
	.popUpBoxData {
		margin-top: 30px;
		/* padding: 0 44px; */
	}
	.popUpBoxData p {
		/* margin-top: 10px; */
		color: #666;
		font-size: 14px;
		/* height: 30px; */
		width: 92px;
		line-height: 40px;
		/* margin-bottom: 15px; */
	}
	.popUpBoxData p span {
		color: #f60;
	}
	.often {
		width: 200px;
		height: 40px;
		color: #999;
		position: relative;
	}
	.el-input__inner {
		border: 1px solid #ddd;
		border-radius: 0px;
		color: #666;
		padding-left: 7px;
	}
	.el-select-dropdown__item {
		padding-left: 10px;
	}
	.el-popper[x-placement^="bottom"] .popper__arrow::after {
		display: none;
	}
	.el-popper[x-placement^="bottom"] .popper__arrow {
		display: none;
	}
	.el-select .el-input__inner:focus {
		border-color: #ddd;
	}
	.el-select-dropdown {
		border-radius: 0;
	}
	.el-select .el-input.is-focus .el-input__inner {
		border-color: #ddd;
	}
	.el-popper[x-placement^="bottom"] {
		margin: 0;
	}
	.el-icon-arrow-up:before {
		content: "\E78F";
		color: #666;
	}
	.choose {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		background: #000;
	}
	.oftenTitle {
		width: 140px;
		height: 40px;
		border: 1px solid #ddd;
		padding-left: 7px;
		color: #999;
	}
	.oftenTitle:focus {
		outline: none;
		color: #666;
	}
	.el-input__inner::-webkit-input-placeholder {
		/* WebKit browsers */
		color: #666;
	}
	.text {
		width: 200px;
		height: 120px;
		resize: none;
		border: 1px solid #ddd;
		padding: 10px 7px;
		font-size: 14px;
		color: #999;
	}
	.list{
		line-height: 50px;
	}
	.phrasesList{
		padding-right: 20px;
	}
	.text:focus {
		outline: none;

		color: #666;
	}
</style>