1927 移动端文档预览功能开发

package-lock.json

@@ -1477,6 +1477,11 @@
         }
       }
     },
+    "@onlyoffice/document-editor-vue": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@onlyoffice/document-editor-vue/-/document-editor-vue-1.4.0.tgz",
+      "integrity": "sha512-Fg5gSc1zF6bmpRapUd7rMpm7kEDF7mQIHQKfcsfJcILdFX9bwIhnkXEucETEA9zdt92nWMS6qiAgVeT61TdCyw=="
+    },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.7.1.tgz",
@@ -2273,6 +2278,17 @@
             "unique-filename": "^1.1.1"
           }
         },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
         "cliui": {
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
@@ -2345,6 +2361,25 @@
             "supports-color": "^7.0.0"
           }
         },
+        "json5": {
+          "version": "2.2.3",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+          "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
         "locate-path": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -2446,6 +2481,18 @@
             "webpack-sources": "^1.4.3"
           }
         },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.8.3",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
+          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          }
+        },
         "wrap-ansi": {
           "version": "6.2.0",
           "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@@ -6697,6 +6744,12 @@
         }
       }
     },
+    "eslint-config-prettier": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
+      "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
+      "dev": true
+    },
     "eslint-loader": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/eslint-loader/-/eslint-loader-2.2.1.tgz",
@@ -15583,94 +15636,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.8.3",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
-      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "json5": {
-          "version": "2.2.3",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-          "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
-          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-qr": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/vue-qr/-/vue-qr-2.3.0.tgz",

package.json

@@ -21,6 +21,7 @@
     "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
   },
   "dependencies": {
+    "@onlyoffice/document-editor-vue": "^1.4.0",
     "axios": "^0.20.0",
     "big.js": "^5.2.2",
     "bpmn-js": "^7.3.0",

public/index.html

@@ -10,6 +10,7 @@
     <meta name="apple-touch-fullscreen" content="yes">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= webpackConfig.name %></title>
+    <script type="text/javascript" src="http://dev1.local/word/web-apps/apps/api/documents/api.js"></script>
     <style>
        *{margin:0;padding:0;list-style:0;-webkit-touch-callout:none;}html{touch-action: manipulation;}
     </style>

src/api/platform/file/attachment.js

@@ -1,18 +1,26 @@
-import request from '@/utils/request'
-import { getToken } from '@/utils/auth'
-import { BASE_API, SYSTEM_URL } from '@/api/baseUrl'
+import request from "@/utils/request";
+import { getToken } from "@/utils/auth";
+import { BASE_API, SYSTEM_URL } from "@/api/baseUrl";
 
-import qs from 'qs'
+import qs from "qs";
 /**
  * 查询列表数据
  * @param {*} params
  */
 export function queryPageList(params) {
   return request({
-    url: SYSTEM_URL() + '/file/attachment/query',
-    method: 'post',
+    url: SYSTEM_URL() + "/file/attachment/query",
+    method: "post",
     data: params
-  })
+  });
+}
+/* 在线编辑进行实时回调 */
+export function showView(params) {
+  return request({
+    url: SYSTEM_URL() + "/file/showView",
+    method: "get",
+    params: params
+  });
 }
 /**
  * 删除数据
@@ -20,11 +28,11 @@ export function queryPageList(params) {
  */
 export function remove(params) {
   return request({
-    url: SYSTEM_URL() + '/file/attachment/remove',
-    method: 'post',
+    url: SYSTEM_URL() + "/file/attachment/remove",
+    method: "post",
     isLoading: true,
     params: params
-  })
+  });
 }
 /**
  * 保存数据
@@ -32,11 +40,11 @@ export function remove(params) {
  */
 export function save(params) {
   return request({
-    url: SYSTEM_URL() + '/file/attachment/save',
-    method: 'post',
+    url: SYSTEM_URL() + "/file/attachment/save",
+    method: "post",
     isLoading: true,
     data: params
-  })
+  });
 }
 
 /**
@@ -45,10 +53,10 @@ export function save(params) {
  */
 export function get(params) {
   return request({
-    url: SYSTEM_URL() + '/file/attachment/get',
-    method: 'get',
+    url: SYSTEM_URL() + "/file/attachment/get",
+    method: "get",
     params
-  })
+  });
 }
 /**
  * 获取数据(通过ID转换为名称)
@@ -56,10 +64,10 @@ export function get(params) {
  */
 export function transfer(params) {
   return request({
-    url: SYSTEM_URL() + '/file/attachment/transfer',
-    method: 'post',
+    url: SYSTEM_URL() + "/file/attachment/transfer",
+    method: "post",
     data: params
-  })
+  });
 }
 
 /**
@@ -68,18 +76,18 @@ export function transfer(params) {
  */
 export function modifyName(params) {
   return request({
-    url: SYSTEM_URL() + '/file/attachment/modifyName',
-    method: 'post',
+    url: SYSTEM_URL() + "/file/attachment/modifyName",
+    method: "post",
     isLoading: true,
     params: params
-  })
+  });
 }
 /**
  * 下载文件url
  * @param {*} params
  */
 export function downloadUrl(params) {
-  return SYSTEM_URL() + '/file/download?' + qs.parse(params)
+  return SYSTEM_URL() + "/file/download?" + qs.parse(params);
 }
 
 /**
@@ -88,12 +96,12 @@ export function downloadUrl(params) {
  */
 export function download(params) {
   return request({
-    url: SYSTEM_URL() + '/file/download',
-    method: 'get',
+    url: SYSTEM_URL() + "/file/download",
+    method: "get",
     isLoading: true,
-    responseType: 'arraybuffer',
+    responseType: "arraybuffer",
     params: params
-  })
+  });
 }
 
 /**
@@ -102,17 +110,17 @@ export function download(params) {
  * @param {*} uploadFileVo
  */
 export function uploadFile(file, uploadFileVo) {
-  const data = new FormData() // 创建form对象
-  data.append('file', file)
+  const data = new FormData(); // 创建form对象
+  data.append("file", file);
   // data.append('uploadFileVo', null)
 
   return request({
-    url: SYSTEM_URL() + '/file/upload',
-    method: 'post',
+    url: SYSTEM_URL() + "/file/upload",
+    method: "post",
     isLoading: true,
     gateway: true,
     data: data
-  })
+  });
 }
 
 /**
@@ -120,8 +128,14 @@ export function uploadFile(file, uploadFileVo) {
  * @param {*} attachmentId
  */
 export function previewFile(attachmentId) {
-  return BASE_API() + SYSTEM_URL() + '/file/preview?attachmentId=' +
-      attachmentId + '&access_token=' + getToken()
+  return (
+    BASE_API() +
+    SYSTEM_URL() +
+    "/file/preview?attachmentId=" +
+    attachmentId +
+    "&access_token=" +
+    getToken()
+  );
 }
 
 /**
@@ -129,8 +143,14 @@ export function previewFile(attachmentId) {
  * @param {*} attachmentId
  */
 export function getImage(attachmentId) {
-  return BASE_API() + SYSTEM_URL() + '/file/getImage?attachmentId=' +
-      attachmentId + '&access_token=' + getToken()
+  return (
+    BASE_API() +
+    SYSTEM_URL() +
+    "/file/getImage?attachmentId=" +
+    attachmentId +
+    "&access_token=" +
+    getToken()
+  );
 }
 
 /**
@@ -138,7 +158,7 @@ export function getImage(attachmentId) {
  * @param {*} attachmentId
  */
 export function getPhoto(photo) {
-  return BASE_API() + SYSTEM_URL() + photo + '&access_token=' + getToken()
+  return BASE_API() + SYSTEM_URL() + photo + "&access_token=" + getToken();
 }
 
 /**
@@ -146,5 +166,5 @@ export function getPhoto(photo) {
  * @param {*} fileId
  */
 export function fileUrl(fileId) {
-  return '/file/getImage?attachmentId=' + fileId
+  return "/file/getImage?attachmentId=" + fileId;
 }

