From eb28b64c444bfcc27fe4ba0605c925827dd41291 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BE=99=E8=BF=90=E6=A8=A1?= <1724894114@qq.com> Date: Thu, 21 Nov 2024 13:56:25 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E5=AE=A2=E6=9C=8D=E8=A1=A8?= =?UTF-8?q?=E6=83=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/scCustomer/index.vue | 65 +++++++++++++++++++++++-- src/views/service/components/emoji.json | 3 ++ src/views/service/infoQuery.vue | 50 ++++++++++++++++++- 3 files changed, 113 insertions(+), 5 deletions(-) create mode 100644 src/views/service/components/emoji.json diff --git a/src/components/scCustomer/index.vue b/src/components/scCustomer/index.vue index 50f617b..184e01b 100644 --- a/src/components/scCustomer/index.vue +++ b/src/components/scCustomer/index.vue @@ -5,7 +5,7 @@
智能客服 - +
@@ -66,10 +66,19 @@
-
+ +
+ +
- +
发 送
@@ -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; + } +} diff --git a/src/views/service/components/emoji.json b/src/views/service/components/emoji.json new file mode 100644 index 0000000..bdb051c --- /dev/null +++ b/src/views/service/components/emoji.json @@ -0,0 +1,3 @@ +{ + "data": "😀,😁,😂,😃,😄,😅,😆,😉,😊,😋,😎,😍,😘,😗,😙,😚,😇,😐,😑,😶,😏,😣,😥,😮,😯,😪,😫,😴,😌,😛,😜,😝,😒,😓,😔,😕,😲,😷,😖,😞,😟,😤,😢,😭,😦,😧,😨,😬,😰,😱,😳,😵,😡,😠,💘,❤,💓,💔,💕,💖,💗,💙,💚,💛,💜,💝,💞,💟,❣,💪,👈,👉,☝,👆,👇,✌,✋,👌,👍,👎,✊,👊,👋,👏,👐,✍,🍇,🍈,🍉,🍊,🍋,🍌,🍍,🍎,🍏,🍐,🍑,🍒,🍓,🍅,🍆,🌽,🍄,🌰,🍞,🍖,🍗,🍔,🍟,🍕,🍳,🍲,🍱,🍘,🍙,🍚,🍛,🍜,🍝,🍠,🍢,🍣,🍤,🍥,🍡,🍦,🍧,🍨,🍩,🍪,🎂,🍰,🍫,🍬,🍭,🍮,🍯,🍼,☕,🍵,🍶,🍷,🍸,🍹,🍺,🍻,🍴,🌹,🍀,🍎,💰,📱,🌙,🍁,🍂,🍃,🌷,💎,🔪,🔫,🏀,⚽,⚡,👄,👍,🔥,🙈,🙉,🙊,🐵,🐒,🐶,🐕,🐩,🐺,🐱,😺,😸,😹,😻,😼,😽,🙀,😿,😾,🐈,🐯,🐅,🐆,🐴,🐎,🐮,🐂,🐃,🐄,🐷,🐖,🐗,🐽,🐏,🐑,🐐,🐪,🐫,🐘,🐭,🐁,🐀,🐹,🐰,🐇,🐻,🐨,🐼,🐾,🐔,🐓,🐣,🐤,🐥,🐦,🐧,🐸,🐊,🐢,🐍,🐲,🐉,🐳,🐋,🐬,🐟,🐠,🐡,🐙,🐚,🐌,🐛,🐜,🐝,🐞,🦋,😈,👿,👹,👺,💀,☠,👻,👽,👾,💣" +} diff --git a/src/views/service/infoQuery.vue b/src/views/service/infoQuery.vue index f02d710..352bc74 100644 --- a/src/views/service/infoQuery.vue +++ b/src/views/service/infoQuery.vue @@ -80,10 +80,17 @@
-
+ +
+ +
- +
@@ -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; }