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;
@@ -174,7 +177,7 @@ export default {
   created() {
     this.showActive = this.expanded;
     this.baseErrorCode = this.errorCode;
-    if(this.expanded === true) {
+    if (this.expanded === true) {
       this.loadRequestInfoExpand();
     }
   },

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

@@ -1,66 +1,58 @@
 <template>
   <div class="text-container">
-    <el-collapse-transition>
-      <el-tabs v-model="activeName" v-show="isActive">
-        <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" />
-        </el-tab-pane>
+    <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-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">
-          <pre>{{ response.headers }}</pre>
-        </el-tab-pane>
+      <el-tab-pane :label="$t('api_test.definition.request.response_header')" name="headers" class="pane">
+        <pre>{{ response.headers }}</pre>
+      </el-tab-pane>
 
-        <el-tab-pane :label="$t('api_report.assertions')" name="assertions" class="pane assertions">
-          <ms-assertion-results :assertions="response.assertions" />
-        </el-tab-pane>
+      <el-tab-pane :label="$t('api_report.assertions')" name="assertions" class="pane assertions">
+        <ms-assertion-results :assertions="response.assertions" />
+      </el-tab-pane>
 
-        <el-tab-pane :label="$t('api_test.request.extract.label')" name="label" class="pane">
-          <pre>{{ response.vars }}</pre>
-        </el-tab-pane>
+      <el-tab-pane :label="$t('api_test.request.extract.label')" name="label" class="pane">
+        <pre>{{ response.vars }}</pre>
+      </el-tab-pane>
 
-        <el-tab-pane :label="$t('api_report.request_body')" name="request_body" class="pane">
-          <div class="ms-div" v-if="request.url && request.url !== ''">
-            {{ $t('api_test.request.address') }} :
-            <pre>{{ request.url }}</pre>
-          </div>
-          <!--这里判断url而不是判断cookies是因为通过url来判断是否是http请求，http请求展示以下信息-->
-          <div class="ms-div" v-if="request.url && request.url !== ''">
-            {{ $t('api_test.scenario.headers') }} :
-            <pre>{{ request.headers }}</pre>
-          </div>
-          <div class="ms-div" v-if="request.url && request.url !== ''">
-            Cookie:
-            <pre>{{ request.cookies }}</pre>
-          </div>
-          <div class="ms-div">
-            Body :
-            <pre>{{ request.body }}</pre>
-          </div>
-        </el-tab-pane>
+      <el-tab-pane :label="$t('api_report.request_body')" name="request_body" class="pane">
+        <div class="ms-div" v-if="request.url && request.url !== ''">
+          {{ $t('api_test.request.address') }} :
+          <pre>{{ request.url }}</pre>
+        </div>
+        <!--这里判断url而不是判断cookies是因为通过url来判断是否是http请求，http请求展示以下信息-->
+        <div class="ms-div" v-if="request.url && request.url !== ''">
+          {{ $t('api_test.scenario.headers') }} :
+          <pre>{{ request.headers }}</pre>
+        </div>
+        <div class="ms-div" v-if="request.url && request.url !== ''">
+          Cookie:
+          <pre>{{ request.cookies }}</pre>
+        </div>
+        <div class="ms-div">
+          Body :
+          <pre>{{ request.body }}</pre>
+        </div>
+      </el-tab-pane>
 
-        <el-tab-pane v-if="activeName == 'body'" :disabled="true" name="mode" class="pane assertions">
-          <template v-slot:label>
-            <ms-dropdown
-              v-if="request.method === 'SQL'"
-              :commands="sqlModes"
-              :default-command="mode"
-              @command="sqlModeChange" />
-            <ms-dropdown v-else :commands="modes" :default-command="mode" @command="modeChange" ref="modeDropdown" />
-          </template>
-        </el-tab-pane>
-      </el-tabs>
-    </el-collapse-transition>
+      <el-tab-pane v-if="activeName == 'body'" :disabled="true" name="mode" class="pane assertions">
+        <template v-slot:label>
+          <ms-dropdown
+            v-if="request.method === 'SQL'"
+            :commands="sqlModes"
+            :default-command="mode"
+            @command="sqlModeChange" />
+          <ms-dropdown v-else :commands="modes" :default-command="mode" @command="modeChange" ref="modeDropdown" />
+        </template>
+      </el-tab-pane>
+    </el-tabs>
   </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: {