src/business/platform/file/attachment/editFile/editor.vue

@@ -0,0 +1,168 @@
+<!--onlyoffice 编辑器-->
+<template>
+    <div>
+        <div id="editorDiv" ref="editor" class="nav" />
+    </div>
+</template>
+
+<script>
+import { handleDocType } from './editor/editor.js'
+import { showView } from '@/api/platform/file/attachment'
+import { getToken } from '@/utils/auth'
+export default {
+    name: 'editor',
+    props: {
+        option: {
+            type: Object,
+            default: () => {
+                return {}
+            }
+        },
+        operation_status: {
+            type: String,
+            default: ''
+        }
+    },
+    data () {
+        return {
+            doctype: '',
+            newId: '',
+            timer: '',
+            configKey: ''
+        }
+    },
+    watch: {
+        option: {
+            handler: function (n, o) {
+                this.setEditor(n)
+                this.doctype = handleDocType(n.fileType)
+            },
+            deep: true
+        }
+    },
+    mounted () {
+        // 调用初始化方法 ，渲染wps
+        if (this.option.url) {
+            this.setEditor(this.option)
+        }
+        if (this.option.mode === 'edit') {
+            // 编辑模式下轮询获取文件id
+            this.timer = setInterval(() => {
+                if (this.configKey) {
+                    showView({ key: this.configKey }).then((response) => {
+                        if (response.variables.data !== '0' && this.newId !== response.variables.data) {
+                            // 记录当前id，与返回的文件id比对，有变化证明有做修改，提示并替换
+                            this.newId = response.variables.data
+                            this.$message.success('文件编辑保存成功，稍后请提交表单！')
+                            this.$emit('updateFile', this.newId)
+                        }
+                    })
+                }
+            }, 2000)
+        }
+    },
+    beforeDestroy () {
+        // 页面关闭清除定时任务
+        this.clearTimer()
+    },
+    methods: {
+        // 清除定时任务
+        clearTimer () {
+            if (this.timer) {
+                clearInterval(this.timer)
+                this.timer = null
+            }
+        },
+        setEditor (option) {
+            this.doctype = handleDocType(option.fileType)
+            const config = {
+                document: {
+                    fileType: option.fileType,
+                    key: option.key,
+                    title: option.title,
+                    permissions: {
+                        comment: this.operation_status !== 'fileTraining',
+                        download: this.operation_status !== 'fileTraining',
+                        modifyContentControl: this.operation_status !== 'fileTraining',
+                        modifyFilter: this.operation_status !== 'fileTraining',
+                        print: this.operation_status !== 'fileTraining',
+                        edit: this.operation_status !== 'fileTraining',
+                        fillForms: this.operation_status !== 'fileTraining',
+                        review: this.operation_status !== 'fileTraining'
+                    },
+                    url: option.url
+                },
+                documentType: this.doctype,
+                editorConfig: {
+                    callbackUrl: option.editUrl + '&access_token=' + getToken(),
+                    lang: 'zh',
+                    canHistoryRestore: true,
+                    canUseHistory: true,
+                    customization: {
+                        commentAuthorOnly: false,
+                        comments: true,
+                        compactHeader: false,
+                        compactToolbar: false,
+                        plugins: true,
+                        feedback: {
+                            // 隐藏反馈按钮
+                            visible: false
+                        },
+                        // true 表示强制文件保存请求添加到回调处理程序
+                        forcesave: true,
+                        // 取消强制保存，进行手动保存
+                        atuosave: false
+                    },
+                    user: {
+                        id: option.user.id,
+                        name: option.user.name
+                    },
+                    mode: option.mode
+                },
+                events: {
+                    onRequestSaveAs: () => {
+                        console.log('另存为')
+                    },
+                    // 监听文件修改开启轮询，有几率同时触发N个，导致页面卡死
+                    // onDocumentStateChange: e => {
+                    //     if (!e.data) {
+                    //         console.log('文件修改', e)
+                    //         this.handlerFileSave()
+                    //     }
+                    // },
+                    onDocumentReady: () => {
+                        console.log('文件加载完成~')
+                        this.hadLoadedFile(0)
+                    }
+                },
+                width: '100%',
+                token: getToken(),
+                // 减去弹窗的顶部标题区域
+                height: document.body.clientHeight - 56 + 'px'
+            }
+            const docEditor = new DocsAPI.DocEditor('editorDiv', config)
+            this.configKey = config.document.key
+        },
+        handlerFileSave () {
+            this.clearTimer()
+            // 进行后端接口轮询，查到id则进行与当前id比较，相等则不做操作，不相等则返回id，更新页面数据。
+            this.timer = setInterval(() => {
+                if (this.configKey) {
+                    showView({ key: this.configKey }).then((response) => {
+                        if (response.variables.data !== '0' && this.newId !== response.variables.data) {
+                            // 记录当前id，与返回的文件id比对，有变化证明有做修改，提示并替换
+                            this.newId = response.variables.data
+                            this.$message.success('文件编辑保存成功，稍后请提交表单！')
+                            this.$emit('updateFile', this.newId)
+                            this.clearTimer()
+                        }
+                    })
+                }
+            }, 2000)
+        },
+        hadLoadedFile (v) {
+            this.$emit('hadLoadedFile', v)
+        }
+    }
+}
+</script>

src/business/platform/file/attachment/editFile/editor/editor.js

