fix(版本对比): 对比算法补充

--user=郭雨琦 对比算法补充
This commit is contained in:
guoyuqi 2022-01-24 16:11:06 +08:00 committed by zhangdahai112
parent 8fa5d47611
commit a573ee9a56
2 changed files with 55 additions and 20 deletions

View File

@ -10,7 +10,7 @@
</el-row> </el-row>
<div class="compare-class" v-loading="isReloadData"> <div class="compare-class" v-loading="isReloadData">
<el-card style="width: 50%;" ref="old"> <el-card style="width: 50%;" ref="old">
<el-form :model="oldData" :rules="rule" ref="httpForm" label-width="80px" label-position="right" :disabled="true"> <el-form :model="oldData" :rules="rule" ref="httpForm" label-width="80px" label-position="right" >
<!-- 操作按钮 --> <!-- 操作按钮 -->
<ms-form-divider :title="$t('test_track.plan_view.base_info')"/> <ms-form-divider :title="$t('test_track.plan_view.base_info')"/>
@ -19,14 +19,14 @@
<el-row> <el-row>
<el-col :span="8"> <el-col :span="8">
<el-form-item :label="$t('commons.name')" prop="name"> <el-form-item :label="$t('commons.name')" prop="name">
<el-input class="ms-http-input" size="small" v-model="oldData.name"/> <el-input class="ms-http-input" size="small" v-model="oldData.name" :disabled="true"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="16"> <el-col :span="16">
<el-form-item :label="$t('api_report.request')" prop="path"> <el-form-item :label="$t('api_report.request')" prop="path">
<el-input :placeholder="$t('api_test.definition.request.path_info')" v-model="oldData.path" <el-input :placeholder="$t('api_test.definition.request.path_info')" v-model="oldData.path" :disabled="true"
class="ms-http-input" size="small" style="margin-top: 5px" > class="ms-http-input" size="small" style="margin-top: 5px" >
<el-select v-model="oldData.method" slot="prepend" style="width: 100px" size="small"> <el-select v-model="oldData.method" slot="prepend" style="width: 100px" size="small" :disabled="true">
<el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/> <el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/>
</el-select> </el-select>
</el-input> </el-input>
@ -38,7 +38,7 @@
<el-col :span="8"> <el-col :span="8">
<el-form-item :label="$t('api_test.definition.request.responsible')" prop="userId"> <el-form-item :label="$t('api_test.definition.request.responsible')" prop="userId">
<el-select v-model="oldData.userId" <el-select v-model="oldData.userId"
:placeholder="$t('api_test.definition.request.responsible')" filterable size="small" :placeholder="$t('api_test.definition.request.responsible')" filterable size="small" :disabled="true"
class="ms-http-select"> class="ms-http-select">
<el-option <el-option
v-for="item in maintainerOptions" v-for="item in maintainerOptions"
@ -58,7 +58,7 @@
<el-col :span="8"> <el-col :span="8">
<el-form-item :label="$t('commons.status')" prop="status"> <el-form-item :label="$t('commons.status')" prop="status">
<el-select class="ms-http-select" size="small" v-model="oldData.status"> <el-select class="ms-http-select" size="small" v-model="oldData.status" :disabled="true">
<el-option v-for="item in options" :key="item.id" :label="$t(item.label)" :value="item.id"/> <el-option v-for="item in options" :key="item.id" :label="$t(item.label)" :value="item.id"/>
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -76,7 +76,7 @@
v-model="oldData.description" v-model="oldData.description"
type="textarea" type="textarea"
:autosize="{ minRows: 1, maxRows: 10}" :autosize="{ minRows: 1, maxRows: 10}"
:rows="1" size="small"/> :rows="1" size="small" :disabled="true"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -130,7 +130,7 @@
</el-card> </el-card>
<el-card style="width: 50%;" ref="new"> <el-card style="width: 50%;" ref="new">
<el-form :model="newData" :rules="rule" ref="httpForm" label-width="80px" label-position="right" :disabled="true"> <el-form :model="newData" :rules="rule" ref="httpForm" label-width="80px" label-position="right" >
<ms-form-divider :title="$t('test_track.plan_view.base_info')"/> <ms-form-divider :title="$t('test_track.plan_view.base_info')"/>
<!-- 基础信息 --> <!-- 基础信息 -->
@ -139,14 +139,14 @@
<el-row> <el-row>
<el-col :span="8"> <el-col :span="8">
<el-form-item :label="$t('commons.name')" prop="name"> <el-form-item :label="$t('commons.name')" prop="name">
<el-input class="ms-http-input" size="small" v-model="newData.name"/> <el-input class="ms-http-input" size="small" v-model="newData.name" :disabled="true"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="16"> <el-col :span="16">
<el-form-item :label="$t('api_report.request')" prop="path"> <el-form-item :label="$t('api_report.request')" prop="path">
<el-input :placeholder="$t('api_test.definition.request.path_info')" v-model="newData.path" <el-input :placeholder="$t('api_test.definition.request.path_info')" v-model="newData.path" :disabled="true"
class="ms-http-input" size="small" style="margin-top: 5px" > class="ms-http-input" size="small" style="margin-top: 5px" >
<el-select v-model="newData.method" slot="prepend" style="width: 100px" size="small"> <el-select v-model="newData.method" slot="prepend" style="width: 100px" size="small" :disabled="true">
<el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/> <el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/>
</el-select> </el-select>
</el-input> </el-input>
@ -158,7 +158,7 @@
<el-col :span="8"> <el-col :span="8">
<el-form-item :label="$t('api_test.definition.request.responsible')" prop="userId"> <el-form-item :label="$t('api_test.definition.request.responsible')" prop="userId">
<el-select v-model="newData.userId" <el-select v-model="newData.userId"
:placeholder="$t('api_test.definition.request.responsible')" filterable size="small" :placeholder="$t('api_test.definition.request.responsible')" filterable size="small" :disabled="true"
class="ms-http-select"> class="ms-http-select">
<el-option <el-option
v-for="item in maintainerOptions" v-for="item in maintainerOptions"
@ -178,7 +178,7 @@
<el-col :span="8"> <el-col :span="8">
<el-form-item :label="$t('commons.status')" prop="status"> <el-form-item :label="$t('commons.status')" prop="status">
<el-select class="ms-http-select" size="small" v-model="newData.status"> <el-select class="ms-http-select" size="small" v-model="newData.status" :disabled="true">
<el-option v-for="item in options" :key="item.id" :label="$t(item.label)" :value="item.id"/> <el-option v-for="item in options" :key="item.id" :label="$t(item.label)" :value="item.id"/>
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -196,7 +196,7 @@
v-model="newData.description" v-model="newData.description"
type="textarea" type="textarea"
:autosize="{ minRows: 1, maxRows: 10}" :autosize="{ minRows: 1, maxRows: 10}"
:rows="1" size="small"/> :rows="1" size="small" :disabled="true"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -361,6 +361,8 @@ export default{
this.oldColor = "rgb(241,200,196,0.45)" this.oldColor = "rgb(241,200,196,0.45)"
this.newColor = "rgb(121, 225, 153,0.3)"; this.newColor = "rgb(121, 225, 153,0.3)";
} }
console.log(this.$refs.old)
console.log(this.$refs.new)
diff(oldVnode,vnode,this.oldColor,this.newColor); diff(oldVnode,vnode,this.oldColor,this.newColor);
this.isReloadData = false this.isReloadData = false
}, },

