xml转json

yudao-ui-admin-vue3/package.json

@@ -43,7 +43,7 @@
     "echarts-wordcloud": "^2.1.0",
     "element-plus": "2.2.28",
     "fast-xml-parser": "^4.0.13",
-    "highlight.js": "^9.18.5",
+    "highlight.js": "^11.7.0",
     "intro.js": "^6.0.0",
     "jsencrypt": "^3.3.1",
     "lodash-es": "^4.17.21",
@@ -53,6 +53,7 @@
     "pinia": "^2.0.29",
     "qrcode": "^1.5.1",
     "qs": "^6.11.0",
+    "steady-xml": "^0.1.0",
     "url": "^0.11.0",
     "vue": "3.2.45",
     "vue-i18n": "9.2.2",

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue

@@ -188,22 +188,14 @@
       <!-- <div id="js-properties-panel" class="panel"></div> -->
       <!-- <div class="my-process-designer__canvas" ref="bpmn-canvas"></div> -->
     </div>
-    <XModal
+    <XModal title="预览" width="80%" height="90%" v-model="previewModelVisible" destroy-on-close>
-      title="预览"
+      <!-- append-to-body -->
-      width="80%"
+      <pre v-highlight>
-      height="90%"
+            <code class="hljs">
-      v-model="previewModelVisible"
-      append-to-body
-      destroy-on-close
-    >
-      <div v-highlight>
-        <pre>
-            <code>
             <!-- 高亮代码块 -->
             {{ previewResult }}
             </code>
         </pre>
-      </div>
       <!-- <pre>
         <code class="hljs" v-html="highlightedCode(previewType, previewResult)"></code>
       </pre> -->
@@ -241,7 +233,7 @@ import flowableModdleExtension from './plugins/extension-moddle/flowable'
 // 引入json转换与高亮
 // import xml2js from 'xml-js'
 import xml2js from 'fast-xml-parser'
-// import { XmlNode, XmlNodeType, parseXmlString } from 'steady-xml'
+import { XmlNode, XmlNodeType, parseXmlString } from 'steady-xml'
 // 代码高亮插件
 // import hljs from 'highlight.js/lib/highlight'
 // import 'highlight.js/styles/github-gist.css'
@@ -638,18 +630,21 @@ const previewProcessJson = () => {
 
     // const rootNode = parseXmlString(xml)
     // console.log(rootNode, 'rootNoderootNode')
-    // const rootNodes = new XmlNode(XmlNodeType.Root)
+    const rootNodes = new XmlNode(XmlNodeType.Root, parseXmlString(xml))
-    // rootNodes.toJsObject()
+    // console.log(rootNodes, 'rootNodesrootNodesrootNodes')
-    // console.log(JSON.stringify(rootNodes), ';;;;;;;;;;;;;;;')
+    // console.log(rootNodes.parent.toJsObject(), 'rootNodes.toJSON()')
+    // console.log(JSON.stringify(rootNodes.parent.toJsObject()), 'rootNodes.toJSON()')
+    // console.log(JSON.stringify(rootNodes.parent.toJSON()), 'rootNodes.toJSON()')
 
     const parser = new xml2js.XMLParser()
     let jObj = parser.parse(xml)
-    // console.log(jObj, 'jObjjObjjObjjObjjObj')
+    console.log(jObj, 'jObjjObjjObjjObjjObj')
     // const builder = new xml2js.XMLBuilder(xml)
     // const xmlContent = builder
     // console.log(xmlContent, 'xmlContent')
     // console.log(xml2js, 'convertconvertconvert')
-    previewResult.value = jObj
+    previewResult.value = rootNodes.parent.toJSON()
+    // previewResult.value = jObj
     // previewResult.value = convert.xml2json(xml,  {explicitArray : false},{ spaces: 2 })
     previewType.value = 'json'
     previewModelVisible.value = true

yudao-ui-admin-vue3/src/main.ts

@@ -50,7 +50,7 @@ import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
 import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
 
 import hljs from 'highlight.js' //导入代码高亮文件
-import 'highlight.js/styles/github-gist.css' //导入代码高亮样式
+import 'highlight.js/styles/github.css' //导入代码高亮样式  新版
 
 // 本地开发模式 全局引入 element-plus 样式，加快第一次进入速度
 if (isDevMode()) {
@@ -66,7 +66,7 @@ const setupAll = async () => {
   app.directive('highlight', function (el) {
     const blocks = el.querySelectorAll('code')
     blocks.forEach((block: any) => {
-      hljs.highlightBlock(block)
+      hljs.highlightElement(block)
     })
   })