feat(流程设计): 流程设计支持在线查看xml

3 years ago · 4fc2c78210
parent 45ff381b7b
commit 4fc2c78210
4 changed files with 45 additions and 73 deletions
--- a/ruoyi-ui/package.json
+++ b/ruoyi-ui/package.json
@ -45,7 +45,7 @@
    "file-saver": "2.0.4",
    "form-gen-parser": "^1.0.3",
    "fuse.js": "6.4.3",
-    "highlight.js": "9.18.5",
+    "highlight.js": "^9.18.5",
    "js-beautify": "1.13.0",
    "js-cookie": "2.2.1",
    "jsencrypt": "3.0.0-rc.1",
@ -53,6 +53,7 @@
    "quill": "1.3.7",
    "screenfull": "5.0.2",
    "sortablejs": "1.10.2",
+    "vkbeautify": "^0.99.3",
    "vue": "2.6.12",
    "vue-bpmn-modeler": "^1.2.0",
    "vue-count-to": "1.0.13",
--- a/ruoyi-ui/src/components/Process/index.vue
+++ b/ruoyi-ui/src/components/Process/index.vue
@ -29,7 +29,7 @@
            </el-tooltip>
          </div>
          <div>
-            <el-button size="mini" icon="el-icon-download" @click="showXML()">查看xml</el-button>
+            <el-button size="mini" icon="el-icon-view" @click="showXML">查看xml</el-button>
            <el-button size="mini" icon="el-icon-download" @click="saveXML(true)">下载xml</el-button>
            <el-button size="mini" icon="el-icon-picture" @click="saveImg('svg', true)">下载svg</el-button>
            <el-button size="mini" type="primary" @click="save">保存模型</el-button>
@ -45,9 +45,6 @@
        </el-aside>
      </el-container>
    </el-container>
-    <el-dialog :title="xmlTitle" :visible.sync="xmlOpen" width="50%" append-to-body>
-      <div v-html="xmlContent" />
-    </el-dialog>
  </div>
 </template>

@ -70,9 +67,6 @@ export default {
      type: String,
      default: ''
    },
