update

1、组件命名修改，代码格式化，删除没用组件
2、title修改
3、编辑、预览添加和主系统的对接逻辑，
4、配置文件添加注释

public/dev_api_config.js

@@ -1,4 +1,7 @@
 window._CONFIG = {}
+// onlyOffice文件获取地址
 window._CONFIG.documentUrl = 'http://10.0.1.19:8184/laws-sinotruk/onlyOffice/downLoadFile?path='
+// onlyOffice文件保存回调地址（后端服务的ip端口，最后一个/是必须的）
 window._CONFIG.callbackUrl = 'http://10.0.1.19:8184/'
+// onlyOffice自定义编辑器的地址（plugins的前端路径，最后一个/是必须的）
 window._CONFIG.configUrl = 'http://10.0.1.19:8082/'

public/prod_api_config.js

@@ -1,4 +1,7 @@
 window._CONFIG = {}
+// onlyOffice文件获取地址
 window._CONFIG.documentUrl = 'http://laws-sinotruk-server-kmc2c.yf-grp:8080/laws-sinotruk/onlyoffice/downLoadFile?path='
+// onlyOffice文件保存回调地址（后端服务的ip端口，最后一个/是必须的）
 window._CONFIG.callbackUrl = 'http://laws-sinotruk-server-kmc2c.yf-grp:8080/'
+// onlyOffice自定义编辑器的地址（plugins的前端路径，最后一个/是必须的）
 window._CONFIG.configUrl = 'http://onlyofficeplugins.sinotruk.com/'

src/App.vue

@@ -17,6 +17,9 @@ export default {
     return {
       zh_CN
     }
+  },
+  created () {
+    document.title = '在线编辑'
   }
 }
 </script>

src/components/HelloWorld.vue

@@ -1,66 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3 @click="cwx">Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-import wxcount from '../views/test';
-
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String,
-  },
-  methods: {
-    cwx() {
-      console.log(wxcount);
-    },
-  },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="less">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/router/index.js

@@ -18,20 +18,20 @@ const routes = [
     component: () => import('../views/List.vue')
   },
   {
-    path: '/onlyoffice',
+    path: '/previewPage',
-    name: 'Onlyoffice',
+    name: 'PreviewPage',
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import('../views/Onlyoffice.vue')
+    component: () => import('../views/PreviewPage.vue')
   },
   {
-    path: '/editor',
+    path: '/editorPage',
-    name: 'editor',
+    name: 'EditorPage',
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import('../views/editor.vue')
+    component: () => import('../views/EditorPage.vue')
   }
 ]
 

src/views/EditorPage.vue

@@ -1,5 +1,20 @@
 <template>
   <div id="placeholder" class="nav" style="height: 100vh">
+    <div class="box-text" @click="handleRestore">还原</div>
+    <div class="file-box" v-if="isFileDisplay">
+      <div class="textTitle">
+        <span class="textTitleFile">还原版本</span>
+        <span class="closeFile" @click="closeFileClick">×</span>
+      </div>
+      <div class="fileContent" v-if="fileList && fileList.length > 0">
+        <div class="fileContentText" v-for="(item,index) in fileList" :key="index">
+          <span @click="viewFileClick(item)" class="timeClass">{{ item.createTime }}</span>
+          <span @click="viewFileClick(item)" class="viewClass">预览</span>
+          <span @click="fileContentClick(item)" class="viewClass">还原</span>
+        </div>
+      </div>
+      <div class="noFile" v-else>暂无历史版本</div>
+    </div>
     <div id="iframeEditor"></div>
   </div>
 </template>