View File

@ -286,14 +286,22 @@ function diffDetail(oldVnode,newVnode,diffNode){
//剩最后的子节点的时候,分类型做判断(注意最后的子节点的真实dom里可能还有dom节点) //剩最后的子节点的时候,分类型做判断(注意最后的子节点的真实dom里可能还有dom节点)
if(isUndef(oldVnode.child)&&isUndef(newVnode.child)&&isUndef(oldVnode.children)&&isUndef(newVnode.children)){ if(isUndef(oldVnode.child)&&isUndef(newVnode.child)&&isUndef(oldVnode.children)&&isUndef(newVnode.children)){
//比较真实的dom //比较真实的dom
diffRealNode(oldVnode.elm,newVnode.elm,diffNode); if(oldVnode.elm.parentNode.className==="ms-body"){
console.log("到了")
}
//最子节点比较结果
let childDiff=[];
diffRealNode(oldVnode.elm,newVnode.elm,diffNode,childDiff);
if(childDiff.length===0){
diffNodeContext(oldVnode,newVnode,diffNode)
}
if(isDef(oldVnode.text)&&isDef(newVnode.text)){ if(isDef(oldVnode.text)&&isDef(newVnode.text)){
if(oldVnode.text!==newVnode.text){ if(oldVnode.text!==newVnode.text){
diffNode.oldNodeArray.push(oldVnode.elm); diffNode.oldNodeArray.push(oldVnode.elm);
diffNode.nodeArray.push(newVnode.elm); diffNode.nodeArray.push(newVnode.elm);
} }
}else if(isDef(oldVnode.tag)&&isDef(newVnode.tag)){ }
else if(isDef(oldVnode.tag)&&isDef(newVnode.tag)){
if(oldVnode.tag==='input'&&newVnode.tag==='input'){ if(oldVnode.tag==='input'&&newVnode.tag==='input'){
if(oldVnode.elm.value!==newVnode.elm.value){ if(oldVnode.elm.value!==newVnode.elm.value){
diffNode.oldNodeArray.push(oldVnode.elm); diffNode.oldNodeArray.push(oldVnode.elm);
@ -323,7 +331,24 @@ function diffDetail(oldVnode,newVnode,diffNode){
} }
function diffRealNode(oldNode,newNode,diffNode){
function diffNodeContext(oldNode,newNode,diffNode){
if(isDef(oldNode.context)&&isDef(newNode.context)){
if(isDef(oldNode.context.value)||isDef(newNode.context.value)){
if(isDef(oldNode.context.value)&&isDef(newNode.context.value)){
if(oldNode.context.value!==newNode.context.value){
diffNode.oldNodeArray.push(oldNode.elm);
diffNode.nodeArray.push(newNode.elm);
}
}else{
diffNode.oldNodeArray.push(oldNode.elm);
diffNode.nodeArray.push(newNode.elm);
}
}
}
}
function diffRealNode(oldNode,newNode,diffNode,childDiff){
let oldNodeLength = oldNode.childNodes.length; let oldNodeLength = oldNode.childNodes.length;
let newNodeLength = newNode.childNodes.length; let newNodeLength = newNode.childNodes.length;
let childrenLength = Math.min(oldNodeLength, newNodeLength); let childrenLength = Math.min(oldNodeLength, newNodeLength);
@ -331,9 +356,12 @@ function diffRealNode(oldNode,newNode,diffNode){
let oldnode = oldNode.childNodes[i] let oldnode = oldNode.childNodes[i]
let newnode = newNode.childNodes[i] let newnode = newNode.childNodes[i]
if(oldnode.childNodes.length>0&&newnode.childNodes.length>0){ if(oldnode.childNodes.length>0&&newnode.childNodes.length>0){
diffRealNode(oldnode,newnode,diffNode) diffRealNode(oldnode,newnode,diffNode,childDiff);
}else { }else {
diffRealNodeDetail(oldnode,newnode,diffNode); let _isSameChild = diffRealNodeDetail(oldnode,newnode,diffNode);
if(!_isSameChild){
childDiff.push(_isSameChild)
}
} }
} }
for (let i = childrenLength; i < oldNodeLength; i++) { for (let i = childrenLength; i < oldNodeLength; i++) {
@ -400,8 +428,13 @@ function diffRealNodeDetail(oldNode,newNode,diffNode){
} }
} }
} }
//如果他们都是0证明比较到这时都是相同的
if(oldNode.childNodes.length===0&&newNode.childNodes.length===0){
return true;
} }
} }
return false;
}
function sameVnode (a, b) { function sameVnode (a, b) {
return ( return (