From fc55a685d03fd938968ee5ae708a584196e72ab9 Mon Sep 17 00:00:00 2001
From: q4speed <kun@fit2cloud.com>
Date: Mon, 12 Oct 2020 13:04:29 +0800
Subject: [PATCH 1/2] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/test/components/ApiScenarioForm.vue   |   5 +
 .../components/request/ApiTcpRequestForm.vue  |  32 ++---
 .../test/components/request/tcp/TcpConfig.vue | 112 ++++++++++++++++++
 .../api/test/model/ScenarioModel.js           |  25 ++--
 4 files changed, 150 insertions(+), 24 deletions(-)
 create mode 100644 frontend/src/business/components/api/test/components/request/tcp/TcpConfig.vue

diff --git a/frontend/src/business/components/api/test/components/ApiScenarioForm.vue b/frontend/src/business/components/api/test/components/ApiScenarioForm.vue
index 636b65b6f7..0d48653bd8 100644
--- a/frontend/src/business/components/api/test/components/ApiScenarioForm.vue
+++ b/frontend/src/business/components/api/test/components/ApiScenarioForm.vue
@@ -49,6 +49,9 @@
         <div class="dubbo-config-title">Consumer & Service</div>
         <ms-dubbo-consumer-service :consumer="scenario.dubboConfig.consumerAndService" :is-read-only="isReadOnly"/>
       </el-tab-pane>
+<!--      <el-tab-pane :label="$t('api_test.environment.tcp_config')" name="tcp">-->
+<!--        <ms-tcp-config :config="scenario.tcpConfig" :is-read-only="isReadOnly"/>-->
+<!--      </el-tab-pane>-->
     </el-tabs>
 
     <api-environment-config ref="environmentConfig" @close="environmentConfigClose"/>
@@ -68,10 +71,12 @@ import MsDubboConfigCenter from "@/business/components/api/test/components/reque
 import MsDubboConsumerService from "@/business/components/api/test/components/request/dubbo/ConsumerAndService";
 import MsDatabaseConfig from "./request/database/DatabaseConfig";
 import {parseEnvironment} from "../model/EnvironmentModel";
