fix(接口测试): 测试详情tcp无日志更新详情

--bug=1009209 --user=王孝刚 [ github#8776]接口详情-变更历史无变更详情日志
https://www.tapd.cn/55049933/s/1170929

backend/src/main/java/io/metersphere/api/service/ApiDefinitionService.java

@@ -135,6 +135,8 @@ public class ApiDefinitionService {
     private ExtProjectVersionMapper extProjectVersionMapper;
     @Resource
     private ProjectApplicationService projectApplicationService;
+    @Resource
+    private EsbApiParamsMapper esbApiParamsMapper;
 
     private ThreadLocal<Long> currentApiOrder = new ThreadLocal<>();
     private ThreadLocal<Long> currentApiCaseOrder = new ThreadLocal<>();
@@ -1803,6 +1805,25 @@ public class ApiDefinitionService {
     public String getLogDetails(String id) {
         ApiDefinitionWithBLOBs bloBs = apiDefinitionMapper.selectByPrimaryKey(id);
         if (bloBs != null) {
+            if (StringUtils.equals(bloBs.getMethod(), "ESB")) {
+                EsbApiParamsExample example = new EsbApiParamsExample();
+                example.createCriteria().andResourceIdEqualTo(id);
+                List<EsbApiParamsWithBLOBs> list = esbApiParamsMapper.selectByExampleWithBLOBs(example);
+                JSONObject request = JSONObject.parseObject(bloBs.getRequest());
+                Object backEsbDataStruct = request.get("backEsbDataStruct");
+                Map<String, Object> map = new HashMap<>();
+                if (backEsbDataStruct != null) {
+                    map.put("backEsbDataStruct", backEsbDataStruct);
+                    if (CollectionUtils.isNotEmpty(list)) {
+                        map.put("backScript", list.get(0).getBackedScript());
+                    }
+                    map.put("type", "ESB");
+                }
+                request.remove("backEsbDataStruct");
+                bloBs.setRequest(JSONObject.toJSONString(request));
+                String response = JSONObject.toJSONString(map);
+                bloBs.setResponse(response);
+            }
             List<DetailColumn> columns = ReflexObjectUtil.getColumns(bloBs, DefinitionReference.definitionColumns);
             OperatingLogDetails details = new OperatingLogDetails(JSON.toJSONString(id), bloBs.getProjectId(), bloBs.getName(), bloBs.getCreateUser(), columns);
             return JSON.toJSONString(details);

backend/src/main/java/io/metersphere/log/utils/ApiDefinitionDiffUtil.java

@@ -39,9 +39,36 @@ public class ApiDefinitionDiffUtil {
                 diffMap.put("type", bloBsNew.getString("type"));
             }
         }
+        if (bloBsNew.getString("type").equals("ESB")) {
+            diffEsbResponse(bloBsNew, bloBsOld, diffMap);
+            if (diffMap.size() > 0) {
+                diffMap.put("type", bloBsNew.getString("type"));
+            }
+        }
         return JSON.toJSONString(diffMap);
     }
 
+    private static void diffEsbResponse(JSONObject bloBsNew, JSONObject bloBsOld, Map<String, String> diffMap) {
+        //对比响应报文
+        if (bloBsNew.get("backEsbDataStruct") != null && bloBsOld.get("backEsbDataStruct") != null) {
+            String backEsbDataStructNew = JSON_START + bloBsNew.get("backEsbDataStruct").toString() + JSON_END;
+            String backEsbDataStructOld = JSON_START + bloBsOld.get("backEsbDataStruct").toString() + JSON_END;
+            if (!StringUtils.equals(backEsbDataStructNew, backEsbDataStructOld)) {
+                diffMap.put("backEsbDataStruct1", backEsbDataStructNew);
+                diffMap.put("backEsbDataStruct2", backEsbDataStructOld);
+            }
+        }
+
+        if (!StringUtils.equals(bloBsNew.getString("backScript"), bloBsOld.getString("backScript"))) {
+            String backScriptNew = JSON_START + bloBsNew.get("backScript") + JSON_END;
+            String backScriptOld = JSON_START + bloBsOld.get("backScript") + JSON_END;
+            if (!StringUtils.equals(backScriptNew, backScriptOld)) {
+                diffMap.put("backScript1", backScriptNew);
+                diffMap.put("backScript2", backScriptOld);
+            }
+        }
+    }
+
     public static String diff(String newValue, String oldValue) {
         try {
             JSONObject bloBsNew = JSON.parseObject(newValue, Feature.DisableSpecialKeyDetect);
@@ -241,52 +268,86 @@ public class ApiDefinitionDiffUtil {
     }
 
     private static void diffTcp(MsTCPSampler tcpNew, MsTCPSampler tcpOld, JsonDiff jsonDiff, Map<String, String> diffMap) {
-        // 对比请求参数
-        if (CollectionUtils.isNotEmpty(tcpNew.getParameters())) {
-            tcpNew.getParameters().remove(tcpNew.getParameters().size() - 1);
-            tcpOld.getParameters().remove(tcpOld.getParameters().size() - 1);
-        }
-        String queryNew = JSON_START + JSON.toJSONString(tcpNew.getParameters()) + JSON_END;
-        String queryOld = JSON_START + JSON.toJSONString(tcpOld.getParameters()) + JSON_END;
-        if (!StringUtils.equals(queryNew, queryOld)) {
-            String patch = jsonDiff.diff(queryOld, queryNew);
-            String diff = jsonDiff.apply(queryNew, patch);
-            if (StringUtils.isNotEmpty(diff)) {
-                diffMap.put("query", diff);
-            }
-        }
-        // 对比BODY-JSON参数
-        if (!StringUtils.equals(tcpNew.getJsonDataStruct(), tcpOld.getJsonDataStruct())) {
-            String patch = jsonDiff.diff(tcpOld.getJsonDataStruct(), tcpNew.getJsonDataStruct());
-            String diff = jsonDiff.apply(tcpNew.getJsonDataStruct(), patch);
-            if (StringUtils.isNotEmpty(diff)) {
-                diffMap.put("body_json", diff);
-            }
-        }
-        // 对比BODY-XML参数
-        String xmlNew = JSON_START + JSON.toJSONString(tcpNew.getXmlDataStruct()) + JSON_END;
-        String xmlOld = JSON_START + JSON.toJSONString(tcpOld.getXmlDataStruct()) + JSON_END;
-        if (!StringUtils.equals(xmlNew, xmlOld)) {
-            diffMap.put("body_xml_1", JSON.toJSONString(tcpNew.getXmlDataStruct()));
-            diffMap.put("body_xml_2", JSON.toJSONString(tcpOld.getXmlDataStruct()));
-            String patch = jsonDiff.diff(xmlOld, xmlNew);
-            String diffPatch = jsonDiff.apply(xmlNew, patch);
-            if (StringUtils.isNotEmpty(diffPatch)) {
-                diffMap.put("body_xml", diffPatch);
-            }
-        }
-        // 对比BODY-RAW参数
-        if (!StringUtils.equals(tcpNew.getRawDataStruct(), tcpOld.getRawDataStruct())) {
-            diffMap.put("body_raw_1", tcpNew.getRawDataStruct());
-            diffMap.put("body_raw_2", tcpOld.getRawDataStruct());
-        }
-        // 对比pre参数
-        if (tcpNew.getTcpPreProcessor() != null && !StringUtils.equals(tcpNew.getTcpPreProcessor().getScript(), tcpOld.getTcpPreProcessor().getScript())) {
-            diffMap.put("script_1", tcpNew.getTcpPreProcessor().getScript());
-            diffMap.put("script_2", tcpOld.getTcpPreProcessor().getScript());
-        }
+       if (("ESB").equals(tcpNew.getProtocol())  && ("ESB").equals(tcpOld.getProtocol())) {
+           diffMap.put("type", "ESB" );
+           //对比参数
+           String queryNewEsb = JSON_START + JSON.toJSONString(tcpNew.getEsbDataStruct()) + JSON_END;
+           String queryOldEsb = JSON_START + JSON.toJSONString(tcpOld.getEsbDataStruct()) + JSON_END;
+           if (!StringUtils.equals(queryNewEsb, queryOldEsb)) {
+               diffMap.put("query1", queryNewEsb);
+               diffMap.put("query2", queryOldEsb);
+           }
+           //报文模版
+           String requestNewEsb = JSON_START + JSON.toJSONString(tcpNew.getRequest()) + JSON_END;
+           String requestOldEsb = JSON_START + JSON.toJSONString(tcpOld.getRequest()) + JSON_END;
+           if (!StringUtils.equals(requestNewEsb, requestOldEsb)) {
+               diffMap.put("request1", requestNewEsb);
+               diffMap.put("request2", requestOldEsb);
+           }
+           // 其他设置
+           List<DetailColumn> columns = ReflexObjectUtil.getColumns(tcpNew, DefinitionReference.esbColumns);
+           List<DetailColumn> columnsOld = ReflexObjectUtil.getColumns(tcpOld, DefinitionReference.esbColumns);
+           List<DetailColumn> diffColumns = getColumn(columns, columnsOld);
+           if (CollectionUtils.isNotEmpty(diffColumns)) {
+               diffMap.put("otherConfig", JSON.toJSONString(diffColumns));
+           }
+       }
+       else {
+           // 对比请求参数
+           if (CollectionUtils.isNotEmpty(tcpNew.getParameters())) {
+               tcpNew.getParameters().remove(tcpNew.getParameters().size() - 1);
+               tcpOld.getParameters().remove(tcpOld.getParameters().size() - 1);
+           }
+           String queryNew = JSON_START + JSON.toJSONString(tcpNew.getParameters()) + JSON_END;
+           String queryOld = JSON_START + JSON.toJSONString(tcpOld.getParameters()) + JSON_END;
+           if (!StringUtils.equals(queryNew, queryOld)) {
+               String patch = jsonDiff.diff(queryOld, queryNew);
+               String diff = jsonDiff.apply(queryNew, patch);
+               if (StringUtils.isNotEmpty(diff)) {
+                   diffMap.put("query", diff);
+               }
+           }
+           // 对比BODY-JSON参数
+           if (!StringUtils.equals(tcpNew.getJsonDataStruct(), tcpOld.getJsonDataStruct())) {
+               String patch = jsonDiff.diff(tcpOld.getJsonDataStruct(), tcpNew.getJsonDataStruct());
+               String diff = jsonDiff.apply(tcpNew.getJsonDataStruct(), patch);
+               if (StringUtils.isNotEmpty(diff) && !StringUtils.equals(patch, "{}")) {
+                   diffMap.put("body_json", diff);
+               }
+           }
+           // 对比BODY-XML参数
+           String xmlNew = JSON_START + JSON.toJSONString(tcpNew.getXmlDataStruct()) + JSON_END;
+           String xmlOld = JSON_START + JSON.toJSONString(tcpOld.getXmlDataStruct()) + JSON_END;
+           if (!StringUtils.equals(xmlNew, xmlOld)) {
+               diffMap.put("body_xml_1", JSON.toJSONString(tcpNew.getXmlDataStruct()));
+               diffMap.put("body_xml_2", JSON.toJSONString(tcpOld.getXmlDataStruct()));
+               String patch = jsonDiff.diff(xmlOld, xmlNew);
+               String diffPatch = jsonDiff.apply(xmlNew, patch);
+               if (StringUtils.isNotEmpty(diffPatch)) {
+                   diffMap.put("body_xml", diffPatch);
+               }
+           }
+           // 对比BODY-RAW参数
+           if (!StringUtils.equals(tcpNew.getRawDataStruct(), tcpOld.getRawDataStruct())) {
+               diffMap.put("body_raw_1", tcpNew.getRawDataStruct());
+               diffMap.put("body_raw_2", tcpOld.getRawDataStruct());
+           }
+           // 对比pre参数
+           if (tcpNew.getTcpPreProcessor() != null && !StringUtils.equals(tcpNew.getTcpPreProcessor().getScript(), tcpOld.getTcpPreProcessor().getScript())) {
+               diffMap.put("script_1", tcpNew.getTcpPreProcessor().getScript());
+               diffMap.put("script_2", tcpOld.getTcpPreProcessor().getScript());
+           }
+           // 其他设置
+           List<DetailColumn> columns = ReflexObjectUtil.getColumns(tcpNew, DefinitionReference.esbColumns);
+           List<DetailColumn> columnsOld = ReflexObjectUtil.getColumns(tcpOld, DefinitionReference.esbColumns);
+           List<DetailColumn> diffColumns = getColumn(columns, columnsOld);
+           if (CollectionUtils.isNotEmpty(diffColumns)) {
+               diffMap.put("other_config", JSON.toJSONString(diffColumns));
+           }
+       }
     }
 
+
     private static List<DetailColumn> getColumn(List<DetailColumn> columnsNew, List<DetailColumn> columnsOld) {
         OperatingLogDetails detailsNew = new OperatingLogDetails();
         detailsNew.setColumns(columnsNew);

backend/src/main/java/io/metersphere/log/vo/api/DefinitionReference.java

@@ -8,6 +8,7 @@ public class DefinitionReference {
     public static Map<String, String> caseColumns = new LinkedHashMap<>();
     public static Map<String, String> jdbcColumns = new LinkedHashMap<>();
     public static Map<String, String> httpColumns = new LinkedHashMap<>();
+    public static Map<String, String> esbColumns = new LinkedHashMap<>();
     public static Map<String, String> authColumns = new LinkedHashMap<>();
 
     static {
@@ -15,6 +16,7 @@ public class DefinitionReference {
         caseColumns.clear();
         jdbcColumns.clear();
         httpColumns.clear();
+        esbColumns.clear();
         authColumns.clear();
         definitionColumns.put("name", "接口名称");
         definitionColumns.put("createUser", "创建人");
@@ -52,15 +54,27 @@ public class DefinitionReference {
         jdbcColumns.put("resultVariable", "存储结果");
         jdbcColumns.put("variableNames", "按列存储");
         // http
-        httpColumns.put("connectTimeout","连接超时");
-        httpColumns.put("responseTimeout","响应超时");
-        httpColumns.put("alias","证书别名");
-        httpColumns.put("followRedirects","跟随重定向");
+        httpColumns.put("connectTimeout", "连接超时");
+        httpColumns.put("responseTimeout", "响应超时");
+        httpColumns.put("alias", "证书别名");
+        httpColumns.put("followRedirects", "跟随重定向");
         // http auth
-        authColumns.put("verification","认证方式");
-        authColumns.put("username","用户名");
-        authColumns.put("password","密码");
-        authColumns.put("encrypt","加密");
+        authColumns.put("verification", "认证方式");
+        authColumns.put("username", "用户名");
+        authColumns.put("password", "密码");
+        authColumns.put("encrypt", "加密");
 
+        //tcp esb 其他设置
+        esbColumns.put("classname", "TCPClient");
+        esbColumns.put("ctimeout", "连接(ms)");
+        esbColumns.put("timeout", "响应(ms)");
+        esbColumns.put("soLinger", "SO LINGER");
+        esbColumns.put("eolByte", "行尾(EOL)子节值");
+        esbColumns.put("username", "用户名");
+        esbColumns.put("password", "密码");
+        esbColumns.put("reUseConnection", "Re-use connection");
+        esbColumns.put("closeConnection", "关闭连接");
+        esbColumns.put("nodelay", "设置无延迟");
+        esbColumns.put("connectEncoding", "Connect encoding");
     }
 }

frontend/src/business/components/history/ChangeHistory.vue

@@ -103,6 +103,19 @@ export default {
         this.totalCount = response.data.itemCount;
         this.loading = false;
         if (data) {
+          //过滤接口定义请求参数为空的数据
+          if (modules.length > 0 && modules[0] === '接口定义') {
+            for (let i = 0; i < data.length; i++) {
+              if (data[i].details.columns && data[i].details.columns.length > 0) {
+                let columns = data[i].details.columns;
+                for (let j = 0; j < columns.length; j++) {
+                  if (columns[j].columnName === 'request' && (columns[j].diffValue === null || columns[j].diffValue === '')) {
+                    data[i].details.columns.splice(j, 1);
+                  }
+                }
+              }
+            }
+          }
           // 过滤非全局脚本历史变更数据
           if (modules.length > 0 && modules[0] === '项目-环境设置') {
             // 环境设置不显示变更字段

frontend/src/business/components/history/api/ApiHistoryDetail.vue

@@ -13,6 +13,7 @@
         <p class="tip">{{ this.$t('report.test_log_details') }} </p>
         <ms-api-http-request-params :request="detail" v-if="detail.type === 'HTTPSamplerProxy' || detail.type === 'HTTP'"/>
         <ms-api-tcp-parameters :request="detail" v-if="detail.type === 'TCPSampler'"/>
+        <ms-api-tcp-esb :request="detail" v-if="detail.type === 'ESB'"/>
         <ms-api-jdbc-parameters :request="detail" v-if="detail.type === 'JDBCSampler'"/>
         <ms-api-dubbo-parameters :request="detail" v-if="detail.type === 'DubboSampler'"/>
       </div>
@@ -26,13 +27,14 @@ import MsApiHttpRequestParams from "./ApiHttpRequestParams";
 import MsApiTcpParameters from "./ApiTcpParameters";
 import MsApiJdbcParameters from "./ApiJdbcParameters";
 import MsApiDubboParameters from "./ApiDubboParameters";
+import MsApiTcpEsb from "@/business/components/history/api/ApiTcpEsb";
 
 import {getUUID} from "@/common/js/utils";
 import Convert from "@/business/components/common/json-schema/convert/convert";
 
 export default {
   name: "MsApiHistoryDetail",
-  components: {MsApiHttpRequestParams, MsApiTcpParameters, MsApiJdbcParameters, MsApiDubboParameters},
+  components: {MsApiHttpRequestParams, MsApiTcpParameters, MsApiJdbcParameters, MsApiDubboParameters , MsApiTcpEsb},
   props: {
     title: String,
   },
@@ -61,6 +63,8 @@ export default {
           this.formatHttp(diffValue);
         } else if (diffValue.type === 'TCPSampler') {
           this.formatTcp(diffValue);
+        }else if (diffValue.type === 'ESB') {
+            this.formatTcpEsb(diffValue);
         } else if (diffValue.type === 'JDBCSampler') {
           this.formatJdbc(diffValue);
         } else if (diffValue.type === 'DubboSampler') {
@@ -198,6 +202,45 @@ export default {
         this.detail.script_2 = diffValue.script_2;
         this.detail.headerId = getUUID();
       }
+      if (diffValue.other_config) {
+        this.detail.otherConfig = JSON.parse(diffValue.other_config);
+        this.detail.headerId = getUUID();
+      }
+    },
+    formatTcpEsb(diffValue) {
+      if (!this.detail.body) {
+        this.detail.body = {};
+      }
+      if (diffValue.query1 || diffValue.query2) {
+        this.detail.query1 = diffValue.query1;
+        this.detail.query2 = diffValue.query2
+        this.detail.headerId = getUUID();
+      }
+      if (diffValue.request1 || diffValue.request2) {
+        this.detail.request1 = diffValue.request1;
+        this.detail.request2 = diffValue.request2;
+        this.detail.headerId = getUUID();
+      }
+      if (diffValue.script1 || diffValue.script2) {
+        this.detail.script1 = diffValue.script1;
+        this.detail.script2 = diffValue.script2;
+        this.detail.headerId = getUUID();
+      }
+      if (diffValue.otherConfig) {
+        this.detail.otherConfig = JSON.parse(diffValue.otherConfig);
+        this.detail.headerId = getUUID();
+      }
+      if (diffValue.backEsbDataStruct1 || diffValue.backEsbDataStruct2) {
+        this.detail.backEsbDataStruct1 = diffValue.backEsbDataStruct1;
+        this.detail.backEsbDataStruct2 = diffValue.backEsbDataStruct2;
+        this.detail.headerId = getUUID();
+      }
+      if (diffValue.backScript1 || diffValue.backScript2) {
+        this.detail.backScript1 = diffValue.backScript1;
+        this.detail.backScript2 = diffValue.backScript2;
+        this.detail.headerId = getUUID();
+      }
+
     },
     formatJdbc(diffValue) {
       if (diffValue.base) {

frontend/src/business/components/history/api/ApiTcpEsb.vue

@@ -0,0 +1,232 @@
+<template>
+  <div>
+    <div style="border:1px #DCDFE6 solid; height: 100%;border-radius: 4px ;width: 98% ;">
+      <el-form class="tcp" :model="request" ref="request" :disabled="isReadOnly" style="margin: 20px">
+        <el-tabs v-model="activeName" class="request-tabs">
+
+          <el-tab-pane name="parameters" :label="$t('api_test.definition.request.req_param')"
+                       v-if="request.query1 || request.query2">
+            <pre v-html="getDiff(request.query2,request.query1)"></pre>
+          </el-tab-pane>
+
+          <!--报文模版-->
+          <el-tab-pane :label="$t('api_test.definition.request.message_template')" name="request"
+                       v-if="request.request1 || request.request2">
+            <pre v-html="getDiff(request.request2,request.request1)"></pre>
+          </el-tab-pane>
+
+          <!--其他设置-->
+          <el-tab-pane :label="$t('api_test.definition.request.other_config')" name="other" class="other-config"
+                       v-if="request.otherConfig">
+            <el-table :data="request.otherConfig">
+              <el-table-column prop="columnTitle" :label="$t('operating_log.change_field')"/>
+              <el-table-column prop="originalValue" :label="$t('operating_log.before_change')">
+                <template v-slot:default="scope">
+                  <el-tooltip :content="scope.row.originalValue">
+                    <div class="current-value ms-tag-del">{{ scope.row.originalValue }}</div>
+                  </el-tooltip>
+                </template>
+              </el-table-column>
+              <el-table-column prop="newValue" :label="$t('operating_log.after_change')">
+                <template v-slot:default="scope">
+                  <el-tooltip :content="scope.row.newValue">
+                    <div class="current-value ms-tag-add">{{ scope.row.newValue }}</div>
+                  </el-tooltip>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-tab-pane>
+
+          <el-tab-pane :label="$t('api_test.definition.request.response_template')" name="esbData" class="pane"
+                       v-if="request.backEsbDataStruct1 || request.backEsbDataStruct2">
+            <pre v-html="getDiff(request.backEsbDataStruct2,request.backEsbDataStruct1)"></pre>
+          </el-tab-pane>
+
+          <el-tab-pane :label="$t('api_test.definition.request.post_script')" name="backScript" class="pane"
+                       v-if="request.backScript1 || request.backScript2">
+            <pre v-html="getDiff(request.backScript2 ,request.backScript1)"></pre>
+          </el-tab-pane>
+
+        </el-tabs>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import MsJsonCodeEdit from "./json-view/ComparedEditor";
+import MsApiKeyValueDetail from "./common/ApiKeyValueDetail";
+import MsCodeEdit from "@/business/components/common/components/MsCodeEdit";
+import EsbTable from "@/business/components/xpack/apidefinition/EsbTable";
+
+const jsondiffpatch = require('jsondiffpatch');
+const formattersHtml = jsondiffpatch.formatters.html;
+
+export default {
+  name: "MsApiTcpParameters",
+  components: {MsJsonCodeEdit, MsApiKeyValueDetail , MsCodeEdit , EsbTable},
+  props: {
+    request: {},
+    basisData: {},
+    moduleOptions: Array,
+    isReadOnly: {
+      type: Boolean,
+      default: false
+    },
+    showScript: {
+      type: Boolean,
+      default: true,
+    },
+    referenced: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      spanNum: 21,
+      activeName: "request",
+      reportType: "xml",
+      isReloadData: false,
+      refreshedXmlTable: true,
+      currentProjectId: "",
+    }
+  },
+  created() {
+    if (this.request.body && (this.request.body.jsonSchema || this.request.body.xml || this.request.body.raw_1 || this.request.body.raw_2)) {
+      this.activeName = "request";
+      if (this.request.body.jsonSchema) {
+        this.reportType = "json";
+      }
+      if (this.request.body.xml) {
+        this.reportType = "xml";
+      }
+      if (this.request.body.raw_1 || this.request.body.raw_2) {
+        this.reportType = "raw";
+      }
+    } else if (this.request.query1 || this.request.query2) {
+      this.activeName = "parameters";
+    } else if (this.request.request1 || this.request.request2) {
+      this.activeName = "request";
+    } else if (this.request.script1 || this.request.script2) {
+      this.activeName = "script";
+    } else if (this.request.otherConfig) {
+      this.activeName = "other";
+    } else if (this.request.backEsbDataStruct1 || this.request.backEsbDataStruct2) {
+      this.activeName = "esbData";
+    } else if (this.request.backScript1 || this.request.backScript2) {
+      this.activeName = "backScript";
+    }
+  },
+  watch: {
+    'request.headerId'() {
+      if (this.request.body) {
+        this.activeName = "request";
+        if (this.request.body.jsonSchema) {
+          this.reportType = "json";
+        }
+        if (this.request.body.xml) {
+          this.reportType = "xml";
+        }
+        if (this.request.body.raw_1 || this.request.body.raw_2) {
+          this.reportType = "raw";
+        }
+      } else if (this.request.query_1 || this.request.query_2) {
+        this.activeName = "parameters";
+      } else if (this.request.request_1 || this.request.request_2) {
+        this.activeName = "request";
+      } else if (this.request.script_1 || this.request.script_2) {
+        this.activeName = "script";
+      } else if (this.request.other_config) {
+        this.activeName = "other";
+      } else if (this.request.backEsbDataStruct_1 || this.request.backEsbDataStruct_2) {
+        this.activeName = "esbData";
+      } else if (this.request.backScript_1 || this.request.backScript_2) {
+        this.activeName = "backScript";
+      }
+    }
+  },
+  methods: {
+    getDiff(v1, v2) {
+      let delta = jsondiffpatch.diff(JSON.parse(v1), JSON.parse(v2));
+      return formattersHtml.format(delta, JSON.parse(v1));
+    },
+  }
+}
+</script>
+
+<style scoped>
+.tcp >>> .el-input-number {
+  width: 100%;
+}
+
+.send-request {
+  padding: 0px 0;
+  height: 300px;
+  border: 1px #DCDFE6 solid;
+  border-radius: 4px;
+  width: 100%;
+}
+
+.ms-left-cell {
+  margin-top: 40px;
+}
+
+.ms-left-buttion {
+  margin: 6px 0px 8px 30px;
+}
+
+/deep/ .el-form-item {
+  margin-bottom: 15px;
+}
+
+.ms-left-cell {
+  margin-top: 40px;
+}
+
+.ms-left-buttion {
+  margin: 6px 0px 8px 30px;
+}
+
+/deep/ .el-form-item {
+  margin-bottom: 15px;
+}
+
+/deep/ .instructions-icon {
+  font-size: 14px !important;
+}
+
+.request-tabs {
+  margin: 20px;
+  min-height: 200px;
+}
+
+.other-config {
+  padding: 15px;
+}
+
+.current-value {
+  display: inline-block;
+  overflow-x: hidden;
+  padding-bottom: 0;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: 120px;
+}
+
+.ms-tag-del {
+  text-decoration: line-through;
+  text-decoration-color: red;
+  -moz-text-decoration-line: line-through;
+  background: #F3E6E7;
+}
+
+.ms-tag-add {
+  background: #E2ECDC;
+}
+
+@import "~jsondiffpatch/dist/formatters-styles/html.css";
+@import "~jsondiffpatch/dist/formatters-styles/annotated.css";
+
+</style>

frontend/src/business/components/history/api/ApiTcpParameters.vue

@@ -34,13 +34,32 @@
             </div>
           </el-tab-pane>
 
-          <el-tab-pane :label="$t('api_test.definition.request.pre_script')" name="script" v-if="request.script_1 || request.script_2">
+          <el-tab-pane :label="$t('api_test.definition.request.pre_script')" name="script"
+                       v-if="request.script_1 || request.script_2">
             <pre v-html="getDiff(request.script_2,request.script_1)"></pre>
           </el-tab-pane>
 
-          <!--          <el-tab-pane :label="$t('api_test.definition.request.other_config')" name="other" class="other-config">-->
-
-          <!--          </el-tab-pane>-->
+          <!--其他设置-->
+          <el-tab-pane :label="$t('api_test.definition.request.other_config')" name="other" class="other-config"
+                       v-if="request.otherConfig">
+            <el-table :data="request.otherConfig">
+              <el-table-column prop="columnTitle" :label="$t('operating_log.change_field')"/>
+              <el-table-column prop="originalValue" :label="$t('operating_log.before_change')">
+                <template v-slot:default="scope">
+                  <el-tooltip :content="scope.row.originalValue">
+                    <div class="current-value ms-tag-del">{{ scope.row.originalValue }}</div>
+                  </el-tooltip>
+                </template>
+              </el-table-column>
+              <el-table-column prop="newValue" :label="$t('operating_log.after_change')">
+                <template v-slot:default="scope">
+                  <el-tooltip :content="scope.row.newValue">
+                    <div class="current-value ms-tag-add">{{ scope.row.newValue }}</div>
+                  </el-tooltip>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-tab-pane>
         </el-tabs>
       </el-form>
     </div>
@@ -100,6 +119,8 @@ export default {
       this.activeName = "parameters";
     } else if (this.request.script_1 || this.request.script_2) {
       this.activeName = "script";
+    } else if (this.request.otherConfig) {
+      this.activeName = "other";
     }
   },
   watch: {
@@ -119,6 +140,8 @@ export default {
         this.activeName = "parameters";
       } else if (this.request.script_1 || this.request.script_2) {
         this.activeName = "script";
+      } else if (this.request.otherConfig) {
+        this.activeName = "other";
       }
     }
   },