-    xmlTitle: "",
-    xmlOpen: false,
-    xmlContent: "",
    users: {
      type: Array,
      default: () => []
@ -296,10 +290,7 @@ export default {
    async showXML() {
      try {
        const { xml } = await this.modeler.saveXML({ format: true })
-        this.xmlOpen = true;
-        this.xmlTitle = 'xml查看';
-        debugger
-        // this.xmlContent = this.parseXml(xml);
+        this.$emit('showXML',xml)
      } catch (err) {
        console.log(err)
      }
@ -338,50 +329,6 @@ export default {
      a.download = filename
      a.click()
      window.URL.revokeObjectURL(url)
-    },
-    parseXml(content) {
-      let xml_doc = null
-      try {
-        xml_doc = (new DOMParser()).parseFromString(content.replace(/[\n\r\s]/g, ''), 'text/xml')
-      } catch (e) {
-        return false
-      }
-      let flag = 0
-
-      function build_xml(index, list, element) {
-        let t = []
-        for (let i = 0; i < flag; i++) {
-          t.push('&nbsp;&nbsp;&nbsp;&nbsp;')
-        }
-        t = t.join('')
-        list.push(t + '&lt;<span class="code-key">' + element.nodeName + '</span>&gt;<br/>')
-        for (let i = 0; i < element.childNodes.length; i++) {
-          const nodeName = element.childNodes[i].nodeName
-          if (element.childNodes[i].childNodes.length === 0) {
-            const value_txt = ''
-            const item = t + '&nbsp;&nbsp;&nbsp;&nbsp;&lt;<span class="code-key">' + nodeName +
-              '</span>&gt;' + value_txt + '&lt;/<span class="code-key">' + nodeName + '</span>&gt;<br/>'
-            list.push(item)
-          } else if ((element.childNodes[i].childNodes.length === 1 && element.childNodes[i].childNodes[0].nodeValue != null)) {
-            const value = element.childNodes[i].childNodes[0].nodeValue
-            const value_color = !isNaN(Number(value)) ? 'code-number' : 'code-string'
-            const value_txt = '<span class="' + value_color + '">' + value + '</span>'
-            const item = t + '&nbsp;&nbsp;&nbsp;&nbsp;&lt;<span class="code-key">' + nodeName +
-              '</span>&gt;' + value_txt + '&lt;/<span class="code-key">' + nodeName + '</span>&gt;<br/>'
-            list.push(item)
-          } else {
-            flag++
-            build_xml(++index, list, element.childNodes[i])
-            flag--
-          }
-        }
-        list.push(t + '&lt;/<span class="code-key">' + element.nodeName + '</span>&gt;<BR/>')
-      }
-
-      const list = []
-      build_xml(0, list, xml_doc.documentElement)
-
-      return list.join('')
    }
  }
 }
@ -435,12 +382,6 @@ export default {
    min-height: 650px;
  }

-  .code-string{color:#993300;}
-  .code-number{color:#cc00cc;}
-  .code-boolean{color:#000033;}
-  .code-null{color:magenta;}
-  .code-key{color:#003377;font-weight:bold;}
-
  // .highlight.djs-shape .djs-visual > :nth-child(1) {
  //   fill: green !important;
  //   stroke: green !important;
--- a/ruoyi-ui/src/views/flowable/definition/model.vue
+++ b/ruoyi-ui/src/views/flowable/definition/model.vue
@ -8,22 +8,47 @@
      :categorys="categorys"
      :is-view="false"
      @save="save"
+      @showXML="showXML"
    />
+    <!--在线查看xml-->
+    <el-dialog :title="xmlTitle" :visible.sync="xmlOpen" width="60%" append-to-body>
+      <div>
+        <pre v-highlight>
+           <code class="xml">
+                {{xmlContent}}
+           </code>
+        </pre>
+      </div>
+    </el-dialog>
  </div>
 </template>
-
 <script>
 import { readXml, saveXml, userList } from "@/api/flowable/definition";
 import bpmnModeler from '@/components/Process/index'
-
+import vkbeautify from 'vkbeautify'
+import Hljs from 'highlight.js'
+import 'highlight.js/styles/atom-one-dark.css'
 export default {
  name: "Model",
  components: {
-    bpmnModeler
+    bpmnModeler,
+    vkbeautify
+  },
+  // 自定义指令
+  directives: {
+    highlight:(el) => {
+      let blocks = el.querySelectorAll('pre code');
+      blocks.forEach((block) => {
+        Hljs.highlightBlock(block)
+      })
+    }
  },
  data() {
    return {
      xml: "", // 后端查询到的xml
+      xmlOpen: false,
+      xmlTitle: '',
+      xmlContent: '',
      users: [
        { nickName: "#{initiator}", userId: "#{initiator}" },
        {nickName: "#{approval}", userId: "#{approval}"}
@ -64,12 +89,13 @@ export default {
        category: data.process.category,
        xml: data.xml
      }
-      saveXml(params).then(res => {
-        this.$message(res.msg)
-        // 关闭当前标签页并返回上个页面
-        this.$store.dispatch("tagsView/delView", this.$route);
-        this.$router.go(-1)
-      })
+      debugger
+      // saveXml(params).then(res => {
+      //   this.$message(res.msg)
+      //   // 关闭当前标签页并返回上个页面
+      //   this.$store.dispatch("tagsView/delView", this.$route);
+      //   this.$router.go(-1)
+      // })
    },
    /** 指定流程办理人员列表 */
    getUserList() {
@ -84,9 +110,13 @@ export default {
          obj.nickName = val.nickName;
          this.users.push(obj)
        })
-        debugger
      })
    },
+    showXML(data){
+      this.xmlTitle = 'xml查看';
+      this.xmlOpen = true;
+      this.xmlContent = vkbeautify.xml(data);
+    }
  },
 };
 </script>
--- a/ruoyi-ui/src/views/flowable/task/record/index.vue
+++ b/ruoyi-ui/src/views/flowable/task/record/index.vue
@ -7,7 +7,7 @@
              </div>

            <!--流程表单填写数据-->
-            <el-col :span="16" :offset="8" v-if="variableOpen">
+            <el-col :span="16" :offset="6" v-if="variableOpen">
              <div>
                <parser :key="new Date().getTime()" :form-conf="variablesData" />
              </div>