feat: 对比调整

src/views/editor/components/Compare.vue

@@ -11,14 +11,14 @@
             <div class="choose-row bg-progressRailColor" ref="chooseRowRef"></div>
             <GlobalEditor
                 ref="compareLeftRef"
-                v-model="compareLeftData"
+                v-model="compareData.xmlContentOld"
                 editorId="compareLeft"
                 :editorConfig="{ readOnly: true }"
                 @handleScrollTop="handleScrollTopLeft"
             />
             <GlobalEditor
                 ref="compareRightRef"
-                v-model="compareRightData"
+                v-model="compareData.xmlContentNew"
                 editorId="compareRight"
                 :editorConfig="{ readOnly: true }"
                 @handleScrollTop="handleScrollTopRight"
@@ -28,15 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-    showCompare,
-    compareLeftRef,
-    compareRightRef,
-    compareLeftData,
-    compareRightData,
-    compareContainerRef,
-    chooseRowRef
-} from '../constants/compare'
+import { showCompare, compareLeftRef, compareRightRef, compareContainerRef, chooseRowRef, compareData } from '../constants/compare'
 import { handleScrollTopLeft, handleScrollTopRight } from '../functions/compare'
 </script>
 <style lang="less" scoped>

src/views/editor/constants/compare.ts

+import { NewTreeModification, OldTreeModification, TreeRenderResult } from '@/lib/XMLProcessor/src/typing'
+
 export const showCompare = ref(false)
 export const compareLeftRef = ref()
 export const compareRightRef = ref()
-export const compareLeftData = ref('')
-export const compareRightData = ref('')
 export const compareContainerRef = ref()
 export const chooseRowRef = ref()
+export const compareData = reactive<{
+    dataForNew: NewTreeModification
+    dataForOld: OldTreeModification
+    domOld: Document
+    domNew: Document
+    treeOld: TreeRenderResult[]
+    treeNew: TreeRenderResult[]
+    xmlContentOld: string
+    xmlContentNew: string
+}>({
+    dataForNew: { Added: [] },
+    dataForOld: { Deleted: [] },
+    domOld: null as any,
+    domNew: null as any,
+    treeOld: [],
+    treeNew: [],
+    xmlContentOld: '',
+    xmlContentNew: ''
+})

src/views/editor/functions/compare.ts