@@ -0,0 +1,19 @@
+export function handleDocType(fileType) {
+    let docType = ''
+    let fileTypesDoc = [ 'doc', 'docm', 'docx', 'dot', 'dotm', 'dotx', 'epub', 'fodt', 'htm', 'html', 'mht', 'odt', 'ott', 'pdf', 'rtf', 'txt', 'djvu', 'xps']
+    let fileTypesCsv = [ 'csv', 'fods', 'ods', 'ots', 'xls', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx' ]
+    let fileTypesPPt = [ 'fodp', 'odp', 'otp', 'pot', 'potm', 'potx', 'pps', 'ppsm', 'ppsx', 'ppt', 'pptm', 'pptx' ]
+    if (fileTypesDoc.includes(fileType)) {
+        // docType = 'text'
+        docType = 'word'
+    }
+    if (fileTypesCsv.includes(fileType)) {
+        // docType = 'spreadsheet'
+        docType = 'cell'
+    }
+    if (fileTypesPPt.includes(fileType)) {
+        // docType = 'presentation'
+        docType = 'slide'
+    }
+    return docType
+}

src/business/platform/file/uploader/index.vue

@@ -120,7 +120,7 @@
       </van-cell-group>
     </van-popup>
     <!--预览 -->
-    <ibps-file-preview v-model="showPreviewPopup" :file="previewFileList" />
+    <ibps-file-preview v-model="showPreviewPopup" :file="previewFileList" @close="close" />
   </div>
 </template>
 <script>
@@ -351,6 +351,9 @@
           })
         }
       },
+      close(val){
+        this.showPreviewPopup = val
+      },
       parseJsonData(value) {
         try {
           const data = this.$utils.parseData(value)

src/components/ibps-file-preview/constants/index.js

@@ -0,0 +1,9 @@
+
+export const officeType = ['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx', 'csv']
+export const pdfType = ['pdf']
+export const txtType = ['txt']
+export const imageType = ['jpg', 'jpeg', 'bmp', 'png', 'gif']
+export const audioType = ['mp3']
+export const videoType = ['mp4']
+
+export const supportFileTypes = [...officeType, ...pdfType, ...txtType, ...imageType, ...audioType, ...videoType]

src/components/ibps-file-preview/index.vue

@@ -1,38 +1,40 @@
 <template>
   <div>
-    <van-image-preview v-if="fileType==='image'" v-model="showPopup" :images="images" @close="onCancel" />
-    <van-popup
-      v-else
+    <van-image-preview
+      v-if="fileType === 'image'"
       v-model="showPopup"
-      class="ibps-fullscreen-popup"
-    >
-      <van-nav-bar
-        :title="title"
-        left-arrow
-        @click-left="onCancel"
-      >
+      :images="images"
+      @close="onCancel"
+    />
+
+    <van-popup v-else v-model="showPopup" class="ibps-fullscreen-popup">
+      <van-nav-bar :title="title" left-arrow @click-left="onCancel">
         <template #left>
           <van-icon name="cross" class="ibps-nav-bar__close-icon" />
         </template>
       </van-nav-bar>
-      <pdf-viewer
-        v-if="fileType==='pdf'"
-        ref="viewer"
-      />
+      <editor v-if="dialogVisible" :option="option" />
+      <pdf-viewer v-if="fileType === 'pdf'" ref="viewer" />
+
       <audio-player
-        v-else-if="fileType==='audio'"
+        v-else-if="fileType === 'audio'"
         ref="viewer"
         :title="title"
         :url="url"
       />
 
       <video-player
-        v-else-if="fileType==='video'"
+        v-else-if="fileType === 'video'"
         ref="viewer"
         :ext="fileExt"
         :url="url"
       />
-
+      <office-viewer
+        v-else-if="fileType === 'word'"
+        ref="viewer"
+        :key="file.id"
+        :option="option"
+      />
       <div v-else class="ibps-fixed-navbar">
         不支持预览的类型
       </div>
@@ -40,7 +42,6 @@
   </div>
 </template>
 <script>
-
 /**
  * 文件预览
  * 1、'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx'  类型支持
@@ -54,18 +55,32 @@
 import PdfViewer from './pdf'
 import AudioPlayer from './audio'
 import VideoPlayer from './video'
+import officeViewer from './viewFile'
 import { previewFile } from '@/api/platform/file/attachment'
-const OFFICE_TYPE = ['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx']
-const PDF_TYPE = ['pdf']
-const IMAGE_TYPE = ['jpg', 'jpeg', 'bmp', 'png', 'gif']
-const AUDIO_TYPE = ['mp3']
-const VIDEO_TYPE = ['mp4']
+import {
+  officeType,
+  pdfType,
+  txtType,
+  imageType,
+  audioType,
+  videoType
+} from './constants'
+import { SYSTEM_URL, BASE_API } from '@/api/baseUrl'
+
+// const OFFICE_TYPE = ['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx']
+// const PDF_TYPE = ['pdf']
+// const IMAGE_TYPE = ['jpg', 'jpeg', 'bmp', 'png', 'gif']
+// const AUDIO_TYPE = ['mp3']
+// const VIDEO_TYPE = ['mp4']
 import { ImagePreview } from 'vant'
+import editor from '@/business/platform/file/attachment/editFile/editor.vue'
 export default {
   components: {
     PdfViewer,
     AudioPlayer,
     VideoPlayer,
+    officeViewer,
+    editor,
     [ImagePreview.Component.name]: ImagePreview.Component
   },
   props: {
@@ -82,7 +97,26 @@ export default {
       fileExt: '',
       fileType: '',
       url: '',
-      images: []
+      images: [],
+
+      dialogVisible: false,
+      // fileType: '',
+      zIndex: 2000,
+      // openedLoaded: false,
+      fileUrl: '',
+      option: {
+        url: '',
+        isEdit: true,
+        fileType: '',
+        title: '',
+        user: {
+          id: '',
+          name: ''
+        },
+        mode: 'view',
+        editUrl: '',
+        key: ''
+      }
     }
   },
   watch: {
@@ -94,32 +128,83 @@ export default {
         this.loadViewer()
       }
       this.showPopup = this.value
+    },
+    file: {
+      handler: function(val, oldVal) {
+        // this.dialogVisible = this.visible
+        console.log('1121212121212')
+        this.loadViewer()
+      },
+      immediate: true,
+      deep:true
     }
   },
+  // beforeDestroy() {
+  //   this.fileType = ''
+  //   // this.openedLoaded = false
+  //   this.option = {}
+  // },
   methods: {
     loadViewer() {
       const url = previewFile(this.fileId)
-      if (IMAGE_TYPE.includes(this.fileExt)) {
+      if (imageType.includes(this.fileExt)) {
         this.fileType = 'image'
         this.url = url + '&type=' + this.fileType
         this.images = [this.url]
-      } else if (PDF_TYPE.includes(this.fileExt) || OFFICE_TYPE.includes(this.fileExt)) {
+      } else if (pdfType.includes(this.fileExt)) {
         this.fileType = 'pdf'
         this.$nextTick(() => {
           this.$refs.viewer.load(url + '&type=' + this.fileType)
         })
-      } else if (AUDIO_TYPE.includes(this.fileExt)) {
-        this.fileType = 'audio'
-        this.url = url + '&type=' + this.fileType
-      } else if (VIDEO_TYPE.includes(this.fileExt)) {
-        this.fileType = 'video'
-        this.url = url + '&type=' + this.fileType
+      } else if (this.value) {
+        this.openDialog() // 先初始化调用参数
+        // this.openWindow() // 打开外部预览页面
+        // this.closeDialog() // 关闭当前
       }
     },
     onCancel() {
       this.$emit('input', false)
+    },
+    openWindow(data) {
+      const routeData = this.$router.resolve({
+        path: '/fileView',
+        query: this.option
+      })
+      window.open(routeData.href)
+    },
+    openDialog() {
+      this.option.user.id = this.$store.getters.userId
+      this.option.user.name = this.$store.getters.userName
+      this.fileType = 'word'
+      this.getFile()
+    },
+    getFile() {
+      console.log(this.file,'filefilefile')
+      // 1、获取文件数据 及下载流接口
+      // 下载地址
+      this.option.url =
+        BASE_API() +
+        SYSTEM_URL() +
+        '/file/download?attachmentId=' +
+        this.file.id
+      // 回调接口url
+      this.option.editUrl =
+        BASE_API() +
+        SYSTEM_URL() +
+        '/file/editCallback?fileName=' +
+        this.file.fileName +
+        '&fileType=' +
+        this.file.ext
+      this.option.title = this.file.fileName // 文件名称
+      this.option.fileType = this.file.ext // 类型
+      this.option.data = this.file // 记录编制的位置，需要替换。
+      console.log(this.option,'3123213131313123')
+    },
+    closeDialog() {
+      this.fileType = ''
+      // this.openedLoaded = false
+      this.$emit('close', false)
     }
   }
-
 }
 </script>

src/components/ibps-file-preview/viewFile/index.vue

@@ -0,0 +1,106 @@
+<!--onlyoffice 编辑器-->
+<template>
+    <div>
+        <div id="editorDiv" ref="editor" class="nav" />
+    </div>
+</template>
+
+<script>
+import { handleDocType } from '@/business/platform/file/attachment/editFile/editor/editor.js'
+import { showView } from '@/api/platform/file/attachment'
+import { getToken } from '@/utils/auth'
+
+export default {
+    name: 'editor',
+    props: {
+        option: {
+            type: Object
+        },
+    
+    },
+    data () {
+        return {
+            doctype: '',
+            newId: '',
+            timer: '',
+            configKey: '',
+        }
+    },
+    watch: {
+        option: {
+            handler: function (n, o) {
+                this.setEditor(n)
+                this.doctype = handleDocType(n.fileType)
+            },
+            deep: true
+        }
+    },
+    mounted () {
+        // this.option = this.$route.query
+        
+        /* 调用初始化方法 ，渲染wps*/
+        if (this.option.url) {
+            this.setEditor(this.option)
+        }
+    },
+    methods: {
+        setEditor (option) {
+            console.log(option,'document.bodydocument.body')
+            this.doctype = handleDocType(option.fileType)
+            const url = option.url + '&access_token=' + getToken()
+            console.log(option,'urq:' + url)
+            const config = {
+                type: 'mobile',
+                document: {
+                    fileType: option.fileType,
+                    key: option.key,
+                    title: option.title,
+                    permissions: {
+                        comment: true,
+                        copy: true,
+                        download: false,
+                        modifyContentControl: true,
+                        modifyFilter: true,
+                        print: false,
+                        edit: true,
+                        fillForms: true,
+                        review: true
+                    },
+                    url: url
+                },
+                documentType: this.doctype,
+                editorConfig: {
+                    callbackUrl: option.editUrl,
+                    lang: 'zh',
+                    canHistoryRestore: true,
+                    canUseHistory: true,
+                    customization: {
+                        commentAuthorOnly: false,
+                        comments: true,
+                        compactHeader: false,
+                        compactToolbar: true,
+                        plugins: true,
+                        feedback: {
+                            // 隐藏反馈按钮
+                            visible: false
+                        },
+                        // true 表示强制文件保存请求添加到回调处理程序
+                        forcesave: true,
+                        // 取消强制保存，进行手动保存
+                        atuosave: false
+                    },
+                    user: {
+                        id: this.$store.getters.userId,
+                        name: this.$store.getters.name
+                    },
+                    mode: option.mode
+                },
+                width: '100%',
+                height: window.innerHeight - 46 + 'px'
+            }
+            const docEditor = new DocsAPI.DocEditor('editorDiv', config)
+            this.configKey = config.document.key
+        }
+    }
+}
+</script>

