fix (接口定义): 修复前后置步骤无法添加问题

--bug=1007226 --user=赵勇 快捷调试及单接口用例添加后置脚本、前后置SQL等步骤不显示 https://www.tapd.cn/55049933/s/1056664

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

@@ -1,33 +1,73 @@
 <template>
   <div v-if="request.hashTree && request.hashTree.length > 0">
     <p class="tip">
-      {{$t('test_track.plan_view.step')}}
+      {{ $t('test_track.plan_view.step') }}
     </p>
     <!-- HTTP 请求参数 -->
     <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">
         <!--前置脚本-->
-        <ms-jsr233-processor v-if="row.type==='JSR223PreProcessor'" @remove="remove" @copyRow="copyRow" :title="$t('api_test.definition.request.pre_script')"
+        <ms-jsr233-processor
-                             :jsr223-processor="row" color="#B8741A" background-color="#F9F1EA"/>
+          v-if="row.type==='JSR223PreProcessor'"
+          @remove="remove"
+          @copyRow="copyRow"
+          :title="$t('api_test.definition.request.pre_script')"
+          :jsr223-processor="row"
+          color="#B8741A"
+          background-color="#F9F1EA"/>
         <!--后置脚本-->
-        <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')"
+        <ms-jsr233-processor
-                             :jsr223-processor="row" color="#783887" background-color="#F2ECF3"/>
+          v-if="row.type ==='JSR223PostProcessor'"
+          @copyRow="copyRow"
+          @remove="remove"
+          :is-read-only="false"
+          :title="$t('api_test.definition.request.post_script')"
+          :jsr223-processor="row"
+          color="#783887"
+          background-color="#F2ECF3"/>
         <!--前置SQL-->
-        <ms-jdbc-processor v-if="row.label ==='JDBC PreProcessor'" :title="$t('api_test.definition.request.pre_sql')"
+        <ms-jdbc-processor
-                           @copyRow="copyRow" @remove="remove" :is-read-only="false"
+          v-if="row.type ==='JDBCPreProcessor'"
-                           :request="row" :jdbc-processor="row" color="#783887" background-color="#F2ECF3"/>
+          @copyRow="copyRow"
+          @remove="remove"
+          :title="$t('api_test.definition.request.pre_sql')"
+          :is-read-only="false"
+          :request="row"
+          :jdbc-processor="row"
+          color="#B8741A"
+          background-color="#F9F1EA"/>
         <!--后置SQL-->
-        <ms-jdbc-processor v-if="row.label ==='JDBC PostProcessor'" :title="$t('api_test.definition.request.post_sql')"
+        <ms-jdbc-processor
-                           @copyRow="copyRow" @remove="remove" :is-read-only="false"
+          v-if="row.type ==='JDBCPostProcessor'"
-                           :request="row" :jdbc-processor="row" color="#783887" background-color="#F2ECF3"/>
+          @copyRow="copyRow"
+          @remove="remove"
+          :title="$t('api_test.definition.request.post_sql')"
+          :is-read-only="false"
+          :request="row"
+          :jdbc-processor="row"
+          color="#783887"
+          background-color="#F2ECF3"/>
         <!--断言规则-->
         <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"/>
+          <ms-api-assertions
+            v-if="row.type==='Assertions'"
+            @copyRow="copyRow"
+            @remove="remove"
+            :response="response"
+            :is-read-only="isReadOnly"
+            :assertions="row"/>
         </div>
         <!--提取规则-->
         <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"/>
+          <ms-api-extract
+            :response="response"
+            :is-read-only="isReadOnly"
+            :extract="row"
+            @copyRow="copyRow"
+            @remove="remove"
+            v-if="row.type==='Extract'"
+          />
         </div>
       </div>
     </div>
@@ -35,17 +75,17 @@
 </template>
 
 <script>
-  import {REQUEST_HEADERS} from "@/common/js/constants";
+import {REQUEST_HEADERS} from "@/common/js/constants";
-  import {createComponent} from "../jmeter/components";
+import {createComponent} from "../jmeter/components";
-  import MsApiAssertions from "../assertion/ApiAssertions";
+import MsApiAssertions from "../assertion/ApiAssertions";
-  import MsApiExtract from "../extract/ApiExtract";
+import MsApiExtract from "../extract/ApiExtract";
-  import {Assertions, Body, Extract, KeyValue} from "../../model/ApiTestModel";
+import {Assertions, Body, Extract, KeyValue} from "../../model/ApiTestModel";
-  import {getUUID} from "@/common/js/utils";
+import {getUUID} from "@/common/js/utils";
-  import BatchAddParameter from "../basis/BatchAddParameter";
+import BatchAddParameter from "../basis/BatchAddParameter";
-  import MsJsr233Processor from "../../../automation/scenario/component/Jsr233Processor";
+import MsJsr233Processor from "../../../automation/scenario/component/Jsr233Processor";
-  import MsJdbcProcessor from "@/business/components/api/automation/scenario/component/JDBCProcessor";
+import MsJdbcProcessor from "@/business/components/api/automation/scenario/component/JDBCProcessor";
 
-  export default {
+export default {
   name: "MsJmxStep",
   components: {
     MsJdbcProcessor,
@@ -78,7 +118,6 @@
       default: false
     }
   },
-
   data() {
     let validateURL = (rule, value, callback) => {
       try {
@@ -221,32 +260,32 @@
       }
     }
   }
-  }
+}
 </script>
 
 <style scoped>
-  .ms-left-cell .el-button:nth-of-type(1) {
+.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) {
+.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) {
+.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) {
+.ms-left-cell .el-button:nth-of-type(4) {
   color: #015478;
   background-color: #E6EEF2;
   border: #E6EEF2;
-  }
+}
 
 </style>