feat: 新增解析XML-P

components.d.ts

@@ -7,19 +7,14 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    NButton: typeof import('naive-ui')['NButton']
     NCard: typeof import('naive-ui')['NCard']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
-    NDataTable: typeof import('naive-ui')['NDataTable']
     NInput: typeof import('naive-ui')['NInput']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutContent: typeof import('naive-ui')['NLayoutContent']
     NLayoutFooter: typeof import('naive-ui')['NLayoutFooter']
     NLayoutHeader: typeof import('naive-ui')['NLayoutHeader']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
-    NResult: typeof import('naive-ui')['NResult']
-    NSpace: typeof import('naive-ui')['NSpace']
-    NSwitch: typeof import('naive-ui')['NSwitch']
     NTree: typeof import('naive-ui')['NTree']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

package-lock.json

@@ -13,6 +13,7 @@
                 "@wangeditor/editor": "^5.1.23",
                 "@wangeditor/editor-for-vue": "^5.1.12",
                 "dayjs": "^1.11.11",
+                "js-md5": "^0.8.3",
                 "less": "^4.2.0",
                 "lodash": "^4.17.21",
                 "mitt": "^3.0.1",
@@ -20,6 +21,7 @@
                 "pinia": "^2.1.7",
                 "pinia-plugin-persistedstate": "^3.2.1",
                 "qs": "^6.12.1",
+                "uuidjs": "^5.1.0",
                 "vite-plugin-compression": "^0.5.1",
                 "vue": "^3.4.19",
                 "vue-router": "^4.3.0"
@@ -2655,6 +2657,12 @@
                 "jiti": "bin/jiti.js"
             }
         },
+        "node_modules/js-md5": {
+            "version": "0.8.3",
+            "resolved": "https://registry.npmjs.org/js-md5/-/js-md5-0.8.3.tgz",
+            "integrity": "sha512-qR0HB5uP6wCuRMrWPTrkMaev7MJZwJuuw4fnwAzRgP4J4/F8RwtodOKpGp4XpqsLBFzzgqIO42efFAyz2Et6KQ==",
+            "license": "MIT"
+        },
         "node_modules/js-tokens": {
             "version": "4.0.0",
             "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -4314,6 +4322,15 @@
             "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
             "dev": true
         },
