feat(接口自动化): 循环控制器 结果处理

backend/src/main/java/io/metersphere/api/dto/definition/request/controller/loop/CountController.java

@@ -7,4 +7,6 @@ public class CountController {
     private int loops;
     private int interval;
     private boolean proceed;
+    private Object requestResult;
+
 }

backend/src/main/java/io/metersphere/api/dto/definition/request/controller/loop/MsForEachController.java

@@ -7,4 +7,6 @@ public class MsForEachController {
     private String inputVal;
     private String returnVal;
     private String interval;
+    private Object requestResult;
+
 }

backend/src/main/java/io/metersphere/api/dto/definition/request/controller/loop/MsWhileController.java

@@ -8,4 +8,5 @@ public class MsWhileController {
     private String operator;
     private String value;
     private int timeout;
+    private Object requestResult;
 }

frontend/src/business/components/api/automation/report/ApiReportDetail.vue

@@ -110,7 +110,6 @@
               if (this.isNotRunning) {
                 try {
                   this.content = JSON.parse(this.report.content);
-                  console.log(this.content)
                   if (!this.content) {
                     this.content = {scenarios: []};
                   }

frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue

@@ -24,6 +24,7 @@
       </span>
 
       <div class="header-right" @click.stop>
+        <slot name="message"></slot>
         <el-switch v-model="data.enable" class="enable-switch"/>
         <slot name="button"></slot>
         <el-button size="mini" icon="el-icon-copy-document" circle @click="copyRow"/>

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

@@ -7,7 +7,7 @@
     :draggable="true"
     color="#02A7F0"
     background-color="#F4F4F5"
-    :title="$t('api_test.automation.loop_controller')">
+    :title="$t('api_test.automation.loop_controller')" v-loading="loading">
 
     <template v-slot:headerLeft>
       <i class="icon el-icon-arrow-right" :class="{'is-active': controller.active}" @click="active(controller)" style="margin-right: 10px"/>
@@ -16,6 +16,15 @@
       <el-radio @change="changeRadio" class="ms-radio" v-model="controller.loopType" label="WHILE">{{$t('loop.while')}}</el-radio>
     </template>
 
+    <template v-slot:message>
+      <span v-if="requestResult && requestResult.scenarios && requestResult.scenarios.length > 0 " style="color: #8c939d;margin-right: 10px">
+        循环{{requestResult.scenarios.length}}次 成功{{success}}次 失败{{error}}次
+      </span>
+    </template>
+
+    <template v-slot:button>
+      <el-button @click="runDebug" :tip="$t('api_test.run')" icon="el-icon-video-play" style="background-color: #409EFF;color: white;" size="mini" circle/>
+    </template>
     <div v-if="controller.loopType==='LOOP_COUNT'" draggable>
       <el-row>
         <el-col :span="8">
@@ -69,17 +78,34 @@
       <span class="ms-span ms-radio">ms</span>
     </div>
 
+    <p class="tip">{{$t('api_test.definition.request.res_param')}} </p>
+    <el-tabs v-model="activeName">
+      <el-tab-pane :label="item.name" :name="item.name" v-for="(item,index) in requestResult.scenarios" :key="index">
+        <div v-for="(result,i) in item.requestResults" :key="i" style="margin-bottom: 5px">
+          <api-response-component :result="result"/>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+
+    <ms-run :debug="true" :environment="currentEnvironmentId" :reportId="reportId" :run-data="debugData"
+            @runRefresh="runRefresh" ref="runTest"/>
+
   </api-base-component>
 </template>
 
 <script>
   import ApiBaseComponent from "../common/ApiBaseComponent";
+  import ApiResponseComponent from "./ApiResponseComponent";
+  import MsRun from "../DebugRun";
+  import {getUUID, getCurrentProjectID} from "@/common/js/utils";
 
   export default {
     name: "MsLoopController",
-    components: {ApiBaseComponent},
+    components: {ApiBaseComponent, ApiResponseComponent, MsRun},
     props: {
       controller: {},
+      currentEnvironmentId: String,
+      currentScenario: {},
       node: {},
       index: Object,
       draggable: {
@@ -87,9 +113,19 @@
         default: false,
       },
     },
+    created() {
+      this.initResult();
+    },
     data() {
       return {
         loading: false,
+        activeName: "first",
+        requestResult: {responseResult: {}},
+        success: 0,
+        error: 0,
+        debugData: {},
+        report: [],
+        reportId: "",
         operators: {
           EQ: {
             label: "commons.adv_search.operators.equals",
@@ -127,6 +163,25 @@
       }
     },
     methods: {
+      initResult() {
+        if (this.controller) {
+          switch (this.controller.loopType) {
+            case "LOOP_COUNT":
+              this.requestResult = this.controller.countController && this.controller.countController.requestResult ? this.controller.countController.requestResult : {};
+              break;
+            case "FOREACH":
+              this.requestResult = this.controller.forEachController && this.controller.forEachController.requestResult ? this.controller.forEachController.requestResult : {};
+              break;
+            case "WHILE":
+              this.requestResult = this.controller.whileController && this.controller.whileController.requestResult ? this.controller.whileController.requestResult : {};
+              break;
+            default:
+              break;
+          }
+        }
+        this.getFails();
+        this.activeName = this.requestResult && this.requestResult.scenarios && this.requestResult.scenarios.length > 0 ? this.requestResult.scenarios[0].name : "";
+      },
       switchChange() {
         if (this.controller.hashTree && this.controller.hashTree.length > 1) {
           this.$warning("当前循环下超过一个请求，不能关闭状态")
@@ -134,6 +189,26 @@
           return;
         }
       },
+      runDebug() {
+        /*触发执行操作*/
+        if (!this.currentEnvironmentId) {
+          this.$error(this.$t('api_test.environment.select_environment'));
+          return;
+        }
+        if (!this.controller.hashTree || this.controller.hashTree.length < 1) {
+          this.$warning("当前循环下没有请求，不能执行")
+          return;
+        }
+        this.loading = true;
+
+        this.debugData = {
+          id: this.currentScenario.id, name: this.currentScenario.name, type: "scenario",
+          variables: this.currentScenario.variables, referenced: 'Created', enableCookieShare: this.enableCookieShare,
+          environmentId: this.currentEnvironmentId, hashTree: [this.controller]
+        };
+        this.reportId = getUUID().substring(0, 8);
+      },
+
       remove() {
         this.$emit('remove', this.controller, this.node);
       },
@@ -146,6 +221,7 @@
       },
       changeRadio() {
         this.controller.active = true;
+        this.initResult();
         this.reload();
       },
       change(value) {
@@ -159,11 +235,77 @@
           this.loading = false
         })
       },
+      runRefresh() {
+        this.getReport();
+      },
+      getFails() {
+        this.error = 0;
+        this.success = 0;
+        if (this.requestResult.scenarios) {
+          this.requestResult.scenarios.forEach((scenario) => {
+            if (scenario.requestResults) {
+              scenario.requestResults.forEach(item => {
+                if (item.error > 0) {
+                  this.error++;
+                  return;
+                }
+              })
+            }
+          })
+          this.success = this.requestResult.scenarios.length - this.error;
+        }
+      },
+      getReport() {
+        if (this.reportId) {
+          let url = "/api/scenario/report/get/" + this.reportId;
+          this.$get(url, response => {
+            this.report = response.data || {};
+            if (response.data) {
+              if (this.isNotRunning) {
+                try {
+                  this.requestResult = JSON.parse(this.report.content);
+                  this.controller.requestResult = this.requestResult;
+                  switch (this.controller.loopType) {
+                    case "LOOP_COUNT":
+                      this.controller.countController.requestResult = this.requestResult;
+                      break;
+                    case "FOREACH":
+                      this.controller.forEachController.requestResult = this.requestResult;
+                      break;
+                    case "WHILE":
+                      this.controller.whileController.requestResult = this.requestResult;
+                      break;
+                    default:
+                      break;
+                  }
+                  this.getFails();
+                  if (!this.requestResult) {
+                    this.requestResult = {scenarios: []};
+                  }
+                } catch (e) {
+                  throw e;
+                }
+                this.loading = false;
+                this.activeName = this.requestResult && this.requestResult.scenarios ? this.requestResult.scenarios[0].name : "";
+              } else {
+                setTimeout(this.getReport, 2000)
+              }
+            } else {
+              this.loading = false;
+              this.$error(this.$t('api_report.not_exist'));
+            }
+          });
+        }
+      },
     },
     computed: {
       hasEmptyOperator() {
         return !!this.controller.operator && this.controller.operator.indexOf("empty") > 0;
+      },
+      isNotRunning() {
+        return "Running" !== this.report.status;
       }
+
     }
   }
 </script>
@@ -180,6 +322,14 @@
     font-weight: normal;
   }
 
