perf: 优化office组件

src/api/file-api.js

@@ -271,4 +271,18 @@ export default {
       params
     })
   },
+  // 根据id获取文件信息
+  getFileInfoById: function(id) {
+    return request({
+      url: `/file_info/${id}`,
+      method: 'get'
+    })
+  },
+  // 根据id获取文件信息
+  getPublicFileInfoById: function(id) {
+    return request({
+      url: `/public/file_info/${id}`,
+      method: 'get'
+    })
+  },
 }

src/components/ShowFile/ShowFile.vue

@@ -378,7 +378,6 @@
     <image-viewer :fileList="fileList" :file="imagePreviewRow" :status.sync="imagePreviewVisible"></image-viewer>
     <video-preview :file="videoPreviewRow" :status.sync="videoPreviewVisible"></video-preview>
     <office-preview :file="officePreviewRow" :status.sync="officePreviewVisible"></office-preview>
-    <!-- <audio-preview :file="audioPreviewRow" :status.sync="audioPreviewVisible"></audio-preview> -->
     <!--文件详细信息-->
     <el-drawer
       :title="rowContextData.name"
@@ -883,7 +882,6 @@ export default {
     Bus.$on('msg/file/change', (msg) => this.onmessage(msg))
   },
   beforeDestroy() {
-    console.log('beforeDestroy')
     window.removeEventListener('keydown', this.keydown, false)
     window.removeEventListener('keyup', this.keyup, false)
     window.removeEventListener('popstate', this.goBack, false)
@@ -965,6 +963,7 @@ export default {
         if (index > -1) {
           this.fileList[index].size = fileDoc.size
           this.fileList[index].agoTime = 1
+          this.fileList[index].updateDate = fileDoc.updateDate
         }
       }
       if ('deleteFile' === url) {
@@ -3114,7 +3113,7 @@ export default {
           Bus.$emit('onAddAudio', row, this.audioCoverUrl)
           return
         }
-        if (row.contentType.indexOf('office') > -1) {
+        if (row.contentType.indexOf('office') > -1 || row.suffix === 'csv') {
           // office文件
           this.officePreviewVisible = true
           this.officePreviewRow = row

src/components/office/OnlyOfficeEditor.vue

@@ -1,13 +1,12 @@
 <template>
   <div class="component-only-office">
     <div :id="this.id" class="placeholder"></div>
-    <div v-if="loadIng > 0" class="office-loading"></div>
   </div>
 </template>
 
 <script>
 
-import fileConfig from "@/utils/file-config";
+import api from "@/api/file-api"
 
 export default {
   name: "OnlyOfficeEditor",
@@ -15,7 +14,7 @@ export default {
     id: {
       type: String,
       default: () => {
-        return "office_" + Math.round(Math.random() * 10000);
+        return "office_" + Math.round(Math.random() * 10000)
       }
     },
     code: {
@@ -23,12 +22,12 @@ export default {
       default: ''
     },
     value: {
-      type: [Object, Array],
+      type: Object,
       default: function () {
         return {}
       }
     },
-    readOnly: {
+     readOnly: {
       type: Boolean,
       default: false
     },
@@ -37,101 +36,94 @@ export default {
 
   data() {
     return {
-      loadIng: 0,
-
       docEditor: null,
     }
   },
-
-  mounted() {
-  },
-
   beforeDestroy() {
     if (this.docEditor !== null) {
-      this.docEditor.destroyEditor();
+      this.docEditor.destroyEditor()
-      this.docEditor = null;
+      this.docEditor = null
     }
   },
-
   computed: {
-
     fileType() {
-      return this.getType(this.value.suffix);
+      return this.getType(this.value.suffix)
     },
-
     fileName() {
-      return this.value.name;
+      return this.value.name
     },
   },
   watch: {
     'value.id': {
       handler(id)  {
         if (!id) {
-          return;
+          return
         }
-        this.loadIng++;
+        $J.loadScript($J.apiUrl("http://192.168.0.188:3454/web-apps/apps/api/documents/api.js"), (e) => {
-        $J.loadScript($J.apiUrl("http://nps.jmal.top:18849/web-apps/apps/api/documents/api.js"), (e) => {
-          this.loadIng--;
           if (e !== null) {
-            $J.modalAlert("组件加载失败！");
+            $J.modalAlert("组件加载失败！")
-            return;
-          }
-          if (!this.documentKey) {
-            this.handleClose();
             return
           }
-          const documentKey = this.documentKey();
+          if(this.$store.state.user.token && this.$store.state.user.userId === this.value.userId){
-          if (documentKey && documentKey.then) {
+            api.getFileInfoById(this.value.id).then(res => {
-            documentKey.then(this.loadFile);
+              this.value = res.data
+              this.loadFile()
+            })
           } else {
-            this.loadFile();
+            api.getPublicFileInfoById(this.value.id).then(res => {
+              this.value = res.data
+              this.loadFile()
+            })
           }
         })
       },
       immediate: true,
     }
   },
-
   methods: {
     getType(type) {
       switch (type) {
+        case 'doc':
+          return 'docx'
         case 'word':
-          return 'docx';
+          return 'docx'
         case 'excel':
-          return 'xlsx';
+          return 'xlsx'
+        case 'xls':
+          return 'xlsx'
         case 'ppt':
           return 'pptx'
       }
-      return type;
+      return type
     },
 
-    loadFile(keyAppend = '') {
+    loadFile() {
       if (this.docEditor !== null) {
-        this.docEditor.destroyEditor();
+        this.docEditor.destroyEditor()
-        this.docEditor = null;
+        this.docEditor = null
       }
-      let fileKey = this.code || this.value.id;
+      let fileKey = `${new Date(this.value.updateDate).getTime()}-${this.value.id}`
-      let fileName = $J.strExists(this.fileName, '.') ? this.fileName : (this.fileName + '.' + this.fileType);
+      let fileName = $J.strExists(this.fileName, '.') ? this.fileName : (this.fileName + '.' + this.fileType)
       const config = {
         "document": {
           "fileType": this.fileType,
-          "key": `${this.fileType}-${$J.randNum(0,45678)}`,
+          "key": fileKey,
           "title": fileName,
-          //"url": window.location.origin + fileConfig.previewUrl(this.$store.state.user.name, this.value, this.$store.getters.token),
+          "url": `${window.location.origin}${this.baseUrl}/file/${this.$store.state.user.name}/${encodeURI(this.value.path)}/${encodeURI(this.value.name)}?jmal-token=${this.$store.getters.token}`,
-          "url": "http://nps.jmal.top:19957/download?fileName=new+%281%29.docx&userAddress=%2FUsers%2Fjmal%2FDownloads%2Ftest%2F",
         },
         "editorConfig": {
           "mode": "edit",
           "lang": "zh",
           "user": {
-            "id": this.$store.state.user.name,
+            "id": this.$store.state.user.userId,
             "name": this.$store.state.user.name
           },
-          // "customization": {
-          //   "uiTheme": this.themeIsDark ? "theme-dark" : "theme-classic-light",
-          // },
           "customization": {
-            "logo": null,
+            "logo": {
+              "image": "http://localhost:9528/favicon.ico",
+              "imageEmbedded": "",
+              "url": window.location.origin
+            },
             "autosave": true,
             "comments": true,
             "compactHeader": false,
@@ -145,34 +137,27 @@ export default {
             "about": false,
             "feedback": false
           },
-          // "callbackUrl": `${window.location.origin}/api/office/track?jmal-token=${this.$store.getters.token}&fileName=new.docx&userAddress=%2FUsers%2Fjmal%2FDownloads%2Ftest%2F`,
+          "callbackUrl": `http://192.168.0.66:8088/office/track?jmal-token=${this.$store.getters.token}&fileId=${this.value.id}`,
-          callbackUrl: "http://nps.jmal.top:19957/track?fileName=new+%281%29.docx&userAddress=%2FUsers%2Fjmal%2FDownloads%2Ftest%2F",
+        }
+      }
+      if (!this.$pc) {
+        config.type = 'mobile'
+      }
+      if (this.readOnly) {
+        config.editorConfig.mode = "view"
+        config.editorConfig.callbackUrl = null
+        if (!config.editorConfig.user.id) {
+          let viewer = $J.getStorageInt("viewer")
+          if (!viewer) {
+            viewer = $J.randNum(1000, 99999)
+            $J.setStorage("viewer", viewer)
+          }
+          config.editorConfig.user.id = "viewer_" + viewer
+          config.editorConfig.user.name = "Viewer_" + viewer
         }
-      };
-      if (/\/hideenOfficeTitle\//.test(window.navigator.userAgent)) {
-        config.document.title = " ";
       }
-      console.log(config.document, config.editorConfig)
-      // if ($J.leftExists(fileKey, "msgFile_")) {
-      //   config.document.url = `http://nginx/api/dialog/msg/download/?msg_id=${$J.leftDelete(fileKey, "msgFile_")}&token=${this.userToken}`;
-      // } else if ($J.leftExists(fileKey, "taskFile_")) {
-      //   config.document.url = `http://nginx/api/project/task/filedown/?file_id=${$J.leftDelete(fileKey, "taskFile_")}&token=${this.userToken}`;
-      // }
-      // if (this.readOnly) {
-      //   config.editorConfig.mode = "view";
-      //   config.editorConfig.callbackUrl = null;
-      //   if (!config.editorConfig.user.id) {
-      //     let viewer = $J.getStorageInt("viewer")
-      //     if (!viewer) {
-      //       viewer = $J.randNum(1000, 99999);
-      //       $J.setStorage("viewer", viewer)
-      //     }
-      //     config.editorConfig.user.id = "viewer_" + viewer;
-      //     config.editorConfig.user.name = "Viewer_" + viewer
-      //   }
-      // }
       this.$nextTick(() => {
-        this.docEditor = new DocsAPI.DocEditor(this.id, config);
+        this.docEditor = new DocsAPI.DocEditor(this.id, config)
       })
     }
   }

src/components/preview/OfficePreview.vue

@@ -1,14 +1,12 @@
 <template>
-  <div class="preview" v-if="show">
+  <div class="office-preview" v-if="show">
     <van-overlay :show="show">
       <div class="block">
         <div class="close-bar" @click="close">
           <svg-icon class="preview-close" icon-class="close"/>
         </div>
         <div class="wrapper">
-          <div class="block">
+          <only-office-editor v-model="file" :read-only="readOnly"></only-office-editor>
-            <only-office-editor v-model="file" :documentKey="documentKey"></only-office-editor>
-          </div>
         </div>
       </div>
     </van-overlay>
@@ -16,10 +14,7 @@
 </template>
 
 <script>
-import 'vue-video-player/src/custom-theme.css'
-import 'video.js/dist/video-js.css'
 import OnlyOfficeEditor from "@/components/office/OnlyOfficeEditor";
-import fileConfig from "@/utils/file-config";
 
 export default {
   name: 'OfficePreview',
@@ -48,17 +43,14 @@ export default {
     return {
       pc: this.$pc,
       show: this.status,
-      url: '',
+      readOnly: true,
     }
   },
   watch: {
     status: function(visible){
       if(visible){
-        this.url = fileConfig.previewUrl(this.$store.state.user.name, this.file, this.$store.getters.token)
-        if(this.shareId){
-          this.url = fileConfig.publicPreviewUrl(this.file.id, window.shareId);
-        }
         this.show = true
+        this.checkReadOnly(this.file.userId)
       }
     }
   },
@@ -67,8 +59,19 @@ export default {
       this.show = false
       this.$emit('update:status', false)
     },
-    documentKey() {
+    checkReadOnly(fileUserId){
-      console.log("documentKey")
+      if(this.$store.state.user.token && this.$store.state.user.userId === fileUserId){
+        this.readOnly = false
+      }
+      if (!this.$pc) {
+        this.readOnly = true
+        this.$nextTick(() => {
+          const closeBar = document.querySelector('.office-preview .close-bar');
+          closeBar.style.right = '2.5rem'
+          closeBar.style.float = 'left'
+          closeBar.style.transform = 'rotate(225deg)'
+        })
+      }
     },
   }
 }
@@ -100,16 +103,16 @@ export default {
     z-index: 2006;
     background-color: rgba(0,0,0,.5);
     position: relative;
-    top: -36px;
+    top: -2.5rem;
-    right: -36px;
+    right: -2.5rem;
     float: right;
     width: 0;
     height: 0;
-    border-radius: 36px;
+    border-radius: 2.5rem;
-    border-width: 36px;
+    border-width: 2.5rem;
     border-style: solid;
     border-color: transparent transparent transparent #d4d4d475;
-    line-height: 36px;
+    line-height: 2.5rem;
     opacity: 1;
     transform: rotate(-45deg);
   }
@@ -123,7 +126,7 @@ export default {
     transform: rotate(-45deg);
     z-index: 2009;
     position: absolute;
-    font-size: 18px;
+    font-size: 1.25rem;
     top: -8px;
     right: 13px;
   }
@@ -133,7 +136,7 @@ export default {
 
   >>> .component-only-office {
     position: absolute;
-    top: 36px;
+    top: 2.5rem;
     left: 0;
     right: 0;
     bottom: 0;

src/icons/svg/file-csv.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1660273696344" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3396" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M145.6 0C100.8 0 64 36.8 64 81.6v860.8C64 987.2 100.8 1024 145.6 1024h732.8c44.8 0 81.6-36.8 81.6-81.6V324.8L656 0H145.6z" fill="#45B058" p-id="3397"></path><path d="M388.8 691.2c1.6 1.6 3.2 4.8 3.2 8 0 6.4-4.8 11.2-11.2 11.2-3.2 0-6.4 0-8-3.2-11.2-12.8-30.4-22.4-48-22.4-41.6 0-73.6 32-73.6 78.4 0 44.8 32 78.4 73.6 78.4 17.6 0 35.2-8 48-22.4 1.6-1.6 4.8-3.2 8-3.2 6.4 0 11.2 4.8 11.2 11.2 0 3.2-1.6 6.4-3.2 8-14.4 16-35.2 27.2-64 27.2-56 0-99.2-40-99.2-99.2s43.2-99.2 99.2-99.2c28.8 0 49.6 11.2 64 27.2z m108.8 171.2c-28.8 0-51.2-9.6-67.2-24-3.2-1.6-3.2-4.8-3.2-8 0-6.4 3.2-12.8 11.2-12.8 1.6 0 4.8 1.6 6.4 3.2 12.8 11.2 32 20.8 54.4 20.8 33.6 0 44.8-19.2 44.8-33.6 0-49.6-113.6-22.4-113.6-91.2 0-30.4 27.2-52.8 65.6-52.8 24 0 46.4 8 62.4 20.8 1.6 1.6 3.2 4.8 3.2 8 0 6.4-4.8 11.2-11.2 11.2-1.6 0-4.8 0-6.4-1.6-14.4-11.2-32-17.6-49.6-17.6-24 0-40 12.8-40 30.4 0 43.2 113.6 19.2 113.6 91.2 0 27.2-19.2 56-70.4 56z m272-179.2L702.4 848c-3.2 8-9.6 12.8-17.6 12.8h-1.6c-8 0-16-4.8-19.2-12.8l-65.6-164.8c-1.6-1.6-1.6-3.2-1.6-4.8 0-6.4 4.8-12.8 12.8-12.8 4.8 0 9.6 3.2 11.2 8l62.4 160 62.4-160c1.6-4.8 6.4-8 11.2-8 8 0 14.4 6.4 14.4 12.8 0 1.6-1.6 3.2-1.6 4.8z" fill="#FFFFFF" p-id="3398"></path><path d="M960 326.4v16H755.2s-100.8-20.8-97.6-108.8c0 0 3.2 92.8 96 92.8H960z" fill="#349C42" p-id="3399"></path><path d="M657.6 0v233.6c0 25.6 17.6 92.8 97.6 92.8H960L657.6 0z" fill="#FFFFFF" p-id="3400"></path></svg>

src/icons/svg/file-docxf.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1660274156456" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="30054" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M145.6 0C100.8 0 64 35.2 64 80v862.4C64 987.2 100.8 1024 145.6 1024h732.8c44.8 0 81.6-36.8 81.6-81.6V324.8L657.6 0h-512z" fill="#673AB7" p-id="30055"></path><path d="M960 326.4v16H755.2s-100.8-20.8-99.2-108.8c0 0 4.8 92.8 97.6 92.8H960z" fill="#45317C" p-id="30056"></path><path d="M657.6 0v233.6c0 25.6 17.6 92.8 97.6 92.8H960L657.6 0z" fill="#FFFFFF" opacity=".5" p-id="30057"></path><path d="M267.2 630.4c0-6.4-4.8-11.2-11.2-11.2h-20.8c-6.4 0-11.2 4.8-11.2 11.2v20.8c0 6.4 4.8 11.2 11.2 11.2H256c6.4 0 11.2-4.8 11.2-11.2v-20.8z m300.8 0c0-6.4-4.8-11.2-11.2-11.2H305.6c-6.4 0-11.2 4.8-11.2 11.2v20.8c0 6.4 4.8 11.2 11.2 11.2h251.2c6.4 0 11.2-4.8 11.2-11.2v-20.8z m-300.8 100.8c0-6.4-4.8-11.2-11.2-11.2h-20.8c-6.4 0-11.2 4.8-11.2 11.2V752c0 6.4 4.8 11.2 11.2 11.2H256c6.4 0 11.2-4.8 11.2-11.2v-20.8z m300.8 0c0-6.4-6.4-11.2-12.8-11.2H307.2c-6.4 0-12.8 4.8-12.8 11.2V752c0 6.4 6.4 11.2 12.8 11.2h248c6.4 0 12.8-4.8 12.8-11.2v-20.8z m-300.8 99.2c0-6.4-4.8-11.2-11.2-11.2h-20.8c-6.4 0-11.2 4.8-11.2 11.2v20.8c0 6.4 4.8 11.2 11.2 11.2H256c6.4 0 11.2-4.8 11.2-11.2v-20.8z m300.8 0c0-6.4-4.8-11.2-11.2-11.2H305.6c-6.4 0-11.2 4.8-11.2 11.2v20.8c0 6.4 4.8 11.2 11.2 11.2h251.2c6.4 0 11.2-4.8 11.2-11.2v-20.8z" fill="#FFFFFF" p-id="30058"></path></svg>

src/icons/svg/file-ppt.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1660273634309" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1158" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M160 0h512l256 256v704c0 35.3472-28.6528 64-64 64H160c-35.3472 0-64-28.6528-64-64V64c0-35.3472 28.6528-64 64-64z" fill="#FF9333" p-id="1159"></path><path d="M427.8976 768V610.9568H539.776c87.7952 0 132.224-38.1824 132.224-114.016C672 421.6448 628.1024 384 540.3136 384H384v384h43.8976z m109.7408-195.2256H427.8976v-150.592h109.7408c30.5088 0 52.992 5.92 67.9808 18.8288 14.9888 11.2896 22.4832 30.112 22.4832 55.936 0 25.8112-7.488 44.6336-21.952 57.0048-14.9824 12.3648-37.4656 18.816-68.512 18.816z" fill="#FFFFFF" p-id="1160"></path><path d="M672 0l256 256h-192c-35.3472 0-64-28.6528-64-64V0z" fill="#FFD3AD" p-id="1161"></path></svg>

src/utils/file-type.js

@@ -55,6 +55,10 @@ iconClass.set('exe','file-exe')
 iconClass.set('word','file-word')
 iconClass.set('doc','file-word')
 iconClass.set('docx','file-word')
+iconClass.set('docxf','file-docxf')
+iconClass.set('ppt','file-ppt')
+iconClass.set('pptx','file-ppt')
+iconClass.set('csv','file-csv')
 iconClass.set('pdf','file-pdf')
 iconClass.set('zip','zip')
 iconClass.set('rar','zip')

src/views/public/share/shareList.vue

@@ -208,6 +208,7 @@
     <sim-text-preview :file.sync="textPreviewRow" :shareId="shareId" :status.sync="textPreviewVisible"></sim-text-preview>
     <image-viewer :fileList="fileList" :shareId="shareId" :file="imagePreviewRow" :status.sync="imagePreviewVisible"></image-viewer>
     <video-preview :file="videoPreviewRow" :shareId="shareId" :status.sync="videoPreviewVisible"></video-preview>
+    <office-preview :file="officePreviewRow" :shareId="shareId" :status.sync="officePreviewVisible"></office-preview>
     <el-divider class="grid-divider" content-position="center"><i class="el-icon-folder-opened"></i>&nbsp;{{summaries}}</el-divider>
     <el-pagination
       background
@@ -241,8 +242,10 @@
   import AudioPreview from "@/components/preview/AudioPreview";
   import fileConfig from "@/utils/file-config";
   import Clipboard from "clipboard";
+  import OfficePreview from "@/components/preview/OfficePreview";
   export default {
-    components: { IconFile, BreadcrumbFilePath,AlLoading,
+    components: {
+      OfficePreview, IconFile, BreadcrumbFilePath,AlLoading,
       AudioPreview, VideoPreview, ImageViewer, SimTextPreview
     },
     data() {
@@ -353,6 +356,8 @@
         imagePreviewVisible : false,
         videoPreviewRow: {},
         videoPreviewVisible: false,
+        officePreviewRow: {},
+        officePreviewVisible: false,
         audioPreviewRow: {},
         audioPreviewVisible: false,
         showUpdateDateItem: this.$pc,// 列表模式下是否显示修改时间
@@ -925,13 +930,18 @@
             this.videoPreviewRow = row
             return
           }
+          // 音频文件
           if(row.contentType.indexOf('audio') > -1){
-            // 音频文件
-            // this.audioPreviewVisible = true
-            // this.audioPreviewRow = row
             Bus.$emit('onAddAudio',row, this.audioCoverUrl)
             return
           }
+          // office文件
+          if (row.contentType.indexOf('office') > -1 || row.suffix === 'csv') {
+            // office文件
+            this.officePreviewVisible = true
+            this.officePreviewRow = row
+            return
+          }
           // 打开文件
           fileConfig.publicPreview(row.id, this.shareId)
         }