perf: 图片预览使用当前页组件，支持多图

chinaguojian · Mar 16, 2022 · af9b5ab · af9b5ab
1 parent 5497bd9
commit af9b5ab
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 3 deletions.
diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
@@ -45,12 +45,15 @@ import {
     DropdownMenu,
     DropdownItem,
 } from 'element-ui';
+import ImageViewer from 'element-ui/packages/image/src/image-viewer';
+
 Vue.component('EAvatar', Avatar);
 Vue.component('ETooltip', Tooltip);
 Vue.component('EPopover', Popover);
 Vue.component('EDropdown', Dropdown);
 Vue.component('EDropdownMenu', DropdownMenu);
 Vue.component('EDropdownItem', DropdownItem);
+Vue.component('EImageViewer', ImageViewer);
 
 const originalPush = VueRouter.prototype.push
 VueRouter.prototype.push = function push(location) {

diff --git a/resources/assets/js/pages/manage.vue b/resources/assets/js/pages/manage.vue
@@ -342,6 +342,13 @@
                 <Badge :count="unreadTotal"/>
             </div>
         </DragBallComponent>
+
+        <!--预览图片-->
+        <EImageViewer
+            v-if="previewImageList.length > 0"
+            :urlList="previewImageList"
+            :initialIndex="previewImageIndex"
+            :on-close="closePreviewImage"/>
     </div>
 </template>
 
@@ -483,7 +490,10 @@ export default {
             'wsMsg',
 
             'clientNewVersion',
-            'cacheTaskBrowse'
+            'cacheTaskBrowse',
+
+            'previewImageList',
+            'previewImageIndex',
         ]),
 
         ...mapGetters(['taskData', 'dashboardTask']),
@@ -970,6 +980,11 @@ export default {
             });
         },
 
+        closePreviewImage() {
+            this.$store.state.previewImageIndex = 0;
+            this.$store.state.previewImageList = [];
+        },
+
         notificationInit() {
             this.notificationClass = new notificationKoro(this.$L("打开通知成功"));
             if (this.notificationClass.support) {

diff --git a/resources/assets/js/pages/manage/components/DialogView.vue b/resources/assets/js/pages/manage/components/DialogView.vue
@@ -108,7 +108,7 @@ export default {
     },
 
     computed: {
-        ...mapState(['userToken', 'userId']),
+        ...mapState(['userToken', 'userId', 'dialogMsgs']),
 
         readList() {
             return this.allList.filter(({read_at}) => read_at)
@@ -220,6 +220,23 @@ export default {
         },
 
         viewFile() {
+            const {id, dialog_id, msg} = this.msgData;
+            if (['jpg', 'jpeg', 'gif', 'png'].includes(msg.ext)) {
+                const list = $A.cloneJSON(this.dialogMsgs.filter(item => {
+                    return item.dialog_id === dialog_id && item.type === 'file' && ['jpg', 'jpeg', 'gif', 'png'].includes(item.msg.ext);
+                })).sort((a, b) => {
+                    return a.id - b.id;
+                });
+                const index = list.findIndex(item => item.id === id);
+                if (index > -1) {
+                    this.$store.state.previewImageIndex = index;
+                    this.$store.state.previewImageList = list.map(({msg}) => msg.path);
+                } else {
+                    this.$store.state.previewImageIndex = 0;
+                    this.$store.state.previewImageList = [msg.path];
+                }
+                return
+            }
             if (this.$Electron) {
                 this.$Electron.sendMessage('windowRouter', {
                     name: 'file-msg-' + this.msgData.id,

diff --git a/resources/assets/js/pages/manage/components/TaskDetail.vue b/resources/assets/js/pages/manage/components/TaskDetail.vue
@@ -1234,6 +1234,18 @@ export default {
         },
 
         viewFile(file) {
+            if (['jpg', 'jpeg', 'gif', 'png'].includes(file.ext)) {
+                const list = this.fileList.filter(item => ['jpg', 'jpeg', 'gif', 'png'].includes(item.ext))
+                const index = list.findIndex(item => item.id === file.id);
+                if (index > -1) {
+                    this.$store.state.previewImageIndex = index;
+                    this.$store.state.previewImageList = list.map(({path}) => path);
+                } else {
+                    this.$store.state.previewImageIndex = 0;
+                    this.$store.state.previewImageList = [file.path];
+                }
+                return
+            }
             if (this.$Electron) {
                 this.$Electron.sendMessage('windowRouter', {
                     name: 'file-task-' + file.id,

diff --git a/resources/assets/js/store/state.js b/resources/assets/js/store/state.js
@@ -121,7 +121,11 @@ const stateData = {
     themeIsDark: false,
 
     // 客户端新版本号
-    clientNewVersion: null
+    clientNewVersion: null,
+
+    // 预览图片
+    previewImageIndex: 0,
+    previewImageList: [],
 };
 
 // 会员信息

diff --git a/resources/assets/sass/element.scss b/resources/assets/sass/element.scss
@@ -14,6 +14,7 @@ $--dropdown-menuItem-hover-color: #606266;
 @import "~element-ui/packages/theme-chalk/src/dropdown-menu";
 @import "~element-ui/packages/theme-chalk/src/dropdown-item";
 @import "~element-ui/packages/theme-chalk/src/notification";
+@import "~element-ui/packages/theme-chalk/src/image";
 
 
 .el-dropdown-menu__item {