完善客服表情

src/components/scCustomer/index.vue

@@ -5,7 +5,7 @@
 			<span class="arrow"></span>
 			<div class="viewBody">
 				<div class="title">智能客服
-					<el-icon class="close" size="18" @click="closeCustomer"><el-icon-Close/></el-icon>
+					<el-icon class="close" size="18" @click.stop="closeCustomer"><el-icon-Close/></el-icon>
 				</div>
 				<div class="bodyMain affix-container">
 					<el-scrollbar ref="scrollbar" height="100%" @scroll="scroll">
@@ -66,10 +66,19 @@
 							<uploadFile ref="uploadFile" @uploadFileSuccess="uploadFileSuccess" title="上传附件"></uploadFile>
 						</div>
 						<div class="tagItem" @click="recordsShow"><el-icon size="18"><sc-icon-Record/></el-icon></div>
+						<el-dropdown trigger="click" placement="top" ref="dropdownDown">
 							<div class="tagItem"><el-icon size="18"><sc-icon-Expression/></el-icon></div>
+							<template #dropdown>
+								<el-scrollbar height="180">
+									<ul class="emojiView">
+										<li class="emojiCol" v-for="(item,index) in emojiJson" :key="index" @click.stop="emojiChange(item)">{{item}}</li>
+									</ul>
+								</el-scrollbar>
+							</template>
+						</el-dropdown>
 					</div>
 					<div class="sendView">
-						<el-input class="customTextarea" v-model="params.to_message" @keydown="handleKeydown" resize="none" type="textarea" :rows="3" placeholder="Shift+Enter换行 请简短描述您的问题"></el-input>
+						<el-input class="customTextarea" v-model="params.to_message" @keydown="handleKeydown" autofocus ref="messageInput" resize="none" type="textarea" :rows="3" placeholder="Shift+Enter换行 请简短描述您的问题"></el-input>
 						<div class="saveBtn" :class="params.to_message!==''?'saveActive':''" @click="sendCustomer">发 送</div>
 					</div>
 				</div>
@@ -85,6 +94,7 @@ import {eventBus} from "@/utils/eventBus";
 import uploadFile from "@/views/service/components/attachmentUpload";
 import customerRecordsDialog from "@/views/service/components/customerRecords"
 import fileType from "@/views/docsManager/fileType"
