refactor: tcp添加断言等操作

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

@@ -22,7 +22,7 @@
 
     <!-- 请求参数 -->
     <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
-    <ms-basis-parameters :request="request"/>
+    <ms-basis-parameters :show-script="false" :request="request"/>
 
   </div>
 

frontend/src/business/components/api/definition/components/request/components/ApiDefinitionStepButton.vue

@@ -0,0 +1,83 @@
+<template>
+  <el-col :span="3" class="ms-left-cell">
+    <el-button class="ms-left-buttion" size="small" @click="addPre">+{{$t('api_test.definition.request.pre_script')}}</el-button>
+    <br/>
+    <el-button class="ms-left-buttion" size="small" @click="addPost">+{{$t('api_test.definition.request.post_script')}}</el-button>
+    <br/>
+    <el-button class="ms-left-buttion" size="small" @click="addAssertions">+{{$t('api_test.definition.request.assertions_rule')}}</el-button>
+    <br/>
+    <el-button class="ms-left-buttion" size="small" @click="addExtract">+{{$t('api_test.definition.request.extract_param')}}</el-button>
+  </el-col>
+</template>
+
+<script>
+    import {createComponent} from "../../jmeter/components";
+    import {Assertions, Extract} from "../../../model/ApiTestModel";
+
+    export default {
+      name: "ApiDefinitionStepButton",
+      props: {
+        request: {
+          type: Object,
+          default() {
+            return {}
+          }
+        }
+      },
+      methods: {
+        addPre() {
+          let jsr223PreProcessor = createComponent("JSR223PreProcessor");
+          this.request.hashTree.push(jsr223PreProcessor);
+        },
+        addPost() {
+          let jsr223PostProcessor = createComponent("JSR223PostProcessor");
+          this.request.hashTree.push(jsr223PostProcessor);
+        },
+        addAssertions() {
+          let assertions = new Assertions();
+          this.request.hashTree.push(assertions);
+        },
+        addExtract() {
+          let jsonPostProcessor = new Extract();
+          this.request.hashTree.push(jsonPostProcessor);
+        },
+      }
+    }
+</script>
+
+<style scoped>
+
+
+  .ms-left-cell .el-button:nth-of-type(1) {
+    color: #B8741A;
+    background-color: #F9F1EA;
+    border: #F9F1EA;
+  }
+
+  .ms-left-cell .el-button:nth-of-type(2) {
+    color: #783887;
+    background-color: #F2ECF3;
+    border: #F2ECF3;
+  }
+
+  .ms-left-cell .el-button:nth-of-type(3) {
+    color: #A30014;
+    background-color: #F7E6E9;
+    border: #F7E6E9;
+  }
+
+  .ms-left-cell .el-button:nth-of-type(4) {
+    color: #015478;
+    background-color: #E6EEF2;
+    border: #E6EEF2;
+  }
+
+  .ms-left-cell {
+    margin-top: 30px;
+  }
+
+  .ms-left-buttion {
+    margin: 6px 0px 8px 30px;
+  }
+
+</style>

frontend/src/business/components/api/definition/components/request/http/ApiHttpRequestForm.vue

@@ -71,35 +71,9 @@
 
           </el-tabs>
         </div>
-        <!--<div v-if="!referenced">-->
-          <!--<div v-for="row in request.hashTree" :key="row.id">-->
-            <!--&lt;!&ndash;前置脚本&ndash;&gt;-->
-            <!--<ms-jsr233-processor v-if="row.type==='JSR223PreProcessor'" @remove="remove" @copyRow="copyRow" :title="$t('api_test.definition.request.pre_script')"-->
-                                 <!--: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')"-->
-                                 <!--:jsr223-processor="row"/>-->
-            <!--&lt;!&ndash;断言规则&ndash;&gt;-->
-            <!--<div style="margin-top: 10px">-->
-              <!--<ms-api-assertions :response="response" 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 :response="response" :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="!referenced && showScript">
-        <el-button class="ms-left-buttion" size="small" @click="addPre">+{{$t('api_test.definition.request.pre_script')}}</el-button>
-        <br/>
-        <el-button class="ms-left-buttion" size="small" @click="addPost">+{{$t('api_test.definition.request.post_script')}}</el-button>
-        <br/>
-        <el-button class="ms-left-buttion" size="small" @click="addAssertions">+{{$t('api_test.definition.request.assertions_rule')}}</el-button>
-        <br/>
-        <el-button class="ms-left-buttion" size="small" @click="addExtract">+{{$t('api_test.definition.request.extract_param')}}</el-button>
-      </el-col>
+      <api-definition-step-button :request="request" v-if="!referenced && showScript"/>
     </el-row>
     <batch-add-parameter @batchSave="batchSave" ref="batchAddParameter"/>
   </div>
@@ -120,10 +94,12 @@
   import BatchAddParameter from "../../basis/BatchAddParameter";
   import MsApiAdvancedConfig from "./ApiAdvancedConfig";
   import MsJsr233Processor from "../../../../automation/scenario/component/Jsr233Processor";