@@ -15,10 +30,13 @@ export default {
     return {
       docEditor: {},
       documentUrl: window._CONFIG.documentUrl,
-      callbackUrl: window._CONFIG.callbackUrl
+      callbackUrl: window._CONFIG.callbackUrl,
+      isFileDisplay: false,
+      fileList: []
     }
   },
   mounted () {
+    document.title = '在线编辑'
     this.connectEditor()
     // 从主系统跳过来需要调这个方法，目前系统内跳不触发
     if (window.addEventListener) {
@@ -131,12 +149,17 @@ export default {
     onDocumentSaved () {
       console.log(12)
     },
-    connectEditor () {
+    connectEditor (fileInfo = {}) {
-      console.log(this.$route.query)
-      console.log(`${this.documentUrl}${this.$route.query.filePath}`)
-      console.log(window._CONFIG.configUrl + 'page1/config.json')
-      console.log(`${this.callbackUrl}laws-sinotruk/onlyOffice/receiveFile?fileId=${this.$route.query.fileId}&fileNm=${this.$route.query.fileName}&key=${this.$route.query.key}`)
       const nowTime = new Date().getTime()
+      let url = ''
+      let key = ''
+      if (fileInfo.id) {
+        url = this.documentUrl + fileInfo.id
+        key = fileInfo.id + nowTime
+      } else {
+        url = `${this.documentUrl}${this.$route.query.filePath}`
+        key = this.$route.query.key + nowTime
+      }
       this.docEditor = new DocsAPI.DocEditor('iframeEditor', {
         width: '100%',
         height: '100%',
@@ -149,9 +172,9 @@ export default {
         token: 'secret',
         document: {
           title: this.$route.query.fileName,
-          url: `${this.documentUrl}${this.$route.query.filePath}`,
+          url: url,
           fileType: this.$route.query.fileType,
-          key: this.$route.query.key + new Date().getTime(),
+          key: key,
           info: {
             author: this.$route.query.userName,
             created: 'Wed Oct 12 2022'
@@ -183,7 +206,7 @@ export default {
           query: {
             id: 123456
           },
-          callbackUrl: `${this.callbackUrl}laws-sinotruk/onlyOffice/receiveFile?fileId=${this.$route.query.fileId}&fileNm=${this.$route.query.fileName}&key=${this.$route.query.key}`,
+          callbackUrl: `${this.callbackUrl}laws-sinotruk/onlyOffice/receiveFile?fileId=${this.$route.query.fileId}&fileNm=${this.$route.query.fileName}&key=${this.$route.query.key}&business=${this.$route.query.business}`,
           user: {
             id: this.$route.query.userId,
             name: this.$route.query.userName
@@ -242,6 +265,38 @@ export default {
         }
       })
       this.fixSize()
+    },
+    /**
+     * 还原，打开历史记录弹框
+     */
+    handleRestore () {
+      this.isFileDisplay = true
+    },
+    /**
+     * 关闭历史记录列表
+     */
+    closeFileClick () {
+      this.isFileDisplay = false
+    },
+    /**
+     * 预览文件
+     * @param file
+     */
+    viewFileClick (file) {
+      const { fileName, userId, userName } = this.$route.query
+      const { href } = this.$router.resolve({
+        path: '/previewPage',
+        query: {
+          fileName, userId, userName
+        }
+      })
+      window.open(href, '_blank')
+    },
+    /**
+     * 确定回滚到某个版本
+     */
+    fileContentClick () {
+
     }
   },
   beforeDestroy () {
@@ -257,4 +312,88 @@ export default {
 </script>
 
 <style scoped>
+.box-text {
+  position: absolute;
+  right: 40px;
+  top: 6px;
+  font-size: 12px;
+  text-align: center;
+  color: #fff;
+  cursor: pointer;
+}
+
+.file-box {
+  width: 500px;
+  height: auto;
+  position: fixed;
+  right: 40px;
+  top: 28px;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 1px 1px 7px #c6c1c1;
+}
+
+.textTitle {
+  height: 48px;
+  line-height: 48px;
+  text-align: center;
+  border-bottom: 1px solid #E5E6EB;
+  position: relative;
+}
+
+.textTitleFile {
+  font-size: 16px;
+  font-weight: 500;
+  color: #1D2129;
+  font-family: PingFang SC-Medium, PingFang SC;
+}
+
+.closeFile {
+  position: absolute;
+  right: 10px;
+  font-size: 30px;
+  top: 0;
+  cursor: pointer;
+}
+
+.fileContent {
+  padding: 24px;
+  box-sizing: border-box;
+}
+
+.fileContentText {
+  margin-bottom: 10px;
+  cursor: pointer;
+  text-align: left;
+}
+
+.noFile {
+  height: 200px;
+  text-align: center;
+  line-height: 200px;
+  color: #4E5969;
+  font-size: 14px;
+  font-family: Phetsarath-Regular, Phetsarath;
+  font-weight: 400;
+}
+
+.timeClass {
+  font-size: 14px;
+  font-family: Phetsarath-Regular, Phetsarath;
+  font-weight: 400;
+  color: #4E5969;
+  text-align: left;
+}
+
+.timeClass:hover {
+  color: rgb(64, 158, 255);
+}
+
+.viewClass {
+  font-size: 14px;
+  font-family: Phetsarath-Regular, Phetsarath;
+  font-weight: 400;
+  color: rgb(64, 158, 255);
+  margin-left: 10px;
+}
 </style>

src/views/PreviewPage.vue

@@ -6,17 +6,19 @@
 
 <script>
 let docEditor
-const {location} = window
+const { location } = window
+
 export default {
-  name: 'Onlyoffice',
+  name: 'PreviewPage',
-  data() {
+  data () {
     return {
       docEditor: {},
       documentUrl: window._CONFIG.documentUrl,
       callbackUrl: window._CONFIG.callbackUrl
     }
   },
-  mounted() {
+  mounted () {
+    document.title = '预览'
     if (window.addEventListener) {
       this.connectEditor()
       window.addEventListener('resize', this.fixSize)
@@ -26,28 +28,28 @@ export default {
     }
   },
   methods: {
-    innerAlert(message) {
+    innerAlert (message) {
       if (console && console.log) console.log(message)
     },
-    onAppReady() {
+    onAppReady () {
       this.innerAlert('Document editor ready')
     },
-    onDocumentStateChange(event) {
+    onDocumentStateChange (event) {
       const title = document.title.replace(/\*$/g, '')
       document.title = title + (event.data ? '*' : '')
     },
-    onRequestEditRights() {
+    onRequestEditRights () {
       location.href = location.href.replace(RegExp('mode=view', 'i'), '')
     },
-    onRequestHistory(event) {
+    onRequestHistory (event) {
       const historyObj =
         [
           {
             changes: null,
-            key: this.$route.query.attId,
+            key: this.$route.query.key,
             version: 1,
             created: '2022-10-17 14:17:09',
-            user: {id: this.$route.query.userId, name: this.$route.query.userName}
+            user: { id: this.$route.query.userId, name: this.$route.query.userName }
           }
         ] || null
       this.docEditor.refreshHistory({
@@ -55,28 +57,28 @@ export default {
         history: historyObj
       })
     },
-    onRequestHistoryData(data) {
+    onRequestHistoryData (data) {
       const version = data.data
       const historyData =
         [
           {
             'version': 1,
-            'key': this.$route.query.attId,
+            'key': this.$route.query.key,
-            'url': this.documentUrl + this.$route.query.filePath + this.$route.query.fileName
+            'url': this.documentUrl + this.$route.query.filePath
           }
         ] || null
       this.docEditor.setHistoryData(historyData[version - 1])
     },
-    onRequestHistoryClose(event) {
+    onRequestHistoryClose (event) {
       document.location.reload()
     },
-    onError(event) {
+    onError (event) {
       if (event) this.innerAlert(event.data)
     },
-    onOutdatedVersion(event) {
+    onOutdatedVersion (event) {
       location.reload(true)
     },
-    replaceActionLink(href, linkParam) {
+    replaceActionLink (href, linkParam) {
       let link
       const actionIndex = href.indexOf('&action=')
       // eslint-disable-next-line eqeqeq
@@ -97,12 +99,12 @@ export default {
       }
       return link
     },
-    onMakeActionLink(event) {
+    onMakeActionLink (event) {
       const actionData = event.data
       const linkParam = JSON.stringify(actionData)
       this.docEditor.setActionLink(this.replaceActionLink(location.href, linkParam))
     },
-    fixSize() {
+    fixSize () {
       const wrapEl = document.getElementsByClassName('form')
       if (wrapEl.length) {
         // eslint-disable-next-line no-restricted-globals
@@ -111,7 +113,7 @@ export default {
         wrapEl[0].style.height = `${window.innerHeight}px`
       }
     },
-    connectEditor() {
+    connectEditor () {
       // console.log('connectEditor', 1233);
       // eslint-disable-next-line no-undef
       this.docEditor = new DocsAPI.DocEditor('iframeEditor', {
@@ -121,15 +123,10 @@ export default {
         documentType: 'text',
         token: '',
         document: {
-          title: this.$route.query.oldFileName + '.' + this.$route.query.fileType,
+          title: this.$route.query.fileName,
-          url: this.documentUrl + this.$route.query.filePath + this.$route.query.fileName,
+          url: `${this.documentUrl}${this.$route.query.filePath}`,
           fileType: this.$route.query.fileType,
           key: this.$route.query.key,
-          // 文件其他参数（文档作者、存储文档的文件夹、创建日期、共享设置）
-          info: {
-            author: 'Me',
-            created: 'Wed Oct 12 2022'
-          },
           permissions: {
             comment: false,
             download: true,
@@ -165,7 +162,7 @@ export default {
       this.fixSize()
     }
   },
-  beforeDestroy() {
+  beforeDestroy () {
     if (window.removeEventListener) {
       window.removeEventListener('load', this.connectEditor)
       window.removeEventListener('resize', this.fixSize)
@@ -178,4 +175,5 @@ export default {
 </script>
 
 <style scoped>
+
 </style>