+import MsTcpConfig from "@/business/components/api/test/components/request/tcp/TcpConfig";
 
 export default {
   name: "MsApiScenarioForm",
   components: {
+    MsTcpConfig,
     MsDatabaseConfig,
     MsDubboConsumerService,
     MsDubboConfigCenter, MsDubboRegistryCenter, ApiEnvironmentConfig, MsApiScenarioVariables, MsApiKeyValue
diff --git a/frontend/src/business/components/api/test/components/request/ApiTcpRequestForm.vue b/frontend/src/business/components/api/test/components/request/ApiTcpRequestForm.vue
index 7fd363d7f2..fe5200b597 100644
--- a/frontend/src/business/components/api/test/components/request/ApiTcpRequestForm.vue
+++ b/frontend/src/business/components/api/test/components/request/ApiTcpRequestForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-form class="tcp" :model="request" :rules="rules" ref="request" label-width="120px" :disabled="isReadOnly">
+  <el-form class="tcp" :model="request" :rules="rules" ref="request" label-width="auto" :disabled="isReadOnly">
 
     <el-form-item :label="$t('api_test.request.name')" prop="name">
       <el-input v-model="request.name" maxlength="300" show-word-limit/>
@@ -11,31 +11,31 @@
       </el-select>
     </el-form-item>
 
-    <el-row :gutter="10">
-      <el-col :span="12">
+    <el-row type="flex" justify="space-between">
+      <el-col :lg="8">
         <el-form-item :label="$t('api_test.request.tcp.server')" prop="server">
           <el-input v-model="request.server" maxlength="300" show-word-limit/>
         </el-form-item>
       </el-col>
-      <el-col :span="4">
-        <el-form-item :label="$t('api_test.request.tcp.port')" prop="port">
+      <el-col :lg="6">
+        <el-form-item :label="$t('api_test.request.tcp.port')" prop="port" label-width="60px">
           <el-input-number v-model="request.port" controls-position="right" :min="0" :max="65535"/>
         </el-form-item>
       </el-col>
-      <el-col :span="4">
-        <el-form-item :label="$t('api_test.request.tcp.connect')" prop="ctimeout">
+      <el-col :lg="6">
+        <el-form-item :label="$t('api_test.request.tcp.connect')" prop="ctimeout" label-width="80px">
           <el-input-number v-model="request.ctimeout" controls-position="right" :min="0"/>
         </el-form-item>
       </el-col>
-      <el-col :span="4">
-        <el-form-item :label="$t('api_test.request.tcp.response')" prop="timeout">
+      <el-col :lg="6">
+        <el-form-item :label="$t('api_test.request.tcp.response')" prop="timeout" label-width="80px">
           <el-input-number v-model="request.timeout" controls-position="right" :min="0"/>
         </el-form-item>
       </el-col>
     </el-row>
 
-    <el-row :gutter="10">
-      <el-col :span="4">
+    <el-row type="flex" justify="space-between">
+      <el-col>
         <el-form-item>
           <el-switch
             v-model="request.useEnvironment"
@@ -44,7 +44,7 @@
           </el-switch>
         </el-form-item>
       </el-col>
-      <el-col :span="4">
+      <el-col>
         <el-form-item label-width="0">
           <el-switch
             v-model="request.reUseConnection"
@@ -52,7 +52,7 @@
           </el-switch>
         </el-form-item>
       </el-col>
-      <el-col :span="4">
+      <el-col>
         <el-form-item label-width="0">
           <el-switch
             v-model="request.closeConnection"
@@ -60,7 +60,7 @@
           </el-switch>
         </el-form-item>
       </el-col>
-      <el-col :span="4">
+      <el-col>
         <el-form-item label-width="0">
           <el-switch
             v-model="request.nodelay"
@@ -68,12 +68,12 @@
           </el-switch>
         </el-form-item>
       </el-col>
-      <el-col :span="4">
+      <el-col>
         <el-form-item :label="$t('api_test.request.tcp.so_linger')" prop="soLinger">
           <el-input v-model="request.soLinger"/>
         </el-form-item>
       </el-col>
-      <el-col :span="4">
+      <el-col>
         <el-form-item :label="$t('api_test.request.tcp.eol_byte')" prop="eolByte">
           <el-input v-model="request.eolByte"/>
         </el-form-item>
diff --git a/frontend/src/business/components/api/test/components/request/tcp/TcpConfig.vue b/frontend/src/business/components/api/test/components/request/tcp/TcpConfig.vue
new file mode 100644
index 0000000000..ad69d07fed
--- /dev/null
+++ b/frontend/src/business/components/api/test/components/request/tcp/TcpConfig.vue
@@ -0,0 +1,112 @@
+<template>
+  <el-form class="tcp" :model="config" :rules="rules" ref="request" label-width="auto" :disabled="isReadOnly">
+
+    <el-form-item label="TCPClient" prop="classname">
+      <el-select v-model="config.classname" style="width: 100%">
+        <el-option v-for="c in classes" :key="c" :label="c" :value="c"/>
+      </el-select>
+    </el-form-item>
+
+    <el-row type="flex" justify="space-between">
+      <el-col :lg="8">
+        <el-form-item :label="$t('api_test.request.tcp.server')" prop="server">
+          <el-input v-model="config.server" maxlength="300" show-word-limit/>
+        </el-form-item>
+      </el-col>
+      <el-col :lg="6">
+        <el-form-item :label="$t('api_test.request.tcp.port')" prop="port" label-width="60px">
+          <el-input-number v-model="config.port" controls-position="right" :min="0" :max="65535"/>
+        </el-form-item>
+      </el-col>
+      <el-col :lg="6">
+        <el-form-item :label="$t('api_test.request.tcp.connect')" prop="ctimeout" label-width="80px">
+          <el-input-number v-model="config.ctimeout" controls-position="right" :min="0"/>
+        </el-form-item>
+      </el-col>
+      <el-col :lg="6">
+        <el-form-item :label="$t('api_test.request.tcp.response')" prop="timeout" label-width="80px">
+          <el-input-number v-model="config.timeout" controls-position="right" :min="0"/>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row type="flex" justify="space-between">
+      <el-col>
+        <el-form-item label-width="0">
+          <el-switch
+            v-model="config.reUseConnection"
+            :active-text="$t('api_test.request.tcp.re_use_connection')">
+          </el-switch>
+        </el-form-item>
+      </el-col>
+      <el-col>
+        <el-form-item label-width="0">
+          <el-switch
+            v-model="config.closeConnection"
+            :active-text="$t('api_test.request.tcp.close_connection')">
+          </el-switch>
+        </el-form-item>
+      </el-col>
+      <el-col>
+        <el-form-item label-width="0">
+          <el-switch
+            v-model="config.nodelay"
+            :active-text="$t('api_test.request.tcp.no_delay')">
+          </el-switch>
+        </el-form-item>
+      </el-col>
+      <el-col>
+        <el-form-item :label="$t('api_test.request.tcp.so_linger')" prop="soLinger">
+          <el-input v-model="config.soLinger"/>
+        </el-form-item>
+      </el-col>
+      <el-col>
+        <el-form-item :label="$t('api_test.request.tcp.eol_byte')" prop="eolByte">
+          <el-input v-model="config.eolByte"/>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="10">
+      <el-col :span="12">
+        <el-form-item :label="$t('api_test.request.tcp.username')" prop="username">
+          <el-input v-model="config.username" maxlength="100" show-word-limit/>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item :label="$t('api_test.request.tcp.password')" prop="password">
+          <el-input v-model="config.password" maxlength="30" show-word-limit show-password
+                    autocomplete="new-password"/>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+import {TCPConfig} from "@/business/components/api/test/model/ScenarioModel";
+
+export default {
+  name: "MsTcpConfig",
+  props: {
+    config: TCPConfig,
+    rules: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      classes: TCPConfig.CLASSES,
+    }
+  },
+}
+</script>
+
+<style scoped>
+.tcp >>> .el-input-number {
+  width: 100%;
+}
+</style>
diff --git a/frontend/src/business/components/api/test/model/ScenarioModel.js b/frontend/src/business/components/api/test/model/ScenarioModel.js
index 12b651ed66..f2447a285a 100644
--- a/frontend/src/business/components/api/test/model/ScenarioModel.js
+++ b/frontend/src/business/components/api/test/model/ScenarioModel.js
@@ -512,15 +512,12 @@ export class SqlRequest extends Request {
   }
 }
 
