完善客服表情

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>
-						<div class="tagItem"><el-icon size="18"><sc-icon-Expression/></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>