From 154a4297d2fd4d2c580c67278b518344935110e2 Mon Sep 17 00:00:00 2001
From: guoyuqi <xiaomeinvG@126.com>
Date: Thu, 13 Jan 2022 19:16:13 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=89=88=E6=9C=AC=E5=AF=B9=E6=AF=94):=20?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E8=87=AA=E5=8A=A8=E5=8C=96=E6=89=8B=E5=8A=A8?=
 =?UTF-8?q?=E5=AF=B9=E6=AF=94=E7=89=88=E6=9C=AC=E6=96=B0=E5=BC=B9=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--user=郭雨琦 接口自动化手动对比版本在原来的弹框上加一个弹窗
---
 .../automation/version/ScenarioChildDiff.vue  | 89 +++++++++++++++++++
 .../api/automation/version/ScenarioDiff.vue   | 62 ++++++++++---
 2 files changed, 138 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/business/components/api/automation/version/ScenarioChildDiff.vue

diff --git a/frontend/src/business/components/api/automation/version/ScenarioChildDiff.vue b/frontend/src/business/components/api/automation/version/ScenarioChildDiff.vue
new file mode 100644
index 0000000000..047dde3111
--- /dev/null
+++ b/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>
diff --git a/frontend/src/business/components/api/automation/version/ScenarioDiff.vue b/frontend/src/business/components/api/automation/version/ScenarioDiff.vue
index 871475c1d6..eb02910b54 100644
--- a/frontend/src/business/components/api/automation/version/ScenarioDiff.vue
+++ b/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.currentLeftChild = undefined;
-        this.currentRightChild = undefined;
+        this.dialogVisible = true;
       }
     },
     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.currentLeftChild = undefined;
-        this.currentRightChild = undefined;
+        this.dialogVisible = true;
       }
     },
 
@@ -598,7 +637,4 @@ export default{
   display: flex;
   justify-content:space-between;
 }
-.border-config{
-  border: 1px solid red;
-}
 </style>