fix(接口测试): 大数据量时的接口报告列表虚拟滚动调优&支持全部展开/折叠功能

--bug=1027497 --user=白奇 【接口测试】  github#25304在使用平台做测试时chrome经常出现崩溃问题 https://www.tapd.cn/55049933/s/1389144

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

@@ -10,27 +10,31 @@
     </div>
     <div style="height: calc(100vh - 400px);">
       <vue-easy-tree
-      :data="treeData"
-      :expand-on-click-node="false"
-      :default-expand-all="defaultExpand"
-      :filter-node-method="filterNode"
-      highlight-current
-      class="ms-tree ms-report-tree"
-      node-key="resourceId"
-      :sizeDependencies="['expanded']"
-      height="calc(100vh - 400px)"
-      :minItemSize="47"
-      isDynamic
-      ref="resultsTree">
-      <span slot-scope="{ node, data }" style="width: 99%" @click="nodeClick(node)">
+        :data="treeData"
+        node-key="id"
+        :sizeDependencies="['expanded']"
+        height="calc(100vh - 400px)"
+        :minItemSize="47"
+        :buffer="500"
+        :expand-on-click-node="false"
+        :default-expand-all="defaultExpand"
+        :filter-node-method="filterNode"
+        highlight-current
+        class="ms-tree ms-report-tree"
+        isDynamic
+        ref="resultsTree"
+        @node-click="nodeClick"
+      >
+      <template slot-scope="{ node, data }">
         <ms-scenario-result
+          :key="data.resourceId"
           :node="data"
+          :expanded="node.expanded"
           :console="console"
           v-on:requestResult="requestResult"
-          :isActive="isActive"
           :is-share="isShare"
           :share-id="shareId" />
-      </span>
+      </template>
     </vue-easy-tree>
     </div>
   </el-card>
@@ -56,7 +60,6 @@ export default {
   },
   data() {
     return {
-      isActive: false,
     };
   },
   created() {
@@ -98,7 +101,7 @@ export default {
     requestResult(requestResult) {
       this.$emit('requestResult', requestResult);
     },
-    nodeClick(node) {
+    nodeClick(data, node) {
       node.expanded = !node.expanded;
     },
     // 改变节点的状态
@@ -114,7 +117,6 @@ export default {
       }
     },
     closeExpansion() {
-      this.isActive = false;
       this.expandAll = false;
       this.changeTreeNodeStatus(this.$refs.resultsTree.store.root, 0);
     },

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

@@ -9,7 +9,7 @@
                 <div class="el-step__icon is-text ms-api-col-create">
                   <div class="el-step__icon-inner">{{ indexNumber }}</div>
                 </div>
-                <i class="icon el-icon-arrow-right" :class="{ 'is-active': showActive }" @click="active" @click.stop />
+                <i class="icon el-icon-arrow-right" :class="{ 'is-active': showActive }" @click.stop="active" />
                 <span class="report-label-req" @click="isLink" v-if="redirect && resourceId">
                   {{ request.name }}
                 </span>
@@ -76,8 +76,7 @@
             :scenario-name="scenarioName"
             :request-type="requestType"
             :request="requestInfo"
-            :console="console"
-            v-if="showActive" />
+            :console="console" />
         </div>
       </el-collapse-transition>
     </div>
@@ -119,17 +118,13 @@ export default {
       type: String,
       default: '',
     },
-    isActive: {
+    expanded: {
       type: Boolean,
       default: false,
     },
     isShare: Boolean,
     shareId: String,
   },
-  created() {
-    this.showActive = this.isActive;
-    this.baseErrorCode = this.errorCode;
-  },
   data() {
     return {
       requestType: '',
@@ -156,9 +151,9 @@ export default {
     };
   },
   watch: {
-    isActive() {
+    expanded() {
       this.loadRequestInfoExpand();
-      this.showActive = this.isActive;
+      this.showActive = this.expanded;
     },
     errorCode() {
       this.baseErrorCode = this.errorCode;
@@ -176,6 +171,13 @@ export default {
       },
     },
   },
+  created() {
+    this.showActive = this.expanded;
+    this.baseErrorCode = this.errorCode;
+    if(this.expanded === true) {
+      this.loadRequestInfoExpand();
+    }
+  },
   methods: {
     statusColor(status) {
       return getReportStatusColor(status);
@@ -224,6 +226,7 @@ export default {
         }
       } else {
         this.requestInfo = this.request;
+        this.requestInfo.loading = false;
       }
     },
     active() {

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

@@ -40,8 +40,8 @@
         :scenarioName="node.label"
         :resourceId="node.resourceId"
         :total-status="node.totalStatus"
+        :expanded="expanded"
         :console="console"
-        :isActive="isActive"
         :is-share="isShare"
         :share-id="shareId"
         v-on:requestResult="requestResult" />
@@ -64,8 +64,8 @@ export default {
     scenario: Object,
     node: Object,
     console: String,
-    isActive: Boolean,
     isShare: Boolean,
+    expanded: Boolean,
     shareId: String,
   },
   data() {
@@ -111,9 +111,6 @@ export default {
       let element = document.getElementById(id);
       element.parentNode.removeChild(element);
     },
-    active() {
-      this.isActive = !this.isActive;
-    },
     requestResult(requestResult) {
       this.$emit('requestResult', requestResult);
     },