src/router/index.js

@@ -1,131 +1,160 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
+import Vue from "vue";
+import VueRouter from "vue-router";
 
 // 进度条
-import NProgress from 'nprogress'
-import 'nprogress/nprogress.css'
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
 
-import store from '@/store/index'
-import util from '@/utils/util.js'
-import i18n from '@/utils/i18n' // Internationalization 国际化
-import { getQueryString, validataWechat } from '@/utils/url' // 验权
+import store from "@/store/index";
+import util from "@/utils/util.js";
+import i18n from "@/utils/i18n"; // Internationalization 国际化
+import { getQueryString, validataWechat } from "@/utils/url"; // 验权
 // 验权
-import { getToken, getRefreshToken } from '@/utils/auth'
-import { IS_WECHAT_LOGIN } from '@/constant'
+import { getToken, getRefreshToken } from "@/utils/auth";
+import setting from "@/setting.js";
+import { IS_WECHAT_LOGIN } from "@/constant";
 // 路由数据
-import routes from './routes'
+import routes from "./routes";
 
 // fix vue-router NavigationDuplicated
-const VueRouterPush = VueRouter.prototype.push
+const VueRouterPush = VueRouter.prototype.push;
 VueRouter.prototype.push = function push(location) {
-  return VueRouterPush.call(this, location).catch(err => err)
-}
-const VueRouterReplace = VueRouter.prototype.replace
+  return VueRouterPush.call(this, location).catch(err => err);
+};
+const VueRouterReplace = VueRouter.prototype.replace;
 VueRouter.prototype.replace = function replace(location) {
-  return VueRouterReplace.call(this, location).catch(err => err)
-}
+  return VueRouterReplace.call(this, location).catch(err => err);
+};
 
