From 3f959918af33227134a4808ebd18e489a6e2bc75 Mon Sep 17 00:00:00 2001 From: kuaifan Date: Thu, 16 Jun 2022 14:46:58 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=B6=88=E6=81=AF=E5=88=97?= =?UTF-8?q?=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- resources/assets/js/functions/utils.js | 29 +++ .../js/pages/manage/components/DialogItem.vue | 56 +++--- .../js/pages/manage/components/DialogView.vue | 184 +----------------- .../pages/manage/components/DialogWrapper.vue | 181 ++++++++++++++++- .../sass/pages/components/dialog-wrapper.scss | 15 ++ 5 files changed, 251 insertions(+), 214 deletions(-) diff --git a/resources/assets/js/functions/utils.js b/resources/assets/js/functions/utils.js index e0aa0db7f..79d42e3b4 100755 --- a/resources/assets/js/functions/utils.js +++ b/resources/assets/js/functions/utils.js @@ -45,5 +45,34 @@ module.exports = { }) } return text; + }, + + /** + * 获取文本消息图片 + * @param text + * @returns {*[]} + */ + textImagesInfo(text) { + const baseUrl = $A.apiUrl('../'); + const array = text.match(new RegExp(`]*?>`, "g")); + const list = []; + if (array) { + const srcReg = new RegExp("src=([\"'])([^'\"]*)\\1"), + widthReg = new RegExp("(original-)?width=\"(\\d+)\""), + heightReg = new RegExp("(original-)?height=\"(\\d+)\"") + array.some(res => { + const srcMatch = res.match(srcReg), + widthMatch = res.match(widthReg), + heightMatch = res.match(heightReg); + if (srcMatch) { + list.push({ + src: srcMatch[2].replace(/\{\{RemoteURL\}\}/g, baseUrl), + width: widthMatch ? widthMatch[2] : -1, + height: heightMatch ? heightMatch[2] : -1, + }) + } + }) + } + return list; } } diff --git a/resources/assets/js/pages/manage/components/DialogItem.vue b/resources/assets/js/pages/manage/components/DialogItem.vue index 7c87df739..5ef9485b4 100644 --- a/resources/assets/js/pages/manage/components/DialogItem.vue +++ b/resources/assets/js/pages/manage/components/DialogItem.vue @@ -4,21 +4,21 @@ + @on-longpress="onLongpress" + @on-view-text="onViewText" + @on-view-file="onViewFile" + @on-emoji="onEmoji"/> diff --git a/resources/assets/js/pages/manage/components/DialogView.vue b/resources/assets/js/pages/manage/components/DialogView.vue index 6536f6f5d..100634b49 100644 --- a/resources/assets/js/pages/manage/components/DialogView.vue +++ b/resources/assets/js/pages/manage/components/DialogView.vue @@ -72,7 +72,7 @@ v-for="(item, index) in msgData.emoji" :key="index" :class="{hasme: item.userids.includes(userId)}" - @click="setEmoji(item.symbol)"> + @click="onEmoji(item.symbol)">
{{item.symbol}}
{{item.userids.length}}
@@ -80,7 +80,7 @@ -
+
{{msgData.created_at}}
@@ -161,7 +161,6 @@ export default { popperShow: false, timeShow: false, operateEnter: false, - emojiLoad: 0, allList: [], } }, @@ -360,184 +359,17 @@ export default { }); }, - withdraw() { - $A.modalConfirm({ - content: `确定撤回此信息吗？`, - okText: '撤回', - loading: true, - onOk: () => { - this.$store.dispatch("call", { - url: 'dialog/msg/withdraw', - data: { - msg_id: this.msgData.id - }, - }).then(() => { - $A.messageSuccess("消息已撤回"); - this.$store.dispatch("forgetDialogMsg", this.msgData.id); - }).catch(({msg}) => { - $A.messageError(msg, 301); - }).finally(_ => { - this.$Modal.remove(); - }); - } - }); + viewText(e) { + this.$emit("on-view-text", e) }, - viewText({target}) { - if (this.operateVisible) { - return - } - switch (target.nodeName) { - case "IMG": - if (target.classList.contains('browse')) { - this.viewPicture(target.currentSrc); - } else { - this.$store.state.previewImageIndex = 0; - this.$store.state.previewImageList = this.getTextImageInfos(target.outerHTML); - } - break; - - case "SPAN": - if (target.classList.contains('mention') && target.classList.contains('task')) { - this.$store.dispatch("openTask", $A.runNum(target.getAttribute("data-id"))); - } - break; - } + viewFile(e) { + this.$emit("on-view-file", e) }, - viewFile() { - if (this.operateVisible) { - return - } - const {msg} = this.msgData; - if (['jpg', 'jpeg', 'gif', 'png'].includes(msg.ext)) { - this.viewPicture(msg.path); - return - } - const path = `/single/file/msg/${this.msgData.id}`; - if (this.$Electron) { - this.$Electron.sendMessage('windowRouter', { - name: `file-msg-${this.msgData.id}`, - path: path, - userAgent: "/hideenOfficeTitle/", - force: false, - config: { - title: `${this.msgData.msg.name} (${$A.bytesToSize(this.msgData.msg.size)})`, - titleFixed: true, - parent: null, - width: Math.min(window.screen.availWidth, 1440), - height: Math.min(window.screen.availHeight, 900), - }, - webPreferences: { - nodeIntegrationInSubFrames: msg.ext === 'drawio' - }, - }); - } else if (this.$isEEUiApp) { - $A.eeuiAppOpenPage({ - pageType: 'app', - pageTitle: `${this.msgData.msg.name} (${$A.bytesToSize(this.msgData.msg.size)})`, - url: 'web.js', - params: { - titleFixed: true, - url: $A.rightDelete(window.location.href, window.location.hash) + `#${path}` - }, - }); - } else { - window.open($A.apiUrl(`..${path}`)) - } + onEmoji(emoji) { + this.$emit("on-emoji", emoji) }, - - viewPicture(currentUrl) { - const {dialog_id} = this.msgData; - const data = $A.cloneJSON(this.dialogMsgs.filter(item => { - if (item.dialog_id === dialog_id) { - if (item.type === 'file') { - return ['jpg', 'jpeg', 'gif', 'png'].includes(item.msg.ext); - } else if (item.type === 'text') { - return item.msg.text.match(/]*?>/); - } - } - return false; - })).sort((a, b) => { - return a.id - b.id; - }); - // - const list = []; - data.some(({type, msg}) => { - if (type === 'file') { - list.push({ - src: msg.path, - width: msg.width, - height: msg.height, - }) - } else if (type === 'text') { - list.push(...this.getTextImageInfos(msg.text)) - } - }) - // - const index = list.findIndex(({src}) => src === currentUrl); - if (index > -1) { - this.$store.state.previewImageIndex = index; - this.$store.state.previewImageList = list; - } else { - this.$store.state.previewImageIndex = 0; - this.$store.state.previewImageList = [currentUrl]; - } - }, - - getTextImageInfos(text) { - const baseUrl = $A.apiUrl('../'); - const array = text.match(new RegExp(`]*?>`, "g")); - const list = []; - if (array) { - const srcReg = new RegExp("src=([\"'])([^'\"]*)\\1"), - widthReg = new RegExp("(original-)?width=\"(\\d+)\""), - heightReg = new RegExp("(original-)?height=\"(\\d+)\"") - array.some(res => { - const srcMatch = res.match(srcReg), - widthMatch = res.match(widthReg), - heightMatch = res.match(heightReg); - if (srcMatch) { - list.push({ - src: srcMatch[2].replace(/\{\{RemoteURL\}\}/g, baseUrl), - width: widthMatch ? widthMatch[2] : -1, - height: heightMatch ? heightMatch[2] : -1, - }) - } - }) - } - return list; - }, - - downFile() { - $A.modalConfirm({ - title: '下载文件', - content: `${this.msgData.msg.name} (${$A.bytesToSize(this.msgData.msg.size)})`, - okText: '立即下载', - onOk: () => { - this.$store.dispatch('downUrl', $A.apiUrl(`dialog/msg/download?msg_id=${this.msgData.id}`)) - } - }); - }, - - setEmoji(emoji) { - setTimeout(_ => { - this.emojiLoad++; - }, 600); - this.$store.dispatch("call", { - url: 'dialog/msg/emoji', - data: { - msg_id: this.msgData.id, - emoji, - }, - }).then(({data}) => { - this.$store.dispatch("saveDialogMsg", data); - }).catch(({msg}) => { - $A.messageError(msg); - }).finally(_ => { - this.emojiLoad--; - }); - } } } diff --git a/resources/assets/js/pages/manage/components/DialogWrapper.vue b/resources/assets/js/pages/manage/components/DialogWrapper.vue index a71acbf49..ac189982c 100644 --- a/resources/assets/js/pages/manage/components/DialogWrapper.vue +++ b/resources/assets/js/pages/manage/components/DialogWrapper.vue @@ -76,12 +76,22 @@ :data-key="'id'" :data-sources="allMsgs" :data-component="msgItem" + :extra-props="{dialogData, isMyDialog, operateVisible, operateItem}" :estimate-size="78" :keeps="80" @scroll="onScroll" - @totop="loadNextPage"> -
{{$L('暂无消息')}}
+ @totop="loadNextPage" + + @on-longpress="onLongpress" + @on-view-text="onViewText" + @on-view-file="onViewFile" + @on-emoji="onEmoji"> + @@ -247,6 +257,7 @@ import ChatInput from "./ChatInput"; import VirtualList from 'vue-virtual-scroll-list' import {Store} from "le5le-store"; +import {textImagesInfo} from "../../../functions/utils"; export default { name: "DialogWrapper", @@ -296,7 +307,6 @@ export default { dialogDrag: false, groupInfoShow: false, - dialogSubscribe: null, navStyle: {}, @@ -311,13 +321,8 @@ export default { } }, - mounted () { - this.dialogSubscribe = Store.subscribe('dialogLongpress', this.onLongpress) - }, - beforeDestroy() { this.$store.dispatch('forgetInDialog', this._uid) - this.dialogSubscribe.unsubscribe(); }, computed: { @@ -937,14 +942,172 @@ export default { break; case "withdraw": + this.onWithdraw() + break; + case "view": + this.onViewFile() + break; + case "down": + this.onDownFile() + break; + case "emoji": - Store.set('dialogOperate', {id: this.operateItem.id, action, value}); + this.onEmoji(value) break; } }) }, + + onWithdraw() { + $A.modalConfirm({ + content: `确定撤回此信息吗？`, + okText: '撤回', + loading: true, + onOk: () => { + this.$store.dispatch("call", { + url: 'dialog/msg/withdraw', + data: { + msg_id: this.operateItem.id + }, + }).then(() => { + $A.messageSuccess("消息已撤回"); + this.$store.dispatch("forgetDialogMsg", this.operateItem.id); + }).catch(({msg}) => { + $A.messageError(msg, 301); + }).finally(_ => { + this.$Modal.remove(); + }); + } + }); + }, + + onViewText({target}) { + if (this.operateVisible) { + return + } + switch (target.nodeName) { + case "IMG": + if (target.classList.contains('browse')) { + this.onViewPicture(target.currentSrc); + } else { + this.$store.state.previewImageIndex = 0; + this.$store.state.previewImageList = textImagesInfo(target.outerHTML); + } + break; + + case "SPAN": + if (target.classList.contains('mention') && target.classList.contains('task')) { + this.$store.dispatch("openTask", $A.runNum(target.getAttribute("data-id"))); + } + break; + } + }, + + onViewFile() { + if (this.operateVisible) { + return + } + const {msg} = this.operateItem; + if (['jpg', 'jpeg', 'gif', 'png'].includes(msg.ext)) { + this.onViewPicture(msg.path); + return + } + const path = `/single/file/msg/${this.operateItem.id}`; + if (this.$Electron) { + this.$Electron.sendMessage('windowRouter', { + name: `file-msg-${this.operateItem.id}`, + path: path, + userAgent: "/hideenOfficeTitle/", + force: false, + config: { + title: `${msg.name} (${$A.bytesToSize(msg.size)})`, + titleFixed: true, + parent: null, + width: Math.min(window.screen.availWidth, 1440), + height: Math.min(window.screen.availHeight, 900), + }, + webPreferences: { + nodeIntegrationInSubFrames: msg.ext === 'drawio' + }, + }); + } else if (this.$isEEUiApp) { + $A.eeuiAppOpenPage({ + pageType: 'app', + pageTitle: `${msg.name} (${$A.bytesToSize(msg.size)})`, + url: 'web.js', + params: { + titleFixed: true, + url: $A.rightDelete(window.location.href, window.location.hash) + `#${path}` + }, + }); + } else { + window.open($A.apiUrl(`..${path}`)) + } + }, + + onViewPicture(currentUrl) { + const data = $A.cloneJSON(this.dialogMsgs.filter(item => { + if (item.dialog_id === this.dialogId) { + if (item.type === 'file') { + return ['jpg', 'jpeg', 'gif', 'png'].includes(item.msg.ext); + } else if (item.type === 'text') { + return item.msg.text.match(/]*?>/); + } + } + return false; + })).sort((a, b) => { + return a.id - b.id; + }); + // + const list = []; + data.some(({type, msg}) => { + if (type === 'file') { + list.push({ + src: msg.path, + width: msg.width, + height: msg.height, + }) + } else if (type === 'text') { + list.push(...textImagesInfo(msg.text)) + } + }) + // + const index = list.findIndex(({src}) => src === currentUrl); + if (index > -1) { + this.$store.state.previewImageIndex = index; + this.$store.state.previewImageList = list; + } else { + this.$store.state.previewImageIndex = 0; + this.$store.state.previewImageList = [currentUrl]; + } + }, + + onDownFile() { + $A.modalConfirm({ + title: '下载文件', + content: `${this.operateItem.msg.name} (${$A.bytesToSize(this.operateItem.msg.size)})`, + okText: '立即下载', + onOk: () => { + this.$store.dispatch('downUrl', $A.apiUrl(`dialog/msg/download?msg_id=${this.operateItem.id}`)) + } + }); + }, + + onEmoji(emoji) { + this.$store.dispatch("call", { + url: 'dialog/msg/emoji', + data: { + msg_id: this.operateItem.id, + emoji, + }, + }).then(({data}) => { + this.$store.dispatch("saveDialogMsg", data); + }).catch(({msg}) => { + $A.messageError(msg); + }); + } } } diff --git a/resources/assets/sass/pages/components/dialog-wrapper.scss b/resources/assets/sass/pages/components/dialog-wrapper.scss index e53f728a1..d32da231e 100644 --- a/resources/assets/sass/pages/components/dialog-wrapper.scss +++ b/resources/assets/sass/pages/components/dialog-wrapper.scss @@ -646,6 +646,21 @@ } + &.loading, + &.loaded { + color: rgba($primary-desc-color, 0.6); + font-size: 13px; + height: 20px; + box-sizing: content-box; + justify-content: center; + + .common-loading { + margin: 0; + width: 18px; + height: 18px; + } + } + &.nothing { position: absolute; top: 50%;