fix(接口测试): 场景详情-批量展开/单独展开-步骤显示问题

--bug=1027706 --user=白奇 【接口测试】场景详情-批量展开/单独展开-步骤显示问题 https://www.tapd.cn/55049933/s/1392374

api-test/frontend/src/business/automation/scenario/EditApiScenario.vue

@@ -275,7 +275,7 @@
                   node-key="id"
                   height="calc(100vh - 170px)"
                   :minItemSize="43"
-                  :sizeDependencies="['expanded']"
+                  :sizeDependencies="['expanded', 'checked']"
                   :props="props"
                   :data="scenarioDefinition"
                   :buffer="300"
@@ -293,11 +293,12 @@
                   ref="stepTree"
                   :key="reloadTree">
                   <el-row
+                    slot-scope="{ node, data }"
+                    v-if="isNodeShow(node, data)"
                     class="custom-tree-node"
                     :gutter="10"
                     type="flex"
                     align="middle"
-                    slot-scope="{ node, data }"
                     style="width: 100%">
                     <span
                       class="custom-tree-node-col"
@@ -324,14 +325,7 @@
                         :show-size="false"
                         style="margin-right: 10px" />
                     </span>
-                    <span
-                      v-if="
-                        stepFilter.get('ALlSamplerStep').indexOf(data.type) === -1 ||
-                        !node.parent ||
-                        !node.parent.data ||
-                        stepFilter.get('AllSamplerProxy').indexOf(node.parent.data.type) === -1
-                      "
-                      style="width: calc(100% - 40px)">
+                    <span style="width: calc(100% - 40px)">
                       <!-- 步骤组件-->
                       <ms-component-config
                         :scenario-definition="scenarioDefinition"
@@ -357,6 +351,9 @@
                         ref="componentConfig" />
                     </span>
                   </el-row>
+                  <div v-else class="el-tree-node is-hidden is-focusable is-leaf" style="display: none">
+                    {{ hideNode(node) }}
+                  </div>
                 </vue-easy-tree>
               </div>
             </el-row>
@@ -2393,23 +2390,35 @@ export default {
     },
     changeNodeStatus(resourceIds, nodes) {
       for (let i in nodes) {
-        if (nodes[i] && !(nodes[i].type === 'scenario' && nodes[i].referenced === 'REF')) {
-          if (resourceIds.indexOf(nodes[i].resourceId) !== -1) {
-            nodes[i].active = this.expandedStatus;
+        const node = nodes[i];
+        if (node && !(node.type === 'scenario' && node.referenced === 'REF')) {
+          if (
+            resourceIds.indexOf(node.resourceId) !== -1 &&
+            this.stepFilter.get('ALlSamplerStep').indexOf(node.type) === -1
+          ) {
+            node.active = this.expandedStatus;
           }
-          if (nodes[i].hashTree && nodes[i].hashTree.length > 0 && !this.expandedStatus) {
-            this.changeNodeStatus(resourceIds, nodes[i].hashTree);
+          if (node.hashTree && node.hashTree.length > 0 && !this.expandedStatus) {
+            this.changeNodeStatus(resourceIds, node.hashTree);
           }
         }
       }
     },
+    isNodeShow(node, data) {
+      const res =
+        this.stepFilter.get('ALlSamplerStep').indexOf(data.type) === -1 ||
+        !node.parent ||
+        !node.parent.data ||
+        this.stepFilter.get('AllSamplerProxy').indexOf(node.parent.data.type) === -1;
+      return res;
+    },
     getAllResourceIds() {
       let selectNodes = [];
       let selectIds = [];
       if (this.$refs.stepTree) {
         selectNodes = this.$refs.stepTree.getCheckedNodes();
-         selectNodes.forEach(item => {
-          selectIds.push(item.resourceId)
+        selectNodes.forEach((item) => {
+          selectIds.push(item.resourceId);
         });
       }
       let resourceIds = [];
@@ -2418,14 +2427,14 @@ export default {
     },
     filterAllStep(stepArray, resourceIds, selectIds) {
       if (stepArray) {
-        stepArray.forEach(item =>{
+        stepArray.forEach((item) => {
           if (selectIds && selectIds.includes(item.resourceId)) {
             resourceIds.push(item.resourceId);
           }
           if (item.referenced !== 'REF' && item.hashTree) {
             this.filterAllStep(item.hashTree, resourceIds, selectIds);
           }
-        })
+        });
       }
     },
     getAllCheckedNodes() {

api-test/frontend/src/business/automation/scenario/component/ApiComponent.vue

@@ -72,7 +72,9 @@
         <span
           class="ms-step-debug-code"
           @click="active"
-          :class="request.requestResult && request.requestResult[0].success && reqSuccess ? 'ms-req-success' : 'ms-req-error'"
+          :class="
+            request.requestResult && request.requestResult[0].success && reqSuccess ? 'ms-req-success' : 'ms-req-error'
+          "
           v-else-if="
             !loading &&
             !request.testing &&
@@ -93,10 +95,7 @@
             class="ms-btn"
             size="mini"
             circle
-            v-permission="[
-              'PROJECT_API_SCENARIO:READ+DEBUG',
-              'PROJECT_API_SCENARIO:READ+RUN'
-            ]"/>
+            v-permission="['PROJECT_API_SCENARIO:READ+DEBUG', 'PROJECT_API_SCENARIO:READ+RUN']" />
         </el-tooltip>
         <el-tooltip :content="$t('report.stop_btn')" placement="top" :enterable="false" v-else>
           <el-button
@@ -105,10 +104,7 @@
             style="color: white; padding: 0 0.1px; width: 24px; height: 24px"
             class="stop-btn"
             circle
-            v-permission="[
-              'PROJECT_API_SCENARIO:READ+DEBUG',
-              'PROJECT_API_SCENARIO:READ+RUN'
-            ]">
+            v-permission="['PROJECT_API_SCENARIO:READ+DEBUG', 'PROJECT_API_SCENARIO:READ+RUN']">
             <div style="transform: scale(0.66)">
               <span style="margin-left: -4.5px; font-weight: bold">STOP</span>
             </div>
@@ -171,7 +167,7 @@
             <el-tab-pane
               v-for="(item, i) in request.requestResult"
               :label="'循环' + (i + 1)"
-              :key="i"
+              :key="`api-response${i}`"
               style="margin-bottom: 5px">
               <api-response-component :currentProtocol="request.protocol" :apiActive="true" :result="item" />
             </el-tab-pane>