feat(版本对比): dubbo/TCP/SQL接口定义版本对比

--user=郭雨琦 dubbo/TCP/SQL接口定义版本对比

frontend/src/business/components/api/definition/components/complete/EditCompleteDubboApi.vue

@@ -46,6 +46,22 @@
 
     <api-other-info :api="basisData"/>
     <ms-change-history ref="changeHistory"/>
+    <el-dialog
+      :fullscreen="true"
+      :visible.sync="dialogVisible"
+      width="100%"
+    >
+      <dubbo-api-version-diff
+        :old-data="basisData"
+        :show-follow="showFollow"
+        :new-data="newData"
+        :new-show-follow="newShowFollow"
+        :module-options="moduleOptions"
+        :request="request"
+        :old-request="oldRequest"
+      ></dubbo-api-version-diff>
+    </el-dialog>
+
   </div>
 </template>
 
@@ -58,6 +74,10 @@ import {getCurrentUser, hasLicense} from "@/common/js/utils";
 
 const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
 const versionHistory = requireComponent.keys().length > 0 ? requireComponent("./version/VersionHistory.vue") : {};
+import DubboApiVersionDiff from "./version/DubboApiVersionDiff"
+import {createComponent } from ".././jmeter/components";
+const {Body} = require("@/business/components/api/definition/model/ApiTestModel");
+import { TYPE_TO_C} from "@/business/components/api/automation/scenario/Setting";
 
 export default {
   name: "MsApiDubboRequestForm",
@@ -65,6 +85,7 @@ export default {
     ApiOtherInfo,
     MsBasisApi, MsBasisParameters, MsChangeHistory,
     'MsVersionHistory': versionHistory.default,
+    DubboApiVersionDiff,
   },
   props: {
     request: {},
@@ -114,7 +135,12 @@ export default {
     return {
       validated: false,
       showFollow: false,
+      dialogVisible:false,
+      newShowFollow:false,
       versionData: [],
+      newData:{},
+      oldRequest:{},
+      oldResponse:{}
     };
   },
   methods: {
@@ -185,7 +211,95 @@ export default {
       });
     },
     compare(row) {
-      // console.log(row);
+      this.$get('/api/definition/get/' +  row.id+"/"+this.basisData.refId, response => {
+        this.$get('/api/definition/get/' + response.data.id, res => {
+          if (res.data) {
+            this.newData = res.data;
+            this.$get('/api/definition/follow/' + response.data.id, resp => {
+              if(resp.data&&resp.data.follows){
+                for (let i = 0; i <resp.data.follows.length; i++) {
+                  if(resp.data.follows[i]===this.currentUser().id){
+                    this.newShowFollow = true;
+                    break;
+                  }
+                }
+              }
+            });
+            this.setRequest(res.data)
+            if (!this.setRequest(res.data)) {
+              this.oldRequest = createComponent("DubboSampler");
+              this.dialogVisible = true;
+            }
+            this.formatApi(res.data)
+          }
+        });
+      });
+
+    },
+    setRequest(api) {
+      if (api.request !== undefined) {
+        if (Object.prototype.toString.call(api.request).match(/\[object (\w+)\]/)[1].toLowerCase() === 'object') {
+          this.oldRequest = api.request;
+        } else {
+          this.oldRequest = JSON.parse(api.request);
+        }
+        if (!this.oldRequest.headers) {
+          this.oldRequest.headers = [];
+        }
+        this.dialogVisible = true;
+        return true;
+      }
+      return false;
+    },
+    formatApi(api) {
+      if (api.response != null && api.response !== 'null' && api.response !== undefined) {
+        if (Object.prototype.toString.call(api.response).match(/\[object (\w+)\]/)[1].toLowerCase() === 'object') {
+          this.oldResponse = api.response;
+        } else {
+          this.oldResponse = JSON.parse(api.response);
+        }
+      } else {
+        this.oldResponse = {headers: [], body: new Body(), statusCode: [], type: "HTTP"};
+      }
+      if (!this.oldRequest.hashTree) {
+        this.oldRequest.hashTree = [];
+      }
+      if (this.oldRequest.body && !this.oldRequest.body.binary) {
+        this.oldRequest.body.binary = [];
+      }
+      // 处理导入数据缺失问题
+      if (this.oldResponse.body) {
+        let body = new Body();
+        Object.assign(body, this.oldResponse.body);
+        if (!body.binary) {
+          body.binary = [];
+        }
+        if (!body.kvs) {
+          body.kvs = [];
+        }
+        if (!body.binary) {
+          body.binary = [];
+        }
+        this.oldResponse.body = body;
+      }
+      this.oldRequest.clazzName = TYPE_TO_C.get(this.oldRequest.type);
+
+      this.sort(this.oldRequest.hashTree);
+    },
+    sort(stepArray) {
+      if (stepArray) {
+        for (let i in stepArray) {
+          if (!stepArray[i].clazzName) {
+            stepArray[i].clazzName = TYPE_TO_C.get(stepArray[i].type);
+          }
+          if (stepArray[i].type === "Assertions" && !stepArray[i].document) {
+            stepArray[i].document = {type: "JSON", data: {xmlFollowAPI: false, jsonFollowAPI: false, json: [], xml: []}};
+          }
+          if (stepArray[i].hashTree && stepArray[i].hashTree.length > 0) {
+            this.sort(stepArray[i].hashTree);
+          }
+        }
+      }
     },
     checkout(row) {
       let api = this.versionData.filter(v => v.versionId === row.id)[0];

frontend/src/business/components/api/definition/components/complete/EditCompleteSQLApi.vue

@@ -47,6 +47,22 @@
 
     <ms-change-history ref="changeHistory"/>
 
+    <el-dialog
+      :fullscreen="true"
+      :visible.sync="dialogVisible"
+      width="100%"
+    >
+      <s-q-l-api-version-diff
+        :old-data="basisData"
+        :show-follow="showFollow"
+        :new-data="newData"
+        :new-show-follow="newShowFollow"
+        :module-options="moduleOptions"
+        :request="request"
+        :old-request="oldRequest"
+      ></s-q-l-api-version-diff>
+    </el-dialog>
+
   </div>
 </template>
 
@@ -56,9 +72,14 @@ import MsBasisParameters from "../request/database/BasisParameters";
 import MsChangeHistory from "../../../../history/ChangeHistory";
 import ApiOtherInfo from "@/business/components/api/definition/components/complete/ApiOtherInfo";
 import {getCurrentUser, hasLicense} from "@/common/js/utils";
+import SQLApiVersionDiff from "./version/SQLApiVersionDiff"
+import {createComponent } from ".././jmeter/components";
+import { TYPE_TO_C} from "@/business/components/api/automation/scenario/Setting";
 
 const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
 const versionHistory = requireComponent.keys().length > 0 ? requireComponent("./version/VersionHistory.vue") : {};
+const {Body} = require("@/business/components/api/definition/model/ApiTestModel");
+
 
 export default {
   name: "MsApiSqlRequestForm",
@@ -66,6 +87,7 @@ export default {
     ApiOtherInfo,
     MsBasisApi, MsBasisParameters, MsChangeHistory,
     'MsVersionHistory': versionHistory.default,
+    SQLApiVersionDiff
   },
   props: {
     request: {},
@@ -101,10 +123,16 @@ export default {
     return {
       validated: false,
       showFollow: false,
+      dialogVisible:false,
+      newShowFollow:false,
       versionData: [],
+      newData:{},
+      oldRequest:{},
+      oldResponse:{}
     };
   },
   created() {
+    console.log("看看是不是这页面")
     this.$get('/api/definition/follow/' + this.basisData.id, response => {
       this.basisData.follows = response.data;
       for (let i = 0; i < response.data.length; i++) {
@@ -187,7 +215,97 @@ export default {
       });
     },
     compare(row) {
-      // console.log(row);
+      this.$get('/api/definition/get/' +  row.id+"/"+this.basisData.refId, response => {
+        this.$get('/api/definition/get/' + response.data.id, res => {
+          if (res.data) {
+            this.newData = res.data;
+            this.$get('/api/definition/follow/' + response.data.id, resp => {
+              if(resp.data&&resp.data.follows){
+                for (let i = 0; i <resp.data.follows.length; i++) {
+                  if(resp.data.follows[i]===this.currentUser().id){
+                    this.newShowFollow = true;
+                    break;
+                  }
+                }
+              }
+            });
+            this.setRequest(res.data)
+            if (!this.setRequest(res.data)) {
+              this.oldRequest = createComponent("JDBCSampler");
+              if (!this.oldRequest.variables) {
+                this.oldRequest.variables = [];
+              }
+              this.dialogVisible = true
+            }
+            //this.formatApi(res.data)
+          }
+        });
+      });
+
+    },
+    setRequest(api) {
+      if (api.request !== undefined) {
+        if (Object.prototype.toString.call(api.request).match(/\[object (\w+)\]/)[1].toLowerCase() === 'object') {
+          this.oldRequest = api.request;
+        } else {
+          this.oldRequest = JSON.parse(api.request);
+        }
+        if (!this.oldRequest.headers) {
+          this.oldRequest.headers = [];
+        }
+        this.dialogVisible = true
+        return true;
+      }
+      return false;
+    },
+    formatApi(api) {
+      if (api.response != null && api.response !== 'null' && api.response !== undefined) {
+        if (Object.prototype.toString.call(api.response).match(/\[object (\w+)\]/)[1].toLowerCase() === 'object') {
+          this.oldResponse = api.response;
+        } else {
+          this.oldResponse = JSON.parse(api.response);
+        }
+      } else {
+        this.oldResponse = {headers: [], body: new Body(), statusCode: [], type: "HTTP"};
+      }
+      if (!this.oldRequest.hashTree) {
+        this.oldRequest.hashTree = [];
+      }
+      if (this.oldRequest.body && !this.oldRequest.body.binary) {
+        this.oldRequest.body.binary = [];
+      }
+      // 处理导入数据缺失问题
+      if (this.oldResponse.body) {
+        let body = new Body();
+        Object.assign(body, this.oldResponse.body);
+        if (!body.binary) {
+          body.binary = [];
+        }
+        if (!body.kvs) {
+          body.kvs = [];
+        }
+        if (!body.binary) {
+          body.binary = [];
+        }
+        this.oldResponse.body = body;
+      }
+      this.oldRequest.clazzName = TYPE_TO_C.get(this.oldRequest.type);
+      this.sort(this.oldRequest.hashTree);
+    },
+    sort(stepArray) {
+      if (stepArray) {
+        for (let i in stepArray) {
+          if (!stepArray[i].clazzName) {
+            stepArray[i].clazzName = TYPE_TO_C.get(stepArray[i].type);
+          }
+          if (stepArray[i].type === "Assertions" && !stepArray[i].document) {
+            stepArray[i].document = {type: "JSON", data: {xmlFollowAPI: false, jsonFollowAPI: false, json: [], xml: []}};
+          }
+          if (stepArray[i].hashTree && stepArray[i].hashTree.length > 0) {
+            this.sort(stepArray[i].hashTree);
+          }
+        }
+      }
     },
     checkout(row) {
       let api = this.versionData.filter(v => v.versionId === row.id)[0];
@@ -198,6 +316,7 @@ export default {
     },
     create(row) {
       // 创建新版本
+
       this.basisData.versionId = row.id;
       this.saveApi();
     },

frontend/src/business/components/api/definition/components/complete/EditCompleteTCPApi.vue

@@ -74,7 +74,26 @@
     <api-other-info :api="basisData"/>
 
     <ms-change-history ref="changeHistory"/>
-
+    <el-dialog
+      :fullscreen="true"
+      :visible.sync="dialogVisible"
+      width="100%"
+    >
+      <t-c-p-api-version-diff
+        :old-data="basisData"
+        :show-follow="showFollow"
+        :new-data="newData"
+        :new-show-follow="newShowFollow"
+        :module-options="moduleOptions"
+        :request="request"
+        :old-request="oldRequest"
+        :mock-info="mockInfo"
+        :api-protocol="apiProtocol"
+        :old-api-protocol="oldApiProtocol"
+        :show-xpack-compnent="showXpackCompnent"
+        :method-types="methodTypes"
+      ></t-c-p-api-version-diff>
+    </el-dialog>
   </div>
 
 </template>
@@ -85,7 +104,11 @@ import MsTcpFormatParameters from "../request/tcp/TcpFormatParameters";
 import MsChangeHistory from "../../../../history/ChangeHistory";
 import {getCurrentProjectID, getCurrentUser, hasLicense} from "@/common/js/utils";
 import ApiOtherInfo from "@/business/components/api/definition/components/complete/ApiOtherInfo";
+import TCPApiVersionDiff from "./version/TCPApiVersionDiff"
+import {createComponent } from ".././jmeter/components";
+import { TYPE_TO_C} from "@/business/components/api/automation/scenario/Setting";
 
+const {Body} = require("@/business/components/api/definition/model/ApiTestModel");
 const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
 const esbDefinition = (requireComponent != null && requireComponent.keys().length) > 0 ? requireComponent("./apidefinition/EsbDefinition.vue") : {};
 const esbDefinitionResponse = (requireComponent != null && requireComponent.keys().length) > 0 ? requireComponent("./apidefinition/EsbDefinitionResponse.vue") : {};
@@ -98,6 +121,7 @@ export default {
     "esbDefinition": esbDefinition.default,
     "esbDefinitionResponse": esbDefinitionResponse.default,
     'MsVersionHistory': versionHistory.default,
+    TCPApiVersionDiff,
   },
   props: {
     request: {},
@@ -123,6 +147,13 @@ export default {
       ],
       showXpackCompnent: false,
       versionData: [],
+      dialogVisible:false,
+      newShowFollow:false,
+      newData:{},
+      oldRequest:{},
+      oldResponse:{},
+      oldApiProtocol: "TCP",
+
     };
   },
   created: function () {
@@ -301,7 +332,102 @@ export default {
       });
     },
     compare(row) {
-      // console.log(row);
+      this.$get('/api/definition/get/' +  row.id+"/"+this.basisData.refId, response => {
+        this.$get('/api/definition/get/' + response.data.id, res => {
+          if (res.data) {
+            this.newData = res.data;
+            if (this.newData.method !== 'TCP' && this.newData.method !== 'ESB') {
+              this.newData.method = this.newData.protocol;
+            }
+            this.oldApiProtocol = this.basisData.method;
+            if (this.oldApiProtocol == null || this.oldApiProtocol === "") {
+              this.oldApiProtocol = "TCP";
+            }
+            this.$get('/api/definition/follow/' + response.data.id, resp => {
+              if(resp.data&&resp.data.follows){
+                for (let i = 0; i <resp.data.follows.length; i++) {
+                  if(resp.data.follows[i]===this.currentUser().id){
+                    this.newShowFollow = true;
+                    break;
+                  }
+                }
+              }
+            });
+            this.setRequest(res.data)
+            if (!this.setRequest(res.data)) {
+              this.oldRequest = createComponent("TCPSampler");
+              this.dialogVisible = true;
+            }
+            this.formatApi(res.data)
+          }
+        });
+      });
+
+    },
+    setRequest(api) {
+      if (api.request !== undefined) {
+        if (Object.prototype.toString.call(api.request).match(/\[object (\w+)\]/)[1].toLowerCase() === 'object') {
+          this.oldRequest = api.request;
+        } else {
+          this.oldRequest = JSON.parse(api.request);
+        }
+        if (!this.oldRequest.headers) {
+          this.oldRequest.headers = [];
+        }
+        this.dialogVisible = true;
+        return true;
+      }
+      return false;
+    },
+    formatApi(api) {
+      if (api.response != null && api.response !== 'null' && api.response !== undefined) {
+        if (Object.prototype.toString.call(api.response).match(/\[object (\w+)\]/)[1].toLowerCase() === 'object') {
+          this.oldResponse = api.response;
+        } else {
+          this.oldResponse = JSON.parse(api.response);
+        }
+      } else {
+        this.oldResponse = {headers: [], body: new Body(), statusCode: [], type: "HTTP"};
+      }
+      if (!this.oldRequest.hashTree) {
+        this.oldRequest.hashTree = [];
+      }
+      if (this.oldRequest.body && !this.oldRequest.body.binary) {
+        this.oldRequest.body.binary = [];
+      }
+      // 处理导入数据缺失问题
+      if (this.oldResponse.body) {
+        let body = new Body();
+        Object.assign(body, this.oldResponse.body);
+        if (!body.binary) {
+          body.binary = [];
+        }
+        if (!body.kvs) {
+          body.kvs = [];
+        }
+        if (!body.binary) {
+          body.binary = [];
+        }
+        this.oldResponse.body = body;
+      }
+      this.oldRequest.clazzName = TYPE_TO_C.get(this.oldRequest.type);
+
+      this.sort(this.oldRequest.hashTree);
+    },
+    sort(stepArray) {
+      if (stepArray) {
+        for (let i in stepArray) {
+          if (!stepArray[i].clazzName) {
+            stepArray[i].clazzName = TYPE_TO_C.get(stepArray[i].type);
+          }
+          if (stepArray[i].type === "Assertions" && !stepArray[i].document) {
+            stepArray[i].document = {type: "JSON", data: {xmlFollowAPI: false, jsonFollowAPI: false, json: [], xml: []}};
+          }
+          if (stepArray[i].hashTree && stepArray[i].hashTree.length > 0) {
+            this.sort(stepArray[i].hashTree);
+          }
+        }
+      }
     },
     checkout(row) {
       let api = this.versionData.filter(v => v.versionId === row.id)[0];

frontend/src/business/components/api/definition/components/complete/TCPBasicApi.vue

@@ -3,7 +3,7 @@
     <el-form :model="basicForm" label-position="right" label-width="80px" size="small" :rules="rule" ref="basicForm" style="margin-right: 20px">
       <!-- 基础信息 -->
       <el-row>
-        <el-col :span="8">
+        <el-col :span="isDiff?16:8">
           <el-form-item :label="$t('commons.name')" prop="name">
             <!--            <el-input class="ms-http-input" size="small" v-model="basicForm.name"/>-->
             <el-input v-model="basicForm.name" class="ms-http-input" size="small">
@@ -81,6 +81,10 @@
       moduleOptions: Array,
       methodTypes: Array,
       basisData: {},
+      isDiff:{
+        type: Boolean,
+        default: false
+      },
     },
     created() {
       this.getMaintainerOptions();

frontend/src/business/components/api/definition/components/complete/version/DubboApiVersionDiff.vue

@@ -0,0 +1,203 @@
+<template>
+  <div class="compare-class">
+    <el-card style="width: 50%;" ref="old">
+      <div style="background-color: white;">
+        <el-row>
+          <el-col>
+            <!--操作按钮-->
+            <el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!showFollow">
+              <i class="el-icon-star-off"
+                 style="color: #783987; font-size: 25px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
+            </el-tooltip>
+            <el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="showFollow">
+              <i class="el-icon-star-on"
+                 style="color: #783987; font-size: 28px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
+            </el-tooltip>
+
+          </el-col>
+        </el-row>
+        <!-- 基础信息 -->
+        <p class="tip">{{ $t('test_track.plan_view.base_info') }} </p>
+        <br/>
+        <el-row>
+          <el-col>
+            <ms-basis-api  :moduleOptions="moduleOptions"
+                          :basisData="oldData" ref="basicForm"
+                         />
+          </el-col>
+        </el-row>
+
+        <!-- 请求参数 -->
+        <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
+        <ms-basis-parameters :showScript="false" :request="oldRequest"/>
+
+        <ms-form-divider :title="$t('test_track.case.other_info')"/>
+        <api-info-container>
+          <el-form :model="oldData" ref="api-form" label-width="100px">
+            <el-collapse-transition>
+              <el-tabs v-model="activeName" style="margin: 20px">
+                <el-tab-pane :label="$t('commons.remark')" name="remark" class="pane">
+                  <form-rich-text-item class="remark-item" :disabled="true" :data="oldData" prop="remark" label-width="0"/>
+                </el-tab-pane>
+                <el-tab-pane :label="$t('commons.relationship.name')" name="dependencies" class="pane">
+                  <template v-slot:label>
+                    <tab-pane-count :title="$t('commons.relationship.name')" :count="oldRelationshipCount"/>
+                  </template>
+                  <dependencies-list  @setCount="setOldCount" :read-only="true" :resource-id="oldData.id" resource-type="API" ref="oldDependencies"/>
+                </el-tab-pane>
+              </el-tabs>
+            </el-collapse-transition>
+          </el-form>
+        </api-info-container>
+      </div>
+    </el-card>
+    <el-card style="width: 50%;" ref="new">
+      <div style="background-color: white;">
+        <el-row>
+          <el-col>
+            <!--操作按钮-->
+            <el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!newShowFollow">
+              <i class="el-icon-star-off"
+                 style="color: #783987; font-size: 25px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
+            </el-tooltip>
+            <el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="newShowFollow">
+              <i class="el-icon-star-on"
+                 style="color: #783987; font-size: 28px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
+            </el-tooltip>
+
+          </el-col>
+        </el-row>
+        <!-- 基础信息 -->
+        <p class="tip">{{ $t('test_track.plan_view.base_info') }} </p>
+        <br/>
+        <el-row>
+          <el-col>
+            <ms-basis-api   :moduleOptions="moduleOptions"
+                          :basisData="newData" ref="basicForm"/>
+          </el-col>
+        </el-row>
+
+        <!-- 请求参数 -->
+        <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
+        <ms-basis-parameters :showScript="false" :request="request"/>
+
+        <!-- 其他信息-->
+        <ms-form-divider :title="$t('test_track.case.other_info')"/>
+        <api-info-container>
+          <el-form :model="newData" ref="api-form" label-width="100px">
+            <el-collapse-transition>
+              <el-tabs v-model="activeName" style="margin: 20px">
+                <el-tab-pane :label="$t('commons.remark')" name="remark" class="pane">
+                  <form-rich-text-item class="remark-item" :disabled="true" :data="newData" prop="remark" label-width="0"/>
+                </el-tab-pane>
+                <el-tab-pane :label="$t('commons.relationship.name')" name="dependencies" class="pane">
+                  <template v-slot:label>
+                    <tab-pane-count :title="$t('commons.relationship.name')" :count="relationshipCount"/>
+                  </template>
+                  <dependencies-list @setCount="setCount" :read-only="true" :resource-id="newData.id" resource-type="API" ref="newDependencies"/>
+                </el-tab-pane>
+              </el-tabs>
+            </el-collapse-transition>
+          </el-form>
+        </api-info-container>
+      </div>
+    </el-card>
+  </div>
+</template>
+<script>
+
+const {diff} = require("@/business/components/performance/v_node_diff");
+import MsBasisApi from ".././BasisApi";
+import MsBasisParameters from "../../request/dubbo/BasisParameters";
+import MsFormDivider from "@/business/components/common/components/MsFormDivider";
+import ApiInfoContainer from "@/business/components/api/definition/components/complete/ApiInfoContainer";
+import DependenciesList from "@/business/components/common/components/graph/DependenciesList";
+import FormRichTextItem from "@/business/components/track/case/components/FormRichTextItem";
+import {getRelationshipCountApi} from "@/network/api";
+import TabPaneCount from "@/business/components/track/plan/view/comonents/report/detail/component/TabPaneCount";
+export default{
+  name:"DubboApiVersionDiff",
+  components:{
+    MsBasisApi,
+    MsBasisParameters,
+    MsFormDivider,
+    ApiInfoContainer,
+    TabPaneCount,
+    FormRichTextItem,
+    DependenciesList,
+  },
+  props:{
+    oldData:{
+      type:Object
+    },
+    newData:{
+      type:Object
+    },
+    showFollow:{
+      type:Boolean
+    },
+    newShowFollow:{
+      type:Boolean
+    },
+    moduleOptions:{},
+    request: {},
+    oldRequest:{},
+  },
+  watch:{
+    activeName() {
+      if (this.activeName === 'dependencies') {
+        this.$refs.oldDependencies.open();
+        this.$refs.newDependencies.open();
+      }
+    },
+  },
+  data(){
+    return{
+      activeName: 'remark',
+      relationshipCount: 0,
+      oldRelationshipCount: 0,
+    }
+  },
+  methods:{
+    getDiff(){
+      let oldVnode = this.$refs.old
+      let vnode = this.$refs.new
+      diff(oldVnode,vnode);
+    },
+    setCount(count) {
+      this.relationshipCount = count;
+      this.$nextTick(function () {
+        setTimeout(this.getChildDiff,1000)
+      })
+    },
+    setOldCount(count) {
+      this.oldRelationshipCount = count;
+    },
+    getChildDiff(){
+      let oldVnode = this.$refs.oldDependencies
+      let vnode = this.$refs.newDependencies
+      if(oldVnode._data.postCount>0||oldVnode._data.preCount>0||vnode._data.postCount>0||vnode._data.preCount>0){
+        diff(oldVnode,vnode);
+      }
+    }
+  },
+  mounted() {
+    getRelationshipCountApi(this.newData.id, (data) => {
+      this.relationshipCount = data;
+    });
+    getRelationshipCountApi(this.oldData.id, (data) => {
+      this.oldRelationshipCount = data;
+    });
+    this.$nextTick(function () {
+      setTimeout(this.getDiff,(this.$refs.old.$children.length+1)/2*1000)
+    })
+  }
+
+}
+</script>
+<style scoped>
+.compare-class{
+  display: flex;
+  justify-content:space-between;
+}
+</style>

frontend/src/business/components/api/definition/components/complete/version/HttpApiVersionDiff.vue

@@ -267,7 +267,6 @@
 <script>
 import {API_STATUS, REQ_METHOD} from "../../../model/JsonData";
 import MsFormDivider from "@/business/components/common/components/MsFormDivider";
-import ApiOtherInfo from "@/business/components/api/definition/components/complete/ApiOtherInfo";
 import MsResponseText from "../../response/ResponseText";
 import MsApiRequestForm from "../../request/http/ApiHttpRequestForm";
 import MsSelectTree from "../../../../../common/select-tree/SelectTree";
@@ -284,7 +283,6 @@ const {diff} = require("@/business/components/performance/v_node_diff");
 export default{
   name: "HttpApiVersionDiff",
   components: {
-    ApiOtherInfo,
     MsFormDivider,
     MsResponseText,
     MsApiRequestForm,
@@ -375,7 +373,6 @@ export default{
     },
     setOldCount(count) {
       this.oldRelationshipCount = count;
-
     },
     getChildDiff(){
       let oldVnode = this.$refs.oldDependencies

frontend/src/business/components/api/definition/components/complete/version/SQLApiVersionDiff.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class="compare-class">
+    <el-card style="width: 50%;" ref="old">
+      <div style="background-color: white;">
+        <el-row>
+          <el-col>
+            <!--操作按钮-->
+            <el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!showFollow">
+              <i class="el-icon-star-off"
+                 style="color: #783987; font-size: 25px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
+            </el-tooltip>
+            <el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="showFollow">
+              <i class="el-icon-star-on"
+                 style="color: #783987; font-size: 28px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
+            </el-tooltip>
+          </el-col>
+        </el-row>
+        <!-- 基础信息 -->
+        <p class="tip">{{ $t('test_track.plan_view.base_info') }} </p>
+        <br/>
+        <el-row>
+          <el-col>
+            <ms-basis-api  :moduleOptions="moduleOptions"
+                          :basisData="oldData" ref="basicForm"
+                          />
+          </el-col>
+        </el-row>
+        <!-- 请求参数 -->
+        <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
+        <ms-basis-parameters :showScript="false" :request="oldRequest"/>
+
+        <ms-form-divider :title="$t('test_track.case.other_info')"/>
+        <api-info-container>
+          <el-form :model="oldData" ref="api-form" label-width="100px">
+            <el-collapse-transition>
+              <el-tabs v-model="activeName" style="margin: 20px">
+                <el-tab-pane :label="$t('commons.remark')" name="remark" class="pane">
+                  <form-rich-text-item class="remark-item" :disabled="true" :data="oldData" prop="remark" label-width="0"/>
+                </el-tab-pane>
+                <el-tab-pane :label="$t('commons.relationship.name')" name="dependencies" class="pane">
+                  <template v-slot:label>
+                    <tab-pane-count :title="$t('commons.relationship.name')" :count="oldRelationshipCount"/>
+                  </template>
+                  <dependencies-list  @setCount="setOldCount" :read-only="true" :resource-id="oldData.id" resource-type="API" ref="oldDependencies"/>
+                </el-tab-pane>
+              </el-tabs>
+            </el-collapse-transition>
+          </el-form>
+        </api-info-container>
+
+      </div>
+    </el-card>
+    <el-card style="width: 50%;" ref="new">
+      <div style="background-color: white;">
+        <el-row>
+          <el-col>
+            <!--操作按钮-->
+            <el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!newShowFollow">
+              <i class="el-icon-star-off"
+                 style="color: #783987; font-size: 25px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
+            </el-tooltip>
+            <el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="newShowFollow">
+              <i class="el-icon-star-on"
+                 style="color: #783987; font-size: 28px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
+            </el-tooltip>
+          </el-col>
+        </el-row>
+        <!-- 基础信息 -->
+        <p class="tip">{{ $t('test_track.plan_view.base_info') }} </p>
+        <br/>
+        <el-row>
+          <el-col>
+            <ms-basis-api  :moduleOptions="moduleOptions"
+                           :basisData="newData" ref="basicForm"
+            />
+          </el-col>
+        </el-row>
+        <!-- 请求参数 -->
+        <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
+        <ms-basis-parameters :showScript="false" :request="request"/>
+
+        <!-- 其他信息-->
+        <ms-form-divider :title="$t('test_track.case.other_info')"/>
+        <api-info-container>
+          <el-form :model="newData" ref="api-form" label-width="100px">
+            <el-collapse-transition>
+              <el-tabs v-model="activeName" style="margin: 20px">
+                <el-tab-pane :label="$t('commons.remark')" name="remark" class="pane">
+                  <form-rich-text-item class="remark-item" :disabled="true" :data="newData" prop="remark" label-width="0"/>
+                </el-tab-pane>
+                <el-tab-pane :label="$t('commons.relationship.name')" name="dependencies" class="pane">
+                  <template v-slot:label>
+                    <tab-pane-count :title="$t('commons.relationship.name')" :count="relationshipCount"/>
+                  </template>
+                  <dependencies-list @setCount="setCount" :read-only="true" :resource-id="newData.id" resource-type="API" ref="newDependencies"/>
+                </el-tab-pane>
+              </el-tabs>
+            </el-collapse-transition>
+          </el-form>
+        </api-info-container>
+
+      </div>
+    </el-card>
+  </div>
+</template>
+<script>
+
+const {diff} = require("@/business/components/performance/v_node_diff");
+import MsBasisApi from ".././BasisApi";
+import MsBasisParameters from "../../request/database/BasisParameters";
+import MsFormDivider from "@/business/components/common/components/MsFormDivider";
+import ApiInfoContainer from "@/business/components/api/definition/components/complete/ApiInfoContainer";
+import DependenciesList from "@/business/components/common/components/graph/DependenciesList";
+import FormRichTextItem from "@/business/components/track/case/components/FormRichTextItem";
+import {getRelationshipCountApi} from "@/network/api";
+import TabPaneCount from "@/business/components/track/plan/view/comonents/report/detail/component/TabPaneCount";
+export default{
+  name:"SQLApiVersionDiff",
+  components:{
+    MsBasisApi,
+    MsBasisParameters,
+    MsFormDivider,
+    ApiInfoContainer,
+    TabPaneCount,
+    FormRichTextItem,
+    DependenciesList,
+  },
+  props:{
+    oldData:{
+      type:Object
+    },
+    newData:{
+      type:Object
+    },
+    showFollow:{
+      type:Boolean
+    },
+    newShowFollow:{
+      type:Boolean
+    },
+    moduleOptions:{},
+    request: {},
+    oldRequest:{},
+  },
+  data(){
+    return{
+      activeName: 'remark',
+      relationshipCount: 0,
+      oldRelationshipCount: 0,
+    }
+  },
+  methods:{
+    getDiff(){
+      let oldVnode = this.$refs.old
+      let vnode = this.$refs.new
+      diff(oldVnode,vnode);
+    },
+    setCount(count) {
+      this.relationshipCount = count;
+      this.$nextTick(function () {
+        setTimeout(this.getChildDiff,1000)
+      })
+    },
+    setOldCount(count) {
+      this.oldRelationshipCount = count;
+    },
+    getChildDiff(){
+      let oldVnode = this.$refs.oldDependencies
+      let vnode = this.$refs.newDependencies
+      if(oldVnode._data.postCount>0||oldVnode._data.preCount>0||vnode._data.postCount>0||vnode._data.preCount>0){
+        diff(oldVnode,vnode);
+      }
+    }
+  },
+  mounted() {
+    getRelationshipCountApi(this.newData.id, (data) => {
+      this.relationshipCount = data;
+    });
+    getRelationshipCountApi(this.oldData.id, (data) => {
+      this.oldRelationshipCount = data;
+    });
+    this.$nextTick(function () {
+      setTimeout(this.getDiff,(this.$refs.old.$children.length+1)/2*1000)
+    })
+  }
+
+
+}
+</script>
+<style scoped>
+.compare-class{
+  display: flex;
+  justify-content:space-between;
+}
+</style>

frontend/src/business/components/api/definition/components/complete/version/TCPApiVersionDiff.vue

@@ -0,0 +1,266 @@
+<template>
+  <div class="compare-class">
+    <el-card style="width: 50%;" ref="old">
+      <div style="background-color: white;">
+        <el-row>
+          <el-col>
+            <!--操作按钮-->
+            <el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!showFollow">
+              <i class="el-icon-star-off"
+                 style="color: #783987; font-size: 25px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
+            </el-tooltip>
+            <el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="showFollow">
+              <i class="el-icon-star-on"
+                 style="color: #783987; font-size: 28px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
+            </el-tooltip>
+          </el-col>
+        </el-row>
+        <!-- 基础信息 -->
+        <p class="tip">{{ $t('test_track.plan_view.base_info') }} </p>
+        <br/>
+        <el-row>
+          <el-col>
+            <ms-tcp-basic-api
+              :is-diff = true
+              :method-types="methodTypes"
+              :moduleOptions="moduleOptions"
+              :basisData="oldData" ref="basicForm"/>
+          </el-col>
+        </el-row>
+        <!-- MOCK信息 -->
+        <p class="tip">{{ $t('test_track.plan_view.mock_info') }} </p>
+        <div class="mock-info">
+          <el-row>
+            <el-col :span="20">
+              Mock地址：
+              <el-link v-if="this.mockInfo !== '' " target="_blank" style="color: black"
+                       type="primary">{{ this.mockInfo }}
+              </el-link>
+              <el-link v-else target="_blank" style="color: darkred"
+                       type="primary">当前项目未开启Mock服务
+              </el-link>
+            </el-col>
+          </el-row>
+        </div>
+        <!-- 请求参数 -->
+        <div v-if="oldApiProtocol==='TCP'">
+          <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
+
+          <ms-tcp-format-parameters :show-script="false" :request="oldRequest" ref="tcpFormatParameter"/>
+        </div>
+        <div v-else-if="oldApiProtocol==='ESB'">
+          <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
+          <esb-definition v-xpack v-if="showXpackCompnent" :show-script="false" :request="oldRequest" ref="esbDefinition"/>
+          <p class="tip">{{ $t('api_test.definition.request.res_param') }}</p>
+          <esb-definition-response v-xpack v-if="showXpackCompnent" :is-api-component="true"
+                                   :request="oldRequest"/>
+          <!--      <api-response-component :currentProtocol="apiCase.request.protocol" :api-item="apiCase"/>-->
+        </div>
+
+        <ms-form-divider :title="$t('test_track.case.other_info')"/>
+        <api-info-container>
+          <el-form :model="oldData" ref="api-form" label-width="100px">
+            <el-collapse-transition>
+              <el-tabs v-model="activeName" style="margin: 20px">
+                <el-tab-pane :label="$t('commons.remark')" name="remark" class="pane">
+                  <form-rich-text-item class="remark-item" :disabled="true" :data="oldData" prop="remark" label-width="0"/>
+                </el-tab-pane>
+                <el-tab-pane :label="$t('commons.relationship.name')" name="dependencies" class="pane">
+                  <template v-slot:label>
+                    <tab-pane-count :title="$t('commons.relationship.name')" :count="oldRelationshipCount"/>
+                  </template>
+                  <dependencies-list  @setCount="setOldCount" :read-only="true" :resource-id="oldData.id" resource-type="API" ref="oldDependencies"/>
+                </el-tab-pane>
+              </el-tabs>
+            </el-collapse-transition>
+          </el-form>
+        </api-info-container>
+
+      </div>
+    </el-card>
+    <el-card style="width: 50%;" ref="new">
+      <div style="background-color: white;">
+        <el-row>
+          <el-col>
+            <!--操作按钮-->
+            <el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!newShowFollow">
+              <i class="el-icon-star-off"
+                 style="color: #783987; font-size: 25px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
+            </el-tooltip>
+            <el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="newShowFollow">
+              <i class="el-icon-star-on"
+                 style="color: #783987; font-size: 28px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
+            </el-tooltip>
+          </el-col>
+        </el-row>
+        <!-- 基础信息 -->
+        <p class="tip">{{ $t('test_track.plan_view.base_info') }} </p>
+        <br/>
+        <el-row>
+          <el-col>
+            <ms-tcp-basic-api
+              :is-diff = true
+              :method-types="methodTypes"
+              :moduleOptions="moduleOptions"
+              :basisData="newData" ref="basicForm"/>
+          </el-col>
+        </el-row>
+        <!-- MOCK信息 -->
+        <p class="tip">{{ $t('test_track.plan_view.mock_info') }} </p>
+        <div class="mock-info">
+          <el-row>
+            <el-col :span="20">
+              Mock地址：
+              <el-link v-if="this.mockInfo !== '' " target="_blank" style="color: black"
+                       type="primary">{{ this.mockInfo }}
+              </el-link>
+              <el-link v-else target="_blank" style="color: darkred"
+                       type="primary">当前项目未开启Mock服务
+              </el-link>
+            </el-col>
+          </el-row>
+        </div>
+        <!-- 请求参数 -->
+        <div v-if="apiProtocol=='TCP'">
+          <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
+          <ms-tcp-format-parameters :show-script="false" :request="request" ref="tcpFormatParameter"/>
+        </div>
+        <div v-else-if="apiProtocol=='ESB'">
+          <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
+          <esb-definition v-xpack v-if="showXpackCompnent" :show-script="false" :request="request" ref="esbDefinition"/>
+          <p class="tip">{{ $t('api_test.definition.request.res_param') }}</p>
+          <esb-definition-response v-xpack v-if="showXpackCompnent" :is-api-component="true"
+                                   :request="request"/>
+          <!--      <api-response-component :currentProtocol="apiCase.request.protocol" :api-item="apiCase"/>-->
+        </div>
+
+        <!-- 其他信息-->
+        <ms-form-divider :title="$t('test_track.case.other_info')"/>
+        <api-info-container>
+          <el-form :model="newData" ref="api-form" label-width="100px">
+            <el-collapse-transition>
+              <el-tabs v-model="activeName" style="margin: 20px">
+                <el-tab-pane :label="$t('commons.remark')" name="remark" class="pane">
+                  <form-rich-text-item class="remark-item" :disabled="true" :data="newData" prop="remark" label-width="0"/>
+                </el-tab-pane>
+                <el-tab-pane :label="$t('commons.relationship.name')" name="dependencies" class="pane">
+                  <template v-slot:label>
+                    <tab-pane-count :title="$t('commons.relationship.name')" :count="relationshipCount"/>
+                  </template>
+                  <dependencies-list @setCount="setCount" :read-only="true" :resource-id="newData.id" resource-type="API" ref="newDependencies"/>
+                </el-tab-pane>
+              </el-tabs>
+            </el-collapse-transition>
+          </el-form>
+        </api-info-container>
+
+
+      </div>
+    </el-card>
+  </div>
+</template>
+<script>
+
+
+import MsTcpBasicApi from ".././TCPBasicApi";
+import MsTcpFormatParameters from "../../request/tcp/TcpFormatParameters";
+import MsFormDivider from "@/business/components/common/components/MsFormDivider";
+import ApiInfoContainer from "@/business/components/api/definition/components/complete/ApiInfoContainer";
+import DependenciesList from "@/business/components/common/components/graph/DependenciesList";
+import FormRichTextItem from "@/business/components/track/case/components/FormRichTextItem";
+import {getRelationshipCountApi} from "@/network/api";
+import TabPaneCount from "@/business/components/track/plan/view/comonents/report/detail/component/TabPaneCount";
+
+const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
+const esbDefinition = (requireComponent != null && requireComponent.keys().length) > 0 ? requireComponent("./apidefinition/EsbDefinition.vue") : {};
+const esbDefinitionResponse = (requireComponent != null && requireComponent.keys().length) > 0 ? requireComponent("./apidefinition/EsbDefinitionResponse.vue") : {};
+const {diff} = require("@/business/components/performance/v_node_diff");
+
+export default{
+  name:"TCPApiVersionDiff",
+  components:{
+    MsTcpBasicApi,
+    MsTcpFormatParameters,
+    MsFormDivider,
+    ApiInfoContainer,
+    TabPaneCount,
+    FormRichTextItem,
+    DependenciesList,
+    "esbDefinition": esbDefinition.default,
+    "esbDefinitionResponse": esbDefinitionResponse.default,
+  },
+  props:{
+    oldData:{
+      type:Object
+    },
+    newData:{
+      type:Object
+    },
+    showFollow:{
+      type:Boolean
+    },
+    newShowFollow:{
+      type:Boolean
+    },
+    moduleOptions:{},
+    request: {},
+    oldRequest:{},
+    mockInfo:String,
+    apiProtocol:String,
+    oldApiProtocol:String,
+    showXpackCompnent:{
+      type:Boolean,
+      default:false
+    },
+    methodTypes:Array,
+  },
+  data(){
+    return{
+      activeName: 'remark',
+      relationshipCount: 0,
+      oldRelationshipCount: 0,
+    }
+  },
+  methods:{
+    getDiff(){
+      let oldVnode = this.$refs.old
+      let vnode = this.$refs.new
+      diff(oldVnode,vnode);
+    },
+    setCount(count) {
+      this.relationshipCount = count;
+      this.$nextTick(function () {
+        setTimeout(this.getChildDiff,1000)
+      })
+    },
+    setOldCount(count) {
+      this.oldRelationshipCount = count;
+    },
+    getChildDiff(){
+      let oldVnode = this.$refs.oldDependencies
+      let vnode = this.$refs.newDependencies
+      if(oldVnode._data.postCount>0||oldVnode._data.preCount>0||vnode._data.postCount>0||vnode._data.preCount>0){
+        diff(oldVnode,vnode);
+      }
+    }
+  },
+  mounted() {
+    getRelationshipCountApi(this.newData.id, (data) => {
+      this.relationshipCount = data;
+    });
+    getRelationshipCountApi(this.oldData.id, (data) => {
+      this.oldRelationshipCount = data;
+    });
+    this.$nextTick(function () {
+      setTimeout(this.getDiff,(this.$refs.old.$children.length+1)/2*1000)
+    })
+  }
+
+}
+</script>
+<style scoped>
+.compare-class{
+  display: flex;
+  justify-content:space-between;
+}
+</style>