perf: 打开office文件的加载动画

src/components/ShowFile/ShowFile.vue

@@ -441,7 +441,6 @@
     <message-dialog
       title="提示"
       content="此文件不支持预览, 是否下载该文件?"
-      :loading="notPreviewDialogLoading"
       :show.sync="notPreviewDialogVisible"
       operatButtonText="强行使用文本编辑器打开"
       confirmButtonText="下载"
@@ -547,7 +546,6 @@ import fileConfig from '@/utils/file-config'
 import EditElement from "@/views/markdown/EditElement";
 import OfficePreview from "@/components/preview/OfficePreview";
 
-var rowStyleExecuting = false
 export default {
   name: 'ShowFile',
   components: {
@@ -794,7 +792,6 @@ export default {
       drawFlag: false,
       fileListScrollTop: 0,
       notPreviewDialogVisible: false,
-      notPreviewDialogLoading: false,
       openingFile: '',
       openCompressionVisible: false,
       stompClient: undefined,//websocket订阅集合
@@ -828,18 +825,10 @@ export default {
   created() {
   },
   mounted() {
-    Bus.$on('fileSuccess', () => {
-
-    })
-    Bus.$on('loadFileReady', () => {
-      this.closeNotPreviewDialogVisible()
-    })
+    Bus.$on('fileSuccess', () => {})
     Bus.$on('loadFileFaild', () => {
       console.log('loadFileFaild')
       this.notPreviewDialogVisible = true
-      this.$nextTick(() => {
-        this.notPreviewDialogLoading = false
-      })
     })
     Bus.$on('clickMore', (rows) => {
       this.$refs.fileListTable.tableSelectData = rows
@@ -3139,39 +3128,32 @@ 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') {
@@ -3186,15 +3168,9 @@ export default {
           this.closeNotPreviewDialogVisible()
           return
         }
-        this.notPreviewDialogLoading = false
         this.notPreviewDialogVisible = true
       }
     },
-    closeNotPreviewDialogVisible() {
-      // 其他文件
-      this.notPreviewDialogVisible = false
-      this.notPreviewDialogLoading = false
-    },
     // 强行使用文本编辑器打开
     forciblyOpen(file) {
       this.textPreviewRow = file

src/components/office/OnlyOfficeEditor.vue

@@ -165,6 +165,7 @@ export default {
         }
       }
       config.events = {
+        "onAppReady": this.onAppReady,
         "onDocumentReady": this.onDocumentReady,
         "onDocumentStateChange": this.onDocumentStateChange,
       }
@@ -172,9 +173,11 @@ export default {
         this.docEditor = new DocsAPI.DocEditor(this.id, config)
       })
     },
+    onAppReady() {
+      this.$emit('onReady')
+    },
     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

@@ -10,13 +10,13 @@
       @confirm="saveAndClose"
     >
     </message-dialog>
-    <div class="office-preview" v-if="show">
+    <div class="office-preview" v-if="show" v-loading="!readyShow">
         <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" @onClose="close" @onReday="onReday"></only-office-editor>
+            <only-office-editor ref="officeEditor" :file="file" :read-only="readOnly" @onEdit="onEdit" @manualSave="manualSave" @onClose="close" @onReady="onReady"></only-office-editor>
           </div>
         </div>
     </div>
@@ -73,6 +73,14 @@ export default {
           this.previewDocument = document.querySelector('.preview-block')
         })
         this.checkReadOnly(this.file.userId)
+        // 3秒后还没加载出来视为加载失败
+        let that = this
+        setTimeout(function () {
+          if (!that.readyShow) {
+            that.readyShow = true
+            Bus.$emit('loadFileFaild')
+          }
+        },3000)
       }
     }
   },
@@ -98,12 +106,11 @@ export default {
     /**
      * 文件内容已经加载好了
      */
-    onReday() {
+    onReady() {
       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
@@ -171,13 +178,14 @@ export default {
 
 <style lang="scss" scoped>
 
-.preview {
+.office-preview {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 1002;
   width: 100%;
   height: 100%;
+
 }
 
 .van-overlay {