update

1、组件命名修改，代码格式化，删除没用组件 2、title修改 3、编辑、预览添加和主系统的对接逻辑， 4、配置文件添加注释
2024-01-23 16:46:33 +08:00
parent 45e0b068e1
commit 620ef5b5cb
7 changed files with 190 additions and 110 deletions
@@ -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/'
@@ -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/'
@@ -17,6 +17,9 @@ export default {
    return {
      zh_CN
    }
+  },
+  created () {
+    document.title = '在线编辑'
  }
 }
 </script>
@@ -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>
@@ -18,20 +18,20 @@ const routes = [
    component: () => import('../views/List.vue')
  },
  {
-    path: '/onlyoffice',
-    name: 'Onlyoffice',
+    path: '/previewPage',
+    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',
-    name: 'editor',
+    path: '/editorPage',
+    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')
  }
 ]

@@ -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 () {
-      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}`)
+    connectEditor (fileInfo = {}) {
      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>
@@ -6,17 +6,19 @@

 <script>
 let docEditor
-const {location} = window
+const { location } = window
+
 export default {
-  name: 'Onlyoffice',
-  data() {
+  name: 'PreviewPage',
+  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,
-            'url': this.documentUrl + this.$route.query.filePath + this.$route.query.fileName
+            'key': this.$route.query.key,
+            '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,
-          url: this.documentUrl + this.$route.query.filePath + this.$route.query.fileName,
+          title: 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>