+  import ApiDefinitionStepButton from "../components/ApiDefinitionStepButton";
 
   export default {
     name: "MsApiHttpRequestForm",
     components: {
+      ApiDefinitionStepButton,
       MsJsr233Processor,
       MsApiAdvancedConfig,
       BatchAddParameter,
@@ -194,26 +170,6 @@
     },
 
     methods: {
-      addPre() {
-        let jsr223PreProcessor = createComponent("JSR223PreProcessor");
-        this.request.hashTree.push(jsr223PreProcessor);
-        this.reload();
-      },
-      addPost() {
-        let jsr223PostProcessor = createComponent("JSR223PostProcessor");
-        this.request.hashTree.push(jsr223PostProcessor);
-        this.reload();
-      },
-      addAssertions() {
-        let assertions = new Assertions();
-        this.request.hashTree.push(assertions);
-        this.reload();
-      },
-      addExtract() {
-        let jsonPostProcessor = new Extract();
-        this.request.hashTree.push(jsonPostProcessor);
-        this.reload();
-      },
       remove(row) {
         let index = this.request.hashTree.indexOf(row);
         this.request.hashTree.splice(index, 1);
@@ -289,13 +245,6 @@
 </script>
 
 <style scoped>
-  .ms-left-cell {
-    margin-top: 30px;
-  }
-
-  .ms-left-buttion {
-    margin: 6px 0px 8px 30px;
-  }
 
   .ms-query {
     background: #783887;
@@ -316,30 +265,6 @@
     min-height: 200px;
   }
 
-  .ms-left-cell .el-button:nth-of-type(1) {
-    color: #B8741A;
-    background-color: #F9F1EA;
-    border: #F9F1EA;
-  }
-
-  .ms-left-cell .el-button:nth-of-type(2) {
-    color: #783887;
-    background-color: #F2ECF3;
-    border: #F2ECF3;
-  }
-
-  .ms-left-cell .el-button:nth-of-type(3) {
-    color: #A30014;
-    background-color: #F7E6E9;
-    border: #F7E6E9;
-  }
-
-  .ms-left-cell .el-button:nth-of-type(4) {
-    color: #015478;
-    background-color: #E6EEF2;
-    border: #E6EEF2;
-  }
-
   .ms-el-link {
     float: right;
     margin-right: 45px;

frontend/src/business/components/api/definition/components/request/tcp/TcpBasisParameters.vue

@@ -101,30 +101,11 @@
 
           </el-form>
         </div>
-        <!--<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;-->
-          <!--<ms-api-assertions v-if="row.type==='Assertions'" @copyRow="copyRow" @remove="remove" :is-read-only="isReadOnly" :assertions="row"/>-->
-          <!--&lt;!&ndash;提取规则&ndash;&gt;-->
-          <!--<ms-api-extract :is-read-only="isReadOnly" @copyRow="copyRow" @remove="remove" v-if="row.type==='Extract'" :extract="row"/>-->
 
-        <!--</div>-->
       </el-col>
 
-      <!--<el-col :span="3" class="ms-left-cell">-->
-        <!--<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>-->
+      <!--操作按钮-->
+      <api-definition-step-button :request="request" v-if="!referenced && showScript"/>
     </el-row>
   </div>
 </template>
@@ -147,11 +128,13 @@
   import MsInstructionsIcon from "../../../../../common/components/MsInstructionsIcon";
   import Jsr233ProcessorContent from "../../../../automation/scenario/common/Jsr233ProcessorContent";
   import JSR223PreProcessor from "../../jmeter/components/pre-processors/jsr223-pre-processor";
+  import ApiDefinitionStepButton from "../components/ApiDefinitionStepButton";
 
 
   export default {
     name: "TcpBasisParameters",
     components: {
+      ApiDefinitionStepButton,
       Jsr233ProcessorContent,
       MsInstructionsIcon,
       MsApiVariable,
@@ -167,6 +150,14 @@
         type: Boolean,
         default: false
       },
+      showScript: {
+        type: Boolean,
+        default: true,
+      },
+      referenced: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {

frontend/src/business/components/api/definition/components/runtest/RunTestTCPPage.vue

@@ -2,34 +2,43 @@
 
   <div class="card-container">
     <el-card class="card-content" v-loading="loading">
-      <!-- 操作按钮 -->
-      <el-dropdown split-button type="primary" class="ms-api-buttion" @click="handleCommand('add')"
-                   @command="handleCommand" size="small" style="float: right;margin-right: 20px">
-        {{$t('commons.test')}}
-        <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item command="load_case">{{$t('api_test.definition.request.load_case')}}
-          </el-dropdown-item>
-          <el-dropdown-item command="save_as_case">{{$t('api_test.definition.request.save_as_case')}}
-          </el-dropdown-item>
-          <el-dropdown-item command="update_api">{{$t('api_test.definition.request.update_api')}}</el-dropdown-item>
-          <el-dropdown-item command="save_as_api">{{$t('api_test.definition.request.save_as')}}</el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
 
-      <p class="tip">{{$t('test_track.plan_view.base_info')}} </p>
-      <!-- 执行环境 -->
-      {{$t('api_test.definition.request.run_env')}}：
-      <environment-select :type="'TCP'" :current-data="api" :project-id="projectId"/>
+      <el-form :model="api" :rules="rules" ref="apiData" :inline="true" label-position="right">
 
-      <p class="tip">{{$t('api_test.definition.request.req_param')}} </p>
-      <!-- TCP 请求参数 -->
-      <ms-basis-parameters :request="api.request" @callback="runTest" ref="requestForm"/>
+        <!-- 操作按钮 -->
+        <el-dropdown split-button type="primary" class="ms-api-buttion" @click="handleCommand('add')"
+                     @command="handleCommand" size="small" style="float: right;margin-right: 20px">
+          {{$t('commons.test')}}
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="load_case">{{$t('api_test.definition.request.load_case')}}
+            </el-dropdown-item>
+            <el-dropdown-item command="save_as_case">{{$t('api_test.definition.request.save_as_case')}}
+            </el-dropdown-item>
+            <el-dropdown-item command="update_api">{{$t('api_test.definition.request.update_api')}}</el-dropdown-item>
+            <el-dropdown-item command="save_as_api">{{$t('api_test.definition.request.save_as')}}</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+
+        <p class="tip">{{$t('test_track.plan_view.base_info')}} </p>
+        <!-- 执行环境 -->
+        <el-form-item prop="environmentId">
+          {{$t('api_test.definition.request.run_env')}}：
+          <environment-select :type="'TCP'" :current-data="api" :project-id="projectId"/>
+        </el-form-item>
+
+        <p class="tip">{{$t('api_test.definition.request.req_param')}} </p>
+        <!-- TCP 请求参数 -->
+        <ms-basis-parameters :request="api.request" @callback="runTest" ref="requestForm"/>
+
+      </el-form>
 
       <!--返回结果-->
       <!-- HTTP 请求返回数据 -->
       <p class="tip">{{$t('api_test.definition.request.res_param')}} </p>
       <ms-request-result-tail :response="responseData" ref="runResult"/>
 
+      <ms-jmx-step :request="api.request" :response="responseData"/>
+
     </el-card>
 
     <!-- 加载用例 -->
@@ -55,10 +64,12 @@
   import MsBasisParameters from "../request/tcp/TcpBasisParameters";
   import {REQ_METHOD} from "../../model/JsonData";
   import EnvironmentSelect from "../environment/EnvironmentSelect";
+  import MsJmxStep from "../step/JmxStep";
 
   export default {
     name: "RunTestTCPPage",
     components: {
+      MsJmxStep,
       EnvironmentSelect,
       MsApiRequestForm,
       MsApiCaseList,
@@ -81,8 +92,6 @@
         refreshSign: "",
         createCase: "",
         rules: {
-          method: [{required: true, message: this.$t('test_track.case.input_maintainer'), trigger: 'change'}],
-          url: [{required: true, message: this.$t('api_test.definition.request.path_info'), trigger: 'blur'}],
           environmentId: [{required: true, message: this.$t('api_test.definition.request.run_env'), trigger: 'change'}],
         },
         runData: [],
@@ -110,13 +119,17 @@
         this.$emit('refresh');
       },
       runTest() {
-        this.loading = true;
-        this.api.request.name = this.api.id;
-        this.api.protocol = this.currentProtocol;
-        this.runData = [];
-        this.runData.push(this.api.request);
-        /*触发执行操作*/
-        this.reportId = getUUID().substring(0, 8);
+        this.$refs['apiData'].validate((valid) => {
+          if (valid) {
+            this.loading = true;
+            this.api.request.name = this.api.id;
+            this.api.protocol = this.currentProtocol;
+            this.runData = [];
+            this.runData.push(this.api.request);
+            /*触发执行操作*/
+            this.reportId = getUUID().substring(0, 8);
+          }
+        })
       },
       runRefresh(data) {
         this.responseData = data;

frontend/src/business/components/api/definition/components/step/JmxStep.vue

@@ -1,10 +1,10 @@
 <template>
-  <div>
+  <div v-if="request.hashTree && request.hashTree.length > 0">
     <p class="tip">
       {{$t('test_track.plan_view.step')}}
     </p>
     <!-- HTTP 请求参数 -->
-    <div style="border:1px #DCDFE6 solid; height: 100%;border-radius: 4px ;width: 100%" v-loading="isReloadData" v-if="request.hashTree && request.hashTree.length>0">
+    <div style="height: 100%;border-radius: 4px ;width: 100%" v-loading="isReloadData" v-if="request.hashTree && request.hashTree.length>0">
 
       <div v-for="row in request.hashTree" :key="row.id">
         <!--前置脚本-->