perf: 优化office组件

2022-08-14 12:26:51 +08:00 · 2022-08-14 12:26:51 +08:00 · 6f9d0c85ab
commit 6f9d0c85ab
parent 0276709027
6 changed files with 122 additions and 34 deletions
--- a/src/components/ShowFile/ShowFile.vue
+++ b/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.openCompressionVisible = true
-          return
-        }
-        // 其他文件
+        this.notPreviewDialogLoading = false
        this.notPreviewDialogVisible = true
      }
    },
+    closeNotPreviewDialogVisible() {
+      // 其他文件
+      this.notPreviewDialogVisible = false
+      this.notPreviewDialogLoading = false
+    },
    // 强行使用文本编辑器打开
    forciblyOpen(file) {
      this.textPreviewRow = file
--- a/src/components/message/MessageDialog.vue
+++ b/src/components/message/MessageDialog.vue
@ -1,19 +1,23 @@
 <template>
  <div>
-    <el-dialog
-      class="jmal-message-dialog"
-      :title="title"
-      :visible.sync="visible"
-      top="0vh"
-      :close-on-click-modal="false"
-      @close="closeDialog">
-      <svg-icon icon-class="warring"></svg-icon> <span class="dialog-msg">{{content}}</span>
-      <span slot="footer" class="dialog-footer">
-        <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>
+<!--    <el-container v-loading="loading">-->
+<!--    </el-container>-->
+      <el-dialog
+        class="jmal-message-dialog"
+        :title="title"
+        :visible.sync="visible"
+        :modal="modal"
+        v-loading="loading"
+        top="0vh"
+        :close-on-click-modal="false"
+        @close="closeDialog">
+          <svg-icon v-if="!loading" icon-class="warring"></svg-icon> <span class="dialog-msg">{{content}}</span>
+          <span v-if="!loading" slot="footer" class="dialog-footer">
+            <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>
--- a/src/components/office/OnlyOfficeEditor.vue
+++ b/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')
--- a/src/components/preview/OfficePreview.vue
+++ b/src/components/preview/OfficePreview.vue
@ -11,16 +11,14 @@
    >
    </message-dialog>
    <div class="office-preview" v-if="show">
-      <van-overlay :show="show">
-        <div class="block">
+        <div class="preview-block" v-show="readyShow">
          <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;
--- a/src/utils/file-config.js
+++ b/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}`
  },
--- a/src/utils/web.js
+++ b/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);
        },

        //通知