perf: 优化office组件

src/components/ShowFile/ShowFile.vue

@@ -441,6 +441,7 @@
     <message-dialog
       title="提示"
       content="此文件不支持预览, 是否下载该文件?"
+      :loading="notPreviewDialogLoading"
       :show.sync="notPreviewDialogVisible"
       operatButtonText="强行使用文本编辑器打开"
       confirmButtonText="下载"
@@ -793,6 +794,7 @@ export default {
       drawFlag: false,
       fileListScrollTop: 0,
       notPreviewDialogVisible: false,
+      notPreviewDialogLoading: false,
       openingFile: '',
       openCompressionVisible: false,
       stompClient: undefined,//websocket订阅集合
@@ -828,6 +830,16 @@ export default {
   mounted() {
     Bus.$on('fileSuccess', () => {
 
+    })
+    Bus.$on('loadFileReady', () => {
+      this.closeNotPreviewDialogVisible()
+    })
+    Bus.$on('loadFileFaild', () => {
+      console.log('loadFileFaild')
+      this.notPreviewDialogVisible = true
+      this.$nextTick(() => {
+        this.notPreviewDialogLoading = false
+      })
     })
     Bus.$on('clickMore', (rows) => {
       this.$refs.fileListTable.tableSelectData = rows
@@ -3127,27 +3139,39 @@ export default {
           this.$emit("selectedFile", selectFile)
           return
         }
+        this.notPreviewDialogVisible = true
+        this.notPreviewDialogLoading = true
         if (row.contentType.startsWith('image')) {
           // 图片
           this.imagePreviewVisible = true
           this.imagePreviewRow = row
+          this.closeNotPreviewDialogVisible()
           return
         }
         if (suffix.simText.includes(row.suffix)) {
           // 文本文件
           this.textPreviewRow = row
           this.textPreviewVisible = true
+          this.closeNotPreviewDialogVisible()
           return
         }
         if (row.contentType.indexOf('video') > -1) {
           // 视频文件
           this.videoPreviewVisible = true
           this.videoPreviewRow = row
+          this.closeNotPreviewDialogVisible()
           return
         }
         if (row.contentType.indexOf('audio') > -1) {
           // 音频文件
           Bus.$emit('onAddAudio', row, this.audioCoverUrl)
+          this.closeNotPreviewDialogVisible()
+          return
+        }
+        if (suffix.compressedFile.includes(row.suffix)) {
+          // 压缩文件
+          this.openCompressionVisible = true
+          this.closeNotPreviewDialogVisible()
           return
         }
         if (row.contentType.indexOf('office') > -1 || row.suffix === 'csv') {
@@ -3159,17 +3183,18 @@ export default {
         if (row.suffix === 'pdf') {
           // pdf文件
           fileConfig.preview(this.$store.state.user.name, row, this.$store.getters.token)
+          this.closeNotPreviewDialogVisible()
           return
         }
-        if (suffix.compressedFile.includes(row.suffix)) {
+        this.notPreviewDialogLoading = false
-          // 压缩文件
-          this.openCompressionVisible = true
-          return
-        }
-        // 其他文件
         this.notPreviewDialogVisible = true
       }
     },
+    closeNotPreviewDialogVisible() {
+      // 其他文件
+      this.notPreviewDialogVisible = false
+      this.notPreviewDialogLoading = false
+    },
     // 强行使用文本编辑器打开
     forciblyOpen(file) {
       this.textPreviewRow = file

src/components/message/MessageDialog.vue

@@ -1,19 +1,23 @@
 <template>
   <div>
-    <el-dialog
+<!--    <el-container v-loading="loading">-->
-      class="jmal-message-dialog"
+<!--    </el-container>-->
-      :title="title"
+      <el-dialog
-      :visible.sync="visible"
+        class="jmal-message-dialog"
-      top="0vh"
+        :title="title"
-      :close-on-click-modal="false"
+        :visible.sync="visible"
-      @close="closeDialog">
+        :modal="modal"
-      <svg-icon icon-class="warring"></svg-icon> <span class="dialog-msg">{{content}}</span>
+        v-loading="loading"
-      <span slot="footer" class="dialog-footer">
+        top="0vh"
-        <el-button :size="buttonSize" @click="operating">{{operatButtonText}}</el-button>
+        :close-on-click-modal="false"
-<!--        <el-button :size="buttonSize" @click="cancel">{{cancelButtonText}}</el-button>-->
+        @close="closeDialog">
-        <el-button :size="buttonSize" type="primary" @click=confirm>{{confirmButtonText}}</el-button>
+          <svg-icon v-if="!loading" icon-class="warring"></svg-icon> <span class="dialog-msg">{{content}}</span>
-      </span>
+          <span v-if="!loading" slot="footer" class="dialog-footer">
-    </el-dialog>
+            <el-button :size="buttonSize" @click="operating">{{operatButtonText}}</el-button>
+                <!--        <el-button :size="buttonSize" @click="cancel">{{cancelButtonText}}</el-button>-->
+            <el-button :size="buttonSize" type="primary" @click=confirm>{{confirmButtonText}}</el-button>
+        </span>
+      </el-dialog>
   </div>
 </template>
 
@@ -25,12 +29,24 @@
         type: String,
         default: ''
       },
+      modal: {
+        type: Boolean,
+        default: function () {
+          return true
+        }
+      },
       show: {
         type: Boolean,
         default: function () {
           return false
         }
       },
+      loading: {
+        type: Boolean,
+        default: function () {
+          return false
+        }
+      },
       content: {
         type: String,
         default: ''
@@ -81,8 +97,20 @@
   }
 </script>
 <style lang="scss" scoped>
+  >>>.el-container {
+    .el-loading-mask {
+      position: fixed;
+      height: 300px;
+      width: 420px;
+      margin: 0 auto;
+      top: calc(50% - 175px);
+      background: #FFFFFF;
+    }
+  }
   >>>.jmal-message-dialog {
     height: 200px;
+    width: 420px;
+    margin: 0 auto;
     top: calc(50% - 100px);
     .el-dialog {
       width: 420px;
@@ -93,5 +121,8 @@
     .dialog-msg {
       margin-left: 10px;
     }
+    .el-loading-mask {
+      background: #FFFFFF;
+    }
   }
 </style>

src/components/office/OnlyOfficeEditor.vue

@@ -60,9 +60,11 @@ export default {
         if (!id) {
           return
         }
-        $J.loadScript($J.apiUrl("http://imac/office/web-apps/apps/api/documents/api.js"), (e) => {
+        let officeApiUrl = fileConfig.officeApiUrl()
+        $J.loadScript($J.apiUrl(officeApiUrl), (e) => {
           if (e !== null) {
-            $J.modalAlert("组件加载失败！")
+            this.$emit('onClose')
+            Bus.$emit('loadFileFaild')
             return
           }
           if(this.$store.state.user.token && this.$store.state.user.userId === this.file.userId){
@@ -172,6 +174,7 @@ export default {
     },
     onDocumentReady() {
       console.log('onDocumentReady')
+      this.$emit('onReday')
       let parentDoc = document.querySelector('.component-only-office')
       let doc = parentDoc.getElementsByTagName('iframe')[0].contentWindow.document
       let logo = doc.querySelector('.extra .logo')

src/components/preview/OfficePreview.vue

@@ -11,16 +11,14 @@
     >
     </message-dialog>
     <div class="office-preview" v-if="show">
-      <van-overlay :show="show">
+        <div class="preview-block" v-show="readyShow">
-        <div class="block">
           <div class="close-bar" @click="beforeClose">
             <svg-icon class="preview-close" icon-class="close"/>
           </div>
           <div class="wrapper">
-            <only-office-editor ref="officeEditor" :file="file" :read-only="readOnly" @onEdit="onEdit" @manualSave="manualSave"></only-office-editor>
+            <only-office-editor ref="officeEditor" :file="file" :read-only="readOnly" @onEdit="onEdit" @manualSave="manualSave" @onClose="close" @onReday="onReday"></only-office-editor>
           </div>
         </div>
-      </van-overlay>
     </div>
   </div>
 </template>
@@ -60,15 +58,20 @@ export default {
     return {
       pc: this.$pc,
       show: this.status,
+      readyShow: false,
       readOnly: true,
       isSaveDialogVisible: false,
       saved: true,
+      previewDocument: {},
     }
   },
   watch: {
     status: function(visible){
       if(visible){
         this.show = true
+        this.$nextTick(() => {
+          this.previewDocument = document.querySelector('.preview-block')
+        })
         this.checkReadOnly(this.file.userId)
       }
     }
@@ -89,8 +92,24 @@ export default {
      */
     close() {
       this.show = false
+      this.readyShow = false
       this.$emit('update:status', false)
     },
+    /**
+     * 文件内容已经加载好了
+     */
+    onReday() {
+      this.saved = true
+      this.previewDocument.style.zIndex = 9999
+      this.readyShow = true
+      this.$nextTick(() => {
+        Bus.$emit('loadFileReady')
+        let that = this
+        setTimeout(function () {
+          that.previewDocument.style.zIndex = 2001
+        },200)
+      })
+    },
     /**
      * 编辑回调
      * @param saved 是否已经保存
@@ -171,9 +190,16 @@ export default {
   background-color: rgba(0,0,0,.7);
 }
 
-.block {
+.preview-block {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,.7);
+  z-index: 2001;
+
   .close-bar {
-    z-index: 2006;
     background-color: rgba(0,0,0,.5);
     position: relative;
     top: -2.5rem;
@@ -197,7 +223,6 @@ export default {
 
   .preview-close {
     transform: rotate(-45deg);
-    z-index: 2009;
     position: absolute;
     font-size: 1.25rem;
     top: -8px;

src/utils/file-config.js

@@ -7,7 +7,11 @@ export default {
   webDAVUrl: function(username) {
     return window.location.origin + `${this.baseUrl}/webDAV/${username}`
   },
-  // webDAV的url
+  // office api url
+  officeApiUrl: function() {
+    return `${window.location.origin}/office/web-apps/apps/api/documents/api.js`
+  },
+  // office回调url
   officeCallBackUrl: function(token, fileId) {
     return `${window.location.origin}${this.baseUrl}/office/track?jmal-token=${token}&fileId=${fileId}`
   },

src/utils/web.js

@@ -531,20 +531,20 @@
             if (msg === false) {
                 return;
             }
-            alert($J.L(msg));
+            alert(msg);
         },
 
         //提示
         messageSuccess(msg) {
-            $J.Message.success($J.L(msg));
+            $J.Message.success(msg);
         },
 
         messageWarning(msg) {
-            $J.Message.warning($J.L(msg));
+            $J.Message.warning(msg);
         },
 
         messageError(msg) {
-            $J.Message.error($J.L(msg));
+            $J.Message.error(msg);
         },
 
         //通知