fix(接口自动化) 修复场景步骤收起问题

【【github#6454】场景的步骤展开后，无法“一键收起”】
https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001006910

frontend/src/business/components/api/automation/scenario/EditApiScenario.vue

@@ -196,7 +196,7 @@
                        highlight-current
                        @node-expand="nodeExpand"
                        @node-collapse="nodeCollapse"
-                       :allow-drop="allowDrop" @node-drag-end="allowDrag" @node-click="nodeClick" draggable ref="stepTree">
+                       :allow-drop="allowDrop" @node-drag-end="allowDrag" @node-click="nodeClick" draggable ref="stepTree" v-if="showHideTree">
                     <span class="custom-tree-node father" slot-scope="{ node, data}" style="width: 96%">
                       <!-- 步骤组件-->
                        <ms-component-config
@@ -405,6 +405,7 @@ export default {
       levels: PRIORITY,
       scenario: {},
       loading: false,
+      showHideTree: true,
       apiListVisible: false,
       customizeVisible: false,
       isBtnHide: false,
@@ -1120,6 +1121,12 @@ export default {
         this.loading = false
       });
     },
+    showHide() {
+      this.showHideTree = false
+      this.$nextTick(() => {
+        this.showHideTree = true
+      });
+    },
     runDebug() {
       if (this.scenarioDefinition.length < 1) {
         return;
@@ -1221,7 +1228,6 @@ export default {
     allowDrag(draggingNode, dropNode, dropType) {
       if (dropNode && draggingNode && dropType) {
         this.sort();
-        this.reload();
       }
     },
     nodeExpand(data, node) {
@@ -1494,7 +1500,7 @@ export default {
       this.expandedStatus = false;
       this.expandedNode = [];
       this.changeNodeStatus(this.scenarioDefinition);
-      this.reload();
+      this.showHide();
     },
     stepStatus(nodes) {
       for (let i in nodes) {

frontend/src/business/components/api/automation/scenario/component/ConstantTimer.vue

@@ -19,70 +19,48 @@
 </template>
 
 <script>
-  import ApiBaseComponent from "../common/ApiBaseComponent";
+import ApiBaseComponent from "../common/ApiBaseComponent";
 
-  export default {
+export default {
-    name: "MsConstantTimer",
+  name: "MsConstantTimer",
-    components: {ApiBaseComponent},
+  components: {ApiBaseComponent},
-    props: {
+  props: {
-      timer: {},
+    timer: {},
-      node: {},
+    node: {},
-      isMax: {
+    isMax: {
-        type: Boolean,
+      type: Boolean,
-        default: false,
+      default: false,
-      },
-      showBtn: {
-        type: Boolean,
-        default: true,
-      },
-      draggable: {
-        type: Boolean,
-        default: false,
-      },
     },
-    data() {
+    showBtn: {
-      return {}
+      type: Boolean,
+      default: true,
     },
-    created() {
+    draggable: {
-      this.$nextTick(() => {
+      type: Boolean,
-        this.$refs.nameInput.focus();
+      default: false,
-      });
+    },
+  },
+  data() {
+    return {}
+  },
+  created() {
+    this.$nextTick(() => {
+      this.$refs.nameInput.focus();
+    });
+  },
+  methods: {
+    remove() {
+      this.$emit('remove', this.timer, this.node);
+    },
+    copyRow() {
+      this.$emit('copyRow', this.timer, this.node);
     },
-    methods: {
-      remove() {
-        this.$emit('remove', this.timer, this.node);
-      },
-      copyRow() {
-        this.$emit('copyRow', this.timer, this.node);
-      },
-    }
   }
+}
 </script>
 
 <style scoped>
-  .width-100 {
+.time-input {
-    width: 40%
+  width: 30%;
-  }
+}
-
-  .ms-api-col {
-    background-color: #F2F9EE;
-    border-color: #67C23A;
-    margin-right: 10px;
-    color: #67C23A;
-  }
-
-  .ms-title-buttion {
-    background-color: #F2F9EE;
-    color: #67C23A;
-    margin-right: 20px;
-  }
-
-  /deep/ .el-card__body {
-    padding: 15px;
-  }
-
-  .time-input {
-    width: 30%;
-    /*margin-left: 20px;*/
-  }
 </style>

frontend/src/business/components/api/automation/scenario/maximize/MaximizeScenario.vue

@@ -33,7 +33,7 @@
                    highlight-current
                    @node-expand="nodeExpand"
                    @node-collapse="nodeCollapse"
-                   :allow-drop="allowDrop" @node-drag-end="allowDrag" @node-click="nodeClick" v-if="!loading" draggable>
+                   :allow-drop="allowDrop" @node-drag-end="allowDrag" @node-click="nodeClick" draggable v-if="showHideTree">
               <span class="custom-tree-node father" slot-scope="{ node, data}">
                 <!-- 步骤组件-->
                  <ms-component-config
@@ -218,6 +218,7 @@ export default {
       levels: PRIORITY,
       scenario: {},
       loading: false,
+      showHideTree: true,
       apiListVisible: false,
       customizeVisible: false,
       scenarioVisible: false,
@@ -551,8 +552,13 @@ export default {
       }
       this.sort();
       this.reload();
-    }
+    },
-    ,
+    showHide() {
+      this.showHideTree = false
+      this.$nextTick(() => {
+        this.showHideTree = true
+      });
+    },
     reload() {
       this.loading = true
       this.$nextTick(() => {
@@ -585,7 +591,7 @@ export default {
               this.reportId = getUUID().substring(0, 8);
             }
           });
-        }else{
+        } else {
           this.errorRefresh();
         }
       })
@@ -642,7 +648,6 @@ export default {
     allowDrag(draggingNode, dropNode, dropType) {
       if (dropNode && draggingNode && dropType) {
         this.sort();
-        this.reload();
       }
     },
     nodeExpand(data) {
@@ -764,7 +769,7 @@ export default {
       this.debugVisible = true;
       this.loading = false;
     },
-    errorRefresh(){
+    errorRefresh() {
       this.debugVisible = false;
       this.loading = false;
     },
@@ -818,30 +823,12 @@ export default {
       this.debugResult = result;
       this.sort()
     },
-    shrinkTreeNode() {
-      //改变每个节点的状态
-      for (let i in this.scenarioDefinition) {
-        if (i > 30 && this.expandedStatus) {
-          continue;
-        }
-        if (this.scenarioDefinition[i]) {
-          if (this.expandedStatus) {
-            this.expandedNode.push(this.scenarioDefinition[i].resourceId);
-          }
-          this.scenarioDefinition[i].active = this.expandedStatus;
-          if (this.scenarioDefinition[i].hashTree && this.scenarioDefinition[i].hashTree.length > 0) {
-            this.changeNodeStatus(this.scenarioDefinition[i].hashTree);
-          }
-        }
-      }
-    },
     changeNodeStatus(nodes) {
       for (let i in nodes) {
         if (nodes[i]) {
           if (this.expandedStatus) {
             this.expandedNode.push(nodes[i].resourceId);
           }
-          nodes[i].active = this.expandedStatus;
           if (nodes[i].hashTree != undefined && nodes[i].hashTree.length > 0) {
             this.changeNodeStatus(nodes[i].hashTree);
           }
@@ -849,28 +836,15 @@ export default {
       }
     },
     openExpansion() {
-      if (this.scenarioDefinition && this.scenarioDefinition.length > 30) {
+      this.expandedNode = [];
-        this.$alert(this.$t('api_test.definition.request.step_message'), '', {
+      this.expandedStatus = true;
-          confirmButtonText: this.$t('commons.confirm'),
+      this.changeNodeStatus(this.scenarioDefinition);
-          callback: (action) => {
-            if (action === 'confirm') {
-              this.expandedNode = [];
-              this.expandedStatus = true;
-              this.shrinkTreeNode();
-            }
-          }
-        });
-      } else {
-        this.expandedNode = [];
-        this.expandedStatus = true;
-        this.shrinkTreeNode();
-      }
     },
     closeExpansion() {
       this.expandedStatus = false;
       this.expandedNode = [];
-      this.shrinkTreeNode();
+      this.changeNodeStatus(this.scenarioDefinition);
-      this.reload();
+      this.showHide();
     },
     stepNode() {
       //改变每个节点的状态