refactor: 优化场景报告-子请求的展示

优化场景报告-子请求的展示

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

@@ -47,7 +47,7 @@ public class MsTransactionController extends MsTestElement {
             this.setName(getLabelName());
         }
         transactionController.setName(this.getName());
-        transactionController.setProperty(TestElement.TEST_CLASS, IfController.class.getName());
+        transactionController.setProperty(TestElement.TEST_CLASS, TransactionController.class.getName());
         transactionController.setProperty(TestElement.GUI_CLASS, SaveService.aliasToClass("TransactionControllerGui"));
         transactionController.setGenerateParentSample(generateParentSample);
         transactionController.setIncludeTimers(includeTimers);

backend/src/main/java/io/metersphere/api/jmeter/TestResult.java

@@ -85,6 +85,13 @@ public class TestResult {
                     item.getSubRequestResults().forEach(subItem -> {
                         subItem.setName(array[0]);
                     });
+                }else {
+                    item.getSubRequestResults().forEach(subItem -> {
+                        if (StringUtils.isNotEmpty(subItem.getName()) && subItem.getName().indexOf(SEPARATOR) != -1) {
+                            String array[] = subItem.getName().split(SEPARATOR);
+                            subItem.setName(array[0]);
+                        }
+                    });
                 }
             });
             scenarios.add(result);

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

@@ -13,6 +13,7 @@
               <div class="el-step__icon is-text ms-api-col-create" v-else>
                 <div class="el-step__icon-inner"> {{ indexNumber+1 }}</div>
               </div>
+              <i class="icon el-icon-arrow-right" :class="{'is-active': isActive}" @click="active" @click.stop/>
               {{ request.name }}
             </div>
           </div>
@@ -52,6 +53,13 @@
         </el-col>
       </el-row>
     </div>
+      <el-collapse-transition>
+        <div v-show="isActive" style="width: 99%">
+          <ms-request-sub-result-tail :scenario-name="scenarioName"
+                                  :request-type="requestType" v-if="isActive"
+                                  :request="request"/>
+        </div>
+      </el-collapse-transition>
   </div>
 </template>
 
@@ -60,10 +68,13 @@
   import MsAssertionResults from "./AssertionResults";
   import MsRequestText from "./RequestText";
   import MsResponseText from "./ResponseText";
+  import MsRequestSubResultTail from "./RequestSubResultTail";
 
   export default {
-    name: "MsRequestResult",
+    name: "MsRequestSubResult",
-    components: {MsResponseText, MsRequestText, MsAssertionResults, MsRequestMetric},
+    components: {
+      MsResponseText, MsRequestText, MsAssertionResults, MsRequestMetric,MsRequestSubResultTail
+    },
     props: {
       request: Object,
       scenarioName: String,
@@ -156,4 +167,7 @@
     border-top: 1px solid #e8eaec;
   }
 
+  .icon.is-active {
+    transform: rotate(90deg);
+  }
 </style>

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

@@ -0,0 +1,138 @@
+<template>
+  <div class="request-result">
+    <div>
+      <el-row :gutter="8" type="flex" align="middle" class="info">
+        <el-col :span="2">
+          <div class="method">
+            {{request.method}}
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <el-tooltip effect="dark" :content="request.url" placement="bottom" :open-delay="800">
+            <div class="url">{{request.url}}</div>
+          </el-tooltip>
+        </el-col>
+        <el-col :span="8">
+          <div class="url"> {{$t('api_report.start_time')}}：{{request.startTime | timestampFormatDate(true) }}
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <el-collapse-transition>
+      <div v-show="isActive">
+        <ms-response-text :request-type="requestType" v-if="isCodeEditAlive" :response="request.responseResult" :request="request"/>
+      </div>
+    </el-collapse-transition>
+  </div>
+</template>
+
+<script>
+  import MsRequestMetric from "./RequestMetric";
+  import MsAssertionResults from "./AssertionResults";
+  import MsRequestText from "./RequestText";
+  import MsResponseText from "./ResponseText";
+  import MsRequestResult from "./RequestResult";
+  import MsRequestSubResult from "./RequestSubResult";
+
+  export default {
+    name: "MsRequestSubResultTail",
+    components: {MsResponseText, MsRequestText, MsAssertionResults, MsRequestMetric, MsRequestResult, MsRequestSubResult},
+    props: {
+      request: Object,
+      scenarioName: String,
+      requestType: String
+    },
+
+    data() {
+      return {
+        isActive: true,
+        activeName: "sub",
+        isCodeEditAlive: true
+      }
+    },
+
+    methods: {
+      active() {
+        this.isActive = !this.isActive;
+      },
+      reload() {
+        this.isCodeEditAlive = false;
+        this.$nextTick(() => (this.isCodeEditAlive = true));
+      }
+    },
+    watch: {
+      'request.responseResult'() {
+        this.reload();
+      }
+    },
+
+    computed: {
+      assertion() {
+        return this.request.passAssertions + " / " + this.request.totalAssertions;
+      },
+      hasSub() {
+        return this.request.subRequestResults.length > 0;
+      },
+    }
+  }
+</script>
+
+<style scoped>
+  .request-result {
+    width: 100%;
+    min-height: 40px;
+    padding: 2px 0;
+  }
+
+  .request-result .info {
+    background-color: #F9F9F9;
+    margin-left: 20px;
+    cursor: pointer;
+  }
+
+  .request-result .method {
+    color: #1E90FF;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 40px;
+    padding-left: 5px;
+  }
+
+  .request-result .url {
+    color: #7f7f7f;
+    font-size: 12px;
+    font-weight: 400;
+    margin-top: 4px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    word-break: break-all;
+  }
+
+  .request-result .tab .el-tabs__header {
+    margin: 0;
+  }
+
+  .request-result .text {
+    height: 300px;
+    overflow-y: auto;
+  }
+
+  .sub-result .info {
+    background-color: #FFF;
+  }
+
+  .sub-result .method {
+    border-left: 5px solid #1E90FF;
+    padding-left: 20px;
+  }
+
+  .sub-result:last-child {
+    border-bottom: 1px solid #EBEEF5;
+  }
+
+  .request-result .icon.is-active {
+    transform: rotate(90deg);
+  }
+
+</style>