+import emoji from "@/views/service/components/emoji.json";
 export default {
 	name: "index",
 	components:{
@@ -108,6 +118,7 @@ export default {
 				to_user_id:"",
 				to_message:"",
 			},
+			emojiJson:[],
 			tagList:[],
 			msgList:[],
 			user_id:0,
@@ -128,9 +139,13 @@ export default {
 				this.user_id = userInfo.id;
 			}
 		}
+
+		this.emojiJson = emoji.data.split(',');
+		document.addEventListener('click', this.closeDropdown);
 	},
 	unmounted() {
 		eventBus.$off('sockBack', this.getWsResult);
+		document.removeEventListener('click', this.closeDropdown);
 	},
 	methods:{
 		getWsResult(res){
@@ -279,6 +294,26 @@ export default {
 			}
 		},
 
+		emojiChange(item){
+			let text = this.$TOOL.objCopy(this.params.to_message);
+			this.params.to_message = text + item;
+		},
+		closeDropdown(event){
+			if(this.$refs.dropdownDown && this.$refs.dropdownDown.$el){
+				const dropdownElement = this.$refs.dropdownDown.$el;
+				if (!dropdownElement.contains(event.target)) {
+					this.$refs.dropdownDown.handleClose();
+				}
+			}
+			setTimeout(()=>{
+				this.$nextTick(()=>{
+					if(this.$refs.messageInput){
+						this.$refs.messageInput.focus();
+					}
+				})
+			},10)
+		},
+
 		// 上传附件
 		uploadFile(){
 			this.$nextTick(()=>{
@@ -417,6 +452,8 @@ export default {
 							padding-right: 10px;
 						}
 						.msgText{
+							flex: 1;
+							overflow: hidden;
 							.msgTitle{
 								padding: 0 0 8px 0;
 								color: #555;
@@ -437,6 +474,7 @@ export default {
 								padding: 10px;
 								display: inline-block;
 								text-align: left;
+								max-width: 100%;
 								.imgView{
 									height: 100%;
 									display: flex;
@@ -468,6 +506,14 @@ export default {
 									border-radius: 4px;
 									background: #f8f6f6;
 									margin-bottom: 5px;
+									overflow: hidden;
+									.fileName{
+										flex: 1;
+										white-space: pre-wrap;
+										overflow-wrap: break-word;
+										display: inline-block;
+										word-break:break-all;
+									}
 								}
 							}
 							.el-image{
@@ -580,4 +626,17 @@ export default {
 		background: #fff;
 	}
 }
+
+.emojiView{
+	width: 380px;
+	padding: 10px;
+	display: flex;
+	flex-wrap: wrap;
+	.emojiCol{
+		padding: 5px;
+		cursor: pointer;
+		font-size: 16px;
+		list-style: none;
+	}
+}
 </style>

src/views/service/components/emoji.json

@@ -0,0 +1,3 @@
+{
+	"data": "😀,😁,😂,😃,😄,😅,😆,😉,😊,😋,😎,😍,😘,😗,😙,😚,😇,😐,😑,😶,😏,😣,😥,😮,😯,😪,😫,😴,😌,😛,😜,😝,😒,😓,😔,😕,😲,😷,😖,😞,😟,😤,😢,😭,😦,😧,😨,😬,😰,😱,😳,😵,😡,😠,💘,❤,💓,💔,💕,💖,💗,💙,💚,💛,💜,💝,💞,💟,❣,💪,👈,👉,☝,👆,👇,✌,✋,👌,👍,👎,✊,👊,👋,👏,👐,✍,🍇,🍈,🍉,🍊,🍋,🍌,🍍,🍎,🍏,🍐,🍑,🍒,🍓,🍅,🍆,🌽,🍄,🌰,🍞,🍖,🍗,🍔,🍟,🍕,🍳,🍲,🍱,🍘,🍙,🍚,🍛,🍜,🍝,🍠,🍢,🍣,🍤,🍥,🍡,🍦,🍧,🍨,🍩,🍪,🎂,🍰,🍫,🍬,🍭,🍮,🍯,🍼,☕,🍵,🍶,🍷,🍸,🍹,🍺,🍻,🍴,🌹,🍀,🍎,💰,📱,🌙,🍁,🍂,🍃,🌷,💎,🔪,🔫,🏀,⚽,⚡,👄,👍,🔥,🙈,🙉,🙊,🐵,🐒,🐶,🐕,🐩,🐺,🐱,😺,😸,😹,😻,😼,😽,🙀,😿,😾,🐈,🐯,🐅,🐆,🐴,🐎,🐮,🐂,🐃,🐄,🐷,🐖,🐗,🐽,🐏,🐑,🐐,🐪,🐫,🐘,🐭,🐁,🐀,🐹,🐰,🐇,🐻,🐨,🐼,🐾,🐔,🐓,🐣,🐤,🐥,🐦,🐧,🐸,🐊,🐢,🐍,🐲,🐉,🐳,🐋,🐬,🐟,🐠,🐡,🐙,🐚,🐌,🐛,🐜,🐝,🐞,🦋,😈,👿,👹,👺,💀,☠,👻,👽,👾,💣"
+}

src/views/service/infoQuery.vue

@@ -80,10 +80,17 @@
 							<uploadFile ref="uploadFile" @uploadFileSuccess="uploadFileSuccess" title="上传附件"></uploadFile>
 						</div>
 						<div class="tagItem" @click="recordsShow"><el-icon size="18"><sc-icon-Record/></el-icon></div>
+						<el-dropdown trigger="click" ref="dropdownDown">
 							<div class="tagItem"><el-icon size="18"><sc-icon-Expression/></el-icon></div>
+							<template #dropdown>
+								<ul class="emojiView">
+									<li class="emojiCol" v-for="(item,index) in emojiJson" :key="index" @click.stop="emojiChange(item)">{{item}}</li>
+								</ul>
+							</template>
+						</el-dropdown>
 					</div>
 					<div class="sendView">
-						<el-input @keydown="handleKeydown" v-model="params.to_message" class="customTextarea" type="textarea" placeholder="Shift+Enter换行 请输入.." :rows="3" resize="none"></el-input>
+						<el-input @keydown="handleKeydown" v-model="params.to_message" class="customTextarea" autofocus ref="messageInput" type="textarea" placeholder="Shift+Enter换行 请输入.." :rows="3" resize="none"></el-input>
 						<div class="saveBtn" @click="sendCustomer" :class="params.to_message!=''?'saveActive':''">
 							<el-icon size="22"><sc-icon-SendCustom /></el-icon>
 						</div>
@@ -129,6 +136,7 @@ import {eventBus} from "@/utils/eventBus";
 import customerRecordsDialog from "@/views/service/components/customerRecords"
 import uploadFile from "@/views/service/components/attachmentUpload";
 import fileType from "@/views/docsManager/fileType"
+const emoji = require("@/views/service/components/emoji.json");
 export default {
 	name: "",
 	components:{
@@ -143,6 +151,7 @@ export default {
 			msgDataLoading:false,
 			contactsLoading:false,
 			msgList:[],
+			emojiJson:[],
 			user_id:0,
 			to_user_id:0,
 			page:1,
@@ -171,6 +180,12 @@ export default {
 		},1000)
 		// 获取新消息
 		eventBus.$on('sockBack', this.getWsResult);
+
+		this.emojiJson = emoji.data.split(',');
+		document.addEventListener('click', this.closeDropdown);
+	},
+	unmounted() {
+		document.removeEventListener('click', this.closeDropdown);
 	},
 	methods:{
 		getWsResult(res){
@@ -261,6 +276,9 @@ export default {
 			this.params.to_user_id = item.from_user.id;
 			this.msgList = [];
 			this.getCustomerMsgList(false);
+			this.$nextTick(()=>{
+				this.$refs.messageInput.focus();
+			})
 		},
 		async getCustomerMsgList(isPage=false) {
 			let params = {}
@@ -307,6 +325,21 @@ export default {
 				this.scrollDown();
 			}
 		},
+		emojiChange(item){
+			let text = this.$TOOL.objCopy(this.params.to_message);
+			this.params.to_message = text + item;
+		},
+		closeDropdown(event){
+			const dropdownElement = this.$refs.dropdownDown.$el;
+			if (!dropdownElement.contains(event.target)) {
+				this.$refs.dropdownDown.handleClose();
+			}
+			setTimeout(()=>{
+				this.$nextTick(()=>{
+					this.$refs.messageInput.focus();
+				})
+			},10)
+		},
 
 		// 上传附件
 		uploadFile(){
@@ -605,6 +638,19 @@ export default {
 	}
 }
 
+.emojiView{
+	width: 650px;
+	padding: 10px;
+	display: flex;
+	flex-wrap: wrap;
+	.emojiCol{
+		padding: 5px;
+		cursor: pointer;
+		font-size: 16px;
+		list-style: none;
+	}
+}
+
 .exportPopover{
 	margin-bottom: 8px;
 }