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

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",

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.$emit('showXML',xml)
-        this.xmlTitle = 'xml查看';
-        debugger
-        // this.xmlContent = this.parseXml(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;

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 => {
+      debugger
-        this.$message(res.msg)
+      // saveXml(params).then(res => {
-        // 关闭当前标签页并返回上个页面
+      //   this.$message(res.msg)
-        this.$store.dispatch("tagsView/delView", this.$route);
+      //   // 关闭当前标签页并返回上个页面
-        this.$router.go(-1)
+      //   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>

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>