style: 调整样式

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

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>

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>

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; // 域名去掉协议