feat(版本对比): 接口自动化手动对比版本新弹框

--user=郭雨琦 接口自动化手动对比版本在原来的弹框上加一个弹窗

frontend/src/business/components/api/automation/version/ScenarioChildDiff.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="compare-class">
+    <el-card ref="old" style="width: 50%">
+      <ms-component-config
+        :type="oldData.type"
+        :scenario="oldData"
+        :node="oldNode"
+        :env-map="oldProjectEnvMap"
+        :show-version="false"
+      />
+    </el-card>
+    <el-card ref="new" style="width: 50%">
+      <ms-component-config
+        :type="newData.type"
+        :scenario="newData"
+        :node="newNode"
+        :env-map="newProjectEnvMap"
+        :show-version="false"
+      />
+    </el-card>
+  </div>
+</template>
+<script>
+import MsComponentConfig from "@/business/components/api/automation/scenario/component/ComponentConfig";
+const {diff} = require("@/business/components/performance/v_node_diff");
+export default{
+  name:"ScenarioChildDiff",
+  props:{
+    oldData:{
+
+    },
+    oldNode:{
+
+    },
+    oldProjectEnvMap:{
+
+    },
+    newData:{
+
+    },
+    newNode:{
+
+    },
+    newProjectEnvMap:{
+
+    },
+    oldVNode:{
+    },
+    newVNode:{}
+  },
+  components:{
+    MsComponentConfig,
+  },
+  data(){
+    return{
+      showData:false,
+      currentItervalID:'',
+    }
+  },
+  methods:{
+    getDiff(){
+      let oldVnode = this.$refs.old
+      let vnode = this.$refs.new
+      diff(oldVnode,vnode)
+    },
+    getVnode(){
+      let oldVnode = this.$refs.old
+      let vnode = this.$refs.new
+      if(oldVnode&&vnode){
+        window.clearInterval(this.currentItervalID);
+        this.getDiff()
+      }
+    }
+  },
+  created() {
+  },
+  mounted() {
+    this.$nextTick(function () {
+      this.currentItervalID = window.setInterval(this.getVnode, 1000);
+    })
+  }
+}
+</script>
+<style scoped>
+.compare-class{
+  display: flex;
+  justify-content:space-between;
+}
+</style>

frontend/src/business/components/api/automation/version/ScenarioDiff.vue

@@ -327,6 +327,23 @@
         </div>
       </el-card>
     </el-card>
+    <el-dialog
+      :fullscreen="true"
+      :visible.sync="dialogVisible"
+      append-to-body
+      width="100%"
+    >
+      <scenario-child-diff
+        :old-data="leftChildData"
+        :new-data="rightChildData"
+        :old-node="leftChildNode"
+        :new-node="rightChildNode"
+        :old-project-env-map="projectEnvMap"
+        :new-project-env-map="newProjectEnvMap"
+        :old-v-node="leftChildVnode"
+        :new-v-node="rightChildVnode"
+      ></scenario-child-diff>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -335,6 +352,7 @@ import {API_STATUS, PRIORITY} from "@/business/components/api/definition/model/J
 import {ENV_TYPE} from "@/common/js/constants";
 import {ELEMENT_TYPE, STEP, TYPE_TO_C} from "@/business/components/api/automation/scenario/Setting";
 import MsComponentConfig from "@/business/components/api/automation/scenario/component/ComponentConfig";
+import ScenarioChildDiff from "@/business/components/api/automation/version/ScenarioChildDiff";
 const {diff} = require("@/business/components/performance/v_node_diff");
 const {KeyValue} = require("@/business/components/api/definition/model/ApiTestModel");
 const {getUUID} = require("@/common/js/utils");
@@ -384,11 +402,26 @@ export default{
     type:{}
   },
   components:{
+    ScenarioChildDiff,
     MsComponentConfig,
     MsSelectTree: () => import("@/business/components/common/select-tree/SelectTree"),
     MsInputTag: () => import("@/business/components/api/automation/scenario/MsInputTag"),
     EnvPopover: () => import("@/business/components/api/automation/scenario/EnvPopover"),
   },
+  watch:{
+    'dialogVisible'(){
+      if(this.dialogVisible===false){
+        this.leftChildData = {};
+        this.leftChildNode = {};
+        this.leftChildVnode ={};
+        this.rightChildData = {};
+        this.rightChildNode = {};
+        this.rightChildVnode ={};
+        this.currentRightChild = undefined;
+        this.currentLeftChild = undefined;
+      }
+    }
+  },
   data(){
    return{
      options: API_STATUS,
@@ -416,8 +449,13 @@ export default{
      stepEnable:true,
      currentLeftChild:undefined,
      currentRightChild:undefined,
-
+     leftChildData:{},
-
+     rightChildData:{},
+     leftChildNode:{},
+     rightChildNode:{},
+     leftChildVnode:{},
+     rightChildVnode:{},
+     dialogVisible:false
    }
   },
   methods:{
@@ -562,22 +600,23 @@ export default{
     },
     nodeClick(data, node,source) {
       this.$store.state.selectStep = data;
-      console.log(source)
+      this.rightChildData = data;
+      this.rightChildNode = node
+      this.rightChildVnode = source
       this.currentRightChild = source;
+      console.log(this.rightChildVnode)
       if(this.currentLeftChild){
-        diff(this.currentLeftChild,this.currentRightChild);
+        this.dialogVisible = true;
-        this.currentLeftChild = undefined;
-        this.currentRightChild = undefined;
       }
     },
     oldNodeClick(data, node,source) {
       this.$store.state.selectStep = data;
-      console.log(source)
+      this.leftChildData = data;
+      this.leftChildNode = node
+      this.leftChildVnode = source
       this.currentLeftChild = source;
       if(this.currentRightChild){
-        diff(this.currentLeftChild,this.currentRightChild);
+        this.dialogVisible = true;
-        this.currentLeftChild = undefined;
-        this.currentRightChild = undefined;
       }
     },
 
@@ -598,7 +637,4 @@ export default{
   display: flex;
   justify-content:space-between;
 }
-.border-config{
-  border: 1px solid red;
-}
 </style>