-Vue.use(VueRouter)
+Vue.use(VueRouter);
 
 // 导出路由 在 main.js 里使用
 const router = new VueRouter({
   routes
-})
+});
 
 // 不重定向白名单
-const whiteList = ['/login', '/register', '/forget', '/authredirect']
+const whiteList = ["/login", "/register", "/forget", "/authredirect"];
 /**
  * 路由拦截
  * 权限验证
  */
 router.beforeEach(async (to, from, next) => {
   // 进度条
-  NProgress.start()
+  NProgress.start();
   // 这里将cookie里是否存有token作为验证是否登录的条件
-  const hasToken = getToken()
-  if (hasToken && hasToken !== 'undefined') { // 从cookie 获取用户token
+  const hasToken = getToken();
+  if (hasToken && hasToken !== "undefined") {
+    // 从cookie 获取用户token
     // 登录 锁定 401没权限  403禁止访问
-    if (to.name === 'locking' || to.name === 'login' || to.name === 'error401' || to.name === 'error403' || to.name === 'nomenu') {
-      next()
+    if (
+      to.name === "locking" ||
+      to.name === "login" ||
+      to.name === "error401" ||
+      to.name === "error403" ||
+      to.name === "nomenu"
+    ) {
+      next();
     } else {
       // 判断是否有帐号信息
       if (util.isEmpty(store.getters.userInfo)) {
-        store.dispatch('ibps/user/load').then(res => { // 拉取用户信息,避免刷新用户丢失
-          next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
-        }).catch((e) => {
-          NProgress.done() // 结束Progress
-          // 前台登出
-          store.dispatch('ibps/account/fedLogout').then(() => {
-            next({ name: 'login' })
-          }).catch((err) => {
-            console.error(err)
+        store
+          .dispatch("ibps/user/load")
+          .then(res => {
+            // 拉取用户信息,避免刷新用户丢失
+            next({ ...to, replace: true }); // hack方法 确保addRoutes已完成
           })
-        })
-      } else { // 动态改变权限,判断是否有菜单权限，或者刷新页面
-        if (to.matched.length === 0) { // 不能匹配的路由
-          return next({ path: '401', replace: true, query: { noGoBack: true } })
+          .catch(e => {
+            NProgress.done(); // 结束Progress
+            // 前台登出
+            store
+              .dispatch("ibps/account/fedLogout")
+              .then(() => {
+                next({ name: "login" });
+              })
+              .catch(err => {
+                console.error(err);
+              });
+          });
+      } else {
+        // 动态改变权限,判断是否有菜单权限，或者刷新页面
+        if (to.matched.length === 0) {
+          // 不能匹配的路由
+          return next({
+            path: "401",
+            replace: true,
+            query: { noGoBack: true }
+          });
         } else {
-          next()
+          next();
         }
       }
       // end
     }
   } else {
-    const isWechat = validataWechat()
-    if (isWechat && IS_WECHAT_LOGIN && !from.name) { // 微信登陆
-      const redirect = getQueryString('redirect')
-      const code = getQueryString('code')
-      store.dispatch('ibps/account/loginByWechat', {
-        form: { 'code': code }
-      }).then(() => {
-        if (redirect && redirect !== 'login') {
-          next({ path: redirect })
-        } else {
-          next()
-        }
-      }).catch((e) => {
-        NProgress.done() // 结束Progress
-        if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
-          next()
-        } else {
-          next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
-        }
-      })
+    const isWechat = validataWechat();
+    if (isWechat && IS_WECHAT_LOGIN && !from.name) {
+      // 微信登陆
+      const redirect = getQueryString("redirect");
+      const code = getQueryString("code");
+      store
+        .dispatch("ibps/account/loginByWechat", {
+          form: { code: code }
+        })
+        .then(() => {
+          if (redirect && redirect !== "login") {
+            next({ path: redirect });
+          } else {
+            next();
+          }
+        })
+        .catch(e => {
+          NProgress.done(); // 结束Progress
+          if (whiteList.indexOf(to.path) !== -1) {
+            // 在免登录白名单，直接进入
+            next();
+          } else {
+            next(`/login?redirect=${to.path}`); // 否则全部重定向到登录页
+          }
+        });
     } else {
       // 判断refresh tonken是否过期
-      const refreshToken = getRefreshToken()
+      const refreshToken = getRefreshToken();
       if (util.isNotEmpty(refreshToken)) {
         // 刷新tonken
-        await store.dispatch('ibps/account/refreshToken').then(() => {
-          next()
-        }).catch((err) => {
-          console.error(err)
-        })
+        await store
+          .dispatch("ibps/account/refreshToken")
+          .then(() => {
+            next();
+          })
+          .catch(err => {
+            console.error(err);
+          });
       } else {
         // 在免登录白名单，直接进入
-        if (whiteList.indexOf(to.path) !== -1) {
-          next()
+        if (setting.whiteRouterList.indexOf(to.path) !== -1) {
+          next();
         } else {
           // 没有登录的时候跳转到登录界面
           // 携带上登陆成功之后需要跳转的页面完整路径
           next({
-            name: 'login',
+            name: "login",
             query: {
               redirect: to.fullPath
             }
-          })
-          NProgress.done()
+          });
+          NProgress.done();
         }
       }
     }
   }
-})
+});
 
 router.afterEach(to => {
   // 进度条
-  NProgress.done()
+  NProgress.done();
   // 更改标题
-  i18n.setTitle(to.meta.name || to.name, to.meta.title)
-})
+  i18n.setTitle(to.meta.name || to.name, to.meta.title);
+});
 
-export default router
+export default router;

src/router/routes.js

@@ -1,48 +1,48 @@
 /* Layout */
-import Layout from '@/views/layout/layout'
-import LayoutInfo from '@/views/layout/layout-info'
-import LayoutDefault from '@/views/layout/layout-default'
+import Layout from "@/views/layout/layout";
+import LayoutInfo from "@/views/layout/layout-info";
+import LayoutDefault from "@/views/layout/layout-default";
 // import Main from '@/views/layout/app-main'
 
 // 由于懒加载页面太多的话会造成webpack热更新太慢，所以开发环境不使用懒加载，只有生产环境使用懒加载