-export class TCPRequest extends Request {
+export class TCPConfig extends Request {
   static CLASSES = ["TCPClientImpl", "BinaryTCPClientImpl", "LengthPrefixedBinaryTCPClientImpl"]
 
   constructor(options = {}) {
     super(RequestFactory.TYPES.TCP, options);
-    this.useEnvironment = options.useEnvironment;
-    this.debugReport = undefined;
-
-    this.classname = options.classname || TCPRequest.CLASSES[0];
+    this.classname = options.classname || TCPConfig.CLASSES[0];
     this.server = options.server;
     this.port = options.port;
     this.ctimeout = options.ctimeout; // Connect
@@ -532,12 +529,24 @@ export class TCPRequest extends Request {
     this.soLinger = options.soLinger;
     this.eolByte = options.eolByte;
 
-    this.request = options.request;
-
     this.username = options.username;
     this.password = options.password;
   }
 
+  isValid() {
+    return !!this.classname || !!this.server;
+  }
+}
+
+export class TCPRequest extends TCPConfig {
+  constructor(options = {}) {
+    super(options);
+    this.useEnvironment = options.useEnvironment;
+    this.debugReport = undefined;
+
+    this.request = options.request;
+  }
+
   isValid() {
     if (this.enable) {
       if (!this.server) {
@@ -1165,7 +1174,7 @@ class JMXGenerator {
         let domain = environment.config.httpConfig.domain;
         let validHosts = [];
         hosts.forEach(item => {
-          if (item.domain != undefined && domain != undefined) {
+          if (item.domain !== undefined && domain !== undefined) {
             let d = item.domain.trim().replace("http://", "").replace("https://", "");
             if (d === domain.trim()) {
               item.domain = d; // 域名去掉协议

From f2bf1e0d2158b581e12a58a74164813b71d90769 Mon Sep 17 00:00:00 2001
From: q4speed <kun@fit2cloud.com>
Date: Mon, 12 Oct 2020 17:23:18 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat(=E6=8E=A5=E5=8F=A3=E6=B5=8B=E8=AF=95):?=
 =?UTF-8?q?=20TCPSampler=20=E5=A2=9E=E5=8A=A0=E7=8E=AF=E5=A2=83=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E5=92=8C=E5=9C=BA=E6=99=AF=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/test/components/ApiScenarioForm.vue   |  6 +-
 .../environment/EnvironmentEdit.vue           |  7 +-
 .../components/request/ApiTcpRequestForm.vue  | 53 +++++++------
 .../test/components/request/tcp/TcpConfig.vue | 79 ++++++++++---------
 .../api/test/model/EnvironmentModel.js        |  5 +-
 .../api/test/model/ScenarioModel.js           | 40 +++++++---
 frontend/src/i18n/en-US.js                    |  1 +
 frontend/src/i18n/zh-CN.js                    |  1 +
 frontend/src/i18n/zh-TW.js                    |  1 +
 9 files changed, 114 insertions(+), 79 deletions(-)

diff --git a/frontend/src/business/components/api/test/components/ApiScenarioForm.vue b/frontend/src/business/components/api/test/components/ApiScenarioForm.vue
index 0d48653bd8..d666b2227d 100644
--- a/frontend/src/business/components/api/test/components/ApiScenarioForm.vue
+++ b/frontend/src/business/components/api/test/components/ApiScenarioForm.vue
@@ -49,9 +49,9 @@
         <div class="dubbo-config-title">Consumer & Service</div>
         <ms-dubbo-consumer-service :consumer="scenario.dubboConfig.consumerAndService" :is-read-only="isReadOnly"/>
       </el-tab-pane>
-<!--      <el-tab-pane :label="$t('api_test.environment.tcp_config')" name="tcp">-->
-<!--        <ms-tcp-config :config="scenario.tcpConfig" :is-read-only="isReadOnly"/>-->
-<!--      </el-tab-pane>-->
+      <el-tab-pane :label="$t('api_test.environment.tcp_config')" name="tcp">
+        <ms-tcp-config :config="scenario.tcpConfig" :is-read-only="isReadOnly"/>
+      </el-tab-pane>
     </el-tabs>
 
     <api-environment-config ref="environmentConfig" @close="environmentConfigClose"/>
diff --git a/frontend/src/business/components/api/test/components/environment/EnvironmentEdit.vue b/frontend/src/business/components/api/test/components/environment/EnvironmentEdit.vue
index ccf5c9ed79..f603d6ed76 100644
--- a/frontend/src/business/components/api/test/components/environment/EnvironmentEdit.vue
+++ b/frontend/src/business/components/api/test/components/environment/EnvironmentEdit.vue
@@ -20,6 +20,9 @@
         <el-tab-pane :label="$t('api_test.environment.database_config')" name="sql">
           <ms-database-config :configs="environment.config.databaseConfigs"/>
         </el-tab-pane>
+        <el-tab-pane :label="$t('api_test.environment.tcp_config')" name="tcp">
+          <ms-tcp-config :config="environment.config.tcpConfig"/>
+        </el-tab-pane>
       </el-tabs>
 
       <div class="environment-footer">
@@ -35,16 +38,18 @@
   import MsApiScenarioVariables from "../ApiScenarioVariables";
   import MsApiKeyValue from "../ApiKeyValue";
   import MsDialogFooter from "../../../../common/components/MsDialogFooter";
-  import {REQUEST_HEADERS} from "../../../../../../common/js/constants";
+  import {REQUEST_HEADERS} from "@/common/js/constants";
   import {Environment} from "../../model/EnvironmentModel";
   import MsApiHostTable from "../ApiHostTable";
   import MsDatabaseConfig from "../request/database/DatabaseConfig";
   import MsEnvironmentHttpConfig from "./EnvironmentHttpConfig";
   import MsEnvironmentCommonConfig from "./EnvironmentCommonConfig";
+  import MsTcpConfig from "@/business/components/api/test/components/request/tcp/TcpConfig";
 
   export default {
     name: "EnvironmentEdit",
     components: {
+      MsTcpConfig,
       MsEnvironmentCommonConfig,
       MsEnvironmentHttpConfig,
       MsDatabaseConfig, MsApiHostTable, MsDialogFooter, MsApiKeyValue, MsApiScenarioVariables},
diff --git a/frontend/src/business/components/api/test/components/request/ApiTcpRequestForm.vue b/frontend/src/business/components/api/test/components/request/ApiTcpRequestForm.vue
index fe5200b597..ed8fa6fc91 100644
--- a/frontend/src/business/components/api/test/components/request/ApiTcpRequestForm.vue
+++ b/frontend/src/business/components/api/test/components/request/ApiTcpRequestForm.vue
@@ -11,31 +11,44 @@
       </el-select>
     </el-form-item>
 
-    <el-row type="flex" justify="space-between">
-      <el-col :lg="8">
+    <el-row :gutter="10">
+      <el-col :span="16">
         <el-form-item :label="$t('api_test.request.tcp.server')" prop="server">
           <el-input v-model="request.server" maxlength="300" show-word-limit/>
         </el-form-item>
       </el-col>
-      <el-col :lg="6">
+      <el-col :span="8">
         <el-form-item :label="$t('api_test.request.tcp.port')" prop="port" label-width="60px">
           <el-input-number v-model="request.port" controls-position="right" :min="0" :max="65535"/>
         </el-form-item>
       </el-col>
-      <el-col :lg="6">
-        <el-form-item :label="$t('api_test.request.tcp.connect')" prop="ctimeout" label-width="80px">
+    </el-row>
+
+    <el-row :gutter="10">
+      <el-col :span="6">
+        <el-form-item :label="$t('api_test.request.tcp.connect')" prop="ctimeout">
           <el-input-number v-model="request.ctimeout" controls-position="right" :min="0"/>
         </el-form-item>
       </el-col>
-      <el-col :lg="6">
-        <el-form-item :label="$t('api_test.request.tcp.response')" prop="timeout" label-width="80px">
+      <el-col :span="6">
+        <el-form-item :label="$t('api_test.request.tcp.response')" prop="timeout">
           <el-input-number v-model="request.timeout" controls-position="right" :min="0"/>
         </el-form-item>
       </el-col>
+      <el-col :span="6">
+        <el-form-item :label="$t('api_test.request.tcp.so_linger')" prop="soLinger">
+          <el-input v-model="request.soLinger"/>
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item :label="$t('api_test.request.tcp.eol_byte')" prop="eolByte">
+          <el-input v-model="request.eolByte"/>
+        </el-form-item>
+      </el-col>
     </el-row>
 
-    <el-row type="flex" justify="space-between">
-      <el-col>
+    <el-row :gutter="10">
+      <el-col :span="6">
         <el-form-item>
           <el-switch
             v-model="request.useEnvironment"
@@ -44,40 +57,30 @@
           </el-switch>
         </el-form-item>
       </el-col>
-      <el-col>
-        <el-form-item label-width="0">
+      <el-col :span="6">
+        <el-form-item>
           <el-switch
             v-model="request.reUseConnection"
             :active-text="$t('api_test.request.tcp.re_use_connection')">
           </el-switch>
         </el-form-item>
       </el-col>
-      <el-col>
-        <el-form-item label-width="0">
+      <el-col :span="6">
+        <el-form-item>
           <el-switch
             v-model="request.closeConnection"
             :active-text="$t('api_test.request.tcp.close_connection')">
           </el-switch>
         </el-form-item>
       </el-col>
-      <el-col>
-        <el-form-item label-width="0">
+      <el-col :span="6">
+        <el-form-item>
           <el-switch
             v-model="request.nodelay"
             :active-text="$t('api_test.request.tcp.no_delay')">
           </el-switch>
         </el-form-item>
       </el-col>
-      <el-col>
-        <el-form-item :label="$t('api_test.request.tcp.so_linger')" prop="soLinger">
-          <el-input v-model="request.soLinger"/>
-        </el-form-item>
-      </el-col>
-      <el-col>
-        <el-form-item :label="$t('api_test.request.tcp.eol_byte')" prop="eolByte">
-          <el-input v-model="request.eolByte"/>
-        </el-form-item>
-      </el-col>
     </el-row>
 
     <el-form-item :label="$t('api_test.request.tcp.request')" prop="request">
diff --git a/frontend/src/business/components/api/test/components/request/tcp/TcpConfig.vue b/frontend/src/business/components/api/test/components/request/tcp/TcpConfig.vue
index ad69d07fed..83e7346060 100644
--- a/frontend/src/business/components/api/test/components/request/tcp/TcpConfig.vue
+++ b/frontend/src/business/components/api/test/components/request/tcp/TcpConfig.vue
@@ -1,5 +1,6 @@
 <template>
-  <el-form class="tcp" :model="config" :rules="rules" ref="request" label-width="auto" :disabled="isReadOnly">
+  <el-form class="tcp" :model="config" :rules="rules" ref="config" label-width="120px" :disabled="isReadOnly"
+           size="small">
 
     <el-form-item label="TCPClient" prop="classname">
       <el-select v-model="config.classname" style="width: 100%">
@@ -7,64 +8,67 @@
       </el-select>
     </el-form-item>
 
-    <el-row type="flex" justify="space-between">
-      <el-col :lg="8">
+    <el-row :gutter="10">
+      <el-col :span="16">
         <el-form-item :label="$t('api_test.request.tcp.server')" prop="server">
           <el-input v-model="config.server" maxlength="300" show-word-limit/>
         </el-form-item>
       </el-col>
-      <el-col :lg="6">
+      <el-col :span="8">
         <el-form-item :label="$t('api_test.request.tcp.port')" prop="port" label-width="60px">
-          <el-input-number v-model="config.port" controls-position="right" :min="0" :max="65535"/>
-        </el-form-item>
-      </el-col>
-      <el-col :lg="6">
-        <el-form-item :label="$t('api_test.request.tcp.connect')" prop="ctimeout" label-width="80px">
-          <el-input-number v-model="config.ctimeout" controls-position="right" :min="0"/>
-        </el-form-item>
-      </el-col>
-      <el-col :lg="6">
-        <el-form-item :label="$t('api_test.request.tcp.response')" prop="timeout" label-width="80px">
-          <el-input-number v-model="config.timeout" controls-position="right" :min="0"/>
+          <el-input-number v-model="config.port" controls-position="right" :min="0" :max="65535" :controls="false"/>
         </el-form-item>
       </el-col>
     </el-row>
 
-    <el-row type="flex" justify="space-between">
-      <el-col>
-        <el-form-item label-width="0">
+    <el-row :gutter="10">
+      <el-col :span="6">
+        <el-form-item :label="$t('api_test.request.tcp.connect')" prop="ctimeout">
+          <el-input-number v-model="config.ctimeout" controls-position="right" :min="0" :step="1000" :controls="false"/>
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item :label="$t('api_test.request.tcp.response')" prop="timeout">
+          <el-input-number v-model="config.timeout" controls-position="right" :min="0" :step="1000" :controls="false"/>
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item :label="$t('api_test.request.tcp.so_linger')" prop="soLinger">
+          <el-input v-model="config.soLinger"/>
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item :label="$t('api_test.request.tcp.eol_byte')" prop="eolByte">
+          <el-input v-model="config.eolByte"/>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="10">
+      <el-col :span="8">
+        <el-form-item>
           <el-switch
             v-model="config.reUseConnection"
             :active-text="$t('api_test.request.tcp.re_use_connection')">
           </el-switch>
         </el-form-item>
       </el-col>
-      <el-col>
-        <el-form-item label-width="0">
+      <el-col :span="8">
+        <el-form-item>
           <el-switch
             v-model="config.closeConnection"
             :active-text="$t('api_test.request.tcp.close_connection')">
           </el-switch>
         </el-form-item>
       </el-col>
-      <el-col>
-        <el-form-item label-width="0">
+      <el-col :span="8">
+        <el-form-item>
           <el-switch
             v-model="config.nodelay"
             :active-text="$t('api_test.request.tcp.no_delay')">
           </el-switch>
         </el-form-item>
       </el-col>
-      <el-col>
-        <el-form-item :label="$t('api_test.request.tcp.so_linger')" prop="soLinger">
-          <el-input v-model="config.soLinger"/>
-        </el-form-item>
-      </el-col>
-      <el-col>
-        <el-form-item :label="$t('api_test.request.tcp.eol_byte')" prop="eolByte">
-          <el-input v-model="config.eolByte"/>
-        </el-form-item>
-      </el-col>
     </el-row>
 
     <el-row :gutter="10">
@@ -90,16 +94,15 @@ export default {
   name: "MsTcpConfig",
   props: {
     config: TCPConfig,
-    rules: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    }
+    isReadOnly: {
+      type: Boolean,
+      default: false
+    },
   },
   data() {
     return {
       classes: TCPConfig.CLASSES,
+      rules: {}
     }
   },
 }
diff --git a/frontend/src/business/components/api/test/model/EnvironmentModel.js b/frontend/src/business/components/api/test/model/EnvironmentModel.js
index 0f26c89ba5..1b0c414805 100644
--- a/frontend/src/business/components/api/test/model/EnvironmentModel.js
+++ b/frontend/src/business/components/api/test/model/EnvironmentModel.js
@@ -1,4 +1,5 @@
 import {BaseConfig, DatabaseConfig, KeyValue} from "./ScenarioModel";
+import {TCPConfig} from "@/business/components/api/test/model/ScenarioModel";
 
 export class Environment extends BaseConfig {
   constructor(options = {}) {
@@ -26,14 +27,17 @@ export class Config extends BaseConfig {
     this.commonConfig = undefined;
     this.httpConfig = undefined;
     this.databaseConfigs = [];
+    this.tcpConfig = undefined;
 
     this.set(options);
     this.sets({databaseConfigs: DatabaseConfig}, options);
   }
+
   initOptions(options = {}) {
     this.commonConfig = new CommonConfig(options.commonConfig);
     this.httpConfig = new HttpConfig(options.httpConfig);
     options.databaseConfigs = options.databaseConfigs || [];
+    options.tcpConfig = new TCPConfig(options.tcpConfig);
     return options;
   }
 }
@@ -91,7 +95,6 @@ export class Host extends BaseConfig {
 }
 
 
-
 /* ---------- Functions ------- */
 
 export function compatibleWithEnvironment(environment) {
diff --git a/frontend/src/business/components/api/test/model/ScenarioModel.js b/frontend/src/business/components/api/test/model/ScenarioModel.js
index f2447a285a..09fbc83120 100644
--- a/frontend/src/business/components/api/test/model/ScenarioModel.js
+++ b/frontend/src/business/components/api/test/model/ScenarioModel.js
@@ -111,12 +111,16 @@ export const EXTRACT_TYPE = {
 
 export class BaseConfig {
 
-  set(options) {
+  set(options, notUndefined) {
     options = this.initOptions(options)
     for (let name in options) {
       if (options.hasOwnProperty(name)) {
         if (!(this[name] instanceof Array)) {
-          this[name] = options[name];
+          if (notUndefined === true) {
+            this[name] = options[name] === undefined ? this[name] : options[name];
+          } else {
+            this[name] = options[name];
+          }
         }
       }
     }
@@ -219,6 +223,7 @@ export class Scenario extends BaseConfig {
     this.enableCookieShare = false;
     this.enable = true;
     this.databaseConfigs = [];
+    this.tcpConfig = undefined;
 
     this.set(options);
     this.sets({
@@ -234,6 +239,7 @@ export class Scenario extends BaseConfig {
     options.requests = options.requests || [new RequestFactory()];
     options.databaseConfigs = options.databaseConfigs || [];
     options.dubboConfig = new DubboConfig(options.dubboConfig);
+    options.tcpConfig = new TCPConfig(options.tcpConfig);
     return options;
   }
 
@@ -512,11 +518,11 @@ export class SqlRequest extends Request {
   }
 }
 
-export class TCPConfig extends Request {
+export class TCPConfig extends BaseConfig {
   static CLASSES = ["TCPClientImpl", "BinaryTCPClientImpl", "LengthPrefixedBinaryTCPClientImpl"]
 
   constructor(options = {}) {
-    super(RequestFactory.TYPES.TCP, options);
+    super();
     this.classname = options.classname || TCPConfig.CLASSES[0];
     this.server = options.server;
     this.port = options.port;
@@ -532,18 +538,17 @@ export class TCPConfig extends Request {
     this.username = options.username;
     this.password = options.password;
   }
-
-  isValid() {
-    return !!this.classname || !!this.server;
-  }
 }
 
-export class TCPRequest extends TCPConfig {
+export class TCPRequest extends Request {
   constructor(options = {}) {
-    super(options);
+    super(RequestFactory.TYPES.TCP, options);
     this.useEnvironment = options.useEnvironment;
     this.debugReport = undefined;
 
+    //设置TCPConfig的属性
+    this.set(new TCPConfig(options));
+
     this.request = options.request;
   }
 
@@ -1040,6 +1045,19 @@ class JMXDubboRequest {
   }
 }
 
+class JMXTCPRequest {
+  constructor(request, scenario) {
+    let obj = request.clone();
+    if (request.useEnvironment) {
+      obj.set(scenario.environment.config.tcpConfig, true);
+      return obj;
+    }
+    obj.set(scenario.tcpConfig, true);
+
+    return obj;
+  }
+}
+
 class JMeterTestPlan extends Element {
   constructor() {
     super('jmeterTestPlan', {
@@ -1098,7 +1116,7 @@ class JMXGenerator {
               request.dataSource = scenario.databaseConfigMap.get(request.dataSource);
               sampler = new JDBCSampler(request.name || "", request);
             } else if (request instanceof TCPRequest) {
-              sampler = new TCPSampler(request.name || "", request);
+              sampler = new TCPSampler(request.name || "", new JMXTCPRequest(request, scenario));
             }
 
             this.addDNSCacheManager(sampler, scenario.environment, request.useEnvironment);
diff --git a/frontend/src/i18n/en-US.js b/frontend/src/i18n/en-US.js
index 1e757bbd01..656b8e133f 100644
--- a/frontend/src/i18n/en-US.js
+++ b/frontend/src/i18n/en-US.js
@@ -436,6 +436,7 @@ export default {
       common_config: "Common Config",
       http_config: "HTTP Config",
       database_config: "Database Config",
+      tcp_config: "TCP Config",
     },
     scenario: {
       scenario: "Scenario",
diff --git a/frontend/src/i18n/zh-CN.js b/frontend/src/i18n/zh-CN.js
index c01f5eff8a..9b698c135d 100644
--- a/frontend/src/i18n/zh-CN.js
+++ b/frontend/src/i18n/zh-CN.js
@@ -437,6 +437,7 @@ export default {
       common_config: "通用配置",
       http_config: "HTTP配置",
       database_config: "数据库配置",
+      tcp_config: "TCP配置",
     },
     scenario: {
       scenario: "场景",
diff --git a/frontend/src/i18n/zh-TW.js b/frontend/src/i18n/zh-TW.js
index a3627683fc..3e799d6a41 100644
--- a/frontend/src/i18n/zh-TW.js
+++ b/frontend/src/i18n/zh-TW.js
@@ -437,6 +437,7 @@ export default {
       common_config: "通用配置",
       http_config: "HTTP配置",
       database_config: "數據庫配置",
+      tcp_config: "TCP配置",
     },
     scenario: {
       scenario: "場景",