✨新增drawio流程图插件

2022-08-16 18:00:08 +08:00 · 2022-08-16 18:00:08 +08:00 · d24b9a5c09
commit d24b9a5c09
parent 853593c0d6
6 changed files with 218 additions and 3 deletions
--- a/src/components/ShowFile/ShowFile.vue
+++ b/src/components/ShowFile/ShowFile.vue
@ -3156,7 +3156,7 @@ export default {
          this.openCompressionVisible = true
          return
        }
-        if (row.contentType.indexOf('office') > -1 || row.suffix === 'csv' || row.suffix === 'pdf') {
+        if (row.contentType.indexOf('office') > -1 || ['pdf','csv','drawio'].includes(row.suffix)) {
          // office文件
          this.officePreviewVisible = true
          this.officePreviewRow = row
--- a/src/components/office/Drawio.vue
+++ b/src/components/office/Drawio.vue
@ -0,0 +1,199 @@
+<template>
+  <div class="drawio-content">
+    <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="updating">保存</el-button></span>
+    </div>
+    <iframe ref="myFlow" class="drawio-iframe" :src="url" :title="file.name"></iframe>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.drawio-content {
+  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"
+
+export default {
+  name: "Drawio",
+  props: {
+    file: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    },
+    shareId: {
+      type: String,
+      default: ''
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    },
+  },
+  data() {
+    return {
+      url: null,
+      bakData: '',
+      xml: '',
+      title: this.file.name,
+      saved: true
+    }
+  },
+  created() {
+    let language = 'zh'
+    let lightbox = this.readOnly ? 1 : 0
+    let chrome = this.readOnly ? 0 : 1
+    let theme = 'kennedy'
+    let title = this.file.name ? encodeURIComponent(this.file.name) : ''
+    let query = `?title=${title}&chrome=${chrome}&lightbox=${lightbox}&ui=${theme}&lang=${language}&offline=1&pwa=0&embed=1&noLangIcon=1&noExitBtn=1&noSaveBtn=1&saveAndExit=0&spin=1&proto=json`
+    this.url = $J.apiUrl(`../drawio/webapp/${query}`)
+  },
+  mounted() {
+    window.addEventListener('message', this.handleMessage)
+  },
+  beforeDestroy() {
+    window.removeEventListener('message', this.handleMessage)
+  },
+  watch: {
+    'file.id': {
+      handler(id)  {
+        if (!id) {
+          return
+        }
+        this.xml = ''
+        api.previewText({
+          shareId: this.shareId,
+          fileId: this.file.id,
+          id: this.file.id,
+          path: encodeURI(this.file.path),
+          username: this.$store.state.user.name
+        }).then((res) => {
+          this.xml = res.data.contentText
+          console.log(this.xml)
+          if (this.bakData === res.data.contentText) {
+            return
+          }
+          this.bakData = res.data.contentText
+          this.updateContent()
+        })
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  computed: {},
+  methods: {
+    updateContent() {
+      this.$refs.myFlow.contentWindow.postMessage(JSON.stringify({
+        action: "load",
+        autosave: 1,
+        xml: this.bakData,
+      }), "*")
+    },
+    save() {
+      this.saved = true
+      this.title = this.file.name
+      this.update(this.xml)
+    },
+    update(value) {
+      this.updating = true
+      txtApi.editMarkdownByPath({
+        relativePath: encodeURI(this.file.path + this.file.name),
+        userId: this.$store.state.user.userId,
+        username: this.$store.state.user.name,
+        contentText: value
+      }).then(() => {
+        this.updating = false
+        this.$message({
+          message: "保存成功",
+          type: 'success',
+          duration : 1000
+        })
+      }).catch(() => {
+        this.updating = false
+      })
+    },
+    handleMessage(event) {
+      const editWindow = this.$refs.myFlow.contentWindow
+      if (event.source !== editWindow) {
+        return
+      }
+      const payload = $J.jsonParse(event.data)
+      console.log('handleMessage payload', payload.event, payload)
+      switch (payload.event) {
+        case "init":
+          this.$emit('onReady')
+          this.updateContent()
+          break
+        case "load":
+          if (this.xml.length < 1) {
+            editWindow.postMessage(JSON.stringify({
+              action: "template"
+            }), "*")
+          }
+          break
+
+        case "autosave":
+          this.bakData = payload.xml
+          this.xml = payload.xml
+          this.saved = false
+          this.title = `*${this.file.name}`
+          this.$emit('onEdit', this.saved)
+          break
+
+        case "save":
+          // save
+          this.save()
+          this.$emit('onEdit', this.saved)
+          break
+      }
+    }
+  },
+}
+</script>
--- a/src/components/preview/OfficePreview.vue
+++ b/src/components/preview/OfficePreview.vue
@ -16,7 +16,8 @@
            <svg-icon class="preview-close" icon-class="close"/>
          </div>
          <div class="wrapper">
-            <pdf-preview v-if="fileType === 'pdf'" :file="file" :file-url="fileUrl" @onReady="onReady"></pdf-preview>
+            <pdf-preview v-if="fileType === 'pdf'" :file="file" :shareId="shareId" :file-url="fileUrl" @onReady="onReady"></pdf-preview>
+            <drawio v-else-if="fileType === 'drawio'" :file="file" :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>
          </div>
        </div>
@ -31,10 +32,11 @@ import MessageDialog from "@/components/message/MessageDialog";
 import Bus from "@/assets/js/bus";
 import fileConfig from "@/utils/file-config";
 import PdfPreview from "@/components/office/PdfPreview";
+import Drawio from "@/components/office/Drawio";

 export default {
  name: 'OfficePreview',
-  components: {PdfPreview, MessageDialog, OnlyOfficeEditor},
+  components: {Drawio, PdfPreview, MessageDialog, OnlyOfficeEditor},
  props: {
    id: {
      type: String,
@ -93,6 +95,7 @@ export default {
        this.$nextTick(() => {
          this.previewDocument = document.querySelector('.preview-block')
        })
+
        this.checkReadOnly(this.file.userId)
        // 3秒后还没加载出来视为加载失败
        let that = this
@ -108,6 +111,8 @@ export default {
  methods: {
    getType(suffix) {
      switch (suffix) {
+        case 'drawio':
+          return 'drawio'
        case 'pdf':
          return 'pdf'
        default:
--- a/src/icons/svg/file-drawio.svg
+++ b/src/icons/svg/file-drawio.svg
@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated by Pixelmator Pro 2.4.5 -->
+<svg width="225" height="226" viewBox="0 0 225 226" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path id="path12-" fill="#f08705" stroke="none" d="M 225 216.350235 C 225 221.804459 220.54454 226 215.392929 226 L 9.607054 226 C 4.17698 226 -0 221.524734 -0 216.350235 L -0 9.64975 C -0 4.195541 4.455445 0 9.607054 0 L 215.392929 0 C 220.823013 0 225 4.47525 225 9.64975 Z"/>
+    <g id="g16-">
+        <path id="path14" fill="#df6c0c" stroke="none" d="M 223.827332 216.317963 C 223.827332 221.709686 219.414902 225.857147 214.313034 225.857147 L 77.252174 225.857147 L 32.852173 180.64975 L 60.429813 135.442383 L 142.335403 33.414749 L 223.551544 117.331795 Z"/>
+    </g>
+    <path id="path18-" fill="#ffffff" stroke="none" d="M 183.977631 131.285706 L 160.536636 131.285706 L 135.716766 88.981567 C 141.2323 87.87558 145.368942 82.898605 145.368942 77.092163 L 145.368942 45.156693 C 145.368942 38.382477 139.991302 32.990784 133.234787 32.990784 L 91.868324 32.990784 C 85.111801 32.990784 79.734161 38.382477 79.734161 45.156693 L 79.734161 77.092163 C 79.734161 83.036865 83.870804 87.87558 89.248444 88.981567 L 64.428574 131.423965 L 40.987579 131.423965 C 34.231056 131.423965 28.853416 136.815674 28.853416 143.589859 L 28.853416 175.525345 C 28.853416 182.29953 34.231056 187.691254 40.987579 187.691254 L 82.354034 187.691254 C 89.110558 187.691254 94.488205 182.29953 94.488205 175.525345 L 94.488205 143.589859 C 94.488205 136.815674 89.110558 131.423965 82.354034 131.423965 L 78.355278 131.423965 L 102.899384 89.396317 L 122.065842 89.396317 L 146.747818 131.423965 L 142.611176 131.423965 C 135.85466 131.423965 130.47702 136.815674 130.47702 143.589859 L 130.47702 175.525345 C 130.47702 182.29953 135.85466 187.691254 142.611176 187.691254 L 183.977631 187.691254 C 190.734177 187.691254 196.111801 182.29953 196.111801 175.525345 L 196.111801 143.589859 C 196.111801 136.815674 190.734177 131.285706 183.977631 131.285706 Z"/>
+</svg>
--- a/src/utils/file-type.js
+++ b/src/utils/file-type.js
@ -58,6 +58,7 @@ iconClass.set('docx','file-word')
 iconClass.set('docxf','file-docxf')
 iconClass.set('ppt','file-ppt')
 iconClass.set('pptx','file-ppt')
+iconClass.set('drawio','file-drawio')
 iconClass.set('csv','file-csv')
 iconClass.set('pdf','file-pdf')
 iconClass.set('zip','zip')
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@ -35,6 +35,7 @@ export default {
        { divider: true, operation: 'divider' },
        { label: '新建', operation: 'create' ,child: [
            { label: '文本', operation: 'createTextFile', iconClass: 'file-txt'},
+            { label: '流程图', operation: 'createDrawioFile', iconClass: 'file-drawio'},
            { label: 'Word', operation: 'createWordFile', iconClass: 'file-word'},
            { label: 'Excel', operation: 'createExcelFile', iconClass: 'file-excel'},
            { label: 'PPT', operation: 'createPPTFile', iconClass: 'file-ppt'},