From 956b4c435146c14ccfe8ef08d2f3cde1443ab366 Mon Sep 17 00:00:00 2001
From: p71924506 <222@qq.com>
Date: Sun, 29 Jan 2023 17:10:11 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B5=8B=E8=AF=95=E6=80=A7=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=EF=BC=9A=E5=A2=9E=E5=8A=A0OnlyOfficeTest=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=EF=BC=8C=E9=83=A8=E7=BD=B2OnlyOffice=E6=9C=8D=E5=8A=A1?=
 =?UTF-8?q?=E5=9C=A88044=E7=AB=AF=E5=8F=A3=EF=BC=8C=E7=9B=AE=E5=89=8D?=
 =?UTF-8?q?=E6=9C=AA=E8=AE=BE=E7=BD=AEtoken=E5=8A=A0=E5=AF=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 public/index.html                             |   1 +
 src/router/index.js                           |  12 ++
 src/views/onlyOfficeTest/OnlyOfficeEditor.vue | 122 ++++++++++++++++++
 src/views/onlyOfficeTest/OnlyOfficeTest.vue   |  92 +++++++++++++
 yarn.lock                                     |   5 +
 6 files changed, 233 insertions(+)
 create mode 100644 src/views/onlyOfficeTest/OnlyOfficeEditor.vue
 create mode 100644 src/views/onlyOfficeTest/OnlyOfficeTest.vue
diff --git a/package.json b/package.json
index 0ff3f4c..6d8cb97 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "test:ci": "npm run lint && npm run test:unit"
   },
   "dependencies": {
+    "@onlyoffice/document-editor-vue": "^1.1.1",
     "axios": "0.18.1",
     "core-js": "^3.26.1",
     "docx-preview": "^0.1.14",
diff --git a/public/index.html b/public/index.html
index fa2be91..066ba82 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <script type='text/javascript' src='http://114.116.228.69:8044/web-apps/apps/api/documents/api.js'></script>
     <title><%= webpackConfig.name %></title>
   </head>
   <body>
diff --git a/src/router/index.js b/src/router/index.js
index dc19da4..d114d8c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -100,6 +100,18 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path:'/',
+    component: Layout,
+    children: [
+      {
+        path: "OnlyOfficeTest",
+        name: 'OnlyOfficeTest',
+        component:() => import("@/views/onlyOfficeTest/OnlyOfficeTest"),
+        meta: {title: 'OnlyOfficeTest',icon: 'el-icon-setting'}
+      }
+    ]
+  },
   // {
   //   path: '/example',
   //   component: Layout,