-import { NewTreeModification, OldTreeModification, TreeRenderResult } from '@/lib/XMLProcessor/src/typing'
-import { chooseRowRef, compareContainerRef, compareLeftRef, compareRightRef, showCompare } from '../constants/compare'
+import { TreeRenderResult } from '@/lib/XMLProcessor/src/typing'
+import { chooseRowRef, compareContainerRef, compareData, compareLeftRef, compareRightRef, showCompare } from '../constants/compare'
 import { uniqBy } from 'lodash'
 
 export const handleClickDom = (event: any) => {
@@ -22,61 +22,65 @@ export const handleScrollTopRight = (event: Event) => {
     compareLeftRef.value?.handleScrollTop(scrollTop)
     chooseRowRef.value.style.height = '0px'
 }
-export const handleLeftDifferent = (dataForOld: OldTreeModification, treeNew: TreeRenderResult[]) => {
+export const handleLeftDifferent = () => {
     nextTick(() => {
         const containerLeft = compareLeftRef.value?.editorRef.getEditableContainer()
         const containerRight = compareRightRef.value?.editorRef.getEditableContainer()
-        //新增
-        uniqBy(dataForOld.Deleted, 'key').map((item: any) => {
+        const Added = compareData.dataForNew.Added.map((item) => compareNodeAllParent(compareData.treeNew, item.key))
+        uniqBy(compareData.dataForOld.Deleted, 'key').map((item: any) => {
+            debugger
+            const allParent = compareNodeAllParent(compareData.treeOld, item.key)
             const node = containerLeft!.querySelector(`[data-key="${item.key}"]`)
-            //处理左边
-            node.classList.add('bg-errorColorSuppl')
-            //处理右边
             const parentPath = item.chained.slice(0, item.chained.length - 1)
             const index = item.chained[item.chained.length - 1]
-            const parentData = findNodeByChained(treeNew, parentPath)
+            const parentData = findNodeByChained(compareData.treeNew, parentPath)
             const parentNode = containerRight!.querySelector(`[data-key="${parentData?.key}"]`)
-            // 创建一个新节点
-            const newDiv = document.createElement('div')
-            newDiv.style.height = `${node.offsetHeight}px`
-            newDiv.classList.add('bg-dividerColor')
-            parentNode && parentNode.insertBefore(newDiv, parentNode.childNodes[index])
-        })
+            if (Added.some((item) => JSON.stringify(item) === JSON.stringify(allParent))) {
                 //修改
-        dataForOld.Changed.map((item) => {
                 const node = containerLeft!.querySelector(`[data-key="${item.key}"]`)
                 if (node.childNodes.length == 1 && node.childNodes[0].nodeName == 'SPAN') {
                     node.classList.add('bg-warningColorSuppl')
                 }
+            } else {
+                //处理左边
+                node.classList.add('bg-errorColorSuppl')
+                //处理右边
+                const newDiv = document.createElement('div')
+                newDiv.style.height = `${node.offsetHeight}px`
+                newDiv.classList.add('bg-dividerColor')
+                parentNode && parentNode.insertBefore(newDiv, parentNode.childNodes[index])
+            }
         })
     })
 }
-export const handleRightDifferent = (dataForNew: NewTreeModification, treeOld: TreeRenderResult[]) => {
+export const handleRightDifferent = () => {
     nextTick(() => {
         const containerLeft = compareLeftRef.value?.editorRef.getEditableContainer()
         const containerRight = compareRightRef.value?.editorRef.getEditableContainer()
-        //新增
-        uniqBy(dataForNew.Added, 'key').map((item: any) => {
+        const Deleted = compareData.dataForOld.Deleted.map((item) => compareNodeAllParent(compareData.treeOld, item.key))
+        uniqBy(compareData.dataForNew.Added, 'key').map((item) => {
+            const allParent = compareNodeAllParent(compareData.treeNew, item.key)
             const node = containerRight!.querySelector(`[data-key="${item.key}"]`)
-            //处理右边
-            node.classList.add('bg-errorColorSuppl')
-            //处理左边
             const parentPath = item.chained.slice(0, item.chained.length - 1)
             const index = item.chained[item.chained.length - 1]
-            const parentData = findNodeByChained(treeOld, parentPath)
+            const parentData = findNodeByChained(compareData.treeOld, parentPath)
             const parentNode = containerLeft!.querySelector(`[data-key="${parentData?.key}"]`)
-            // 创建一个新节点
-            const newDiv = document.createElement('div')
-            newDiv.style.height = `${node.offsetHeight}px`
-            newDiv.classList.add('bg-dividerColor')
-            parentNode && parentNode.insertBefore(newDiv, parentNode.childNodes[index])
-        })
+            if (Deleted.some((item) => JSON.stringify(item) === JSON.stringify(allParent))) {
                 //修改
-        dataForNew.Changed.map((item: any) => {
                 const node = containerRight!.querySelector(`[data-key="${item.key}"]`)
                 if (node.childNodes.length == 1 && node.childNodes[0].nodeName == 'SPAN') {
                     node.classList.add('bg-warningColorSuppl')
                 }
+            } else {
+                //新增
+                //处理右边
+                node.classList.add('bg-errorColorSuppl')
+                //处理左边
+                const newDiv = document.createElement('div')
+                newDiv.style.height = `${node.offsetHeight}px`
+                newDiv.classList.add('bg-dividerColor')
+                parentNode && parentNode.insertBefore(newDiv, parentNode.childNodes[index])
+            }
         })
     })
 }
@@ -110,3 +114,21 @@ export const findNodeByChained = (data: TreeRenderResult[], targetChained: numbe
     }
     return null // 没有找到目标节点
 }
+//根据节点的key获取所有父节点的集合
+export const compareNodeAllParent = (root: TreeRenderResult[], key: string) => {
+    function traverse(node: TreeRenderResult, currentPath: string[]): string[] | null {
+        currentPath.push(node.label)
+        if (node.key === key) {
+            return [...currentPath]
+        }
+        if (node.children) {
+            for (const child of node.children) {
+                const result = traverse(child, [...currentPath])
+                if (result) return result
+            }
+        }
+        return null
+    }
+    const result = traverse(root[0], [])
+    return result || []
+}

src/views/editor/functions/index.ts

@@ -3,7 +3,7 @@ import { IDomEditor } from '@wangeditor/editor'
 import { treeData, treeRef, treeSelectedKeys } from '../constants/tree'
 import { dropdownConfig, editorRef, editorHtml } from '../constants'
 import { getUUID } from '@/utils'
-import { compareLeftData, compareRightData, showCompare } from '../constants/compare'
+import { compareData, showCompare } from '../constants/compare'
 import TextA from '@/assets/file/CES-QEC-V250-A.xml?raw'
 import TextB from '@/assets/file/Trans-Convert.xml?raw'
 import { nodeSet, contentHoldNode } from '@/configs/node.config'
@@ -102,10 +102,8 @@ export const compareXml = () => {
     const xmlProcessing = useXMLProcessing()
     const res = xmlProcessing.dualCompareFromString(TextA, TextB, nodeSet, contentHoldNode)
     console.log(res)
-    //渲染数据
-    compareLeftData.value = res.xmlContentOld
-    compareRightData.value = res.xmlContentNew
+    Object.assign(compareData, res)
     //比较数据
-    handleLeftDifferent(res.dataForOld, res.treeNew)
-    handleRightDifferent(res.dataForNew, res.treeOld)
+    handleLeftDifferent()
+    handleRightDifferent()
 }