feat(接口测试): 四种协议test、case页面优化

2022-03-03 09:55:32 +08:00 · 2022-03-03 09:55:32 +08:00 · 35903fdb33
parent e2d029a925
commit 35903fdb33
14 changed files with 301 additions and 157 deletions
--- a/frontend/src/business/components/api/definition/api-definition.js
+++ b/frontend/src/business/components/api/definition/api-definition.js
@ -86,16 +86,23 @@ export function stepCompute(array, request) {
  let postSize = 0;
  let ruleSize = 0;
  array.forEach(item => {
-    if (["JSR223PreProcessor", "JDBCPreProcessor"].indexOf(item.type) !== -1) {
+    if (["JSR223PreProcessor", "JDBCPreProcessor", "ConstantTimer"].indexOf(item.type) !== -1) {
      preSize++;
    } else if (["JSR223PostProcessor", "JDBCPostProcessor", "Extract"].indexOf(item.type) !== -1) {
      postSize++;
    } else if (item.type === "Assertions") {
      ruleSize = (item.jsonPath.length + item.jsr223.length + item.regex.length + item.xpath2.length);
+      if (item.document && item.document.data && (item.document.data.json.length > 0 || item.document.data.xml.length > 0)) {
+        ruleSize++;
+      }
+      if (item.duration && item.duration.value > 0) {
+        ruleSize++;
+      }
      ruleSize += item.text ? item.text.length : 0;
    }
  })
  request.preSize = preSize;
  request.postSize = postSize;
  request.ruleSize = ruleSize;
+
 }
--- a/frontend/src/business/components/api/definition/components/assertion/ApiAssertionJsonPath.vue
+++ b/frontend/src/business/components/api/definition/components/assertion/ApiAssertionJsonPath.vue
@ -115,7 +115,7 @@

  .assertion-btn {
    text-align: center;
-    width: 30px;
+    width: 60px;
    margin-right: 14px;
  }
 </style>
--- a/frontend/src/business/components/api/definition/components/assertion/ApiAssertions.vue
+++ b/frontend/src/business/components/api/definition/components/assertion/ApiAssertions.vue
@ -165,23 +165,23 @@ export default {
    }
  },
  watch: {
-    'assertions.jsonPath'() {
-      this.computeStep();
+    assertions: {
+      handler(v) {
+        this.computeStep();
+      },
+      deep: true
    },
-    'assertions.regex'() {
-      this.computeStep();
-    },
-    'assertions.jsr223'() {
-      this.computeStep();
-    },
-    'assertions.xpath2'() {
-      this.computeStep();
-    }
  },
  methods: {
    computeStep() {
      let ruleSize = 0;
      ruleSize = (this.assertions.jsonPath.length + this.assertions.jsr223.length + this.assertions.regex.length + this.assertions.xpath2.length);
+      if (this.assertions && this.assertions.document.data && (this.assertions.document.data.json.length > 0 || this.assertions.document.data.xml.length > 0)) {
+        ruleSize++;
+      }
+      if (this.assertions.duration && this.assertions.duration.value > 0) {
+        ruleSize++;
+      }
      ruleSize += this.assertions.text ? this.assertions.text.length : 0;
      this.request.ruleSize = ruleSize;
      this.$emit('reload');
--- a/frontend/src/business/components/api/definition/components/case/ApiCaseItem.vue
+++ b/frontend/src/business/components/api/definition/components/case/ApiCaseItem.vue
@ -110,12 +110,18 @@
      <div v-if="apiCase.active||type==='detail'" v-loading="loading">
        <el-divider></el-divider>
        <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
-        <ms-api-request-form :isShowEnable="true" :showScript="true" :headers="apiCase.request.headers " :response="apiCase.responseData" :request="apiCase.request" v-if="api.protocol==='HTTP'"/>
-        <tcp-format-parameters :showScript="true" :request="apiCase.request" v-if="api.method==='TCP'"/>
-        <esb-definition v-xpack :request="apiCase.request" :showScript="true" v-if="isXpack&&api.method==='ESB'" ref="esbDefinition"/>
-        <ms-sql-basis-parameters :showScript="true" :request="apiCase.request" v-if="api.protocol==='SQL'"/>
-        <ms-dubbo-basis-parameters :showScript="true" :request="apiCase.request" v-if="api.protocol==='DUBBO'"/>
-
+        <ms-api-request-form :isShowEnable="true" :showScript="true" :headers="apiCase.request.headers "
+                             :response="apiCase.responseData" :request="apiCase.request" v-if="api.protocol==='HTTP'"/>
+        <tcp-format-parameters :showScript="true" :show-pre-script="true" :request="apiCase.request"
+                               :response="apiCase.responseData"
+                               v-if="api.method==='TCP'"/>
+        <esb-definition v-xpack :request="apiCase.request" :show-pre-script="true" :showScript="true"
+                        :response="apiCase.responseData"
+                        v-if="isXpack&&api.method==='ESB'" ref="esbDefinition"/>
+        <ms-sql-basis-parameters :showScript="true" :request="apiCase.request" :response="apiCase.responseData"
+                                 v-if="api.protocol==='SQL'"/>
+        <ms-dubbo-basis-parameters :showScript="true" :request="apiCase.request" :response="apiCase.responseData"
+                                   v-if="api.protocol==='DUBBO'"/>
        <!-- HTTP 请求返回数据 -->
        <p class="tip">{{ $t('api_test.definition.request.res_param') }}</p>
        <div v-if="isXpack&&api.method==='ESB'">
--- a/frontend/src/business/components/api/definition/components/complete/EditCompleteTCPApi.vue
+++ b/frontend/src/business/components/api/definition/components/complete/EditCompleteTCPApi.vue
@ -61,11 +61,13 @@
    <div v-if="apiProtocol=='TCP'">
      <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
      <!--      <ms-basis-parameters :show-script="false" :request="request"/>-->
-      <ms-tcp-format-parameters :show-script="false" :request="request" ref="tcpFormatParameter"/>
+      <ms-tcp-format-parameters :show-pre-script="true" :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"/>
+      <esb-definition v-xpack :show-pre-script="true" 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" :show-options-button="true"
                               :request="request"/>
--- a/frontend/src/business/components/api/definition/components/request/database/BasisParameters.vue
+++ b/frontend/src/business/components/api/definition/components/request/database/BasisParameters.vue
@ -50,34 +50,56 @@
              <el-input v-model="request.variableNames" maxlength="500" show-word-limit size="small"/>
            </el-form-item>

-            <el-tabs v-model="activeName">
-              <el-tab-pane :label="$t('api_test.scenario.variables')" name="variables">
+            <el-tabs v-model="activeName" @tab-click="tabClick">
+              <el-tab-pane :label="$t('api_test.scenario.variables')" name="variables" v-if="isBodyShow">
                <ms-api-scenario-variables :is-read-only="isReadOnly" :items="request.variables"
                                           :description="$t('api_test.scenario.kv_description')"/>
              </el-tab-pane>
              <el-tab-pane :label="$t('api_test.request.sql.sql_script')" name="sql">
                <div class="sql-content">
-                  <ms-code-edit mode="sql" :read-only="isReadOnly" :modes="['sql']" :data.sync="request.query" theme="eclipse" ref="codeEdit"/>
+                  <ms-code-edit mode="sql" :read-only="isReadOnly" :modes="['sql']" :data.sync="request.query"
+                                theme="eclipse" ref="codeEdit"/>
                </div>
              </el-tab-pane>
+              <!-- 脚本步骤/断言步骤 -->
+              <el-tab-pane :label="$t('api_test.definition.request.pre_operation')" name="preOperate" v-if="showScript">
+          <span class="item-tabs" effect="dark" placement="top-start" slot="label">
+            {{ $t('api_test.definition.request.pre_operation') }}
+            <div class="el-step__icon is-text ms-api-col ms-header" v-if="request.preSize > 0">
+              <div class="el-step__icon-inner">{{ request.preSize }}</div>
+            </div>
+          </span>
+                <ms-jmx-step :request="request" :apiId="request.id" :response="response" :tab-type="'pre'"
+                             ref="preStep"/>
+              </el-tab-pane>
+              <el-tab-pane :label="$t('api_test.definition.request.post_operation')" name="postOperate"
+                           v-if="showScript">
+            <span class="item-tabs" effect="dark" placement="top-start" slot="label">
+            {{ $t('api_test.definition.request.post_operation') }}
+            <div class="el-step__icon is-text ms-api-col ms-header" v-if="request.postSize > 0">
+              <div class="el-step__icon-inner">{{ request.postSize }}</div>
+            </div>
+          </span>
+                <ms-jmx-step :request="request" :apiId="request.id" :response="response" :tab-type="'post'"
+                             ref="postStep"/>
+              </el-tab-pane>
+              <el-tab-pane :label="$t('api_test.definition.request.assertions_rule')" name="assertionsRule"
+                           v-if="showScript">
+            <span class="item-tabs" effect="dark" placement="top-start" slot="label">
+            {{ $t('api_test.definition.request.assertions_rule') }}
+            <div class="el-step__icon is-text ms-api-col ms-header" v-if="request.ruleSize > 0">
+              <div class="el-step__icon-inner">{{ request.ruleSize }}</div>
+            </div>
+          </span>
+                <ms-jmx-step :request="request" :apiId="request.id" :response="response" @reload="reloadBody"
+                             :tab-type="'assertionsRule'" ref="assertionsRule"/>
+              </el-tab-pane>
+
            </el-tabs>
          </el-form>
        </div>
      </el-col>
-      <el-col :span="3" class="ms-left-cell" v-if="showScript">

-        <el-button class="ms-left-buttion" size="small" style="color: #B8741A;background-color: #F9F1EA" @click="addPre">+{{$t('api_test.definition.request.pre_script')}}</el-button>
-        <br/>
-        <el-button class="ms-left-buttion" size="small" style="color: #783887;background-color: #F2ECF3" @click="addPost">+{{$t('api_test.definition.request.post_script')}}</el-button>
-        <br/>
-        <el-button class="ms-left-buttion" size="small" style="color: #FE6F71;background-color: #F2ECF3" @click="addPreSql">+{{$t('api_test.definition.request.pre_sql')}}</el-button>
-        <br/>
-        <el-button class="ms-left-buttion" size="small" style="color: #1483F6;background-color: #F2ECF3" @click="addPostSql">+{{$t('api_test.definition.request.post_sql')}}</el-button>
-        <br/>
-        <el-button class="ms-left-buttion" size="small" style="color: #A30014;background-color: #F7E6E9" @click="addAssertions">+{{$t('api_test.definition.request.assertions_rule')}}</el-button>
-        <br/>
-        <el-button class="ms-left-buttion" size="small" style="color: #015478;background-color: #E6EEF2" @click="addExtract">+{{$t('api_test.definition.request.extract_param')}}</el-button>
-      </el-col>
    </el-row>

    <!-- 环境 -->
@ -99,6 +121,9 @@
  import {getCurrentProjectID} from "@/common/js/utils";
  import {getUUID} from "@/common/js/utils";
  import MsJsr233Processor from "../../../../automation/scenario/component/Jsr233Processor";
+  import MsJmxStep from "../../step/JmxStep";
+  import {stepCompute, hisDataProcessing} from "@/business/components/api/definition/api-definition";
+

  export default {
    name: "MsDatabaseConfig",
@ -106,11 +131,13 @@
      MsJsr233Processor,
      MsApiScenarioVariables,
      MsCodeEdit,
-      ApiRequestMethodSelect, MsApiExtract, MsApiAssertions, MsApiKeyValue, ApiEnvironmentConfig
+      ApiRequestMethodSelect, MsApiExtract, MsApiAssertions, MsApiKeyValue, ApiEnvironmentConfig,
+      MsJmxStep
    },
    props: {
      request: {},
      basisData: {},
+      response: {},
      moduleOptions: Array,
      showScript: {
        type: Boolean,
@ -123,8 +150,9 @@
    },
    data() {
      return {
-        spanNum: 21,
+        spanNum: 24,
        environments: [],
+        isBodyShow: true,
        currentEnvironment: {},
        databaseConfigsOptions: [],
        isReloadData: false,
@ -136,14 +164,19 @@
      'request.dataSourceId'() {
        this.setDataSource();
      },
+      'request.hashTree': {
+        handler(v) {
+          this.initStepSize(this.request.hashTree);
+        },
+        deep: true
+      }
    },
    created() {
-      if(this.showScript){
-        this.spanNum = 21;
-      }else {
-        this.spanNum = 24;
-      }
      this.getEnvironments();
+      if (this.request.hashTree) {
+        this.initStepSize(this.request.hashTree);
+        this.historicalDataProcessing(this.request.hashTree);
+      }
    },
    computed: {
      projectId() {
@ -151,33 +184,30 @@
      },
    },
    methods: {
-      addPre() {
-        let jsr223PreProcessor = createComponent("JSR223PreProcessor");
-        this.request.hashTree.push(jsr223PreProcessor);
-        this.reload();
+      tabClick() {
+        if (this.activeName === 'preOperate') {
+          this.$refs.preStep.filter();
+        }
+        if (this.activeName === 'postOperate') {
+          this.$refs.postStep.filter();
+        }
+        if (this.activeName === 'assertionsRule') {
+          this.$refs.assertionsRule.filter();
+        }
      },
-      addPost() {
-        let jsr223PostProcessor = createComponent("JSR223PostProcessor");
-        this.request.hashTree.push(jsr223PostProcessor);
-        this.reload();
+      historicalDataProcessing(array) {
+        hisDataProcessing(array, this.request);
      },
-      addPreSql() {
-        let jdbcPreProcessor = createComponent("JDBCPreProcessor");
-        this.request.hashTree.push(jdbcPreProcessor);
+      initStepSize(array) {
+        stepCompute(array, this.request);
+        this.reloadBody();
      },
-      addPostSql() {
-        let jdbcPostProcessor = createComponent("JDBCPostProcessor");
-        this.request.hashTree.push(jdbcPostProcessor);
-      },
-      addAssertions() {
-        let assertions = new Assertions();
-        this.request.hashTree.push(assertions);
-        this.reload();
-      },
-      addExtract() {
-        let jsonPostProcessor = new Extract();
-        this.request.hashTree.push(jsonPostProcessor);
-        this.reload();
+      reloadBody() {
+        // 解决修改请求头后 body 显示错位
+        this.isBodyShow = false;
+        this.$nextTick(() => {
+          this.isBodyShow = true;
+        });
      },
      remove(row) {
        let index = this.request.hashTree.indexOf(row);
@ -306,6 +336,13 @@
    margin-top: 40px;
  }

+  .ms-header {
+    background: #783887;
+    color: white;
+    height: 18px;
+    border-radius: 42%;
+  }
+
  .ms-left-buttion {
    margin: 6px 0px 8px 30px;
  }
--- a/frontend/src/business/components/api/definition/components/request/dubbo/BasisParameters.vue
+++ b/frontend/src/business/components/api/definition/components/request/dubbo/BasisParameters.vue
@ -12,8 +12,8 @@
              </el-select>
            </el-form-item>

-            <el-tabs v-model="activeName">
-              <el-tab-pane label="Interface" name="interface">
+            <el-tabs v-model="activeName" @tab-click="tabClick">
+              <el-tab-pane label="Interface" name="interface" v-if="isBodyShow">
                <ms-dubbo-interface :request="request" :is-read-only="isReadOnly"/>
              </el-tab-pane>
              <el-tab-pane label="Config Center" name="config">
@ -37,39 +37,47 @@
                <ms-api-key-value :is-read-only="isReadOnly" :items="request.attachmentArgs"/>
              </el-tab-pane>

+              <!-- 脚本步骤/断言步骤 -->
+              <el-tab-pane :label="$t('api_test.definition.request.pre_operation')" name="preOperate" v-if="showScript">
+          <span class="item-tabs" effect="dark" placement="top-start" slot="label">
+            {{ $t('api_test.definition.request.pre_operation') }}
+            <div class="el-step__icon is-text ms-api-col ms-header" v-if="request.preSize > 0">
+              <div class="el-step__icon-inner">{{ request.preSize }}</div>
+            </div>
+          </span>
+                <ms-jmx-step :request="request" :apiId="request.id" :response="response" :tab-type="'pre'"
+                             ref="preStep"/>
+              </el-tab-pane>
+              <el-tab-pane :label="$t('api_test.definition.request.post_operation')" name="postOperate"
+                           v-if="showScript">
+            <span class="item-tabs" effect="dark" placement="top-start" slot="label">
+            {{ $t('api_test.definition.request.post_operation') }}
+            <div class="el-step__icon is-text ms-api-col ms-header" v-if="request.postSize > 0">
+              <div class="el-step__icon-inner">{{ request.postSize }}</div>
+            </div>
+          </span>
+                <ms-jmx-step :request="request" :apiId="request.id" :response="response" :tab-type="'post'"
+                             ref="postStep"/>
+              </el-tab-pane>
+              <el-tab-pane :label="$t('api_test.definition.request.assertions_rule')" name="assertionsRule"
+                           v-if="showScript">
+            <span class="item-tabs" effect="dark" placement="top-start" slot="label">
+            {{ $t('api_test.definition.request.assertions_rule') }}
+            <div class="el-step__icon is-text ms-api-col ms-header" v-if="request.ruleSize > 0">
+              <div class="el-step__icon-inner">{{ request.ruleSize }}</div>
+            </div>
+          </span>
+                <ms-jmx-step :request="request" :apiId="request.id" :response="response" @reload="reloadBody"
+                             :tab-type="'assertionsRule'" ref="assertionsRule"/>
+              </el-tab-pane>
+
            </el-tabs>

          </el-form>
        </div>
-        <!--<div v-if="showScript">-->
-          <!--<div v-for="row in request.hashTree" :key="row.id" v-loading="isReloadData" style="margin-left: 20px;width: 100%">-->
-            <!--&lt;!&ndash; 前置脚本 &ndash;&gt;-->
-            <!--<ms-jsr233-processor v-if="row.label ==='JSR223 PreProcessor'" @copyRow="copyRow" @remove="remove" :is-read-only="false" :title="$t('api_test.definition.request.pre_script')" style-type="color: #B8741A;background-color: #F9F1EA"-->
-                                 <!--:jsr223-processor="row"/>-->
-            <!--&lt;!&ndash;后置脚本&ndash;&gt;-->
-            <!--<ms-jsr233-processor v-if="row.label ==='JSR223 PostProcessor'" @copyRow="copyRow" @remove="remove" :is-read-only="false" :title="$t('api_test.definition.request.post_script')" style-type="color: #783887;background-color: #F2ECF3"-->
-                                 <!--:jsr223-processor="row"/>-->
-            <!--&lt;!&ndash;断言规则&ndash;&gt;-->
-            <!--<div style="margin-top: 10px">-->
-              <!--<ms-api-assertions v-if="row.type==='Assertions'" @copyRow="copyRow" @remove="remove" :is-read-only="isReadOnly" :assertions="row"/>-->
-            <!--</div>-->
-            <!--&lt;!&ndash;提取规则&ndash;&gt;-->
-            <!--<div style="margin-top: 10px">-->
-              <!--<ms-api-extract :is-read-only="isReadOnly" @copyRow="copyRow" @remove="remove" v-if="row.type==='Extract'" :extract="row"/>-->
-            <!--</div>-->
-          <!--</div>-->
-        <!--</div>-->
+
      </el-col>

-      <el-col :span="3" class="ms-left-cell" v-if="showScript">
-        <el-button class="ms-left-buttion" size="small" style="color: #B8741A;background-color: #F9F1EA" @click="addPre">+{{$t('api_test.definition.request.pre_script')}}</el-button>
-        <br/>
-        <el-button class="ms-left-buttion" size="small" style="color: #783887;background-color: #F2ECF3" @click="addPost">+{{$t('api_test.definition.request.post_script')}}</el-button>
-        <br/>
-        <el-button class="ms-left-buttion" size="small" style="color: #A30014;background-color: #F7E6E9" @click="addAssertions">+{{$t('api_test.definition.request.assertions_rule')}}</el-button>
-        <br/>
-        <el-button class="ms-left-buttion" size="small" style="color: #015478;background-color: #E6EEF2" @click="addExtract">+{{$t('api_test.definition.request.extract_param')}}</el-button>
-      </el-col>
    </el-row>

  </div>
@ -90,6 +98,8 @@
  import MsDubboConsumerService from "../../request/dubbo/ConsumerAndService";
  import {getUUID} from "@/common/js/utils";
  import MsJsr233Processor from "../../../../automation/scenario/component/Jsr233Processor";
+  import MsJmxStep from "../../step/JmxStep";
+  import {stepCompute, hisDataProcessing} from "@/business/components/api/definition/api-definition";

  export default {
    name: "MsDatabaseConfig",
@ -101,11 +111,13 @@
      MsDubboConfigCenter,
      MsDubboRegistryCenter,
      MsDubboInterface,
+      MsJmxStep
    },
    props: {
      request: {},
      basisData: {},
      moduleOptions: Array,
+      response: {},
      isReadOnly: {
        type: Boolean,
        default: false
@ -117,40 +129,53 @@
    },
    data() {
      return {
-        spanNum: 21,
+        spanNum: 24,
        activeName: "interface",
        activeName2: "args",
+        isBodyShow: true,
        protocols: DubboRequest.PROTOCOLS,
        isReloadData: false,
      }
    },
    created() {
-      if(this.showScript){
-        this.spanNum = 21;
-      }else {
-        this.spanNum = 24;
+      if (this.request.hashTree) {
+        this.initStepSize(this.request.hashTree);
+        this.historicalDataProcessing(this.request.hashTree);
+      }
+    },
+    watch: {
+      'request.hashTree': {
+        handler(v) {
+          this.initStepSize(this.request.hashTree);
+        },
+        deep: true
      }
    },
    methods: {
-      addPre() {
-        let jsr223PreProcessor = createComponent("JSR223PreProcessor");
-        this.request.hashTree.push(jsr223PreProcessor);
-        this.reload();
+      tabClick() {
+        if (this.activeName === 'preOperate') {
+          this.$refs.preStep.filter();
+        }
+        if (this.activeName === 'postOperate') {
+          this.$refs.postStep.filter();
+        }
+        if (this.activeName === 'assertionsRule') {
+          this.$refs.assertionsRule.filter();
+        }
      },
-      addPost() {
-        let jsr223PostProcessor = createComponent("JSR223PostProcessor");
-        this.request.hashTree.push(jsr223PostProcessor);
-        this.reload();
+      historicalDataProcessing(array) {
+        hisDataProcessing(array, this.request);
      },
-      addAssertions() {
-        let assertions = new Assertions();
-        this.request.hashTree.push(assertions);
-        this.reload();
+      initStepSize(array) {
+        stepCompute(array, this.request);
+        this.reloadBody();
      },
-      addExtract() {
-        let jsonPostProcessor = new Extract();
-        this.request.hashTree.push(jsonPostProcessor);
-        this.reload();
+      reloadBody() {
+        // 解决修改请求头后 body 显示错位
+        this.isBodyShow = false;
+        this.$nextTick(() => {
+          this.isBodyShow = true;
+        });
      },
      remove(row) {
        let index = this.request.hashTree.indexOf(row);
@ -204,6 +229,13 @@
    margin-bottom: 15px;
  }

+  .ms-header {
+    background: #783887;
+    color: white;
+    height: 18px;
+    border-radius: 42%;
+  }
+
  .ms-left-cell {
    margin-top: 40px;
  }
--- a/frontend/src/business/components/api/definition/components/request/http/ApiHttpRequestForm.vue
+++ b/frontend/src/business/components/api/definition/components/request/http/ApiHttpRequestForm.vue
@ -229,9 +229,12 @@ export default {
      }
      this.reload();
    },
-    'request.hashTree'() {
-      this.initStepSize(this.request.hashTree);
-    },
+    'request.hashTree': {
+      handler(v) {
+        this.initStepSize(this.request.hashTree);
+      },
+      deep: true
+    }
  },
  methods: {
    hasPermission,
--- a/frontend/src/business/components/api/definition/components/request/tcp/TcpFormatParameters.vue
+++ b/frontend/src/business/components/api/definition/components/request/tcp/TcpFormatParameters.vue
@ -5,7 +5,7 @@
        <div style="border:1px #DCDFE6 solid; height: 100%;border-radius: 4px ;width: 100% ;">
          <el-form class="tcp" :model="request" :rules="rules" ref="request" :disabled="isReadOnly"
                   style="margin: 20px">
-            <el-tabs v-model="activeName" class="request-tabs">
+            <el-tabs v-model="activeName" class="request-tabs" @tab-click="tabClick">
              <!--test-->
              <el-tab-pane name="parameters">
                <template v-slot:label>
@ -17,7 +17,7 @@
              <!--test-->

              <!--query 参数-->
-              <el-tab-pane :label="$t('api_test.definition.document.request_body')" name="request">
+              <el-tab-pane v-if="isBodyShow" :label="$t('api_test.definition.document.request_body')" name="request">
                <el-radio-group v-model="reportType" size="mini" style="margin: 10px 0px;">
                  <el-radio :disabled="isReadOnly" label="json" @change="changeReportType">
                    json
@ -49,13 +49,47 @@
                </div>
              </el-tab-pane>

-              <el-tab-pane :label="$t('api_test.definition.request.pre_script')" name="script">
+              <el-tab-pane :label="$t('api_test.definition.request.pre_script')" name="script" v-if="showPreScript">
                <jsr233-processor-content
                  :jsr223-processor="request.tcpPreProcessor"
                  :is-pre-processor="true"
                  :is-read-only="isReadOnly"/>
              </el-tab-pane>

+              <!-- 脚本步骤/断言步骤 -->
+              <el-tab-pane :label="$t('api_test.definition.request.pre_operation')" name="preOperate" v-if="showScript">
+          <span class="item-tabs" effect="dark" placement="top-start" slot="label">
+            {{ $t('api_test.definition.request.pre_operation') }}
+            <div class="el-step__icon is-text ms-api-col ms-header" v-if="request.preSize > 0">
+              <div class="el-step__icon-inner">{{ request.preSize }}</div>
+            </div>
+          </span>
+                <ms-jmx-step :request="request" :apiId="request.id" :response="response" :tab-type="'pre'"
+                             ref="preStep"/>
+              </el-tab-pane>
+              <el-tab-pane :label="$t('api_test.definition.request.post_operation')" name="postOperate"
+                           v-if="showScript">
+            <span class="item-tabs" effect="dark" placement="top-start" slot="label">
+            {{ $t('api_test.definition.request.post_operation') }}
+            <div class="el-step__icon is-text ms-api-col ms-header" v-if="request.postSize > 0">
+              <div class="el-step__icon-inner">{{ request.postSize }}</div>
+            </div>
+          </span>
+                <ms-jmx-step :request="request" :apiId="request.id" :response="response" :tab-type="'post'"
+                             ref="postStep"/>
+              </el-tab-pane>
+              <el-tab-pane :label="$t('api_test.definition.request.assertions_rule')" name="assertionsRule"
+                           v-if="showScript">
+            <span class="item-tabs" effect="dark" placement="top-start" slot="label">
+            {{ $t('api_test.definition.request.assertions_rule') }}
+            <div class="el-step__icon is-text ms-api-col ms-header" v-if="request.ruleSize > 0">
+              <div class="el-step__icon-inner">{{ request.ruleSize }}</div>
+            </div>
+          </span>
+                <ms-jmx-step :request="request" :apiId="request.id" :response="response" @reload="reloadBody"
+                             :tab-type="'assertionsRule'" ref="assertionsRule"/>
+              </el-tab-pane>
+
              <el-tab-pane :label="$t('api_test.definition.request.other_config')" name="other" class="other-config">
                <el-row>
                  <el-col :span="8">
@ -133,8 +167,6 @@

      </el-col>

-      <!--操作按钮-->
-      <api-definition-step-button :request="request" v-if="!referenced && showScript"/>
    </el-row>
  </div>
 </template>
@ -160,6 +192,9 @@ import JSR223PreProcessor from "../../jmeter/components/pre-processors/jsr223-pr
 import ApiDefinitionStepButton from "../components/ApiDefinitionStepButton";
 import TcpXmlTable from "@/business/components/api/definition/components/complete/table/TcpXmlTable";
 import {TYPE_TO_C} from "@/business/components/api/automation/scenario/Setting";
+import MsJmxStep from "../../step/JmxStep";
+import {stepCompute, hisDataProcessing} from "@/business/components/api/definition/api-definition";
+

 export default {
  name: "MsTcpFormatParameters",
@ -171,11 +206,13 @@ export default {
    MsApiVariable,
    MsApiScenarioVariables,
    MsCodeEdit,
-    ApiRequestMethodSelect, MsApiExtract, MsApiAssertions, MsApiKeyValue, ApiEnvironmentConfig
+    ApiRequestMethodSelect, MsApiExtract, MsApiAssertions, MsApiKeyValue, ApiEnvironmentConfig,
+    MsJmxStep
  },
  props: {
    request: {},
    basisData: {},
+    response: {},
    moduleOptions: Array,
    isReadOnly: {
      type: Boolean,
@ -185,6 +222,10 @@ export default {
      type: Boolean,
      default: true,
    },
+    showPreScript: {
+      type: Boolean,
+      default: false,
+    },
    referenced: {
      type: Boolean,
      default: false,
@ -192,12 +233,13 @@ export default {
  },
  data() {
    return {
-      spanNum: 21,
+      spanNum: 24,
      activeName: "request",
      classes: TCPSampler.CLASSES,
      reportType: "xml",
      isReloadData: false,
      refreshedXmlTable: true,
+      isBodyShow: true,
      options: API_STATUS,
      currentProjectId: "",
      connectEncodingArr: [
@ -220,14 +262,15 @@ export default {
  watch: {
    reportType() {
      this.request.reportType = this.reportType;
+    },
+    'request.hashTree': {
+      handler(v) {
+        this.initStepSize(this.request.hashTree);
+      },
+      deep: true
    }
  },
  created() {
-    if (!this.referenced && this.showScript) {
-      this.spanNum = 21;
-    } else {
-      this.spanNum = 24;
-    }
    this.currentProjectId = getCurrentProjectID();
    if (!this.request.parameters) {
      this.$set(this.request, 'parameters', []);
@ -263,28 +306,37 @@ export default {
      if (!this.request.xmlDataStruct) {
        this.initXmlTableData();
      }
+      if (this.request.hashTree) {
+        this.initStepSize(this.request.hashTree);
+        this.historicalDataProcessing(this.request.hashTree);
+      }
    }
  },
  methods: {
-    addPre() {
-      let jsr223PreProcessor = createComponent("JSR223PreProcessor");
-      this.request.hashTree.push(jsr223PreProcessor);
-      this.reload();
+    tabClick() {
+      if (this.activeName === 'preOperate') {
+        this.$refs.preStep.filter();
+      }
+      if (this.activeName === 'postOperate') {
+        this.$refs.postStep.filter();
+      }
+      if (this.activeName === 'assertionsRule') {
+        this.$refs.assertionsRule.filter();
+      }
    },
-    addPost() {
-      let jsr223PostProcessor = createComponent("JSR223PostProcessor");
-      this.request.hashTree.push(jsr223PostProcessor);
-      this.reload();
+    historicalDataProcessing(array) {
+      hisDataProcessing(array, this.request);
    },
-    addAssertions() {
-      let assertions = new Assertions();
-      this.request.hashTree.push(assertions);
-      this.reload();
+    initStepSize(array) {
+      stepCompute(array, this.request);
+      this.reloadBody();
    },
-    addExtract() {
-      let jsonPostProcessor = new Extract();
-      this.request.hashTree.push(jsonPostProcessor);
-      this.reload();
+    reloadBody() {
+      // 解决修改请求头后 body 显示错位
+      this.isBodyShow = false;
+      this.$nextTick(() => {
+        this.isBodyShow = true;
+      });
    },
    remove(row) {
      let index = this.request.hashTree.indexOf(row);
@ -487,9 +539,6 @@ export default {
 </script>

 <style scoped>
-.tcp >>> .el-input-number {
-  width: 100%;
-}

 .send-request {
  padding: 0px 0;
@ -503,6 +552,13 @@ export default {
  margin-top: 40px;
 }

+.ms-header {
+  background: #783887;
+  color: white;
+  height: 18px;
+  border-radius: 42%;
+}
+
 .ms-left-buttion {
  margin: 6px 0px 8px 30px;
 }
--- a/frontend/src/business/components/api/definition/components/runtest/RunTestDubboPage.vue
+++ b/frontend/src/business/components/api/definition/components/runtest/RunTestDubboPage.vue
@ -23,7 +23,7 @@
      <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
      <div v-loading="loading">
        <!-- TCP 请求参数 -->
-        <ms-basis-parameters :request="api.request" ref="requestForm"/>
+        <ms-basis-parameters :request="api.request" ref="requestForm" :response="responseData"/>

        <!--返回结果-->
        <!-- HTTP 请求返回数据 -->
--- a/frontend/src/business/components/api/definition/components/runtest/RunTestSQLPage.vue
+++ b/frontend/src/business/components/api/definition/components/runtest/RunTestSQLPage.vue
@ -22,7 +22,7 @@
      <p class="tip">{{$t('api_test.definition.request.req_param')}} </p>
      <div v-loading="loading">
        <!-- TCP 请求参数 -->
-        <ms-basis-parameters :request="api.request" @callback="runTest" ref="requestForm"/>
+        <ms-basis-parameters :request="api.request" @callback="runTest" ref="requestForm" :response="responseData"/>

        <!--返回结果-->
        <!-- HTTP 请求返回数据 -->
--- a/frontend/src/business/components/api/definition/components/runtest/RunTestTCPPage.vue
+++ b/frontend/src/business/components/api/definition/components/runtest/RunTestTCPPage.vue
@ -36,7 +36,8 @@
        <!-- TCP 请求参数 -->
        <div v-if="api.method=='TCP'" v-loading="loading">
          <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
-          <ms-tcp-format-parameters :request="api.request" @callback="runTest" ref="requestForm"/>
+          <ms-tcp-format-parameters :request="api.request" @callback="runTest" :response="responseData"
+                                    ref="requestForm"/>
          <!--返回结果-->
          <!-- HTTP 请求返回数据 -->
          <p class="tip">{{ $t('api_test.definition.request.res_param') }} </p>
--- a/frontend/src/business/components/api/definition/components/step/JmxStep.vue
+++ b/frontend/src/business/components/api/definition/components/step/JmxStep.vue
@ -53,7 +53,7 @@
            color="#B8741A"
            background-color="#F9F1EA"/>

-           <ms-constant-timer :timer="data" :node="node" v-if="data.type ==='ConstantTimer'"/>
+           <ms-constant-timer :timer="data" :node="node" v-if="data.type ==='ConstantTimer'" @remove="remove"/>

         </div>
        <div v-if="tabType ==='post'">
--- a/frontend/src/business/components/xpack
+++ b/frontend/src/business/components/xpack
@ -1 +1 @@
-Subproject commit ba8901d589df3c15e76c5c40f59c22d4d6bed5c9
+Subproject commit b944f3777b2cc4d81d9681187e55adac21582d74