+        "node_modules/uuidjs": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/uuidjs/-/uuidjs-5.1.0.tgz",
+            "integrity": "sha512-HAQPtUkr7t5Ud3uCwRcqtBRNagu/2aerrrBQE6PzgSluGijvFF75UaOq22Xw545GGviRjSLhc4c8CaSMI5h4Ng==",
+            "license": "Apache-2.0",
+            "bin": {
+                "uuidjs": "dist/cli.js"
+            }
+        },
         "node_modules/vdirs": {
             "version": "0.1.8",
             "resolved": "https://registry.npmmirror.com/vdirs/-/vdirs-0.1.8.tgz",

package.json

@@ -16,6 +16,7 @@
         "@wangeditor/editor": "^5.1.23",
         "@wangeditor/editor-for-vue": "^5.1.12",
         "dayjs": "^1.11.11",
+        "js-md5": "^0.8.3",
         "less": "^4.2.0",
         "lodash": "^4.17.21",
         "mitt": "^3.0.1",
@@ -23,6 +24,7 @@
         "pinia": "^2.1.7",
         "pinia-plugin-persistedstate": "^3.2.1",
         "qs": "^6.12.1",
+        "uuidjs": "^5.1.0",
         "vite-plugin-compression": "^0.5.1",
         "vue": "^3.4.19",
         "vue-router": "^4.3.0"

src/lib/XMLProcessor/src/core/Processing.ts

+import {TreeRenderResult} from '@/lib/XMLProcessor/src/typing'
+import {UUID} from 'uuidjs'
+
+export class Processing {
+    private domParser: DOMParser
+
+    constructor() {
+        this.domParser = new DOMParser()
+    }
+
+    processXML(xmlContent: string, handledNode: string[]):{
+        treeData: TreeRenderResult[], xmlDOM: Document
+    } {
+        const parsedTree = this.domParser.parseFromString(xmlContent, 'text/xml')
+        let rootElement = parsedTree.documentElement
+        return {
+            treeData: this.innerHandle(rootElement, handledNode),
+            xmlDOM: parsedTree
+        }
+    }
+
+    private innerHandle(domNode: Element, handledNode: string[]): TreeRenderResult[] {
+        let treeData: TreeRenderResult[] = [];
+        // 必须添加根节点内容
+        let targetKey = UUID.generate()
+        let treeItem: TreeRenderResult = {
+            key: targetKey,
+            label: domNode.nodeName,
+            children: [],
+            index: 0,
+            chained: [0]
+        }
+        domNode.setAttribute('data-key', targetKey);
+        treeItem.children = this.innerGroupHandle(domNode.children, handledNode, [0])
+        treeData.push(treeItem)
+
+        return treeData
+    }
+
+    private innerGroupHandle(nodeSet: HTMLCollection, handledNode: string[], startChained: number[]) {
+        let targetResult: TreeRenderResult[] = []
+        let realIndex = -1;
+        for (let i = 0; i < nodeSet.length; i++) {
+            const node = nodeSet[i] as Element;
+            if (!handledNode.includes(node.nodeName)) {
+                if (node.children.length) {
+                    targetResult.push(...this.innerGroupHandle(node.children, handledNode,startChained))
+                }
+                continue
+            }
+            realIndex++;
+            let targetKey = UUID.generate()
+            let treeItem: TreeRenderResult = {
+                key: targetKey,
+                label: node.nodeName,
+                index: realIndex,
+                chained: [...startChained, realIndex]
+            }
+            if (treeItem.label === 'CEP') {
+                console.log('the res here', treeItem)
+            }
+            node.setAttribute('data-key', targetKey);
+            if (node.children.length > 0) {
+                treeItem.children = this.innerGroupHandle(node.children, handledNode, [...startChained, realIndex])
+            }
+            targetResult.push(treeItem)
+        }
+        return targetResult
+    }
+}
\ No newline at end of file

src/lib/XMLProcessor/src/index.ts

+import {Processing} from '@/lib/XMLProcessor/src/core/Processing.ts'
+import {Plugin} from 'vue'
+
+export const XMLProcessing: Plugin = function(app) {
+    const p = new Processing()
+    app.provide('xmlProcessing', p);
+}
+
+export function useXMLProcessing(): Processing {
+    return <Processing>inject('xmlProcessing')
+}
\ No newline at end of file

src/lib/XMLProcessor/src/typing/index.d.ts

+export type TreeRenderResult = {
+    key: string,
+    label: string,
+    children?: TreeRenderResult[],
+    hash?: string,
+    index: number,
+    chained: number[]
+}
\ No newline at end of file

src/main.ts

@@ -3,9 +3,11 @@ import App from './App.vue'
 import router from './router'
 import { setupPinia } from './store'
 import './assets/css/index.less'
+import {XMLProcessing} from '@/lib/XMLProcessor/src'
 
 const app = createApp(App)
 app.use(router)
+app.use(XMLProcessing)
 //引入仓库
 setupPinia(app)
 app.mount('#app')

src/views/editor/components/ContentTree.vue

@@ -11,4 +11,34 @@
 
 <script setup lang="ts">
 import { searchKey, treeData } from '../constants'
+import {useXMLProcessing} from '@/lib/XMLProcessor/src'
+import FileXML from "@/assets/file/CES-QEC-V250-A.xml?raw"
+
+const xmlProcessing = useXMLProcessing()
+const nodeSet = [
+    "JOBCARD",
+    "CEP",
+    "TITLE",
+    "WARNING",
+    "TFMATR",
+    "PRETOPIC",
+    "PARA",
+    "LIST1",
+    "L1ITEM",
+    "TABLE",
+    "TOPIC",
+    "SUBTASK",
+    "NOTE",
+    "LIST2",
+    "L2ITEM",
+    "LIST3",
+    "L3ITEM",
+    "LIST4",
+    "L4ITEM",
+    "STEP",
+    "RECORD-LINE"
+]
+const res = xmlProcessing.processXML(FileXML, nodeSet)
+treeData.value = res.treeData
+console.log('all-node', res.xmlDOM, res.treeData, xmlProcessing)
 </script>

src/views/editor/constants/index.ts

@@ -2,52 +2,7 @@ import type { TreeOption } from 'naive-ui'
 
 // 菜单相关
 export const searchKey = ref('')
-export const treeData: TreeOption[] = [
-    {
-        label: '0',
-        key: '0',
-        children: [
-            {
-                label: '0-0',
-                key: '0-0',
-                children: [
-                    { label: '0-0-0', key: '0-0-0' },
-                    { label: '0-0-1', key: '0-0-1' }
-                ]
-            },
-            {
-                label: '0-1',
-                key: '0-1',
-                children: [
-                    { label: '0-1-0', key: '0-1-0' },
-                    { label: '0-1-1', key: '0-1-1' }
-                ]
-            }
-        ]
-    },
-    {
-        label: '1',
-        key: '1',
-        children: [
-            {
-                label: '1-0',
-                key: '1-0',
-                children: [
-                    { label: '1-0-0', key: '1-0-0' },
-                    { label: '1-0-1', key: '1-0-1' }
-                ]
-            },
-            {
-                label: '1-1',
-                key: '1-1',
-                children: [
-                    { label: '1-1-0', key: '1-1-0' },
-                    { label: '1-1-1', key: '1-1-1' }
-                ]
-            }
-        ]
-    }
-]
+export const treeData: Ref<TreeOption[]> = ref([])
 //编辑器相关
 export const editorRef = ref()
 export const formData = reactive({