-const _import = require('@/utils/util.import.' + process.env.NODE_ENV)
+const _import = require("@/utils/util.import." + process.env.NODE_ENV);
 
 /**
  * 在主框架内显示
  */
 const frameIn = [
   {
-    path: '/',
-    redirect: { name: 'dashboard' },
+    path: "/",
+    redirect: { name: "dashboard" },
     component: Layout,
     children: [
       // 首页
       {
-        path: 'dashboard',
-        name: 'dashboard',
+        path: "dashboard",
+        name: "dashboard",
         meta: {
-          title: '首页',
+          title: "首页",
           auth: true
         },
-        component: _import('/system/dashboard')
+        component: _import("/system/dashboard")
       },
       // 刷新页面 必须保留
       {
-        path: 'refresh',
-        name: 'refresh',
+        path: "refresh",
+        name: "refresh",
         hidden: true,
-        component: _import('/system/function/refresh')
+        component: _import("/system/function/refresh")
       },
       // 页面重定向 必须保留
       {
-        path: 'redirect/:route*',
-        name: 'redirect',
+        path: "redirect/:route*",
+        name: "redirect",
         hidden: true,
-        component: _import('/system/function/redirect')
+        component: _import("/system/function/redirect")
       }
     ]
   }
-]
+];
 
 /**
  * 在主框架之外显示
@@ -50,53 +50,61 @@ const frameIn = [
 const frameOut = [
   // 登录
   {
-    path: '/login',
-    name: 'login',
+    path: "/login",
+    name: "login",
     meta: {
-      title: '登录'
+      title: "登录"
     },
-    component: _import('/system/login')
+    component: _import("/system/login")
   },
   {
-    path: '/iframe',
-    name: 'iframe',
+    path: "/fileView",
+    name: "fileView",
     meta: {
-      title: 'iframe'
+      title: "文件预览页"
     },
-    component: _import('/system/iframe')
+    component: _import("/viewFile")
+  },
+  {
+    path: "/iframe",
+    name: "iframe",
+    meta: {
+      title: "iframe"
+    },
+    component: _import("/system/iframe")
   }
-]
+];
 
 /**
  * 错误页面
  */
 const errorPage = [
   {
-    path: '/404',
-    name: 'error404',
+    path: "/404",
+    name: "error404",
     meta: {
-      title: '404-页面不存在'
+      title: "404-页面不存在"
     },
     hidden: true,
-    component: _import('/system/error/404')
+    component: _import("/system/error/404")
   },
   {
-    path: '/401',
-    name: 'error401',
+    path: "/401",
+    name: "error401",
     meta: {
-      title: '401- 未授权'
+      title: "401- 未授权"
     },
     hidden: true,
-    component: _import('/system/error/401')
+    component: _import("/system/error/401")
   },
   {
-    path: '/403',
-    name: 'error403',
+    path: "/403",
+    name: "error403",
     meta: {
-      title: '403-权限不足'
+      title: "403-权限不足"
     },
     hidden: true,
-    component: _import('/system/error/403')
+    component: _import("/system/error/403")
   }
   // {
   //   path: '/nomenu',
@@ -107,24 +115,22 @@ const errorPage = [
   //   hidden: true,
   //   component: _import('/system/error/nomenu')
   // }
-]
+];
 
 // 自定义
 const frameCustom = [
   {
-    path: '/next-menu',
-    redirect: 'index',
+    path: "/next-menu",
+    redirect: "index",
     component: LayoutInfo,
     children: [
       {
-        path: 'index',
-        name: 'next-menu',
-        meta: { title: '更多', icon: 'dashboard' },
-        component: _import('/system/dashboard/next-menu')
+        path: "index",
+        name: "next-menu",
+        meta: { title: "更多", icon: "dashboard" },
+        component: _import("/system/dashboard/next-menu")
       }
-
     ]
-
   },
   // {
   //   path: '/message',
@@ -145,66 +151,76 @@ const frameCustom = [
   //   ]
   // },
   {
-    path: '/notice',
+    path: "/notice",
     component: Layout,
-    redirect: 'index',
+    redirect: "index",
     children: [
       {
-        path: 'index',
-        name: 'notice',
-        meta: { title: '公告', icon: 'notice' },
-        component: _import('/platform/notice/index')
+        path: "index",
+        name: "notice",
+        meta: { title: "公告", icon: "notice" },
+        component: _import("/platform/notice/index")
       }
     ]
   },
   {
-    path: '/contacts',
+    path: "/contacts",
     component: Layout,
-    redirect: 'index',
+    redirect: "index",
     children: [
       {
-        path: 'index',
-        name: 'contacts',
-        meta: { title: '通讯录', icon: 'contacts' },
-        component: _import('/platform/contacts/index')
+        path: "index",
+        name: "contacts",
+        meta: { title: "通讯录", icon: "contacts" },
+        component: _import("/platform/contacts/index")
       }
     ]
   },
   {
-    path: '/message/inner/receive',
+    path: "/message/inner/receive",
     component: Layout,
-    redirect: 'index',
+    redirect: "index",
     children: [
       {
-        path: 'index',
-        name: 'news',
-        meta: { title: '我的消息', icon: 'news' },
-        component: _import('/platform/message/inner/receive')
+        path: "index",
+        name: "news",
+        meta: { title: "我的消息", icon: "news" },
+        component: _import("/platform/message/inner/receive")
       }
     ]
   },
   {
-    path: '/my',
+    path: "/my",
     component: Layout,
-    redirect: 'index',
+    redirect: "index",
     children: [
       {
-        path: 'index',
-        name: 'my',
-        meta: { title: '我的', icon: 'my' },
-        component: _import('/platform/my/index')
+        path: "index",
+        name: "my",
+        meta: { title: "我的", icon: "my" },
+        component: _import("/platform/my/index")
       },
       {
-        path: 'userInfo',
-        name: 'userInfo',
-        meta: { title: '个人信息', icon: 'my', isLeftBar: true, isShowBar: false },
-        component: _import('/platform/my/user-info')
+        path: "userInfo",
+        name: "userInfo",
+        meta: {
+          title: "个人信息",
+          icon: "my",
+          isLeftBar: true,
+          isShowBar: false
+        },
+        component: _import("/platform/my/user-info")
       },
       {
-        path: 'changePassword',
-        name: 'changePassword',
-        meta: { title: '修改密码', icon: 'my', isLeftBar: true, isShowBar: false },
-        component: _import('/platform/my/change-password')
+        path: "changePassword",
+        name: "changePassword",
+        meta: {
+          title: "修改密码",
+          icon: "my",
+          isLeftBar: true,
+          isShowBar: false
+        },
+        component: _import("/platform/my/change-password")
       },
       // {
       //   path: 'setting',
@@ -213,154 +229,163 @@ const frameCustom = [
       //   component:_import('/platform/my/setting')
       // },
       {
-        path: 'help',
-        name: 'help',
-        meta: { title: '帮助', icon: 'help', isLeftBar: true, isShowBar: false },
-        component: _import('/platform/my/help')
+        path: "help",
+        name: "help",
+        meta: {
+          title: "帮助",
+          icon: "help",
+          isLeftBar: true,
+          isShowBar: false
+        },
+        component: _import("/platform/my/help")
       },
       {
-        path: 'aboutUs',
-        name: 'aboutUs',
-        meta: { title: '关于我们', icon: 'my', isLeftBar: true, isShowBar: false },
-        component: _import('/platform/my/about-us')
-
+        path: "aboutUs",
+        name: "aboutUs",
+        meta: {
+          title: "关于我们",
+          icon: "my",
+          isLeftBar: true,
+          isShowBar: false
+        },
+        component: _import("/platform/my/about-us")
       }
     ]
   },
   {
-    path: '/bpmn',
-    redirect: 'pending',
+    path: "/bpmn",
+    redirect: "pending",
     component: LayoutDefault,
     children: [
       {
-        path: 'pending/index',
-        name: 'pending',
-        meta: { title: '待办事宜' },
-        component: _import('/platform/bpmn/pending/index')
+        path: "pending/index",
+        name: "pending",
+        meta: { title: "待办事宜" },
+        component: _import("/platform/bpmn/pending/index")
       },
       {
-        path: 'pending-matter/index',
-        name: 'pendingMatter',
-        meta: { title: '待办事宜' },
-        component: _import('/platform/bpmn/pending-matter/index')
+        path: "pending-matter/index",
+        name: "pendingMatter",
+        meta: { title: "待办事宜" },
+        component: _import("/platform/bpmn/pending-matter/index")
       },
 
       {
-        path: 'completed/index',
-        name: 'completed',
-        meta: { title: '办结事宜' },
-        component: _import('/platform/bpmn/completed/index')
+        path: "completed/index",
+        name: "completed",
+        meta: { title: "办结事宜" },
+        component: _import("/platform/bpmn/completed/index")
       },
       {
-        path: 'handled/index',
-        name: 'handled',
-        meta: { title: '已办事宜' },
-        component: _import('/platform/bpmn/handled/index')
+        path: "handled/index",
+        name: "handled",
+        meta: { title: "已办事宜" },
+        component: _import("/platform/bpmn/handled/index")
       },
       {
-        path: 'myRequest/index',
-        name: 'myRequest',
-        meta: { title: '我的请求' },
-        component: _import('/platform/bpmn/my-request/index')
+        path: "myRequest/index",
+        name: "myRequest",
+        meta: { title: "我的请求" },
+        component: _import("/platform/bpmn/my-request/index")
       },
       {
-        path: 'newProcess/index',
-        name: 'newProcess',
-        meta: { title: '新建流程' },
-        component: _import('/platform/bpmn/new-process/index')
+        path: "newProcess/index",
+        name: "newProcess",
+        meta: { title: "新建流程" },
+        component: _import("/platform/bpmn/new-process/index")
       },
       {
-        path: 'myDraft/index',
-        name: 'myDraft',
-        meta: { title: '我的草稿' },
-        component: _import('/platform/bpmn/my-draft/index')
+        path: "myDraft/index",
+        name: "myDraft",
+        meta: { title: "我的草稿" },
+        component: _import("/platform/bpmn/my-draft/index")
       },
       {
-        path: 'myRevoke/index',
-        name: 'myRevoke',
-        meta: { title: '可撤销事务' },
-        component: _import('/platform/bpmn/my-revoke/index')
+        path: "myRevoke/index",
+        name: "myRevoke",
+        meta: { title: "可撤销事务" },
+        component: _import("/platform/bpmn/my-revoke/index")
       },
       {
-        path: 'myCompleted/index',
-        name: 'myCompleted',
-        meta: { title: '我结束的流程' },
-        component: _import('/platform/bpmn/my-completed/index')
+        path: "myCompleted/index",
+        name: "myCompleted",
+        meta: { title: "我结束的流程" },
+        component: _import("/platform/bpmn/my-completed/index")
       },
 
       {
-        path: 'taskChange/index',
-        name: 'taskChange',
-        meta: { title: '我的转办代理' },
-        component: _import('/platform/bpmn/task-change/index')
+        path: "taskChange/index",
+        name: "taskChange",
+        meta: { title: "我的转办代理" },
+        component: _import("/platform/bpmn/task-change/index")
       },
       {
-        path: 'taskChangeDetail',
-        name: 'taskChangeDetail',
-        meta: { title: '详细信息' },
-        component: _import('/platform/bpmn/task-change/detail')
+        path: "taskChangeDetail",
+        name: "taskChangeDetail",
+        meta: { title: "详细信息" },
+        component: _import("/platform/bpmn/task-change/detail")
       },
       {
-        path: 'myTest/index',
-        name: 'myTest',
-        meta: { title: '我的考试' },
-        component: _import('/platform/bpmn/my-test/index')
+        path: "myTest/index",
+        name: "myTest",
+        meta: { title: "我的考试" },
+        component: _import("/platform/bpmn/my-test/index")
       },
       {
-        path: 'siginin/index',
-        name: 'siginin',
-        meta: { title: '签到' },
-        component: _import('/platform/bpmn/siginin/index')
+        path: "siginin/index",
+        name: "siginin",
+        meta: { title: "签到" },
+        component: _import("/platform/bpmn/siginin/index")
       },
       {
-        path: 'report/oralReport',
-        name: 'oralReport',
-        meta: { title: '口头报告查询' },
-        component: _import('/platform/bpmn/report/oralReport')
+        path: "report/oralReport",
+        name: "oralReport",
+        meta: { title: "口头报告查询" },
+        component: _import("/platform/bpmn/report/oralReport")
       },
       {
-        path: 'report/delayReport',
-        name: 'delayReport',
-        meta: { title: '延迟报告查询' },
-        component: _import('/platform/bpmn/report/delayReport')
+        path: "report/delayReport",
+        name: "delayReport",
+        meta: { title: "延迟报告查询" },
+        component: _import("/platform/bpmn/report/delayReport")
       },
       {
-        path: 'addiInspect/index',
-        name: 'addiInspect',
-        meta: { title: '附加检验申请' },
-        component: _import('/platform/bpmn/addiInspect/index')
+        path: "addiInspect/index",
+        name: "addiInspect",
+        meta: { title: "附加检验申请" },
+        component: _import("/platform/bpmn/addiInspect/index")
       },
       {
-        path: 'communication/communicationList',
-        name: 'communicationList',
-        meta: { title: '信息沟通' },
-        component: _import('/platform/bpmn/communication/communicationList')
+        path: "communication/communicationList",
+        name: "communicationList",
+        meta: { title: "信息沟通" },
+        component: _import("/platform/bpmn/communication/communicationList")
       },
       {
-        path: 'complaint/complaintList',
-        name: 'complaintList',
-        meta: { title: '投诉列表' },
-        component: _import('/platform/bpmn/complaint/complaintList')
+        path: "complaint/complaintList",
+        name: "complaintList",
+        meta: { title: "投诉列表" },
+        component: _import("/platform/bpmn/complaint/complaintList")
       },
       {
-        path: 'satisfaction/satisfaction',
-        name: 'satisfaction',
-        meta: { title: '满意度评价' },
-        component: _import('/platform/bpmn/satisfaction/satisfaction')
+        path: "satisfaction/satisfaction",
+        name: "satisfaction",
+        meta: { title: "满意度评价" },
+        component: _import("/platform/bpmn/satisfaction/satisfaction")
       }
     ]
   },
   {
-    path: '/message/inner/receive',
-    component: _import('/platform/message/inner/receive'),
-    name: 'messageInnerReceive',
-    meta: { title: '我的消息' }
+    path: "/message/inner/receive",
+    component: _import("/platform/message/inner/receive"),
+    name: "messageInnerReceive",
+    meta: { title: "我的消息" }
   },
   {
-    path: '/d/list/:id(\\w+)',
-    component: _import('/platform/data/template-list'),
-    name: 'dataTemplateList',
-    meta: { title: '模版' }
+    path: "/d/list/:id(\\w+)",
+    component: _import("/platform/data/template-list"),
+    name: "dataTemplateList",
+    meta: { title: "模版" }
   },
   // {
   //   path: '/d/form',
@@ -369,15 +394,15 @@ const frameCustom = [
   //   meta: { title: '表单明细' }
   // },
   {
-    path: '/demo',
+    path: "/demo",
     component: LayoutInfo,
-    redirect: 'form',
+    redirect: "form",
     children: [
       {
-        path: 'form',
-        name: 'demoForm',
-        meta: { title: '表单Demo', icon: 'table' },
-        component: _import('/demo/form')
+        path: "form",
+        name: "demoForm",
+        meta: { title: "表单Demo", icon: "table" },
+        component: _import("/demo/form")
       }
       //     {
       //       path: 'toolbar',
@@ -387,16 +412,11 @@ const frameCustom = [
       //     }
     ]
   },
-  { path: '*', redirect: '/404', hidden: true }
-]
+  { path: "*", redirect: "/404", hidden: true }
+];
 
 // 导出需要显示菜单的
-export const frameInRoutes = frameIn
+export const frameInRoutes = frameIn;
 
 // 重新组织后导出
-export default [
-  ...frameIn,
-  ...frameOut,
-  ...errorPage,
-  ...frameCustom
-]
+export default [...frameIn, ...frameOut, ...errorPage, ...frameCustom];

src/setting.js

@@ -1,29 +1,40 @@
-import { version } from '../package'
+import { version } from "../package";
 
 export default {
-  title: '深圳金源信通科技有限公司',
+  title: "深圳金源信通科技有限公司",
   // 版本
   releases: {
     version: version,
-    api: ''// 更新版本的api
+    api: "" // 更新版本的api
   },
   system: {
-    size: 'small',
-    language: 'zh-CN',
+    size: "small",
+    language: "zh-CN",
     languageList: [
-        { value: 'zh-CN', label: '简体中文' },
-        { value: 'zh-TW', label: '繁体中文' },
-        { value: 'en', label: 'English' },
-        { value: 'ja', label: '日本語' }
+      { value: "zh-CN", label: "简体中文" },
+      { value: "zh-TW", label: "繁体中文" },
+      { value: "en", label: "English" },
+      { value: "ja", label: "日本語" }
     ]
   },
+  whiteRouterList: [
+    "/login",
+    "/register",
+    "/forget",
+    "/tenantRegister",
+    "/tenantForget",
+    "/authredirect",
+    "/ziliao",
+    "/sealCompleted",
+    "/fileView"
+  ],
   // 全局key
-  globalKey: 'ibps-app-' + version,
+  globalKey: "ibps-app-" + version,
   /**
-     * @type {string | array} 'production' | ['production', 'development']
-     * @description Need show err logs component.
-     * The default is only used in the production env
-     * If you want to also use it in dev, you can pass ['production', 'development']
-     */
-  errorLog: 'production'
-}
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: "production"
+};

src/views/viewFile/index.vue

@@ -0,0 +1,100 @@
+<!--onlyoffice 编辑器-->
+<template>
+    <div>
+        <div id="editorDiv" ref="editor" class="nav" />
+    </div>
+</template>
+
+<script>
+import { handleDocType } from '@/business/platform/file/attachment/editFile/editor/editor.js'
+import { showView } from '@/api/platform/file/attachment'
+import { getToken } from '@/utils/auth'
+
+export default {
+    name: 'editor',
+    data () {
+        return {
+            doctype: '',
+            newId: '',
+            timer: '',
+            configKey: '',
+            option: {}
+        }
+    },
+    watch: {
+        option: {
+            handler: function (n, o) {
+                this.setEditor(n)
+                this.doctype = handleDocType(n.fileType)
+            },
+            deep: true
+        }
+    },
+    mounted () {
+        this.option = this.$route.query
+        
+        /* 调用初始化方法 ，渲染wps*/
+        if (this.option.url) {
+            this.setEditor(this.option)
+        }
+    },
+    methods: {
+        setEditor (option) {
+            console.log(this.$route.query,'document.bodydocument.body')
+            this.doctype = handleDocType(option.fileType)
+            const url = option.url + '&access_token=' + getToken()
+            console.log(option,'urq:' + url)
+            const config = {
+                document: {
+                    fileType: option.fileType,
+                    key: option.key,
+                    title: option.title,
+                    permissions: {
+                        comment: true,
+                        copy: true,
+                        download: false,
+                        modifyContentControl: true,
+                        modifyFilter: true,
+                        print: false,
+                        edit: true,
+                        fillForms: true,
+                        review: true
+                    },
+                    url: url
+                },
+                documentType: this.doctype,
+                editorConfig: {
+                    callbackUrl: option.editUrl,
+                    lang: 'zh',
+                    canHistoryRestore: true,
+                    canUseHistory: true,
+                    customization: {
+                        commentAuthorOnly: false,
+                        comments: true,
+                        compactHeader: false,
+                        compactToolbar: true,
+                        plugins: true,
+                        feedback: {
+                            // 隐藏反馈按钮
+                            visible: false
+                        },
+                        // true 表示强制文件保存请求添加到回调处理程序
+                        forcesave: true,
+                        // 取消强制保存，进行手动保存
+                        atuosave: false
+                    },
+                    user: {
+                        id: this.$store.getters.userId,
+                        name: this.$store.getters.name
+                    },
+                    mode: option.mode
+                },
+                width: '100%',
+                height: window.innerHeight + 'px'
+            }
+            const docEditor = new DocsAPI.DocEditor('editorDiv', config)
+            this.configKey = config.document.key
+        }
+    }
+}
+</script>