diff --git a/src/views/onlyOfficeTest/OnlyOfficeEditor.vue b/src/views/onlyOfficeTest/OnlyOfficeEditor.vue
new file mode 100644
index 0000000..7a2a5e6
--- /dev/null
+++ b/src/views/onlyOfficeTest/OnlyOfficeEditor.vue
@@ -0,0 +1,122 @@
+<template>
+  <div id='vabOnlyOffice'></div>
+</template>
+
+<script>
+export default {
+  name: 'OnlyOfficeEditor',
+  props: {
+    option: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+  },
+  data() {
+    return {
+      doctype: '',
+      docEditor: null,
+    }
+  },
+  beforeDestroy() {
+    if (this.docEditor !== null) {
+      this.docEditor.destroyEditor();
+      this.docEditor = null;
+    }
+  },
+  watch: {
+    option: {
+      handler: function(n) {
+        this.setEditor(n)
+        this.doctype = this.getFileType(n.fileType)
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    if (this.option.url) {
+      this.setEditor(this.option)
+    }
+  },
+  methods: {
+    async setEditor(option) {
+      if (this.docEditor !== null) {
+        this.docEditor.destroyEditor();
+        this.docEditor = null;
+      }
+      this.doctype = this.getFileType(option.fileType)
+      let config = {
+        document: {
+          //后缀
+          fileType: option.fileType,
+          key: option.key ||'',
+          title: option.title,
+          permissions: {
+            edit: option.isEdit,//是否可以编辑: 只能查看，传false
+            print: option.isPrint,
+            download: false,
+            // "fillForms": true,//是否可以填写表格，如果将mode参数设置为edit，则填写表单仅对文档编辑器可用。 默认值与edit或review参数的值一致。
+            // "review": true //跟踪变化
+          },
+          url: option.url,
+        },
+        documentType: this.doctype,
+        editorConfig: {
+          callbackUrl: option.editUrl,//"编辑word后保存时回调的地址，这个api需要自己写了，将编辑后的文件通过这个api保存到自己想要的位置
+          lang: option.lang,//语言设置
+          //定制
+          customization: {
+            autosave: true,//是否自动保存
+            chat: true,
+            comments: false,
+            help: false,
+            // "hideRightMenu": false,//定义在第一次加载时是显示还是隐藏右侧菜单。 默认值为false
+            //是否显示插件
+            plugins: true,
+          },
+          user:{
+            id:option.user.id,
+            name:option.user.name
+          },
+          mode:option.model?option.model:'edit',
+        },
+        width: '100%',
+        height: '100%',
+        token:option.token||''
+      }
+
+      // eslint-disable-next-line no-undef,no-unused-vars
+      this.docEditor = new DocsAPI.DocEditor('vabOnlyOffice', config)
+
+    },
+    getFileType(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'
+      }
+      if (fileTypesCsv.includes(fileType)) {
+        docType = 'spreadsheet'
+      }
+      if (fileTypesPPt.includes(fileType)) {
+        docType = 'presentation'
+      }
+      return docType
+    }
+  },
+
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/onlyOfficeTest/OnlyOfficeTest.vue b/src/views/onlyOfficeTest/OnlyOfficeTest.vue
new file mode 100644
index 0000000..3eb36b1
--- /dev/null
+++ b/src/views/onlyOfficeTest/OnlyOfficeTest.vue
@@ -0,0 +1,92 @@
+<template>
+  <div id="app">
+    <div class='qualityManual-container'>
+      <div>
+        <button style='width: 120px;' type='primary' @click='getFile'>测试预览office文档</button>
+        <button style='width: 120px;' type='primary' @click='close'>关闭</button>
+      </div>
+      <div v-if='show' class='qualityManual-container-office'>
+        <only-office-editor :option='option' />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script >
+import OnlyOfficeEditor from './OnlyOfficeEditor'
+export default{
+  name: 'OnlyOfficeTest',
+  components: {
+    OnlyOfficeEditor
+  },
+  data() {
+    return {
+      //参考vabOnlyOffice组件参数配置
+      option: {
+        url: '',
+        isEdit: '',
+        fileType: '',
+        title: '',
+        lang: '',
+        isPrint: '',
+        user: { id:null,name:''}
+      },
+      show: false,
+      config: {
+        document: {
+          fileType: "docx",
+          key: "Khirz6zTPdfd7",
+          title: "Example Document Title.docx",
+          url: "https://example.com/url-to-example-document.docx"
+        },
+        documentType: "word",
+        editorConfig: {
+          callbackUrl: "https://example.com/url-to-callback.ashx"
+        }
+      }
+    }
+  },
+  methods: {
+
+    getFile() {
+      this.show = true
+      // getAction('/file/selectById', { id: this.id }).then(res => {
+      this.option.isEdit = true
+      this.option.lang = 'zh-CN'
+      this.option.url = 'http://114.116.228.69:8043/api/files/ZPABOZ-%E7%BA%A2%E5%B1%B1%E5%BC%80%E6%BA%90%E5%B9%B3%E5%8F%B0%E7%AE%A1%E7%90%86%E5%91%98%E6%9D%83%E9%99%90%E5%88%86%E7%B1%BB%E7%BB%9F%E8%AE%A121.1.3.xlsx'
+      this.option.title = '123'
+      this.option.fileType = 'xlsx'
+      this.option.isPrint = false
+      this.option.user= { id:12,name:'张三'}
+      // })
+    },
+    close() {
+      this.show = false
+    },
+  },
+};
+</script>
+
+<style scoped>
+html,body{
+  height:100%;
+}
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  height:100%;
+
+}
+.qualityManual-container {
+  padding: 0 !important;
+  height:100%;
+}
+.qualityManual-container-office {
+  width: 100%;
+  /*height: calc(100% - 55px);*/
+  height: 500px;
+}
+</style>
diff --git a/yarn.lock b/yarn.lock
index 55fe540..a9849e6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1203,6 +1203,11 @@
   resolved "https://registry.npmmirror.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz"
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
+"@onlyoffice/document-editor-vue@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.npmmirror.com/@onlyoffice/document-editor-vue/-/document-editor-vue-1.1.1.tgz#26573080acae1d7ee6a4dddbad9737e67ae87d06"
+  integrity sha512-PCc56emC+UyKeyOAvLBeEkI2uqTpXMbN2b5Sumf1N+MDLzvyGTV6AFwxvvLRbUdHJFdNn7+7NwN2CE8wGt0gOQ==
+
 "@soda/friendly-errors-webpack-plugin@^1.7.1":
   version "1.8.1"
   resolved "https://registry.npmmirror.com/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.1.tgz"
