fix(测试跟踪): 报告-场景-点击查看执行结果-点击步骤-不能向下展开

--bug=1027885 --user=白奇 【测试跟踪】&【接口测试】报告-场景-点击查看执行结果-点击步骤-不能向下展开 https://www.tapd.cn/55049933/s/1396341https://www.tapd.cn/55049933/s/1393977

api-test/frontend/src/business/automation/report/components/InfiniteScrollScenarioResults.vue

@@ -27,7 +27,7 @@
           <ms-scenario-result
             :key="data.resourceId"
             :node="data"
-            :expanded="node.expanded"
+            :expanded.sync="node.expanded"
             :console="console"
             v-on:requestResult="requestResult"
             :is-share="isShare"
@@ -99,6 +99,7 @@ export default {
       this.$emit('requestResult', requestResult);
     },
     nodeClick(data, node) {
+      console.log('nodeClick', e);
       node.expanded = !node.expanded;
     },
     // 改变节点的状态

api-test/frontend/src/business/automation/report/components/RequestResult.vue

@@ -1,7 +1,7 @@
 <template>
   <el-card class="ms-cards" v-if="request && request.responseResult">
     <div class="request-result">
-      <div @click="active">
+      <div @click.stop="active">
         <el-row :gutter="18" type="flex" align="middle" class="info">
           <el-col class="ms-req-name-col" :span="18" v-if="indexNumber != undefined">
             <el-tooltip :content="getName(request.name)" placement="top" style="z-index: 999">
@@ -70,7 +70,7 @@
       </div>
 
       <el-collapse-transition>
-        <div v-show="showActive && !request.unexecute" style="width: 99%">
+        <div v-show="showActive && !request.unexecute" style="width: 99%" @click.stop>
           <ms-request-result-tail
             v-loading="requestInfo.loading"
             :scenario-name="scenarioName"
@@ -151,9 +151,12 @@ export default {
     };
   },
   watch: {
-    expanded() {
+    expanded(val) {
       this.loadRequestInfoExpand();
-      this.showActive = this.expanded;
+      this.showActive = val;
+    },
+    showActive(val) {
+      this.$emit('update:expanded', val);
     },
     errorCode() {
       this.baseErrorCode = this.errorCode;

api-test/frontend/src/business/automation/report/components/ResponseText.vue

@@ -1,20 +1,13 @@
 <template>
   <div class="text-container">
-    <el-collapse-transition>
-      <el-tabs v-model="activeName" v-show="isActive">
+    <el-tabs v-model="activeName">
       <el-tab-pane
         :class="'body-pane'"
         :label="$t('api_test.definition.request.response_body')"
         name="body"
         class="pane">
         <ms-sql-result-table v-if="isSqlType" :body="response.body" />
-          <ms-code-edit
-            v-if="!isSqlType"
-            :mode="mode"
-            :read-only="true"
-            :data="response.body"
-            :modes="modes"
-            ref="codeEdit" />
+        <ms-code-edit v-else :mode="mode" :read-only="true" :data="response.body" :modes="modes" ref="codeEdit" />
       </el-tab-pane>
 
       <el-tab-pane :label="$t('api_test.definition.request.response_header')" name="headers" class="pane">
@@ -60,7 +53,6 @@
         </template>
       </el-tab-pane>
     </el-tabs>
-    </el-collapse-transition>
   </div>
 </template>
 
@@ -90,7 +82,6 @@ export default {
 
   data() {
     return {
-      isActive: true,
       activeName: 'body',
       modes: ['text', 'json', 'xml', 'html'],
       sqlModes: ['text', 'table'],
@@ -99,9 +90,6 @@ export default {
   },
 
   methods: {
-    active() {
-      this.isActive = !this.isActive;
-    },
     modeChange(mode) {
       this.mode = mode;
     },

api-test/frontend/src/business/automation/report/components/ScenarioResult.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="scenario-result">
+  <div class="scenario-result" @click.stop="handleClick">
     <div
       v-if="
         (node.children && node.children.length > 0) ||
@@ -23,8 +23,14 @@
           </el-col>
           <el-col :span="2">
             <div style="float: right">
-              <ms-api-report-status :status="node.totalStatus" v-if="node.type !=='ConstantTimer' && node.type !=='Assertion'
-                                     && node.children && node.children.length > 0"/>
+              <ms-api-report-status
+                :status="node.totalStatus"
+                v-if="
+                  node.type !== 'ConstantTimer' &&
+                  node.type !== 'Assertion' &&
+                  node.children &&
+                  node.children.length > 0
+                " />
             </div>
           </el-col>
         </el-row>
@@ -40,7 +46,7 @@
         :scenarioName="node.label"
         :resourceId="node.resourceId"
         :total-status="node.totalStatus"
-        :expanded="expanded"
+        :expanded.sync="innerExpanded"
         :console="console"
         :is-share="isShare"
         :share-id="shareId"
@@ -58,7 +64,8 @@ import MsApiReportStatus from '../ApiReportStatus';
 export default {
   name: 'MsScenarioResult',
   components: {
-    MsRequestResult, MsApiReportStatus
+    MsRequestResult,
+    MsApiReportStatus,
   },
   props: {
     scenario: Object,
@@ -71,8 +78,17 @@ export default {
   data() {
     return {
       stepFilter: new STEP(),
+      innerExpanded: false,
     };
   },
+  watch: {
+    expanded(val) {
+      this.innerExpanded = val;
+    },
+    innerExpanded(val) {
+      this.$emit('update:expanded', val);
+    },
+  },
   methods: {
     getLabel(label) {
       switch (label) {
@@ -114,6 +130,9 @@ export default {
     requestResult(requestResult) {
       this.$emit('requestResult', requestResult);
     },
+    handleClick() {
+      this.innerExpanded = !this.innerExpanded;
+    },
   },
 
   computed: {