+  .tip {
+    padding: 3px 5px;
+    font-size: 16px;
+    border-radius: 4px;
+    border-left: 4px solid #783887;
+    margin: 20px 0;
+  }
+
   .icon.is-active {
     transform: rotate(90deg);
   }

frontend/src/business/components/api/definition/components/response/RequestMetric.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="metric-container">
     <el-row type="flex">
+      <el-col>
+        <div style="font-size: 14px;color: #AAAAAA;float: left">请求名称 :</div>
+        <div style="font-size: 14px;color:#61C550;margin-top:2px;margin-left:10px;float: left">{{response.name}}</div>
+      </el-col>
       <el-col>
         <div style="font-size: 14px;color: #AAAAAA;float: left">{{$t('api_report.response_code')}} :</div>
         <div style="font-size: 14px;color:#61C550;margin-top:2px;margin-left:10px;float: left">{{response.responseResult.responseCode ? response.responseResult.responseCode :'0'}}</div>

frontend/src/business/components/api/definition/model/ApiTestModel.js

@@ -1024,9 +1024,9 @@ export class LoopController extends Controller {
     this.type = "LoopController";
     this.active = false;
     this.loopType = "LOOP_COUNT";
-    this.countController = {loops: 0, interval: 0, proceed: true};
+    this.countController = {loops: 0, interval: 0, proceed: true, requestResult: {}};
-    this.forEachController = {inputVal: "", returnVal: "", interval: 0};
+    this.forEachController = {inputVal: "", returnVal: "", interval: 0, requestResult: {}};
-    this.whileController = {variable: "", operator: "", value: "", timeout: 0};
+    this.whileController = {variable: "", operator: "", value: "", timeout: 0, requestResult: {}};
     this.hashTree = [];
     this.set(options);
   }