Skip to content

V
vue3_onlineEditor
Commit 1838dc67 by pangchong
Options

feat: 对比调整

parent 2e72ee26
Showing with 88 additions and 57 deletions
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,60 +22,64 @@ 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])
})
//修改
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')
if (Added.some((item) => JSON.stringify(item) === JSON.stringify(allParent))) {
//修改
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])
})
//修改
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')
if (Deleted.some((item) => JSON.stringify(item) === JSON.stringify(allParent))) {
//修改
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()
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment