fix(接口测试): 自定义脚本增加前后置处理

--bug=1011769 --user=赵勇 [接口测试]github#12052自定义脚本上的断言没了 https://www.tapd.cn/55049933/s/1127302

frontend/src/business/components/api/automation/scenario/component/Jsr233Processor.vue

@@ -12,8 +12,72 @@
     :background-color="backgroundColor"
     :if-from-variable-advance="ifFromVariableAdvance"
     :title="title" v-loading="loading">
+    <!--自定义脚本-->
+    <legend style="width: 100%" v-if="request && this.request.type === 'JSR223Processor'">
+      <p class="ms-tip">{{ $t('api_test.definition.request.req_param') }} </p>
+      <el-tabs v-model="activeName" class="request-tabs" @tab-click="tabClick">
+        <!-- 请求头-->
+        <el-tab-pane label="脚本内容" name="baseScript">
+          <jsr233-processor-content
+            :jsr223-processor="jsr223Processor"
+            :is-pre-processor="isPreProcessor"
+            :node="node"
+            :protocol="protocol"
+            :is-read-only="this.jsr223Processor.disabled"/>
+        </el-tab-pane>
+        <!-- 脚本步骤/断言步骤 -->
+        <el-tab-pane :label="$t('api_test.definition.request.pre_operation')" name="preOperate">
+          <span class="item-tabs" effect="dark" placement="top-start" slot="label" :key="request.preSize">
+            {{ $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"
+            v-if="activeName === 'preOperate'"
+          />
+        </el-tab-pane>
+        <el-tab-pane :label="$t('api_test.definition.request.post_operation')" name="postOperate">
+            <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" :key="request.postSize">{{ request.postSize }}</div>
+            </div>
+          </span>
+          <ms-jmx-step
+            :request="request"
+            :apiId="request.id"
+            :response="response"
+            :tab-type="'post'"
+            ref="postStep"
+            v-if="activeName === 'postOperate'"
+          />
+        </el-tab-pane>
+        <el-tab-pane :label="$t('api_test.definition.request.assertions_rule')" name="assertionsRule">
+            <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" :key="request.ruleSize">{{ request.ruleSize }}</div>
+            </div>
+          </span>
+          <ms-jmx-step
+            :request="request"
+            :apiId="request.id"
+            :response="response"
+            :tab-type="'assertionsRule'"
+            ref="assertionsRule"
+            v-if="activeName === 'assertionsRule'"/>
+        </el-tab-pane>
+      </el-tabs>
+    </legend>
 
-    <legend style="width: 100%">
+    <!-- 前后置脚本 -->
+    <legend style="width: 100%" v-else>
       <jsr233-processor-content
         :jsr223-processor="jsr223Processor"
         :is-pre-processor="isPreProcessor"
@@ -61,10 +125,19 @@ import MsDropdown from "../../../../common/components/MsDropdown";
 import ApiBaseComponent from "../common/ApiBaseComponent";
 import Jsr233ProcessorContent from "../common/Jsr233ProcessorContent";
 import ApiResponseComponent from "./ApiResponseComponent";
+import {stepCompute, hisDataProcessing} from "@/business/components/api/definition/api-definition";
 
 export default {
   name: "MsJsr233Processor",
-  components: {Jsr233ProcessorContent, ApiBaseComponent, MsDropdown, MsInstructionsIcon, MsCodeEdit, ApiResponseComponent},
+  components: {
+    Jsr233ProcessorContent,
+    ApiBaseComponent,
+    MsDropdown,
+    MsInstructionsIcon,
+    MsCodeEdit,
+    ApiResponseComponent,
+    MsJmxStep: () => import( "@/business/components/api/definition/components/step/JmxStep")
+  },
   props: {
     request: {},
     message: String,
@@ -84,7 +157,7 @@ export default {
       type: Boolean,
       default: true,
     },
-    protocol:String,
+    protocol: String,
     isReadOnly: {
       type: Boolean,
       default:
@@ -107,19 +180,59 @@ export default {
       default: false,
     },
   },
+  created() {
+    if (this.request && this.request.type === 'JSR223Processor' && this.request.hashTree) {
+      this.initStepSize(this.request.hashTree);
+      this.historicalDataProcessing(this.request.hashTree);
+    }
+  },
   watch: {
     message() {
       this.forStatus();
       this.reload();
     },
+    'request.hashTree': {
+      handler(v) {
+        this.initStepSize(this.request.hashTree);
+      },
+      deep: true
+    }
   },
   data() {
     return {
       loading: false,
-      reqSuccess: true
+      reqSuccess: true,
+      response: {},
+      activeName: "baseScript"
     }
   },
   methods: {
+    historicalDataProcessing(array) {
+      hisDataProcessing(array, this.request);
+    },
+    initStepSize(array) {
+      stepCompute(array, this.request);
+      this.reload();
+    },
+
+    tabClick() {
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.filter(this.activeName);
+        });
+      });
+    },
+    filter(activeName) {
+      if (activeName === 'preOperate' && this.$refs.preStep) {
+        this.$refs.preStep.filter();
+      }
+      if (activeName === 'postOperate' && this.$refs.postStep) {
+        this.$refs.postStep.filter();
+      }
+      if (activeName === 'assertionsRule' && this.$refs.assertionsRule) {
+        this.$refs.assertionsRule.filter();
+      }
+    },
     forStatus() {
       if (this.jsr223Processor && this.jsr223Processor.result && this.jsr223Processor.result.length > 0) {
         this.jsr223Processor.result.forEach(item => {
@@ -139,6 +252,9 @@ export default {
           }
         })
       }
+      if (this.jsr223Processor.requestResult && this.jsr223Processor.requestResult.length > 0) {
+        this.response = this.jsr223Processor.requestResult[0]
+      }
     },
     remove() {
       this.$emit('remove', this.jsr223Processor, this.node);
@@ -177,4 +293,25 @@ export default {
   color: #67C23A;
 }
 
+.ms-header {
+  background: #783887;
+  color: white;
+  height: 18px;
+  font-size: xx-small;
+  border-radius: 50%;
+}
+
+.request-tabs {
+  margin: 0px 5px 0px;
+  min-height: 200px;
+  width: 100%;
+}
+
+.ms-tip {
+  padding: 3px 5px;
+  font-size: 16px;
+  border-radius: 0;
+  border-left: 4px solid #783887;
+  margin: 5px 5px 0px 5px;
+}
 </style>