✨新增思维导图插件

package.json

@@ -28,6 +28,7 @@
     "jquery.fancytree": "^2.35.0",
     "js-cookie": "2.2.0",
     "jshint": "^2.11.1",
+    "jspdf": "^2.5.1",
     "less-loader": "^6.1.0",
     "lib-flexible": "^0.3.2",
     "monaco-editor": "^0.23.0",
@@ -81,6 +82,7 @@
     "serve-static": "^1.13.2",
     "svg-sprite-loader": "4.1.3",
     "svgo": "1.2.2",
+    "vue-kityminder-ggg": "^1.3.10",
     "vue-template-compiler": "^2.6.13"
   },
   "engines": {

src/api/file-api.js

@@ -279,9 +279,9 @@ export default {
     })
   },
   // 根据id获取文件信息
-  getPublicFileInfoById: function(id) {
+  getPublicFileInfoById: function(fileId, shareId) {
     return request({
-      url: `/public/file_info/${id}`,
+      url: `/public/file_info/${fileId}/${shareId}`,
       method: 'get'
     })
   },

src/components/Icon/Icon.vue

@@ -5,7 +5,7 @@
 
 import { Icon } from 'ant-design-vue'
 const IconFont = Icon.createFromIconfontCN({
-  scriptUrl: document.location.protocol + '/resource/font_2024484_9qbzcip6x9m.js'
+  scriptUrl: document.location.protocol + '/resource/font_2024484_b4h46y1d4ho.js'
 })
 
 // 把此段代码贴到iconfont项目页面的控制台中, 以获取图标列表

src/components/ShowFile/ShowFile.vue

@@ -1839,6 +1839,7 @@ export default {
               this.textPreviewVisible = true
               break
             case 'drawio':
+            case 'mind':
             case 'docx':
             case 'xlsx':
             case 'pptx':
@@ -2565,6 +2566,10 @@ export default {
           this.newCreateFileDialogTitle = "新建流程图"
           this.createNewFile('drawio')
           break
+        case 'createMinderFile':
+          this.newCreateFileDialogTitle = "新建思维导图"
+          this.createNewFile('mind')
+          break
         case 'createWordFile':
           this.newCreateFileDialogTitle = "新建Word文档"
           this.createNewFile('docx')
@@ -3159,7 +3164,7 @@ export default {
           this.openCompressionVisible = true
           return
         }
-        if (row.contentType.indexOf('office') > -1 || ['pdf','csv','drawio'].includes(row.suffix)) {
+        if (row.contentType.indexOf('office') > -1 || ['pdf','csv','drawio','mind'].includes(row.suffix)) {
           // office文件
           this.officePreviewVisible = true
           this.officePreviewRow = row

src/components/office/Drawio.vue

@@ -1,63 +1,18 @@
 <template>
   <div class="drawio-content" :style="{'top': readOnly ? '0': '2.5rem'}">
     <div class="drawio-title">
-      <span class="drawio-title-name" :style="{'color': saved ? '': '#ff8200'}">{{title}}</span>
-      <span  class="drawio-save"><el-button v-if="!saved" @click="save" size="mini" :loading="saveBtnUpdating">保存</el-button></span>
+      <div class="drawio-title-name" :style="{'color': saved ? '': '#ff8200'}">{{title}}</div>
+      <div  class="drawio-save"><el-button v-if="!saved" @click="save" size="mini" :loading="saveBtnUpdating">保存</el-button></div>
     </div>
     <iframe ref="myFlow" class="drawio-iframe" :src="url" :title="file.name"></iframe>
   </div>
 </template>
 
-<style lang="scss" scoped>
-.drawio-content {
-  z-index: 999;
-  position: absolute;
-  top: 2.5rem;
-  left: 0;
-  width: 100%;
-  height: 100%;
-
-  .drawio-title {
-    text-align: center;
-    background-color: #fbfbfb;
-    z-index: 2001;
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 10px;
-
-    .drawio-title-name {
-      line-height: 40px;
-    }
-
-    .drawio-save {
-      float: right;
-      margin-right: 30px;
-      line-height: 40px;
-    }
-  }
-
-  .drawio-iframe {
-    z-index: 1999;
-    position: absolute;
-    top: 10px;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: 0 0;
-    border: 0;
-    float: none;
-    margin: -1px 0 0;
-    max-width: none;
-    outline: 0;
-    padding: 0;
-  }
-}
-</style>
 <script>
 
 import api from '@/api/file-api'
 import txtApi from "@/api/markdown-api"
+import Bus from "@/assets/js/bus";
 
 export default {
   name: "Drawio",
@@ -98,11 +53,15 @@ export default {
     this.url = $J.apiUrl(`../drawio/webapp/${query}`)
   },
   mounted() {
+    Bus.$on('previewSaveAndClose', this.saveAndClose)
     window.addEventListener('message', this.handleMessage)
   },
   beforeDestroy() {
     window.removeEventListener('message', this.handleMessage)
   },
+  destroyed() {
+    Bus.$off('previewSaveAndClose')
+  },
   watch: {
     'file.id': {
       handler(id)  {
@@ -134,8 +93,14 @@ export default {
       deep: true,
     },
   },
-  computed: {},
   methods: {
+    /**
+     * 保存并关闭
+     */
+    saveAndClose() {
+      this.save()
+      this.$emit('onClose')
+    },
     updateContent() {
       this.$refs.myFlow.contentWindow.postMessage(JSON.stringify({
         action: "load",
@@ -144,10 +109,9 @@ export default {
       }), "*")
     },
     save() {
-      this.saved = true
-      this.title = this.file.name
-      this.update(this.xml)
-      this.$emit('onEdit', this.saved)
+      if (!this.saved) {
+        this.update(this.xml)
+      }
     },
     update(value) {
       this.saveBtnUpdating = true
@@ -158,11 +122,9 @@ export default {
         contentText: value
       }).then(() => {
         this.saveBtnUpdating = false
-        this.$message({
-          message: "保存成功",
-          type: 'success',
-          duration : 1000
-        })
+        this.saved = true
+        this.title = this.file.name
+        this.$emit('onEdit', this.saved)
       }).catch(() => {
         this.saveBtnUpdating = false
       })
@@ -204,3 +166,51 @@ export default {
   },
 }
 </script>
+
+<style lang="scss" scoped>
+.drawio-content {
+  z-index: 999;
+  position: absolute;
+  top: 2.5rem;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  .drawio-title {
+    text-align: center;
+    background-color: #fbfbfb;
+    z-index: 2001;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 10px;
+
+    .drawio-title-name {
+      line-height: 40px;
+    }
+
+    .drawio-save {
+      float: right;
+      margin-top: -40px;
+      margin-right: 30px;
+      line-height: 40px;
+    }
+  }
+
+  .drawio-iframe {
+    z-index: 1999;
+    position: absolute;
+    top: 10px;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: 0 0;
+    border: 0;
+    float: none;
+    margin: -1px 0 0;
+    max-width: none;
+    outline: 0;
+    padding: 0;
+  }
+}
+</style>

src/components/office/OnlyOfficeEditor.vue

@@ -29,6 +29,10 @@ export default {
       type: String,
       default: ''
     },
+    shareId: {
+      type: String,
+      default: ''
+    },
     file: {
       type: Object,
       default: function () {
@@ -77,7 +81,7 @@ export default {
               this.loadFile()
             })
           } else {
-            api.getPublicFileInfoById(this.file.id).then(res => {
+            api.getPublicFileInfoById(this.file.id, this.shareId).then(res => {
               this.file = res.data
               this.loadFile()
             })
@@ -92,6 +96,9 @@ export default {
       this.requestClose()
     })
   },
+  destroyed() {
+    Bus.$off('previewSaveAndClose')
+  },
   methods: {
     getType(type) {
       switch (type) {

src/components/preview/OfficePreview.vue

@@ -17,8 +17,9 @@
           </div>
           <div class="wrapper">
             <pdf-preview v-if="fileType === 'pdf'" :file="file" :shareId="shareId" :file-url="fileUrl" @onReady="onReady"></pdf-preview>
-            <drawio v-else-if="fileType === 'drawio'" v-show="fileReday" :file="file" :shareId="shareId" :read-only="readOnly" @onEdit="onEdit" @onReady="onReady"></drawio>
-            <only-office-editor ref="officeEditor" v-else :file="file" :file-url="fileUrl" :read-only="readOnly" @onEdit="onEdit" @manualSave="manualSave" @onClose="close" @onReady="onReady"></only-office-editor>
+            <drawio v-else-if="fileType === 'drawio'" v-show="fileReday" :file="file" :shareId="shareId" :read-only="readOnly" @onEdit="onEdit" @onReady="onReady" @onClose="close"></drawio>
+            <my-mind-editor v-else-if="fileType === 'mind'" :file="file" :shareId="shareId" :read-only="readOnly" @onEdit="onEdit" @onReady="onReady" @onClose="close"></my-mind-editor>
+            <only-office-editor ref="officeEditor" v-else :file="file" :file-url="fileUrl" :shareId="shareId" :read-only="readOnly" @onEdit="onEdit" @manualSave="manualSave" @onClose="close" @onReady="onReady"></only-office-editor>
           </div>
         </div>
     </div>
@@ -33,10 +34,11 @@ import Bus from "@/assets/js/bus";
 import fileConfig from "@/utils/file-config";
 import PdfPreview from "@/components/office/PdfPreview";
 import Drawio from "@/components/office/Drawio";
+import MyMindEditor from "@/components/Minder/minder"
 
 export default {
   name: 'OfficePreview',
-  components: {Drawio, PdfPreview, MessageDialog, OnlyOfficeEditor},
+  components: {Drawio, PdfPreview, MessageDialog, OnlyOfficeEditor, MyMindEditor},
   props: {
     id: {
       type: String,
@@ -79,15 +81,10 @@ export default {
     },
   },
   mounted() {
-    let that = this;
-    this.$nextTick(function () {
-      document.addEventListener('keyup', function (e) {
-        // 监听ESC键
-        if (e.code === 'Escape') {
-          that.beforeClose()
-        }
-      }, false)
-    })
+    document.addEventListener('keyup', this.escape)
+  },
+  destroyed() {
+    document.removeEventListener('keyup', this.escape)
   },
   watch: {
     status: function(visible){
@@ -96,7 +93,6 @@ export default {
         this.$nextTick(() => {
           this.previewDocument = document.querySelector('.preview-block')
         })
-
         this.checkReadOnly(this.file.userId)
         // 6秒后还没加载出来视为加载失败
         let that = this
@@ -109,12 +105,23 @@ export default {
     }
   },
   methods: {
+    /**
+     * 按esc键
+     */
+    escape(event) {
+      // 监听ESC键
+      if (event.code === 'Escape') {
+        this.beforeClose()
+      }
+    },
     getType(suffix) {
       switch (suffix) {
         case 'drawio':
           return 'drawio'
         case 'pdf':
           return 'pdf'
+        case 'mind':
+          return 'mind'
         default:
           return 'office'
       }