refactor(接口测试): 场景步骤重构优化

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

@@ -196,39 +196,47 @@
                        @node-expand="nodeExpand"
                        @node-collapse="nodeCollapse"
                        :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
-                         :scenario-definition="scenarioDefinition"
-                         :message="message"
-                         :type="data.type"
-                         :scenario="data"
-                         :response="response"
-                         :currentScenario="currentScenario"
-                         :expandedNode="expandedNode"
-                         :currentEnvironmentId="currentEnvironmentId"
-                         :node="node"
-                         :project-list="projectList"
-                         :env-map="projectEnvMap"
-                         :env-group-id="envGroupId"
-                         :environment-type="environmentType"
-                         @remove="remove"
-                         @copyRow="copyRow"
-                         @suggestClick="suggestClick"
-                         @refReload="refReload"
-                         @runScenario="runDebug"
-                         @stopScenario="stop"
-                         @setDomain="setDomain"
-                         @openScenario="openScenario"
-                         @editScenarioAdvance="editScenarioAdvance"
-                         v-if="stepFilter.get('ALlSamplerStep').indexOf(data.type) ===-1
-                         || (!node.parent || !node.parent.data || stepFilter.get('AllSamplerProxy').indexOf(node.parent.data.type) === -1)"/>
 
-                       <div v-else class="el-tree-node is-hidden is-focusable is-leaf" style="display: none;">
+                <el-row class="custom-tree-node" :gutter="18" type="flex" align="middle" slot-scope="{node, data}" style="width: 100%">
-                         {{ hideNode(node) }}
+                  <el-col class="custom-tree-node-col" style="padding-left:0px;padding-right:0px" v-if="node && data.hashTree && data.hashTree.length > 0 && !data.isLeaf">
-                       </div>
+                    <span v-if="!node.expanded" class="el-icon-circle-plus-outline custom-node_e" @click="openOrClose(node)"/>
-
+                    <span v-else class="el-icon-remove-outline custom-node_e" @click="openOrClose(node)"/>
-                    </span>
+                  </el-col>
+                  <el-col class="custom-tree-node-col" style="padding-left:0px;padding-right:0px" v-else>
+                  </el-col>
+                  <el-col>
+                    <!-- 步骤组件-->
+                    <ms-component-config
+                      :scenario-definition="scenarioDefinition"
+                      :message="message"
+                      :type="data.type"
+                      :scenario="data"
+                      :response="response"
+                      :currentScenario="currentScenario"
+                      :expandedNode="expandedNode"
+                      :currentEnvironmentId="currentEnvironmentId"
+                      :node="node"
+                      :project-list="projectList"
+                      :env-map="projectEnvMap"
+                      :env-group-id="envGroupId"
+                      :environment-type="environmentType"
+                      @remove="remove"
+                      @copyRow="copyRow"
+                      @suggestClick="suggestClick"
+                      @refReload="refReload"
+                      @runScenario="runDebug"
+                      @stopScenario="stop"
+                      @setDomain="setDomain"
+                      @openScenario="openScenario"
+                      @editScenarioAdvance="editScenarioAdvance"
+                      v-if="stepFilter.get('ALlSamplerStep').indexOf(data.type) ===-1
+                         || (!node.parent || !node.parent.data || stepFilter.get('AllSamplerProxy').indexOf(node.parent.data.type) === -1)"
+                    />
+                    <div v-else class="el-tree-node is-hidden is-focusable is-leaf" style="display: none;">
+                      {{ hideNode(node) }}
+                    </div>
+                  </el-col>
+                </el-row>
               </el-tree>
             </div>
           </el-col>
@@ -443,6 +451,7 @@ export default {
       showConfigButtonWithOutPermission: false,
       props: {
         label: "label",
+        isLeaf: "isLeaf",
         children: "hashTree"
       },
       moduleObj: {
@@ -601,6 +610,14 @@ export default {
     }
   },
   methods: {
+    openOrClose(node) {
+      node.expanded = !node.expanded;
+      if (node.expanded) {
+        this.nodeExpand(node.data);
+      } else {
+        this.nodeCollapse(node.data);
+      }
+    },
     hideNode(node) {
       node.isLeaf = true;
       node.visible = false;
@@ -608,15 +625,14 @@ export default {
     hideTreeNode(node, array) {
       let isLeaf = true;
       array.forEach(item => {
-        if (!item.isLeaf && !isLeaf) {
+        if (this.stepFilter.get('ALlSamplerStep').indexOf(item.type) === -1) {
           isLeaf = false;
         }
-        if (item.childNodes && item.childNodes.length > 0) {
+        if (item.hashTree && item.hashTree.length > 0) {
-          this.hideTreeNode(item, item.childNodes);
+          this.hideTreeNode(item, item.hashTree);
         }
       })
       node.isLeaf = isLeaf;
-      node.clazzName = '.is-leaf';
     },
     currentUser: () => {
       return getCurrentUser();
@@ -655,9 +671,6 @@ export default {
               } else {
                 this.$store.state.currentApiCase = {resetDataSource: getUUID()};
               }
-              if (this.$refs.stepTree && this.$refs.stepTree.root && this.$refs.stepTree.root.childNodes) {
-                this.hideTreeNode(this.$refs.stepTree.root, this.$refs.stepTree.root.childNodes);
-              }
             }
           }
         })
@@ -1106,6 +1119,7 @@ export default {
         // 添加debug结果
         stepArray[i].parentIndex = fullPath ? fullPath + "_" + stepArray[i].index : stepArray[i].index;
         if (stepArray[i].hashTree && stepArray[i].hashTree.length > 0) {
+          this.hideTreeNode(stepArray[i], stepArray[i].hashTree);
           this.stepSize += stepArray[i].hashTree.length;
           this.sort(stepArray[i].hashTree, stepArray[i].projectId, stepArray[i].parentIndex);
         }
@@ -1530,9 +1544,6 @@ export default {
             this.resetResourceId(this.scenarioDefinition);
           }
           this.$store.state.scenarioMap.set(this.currentScenario.id, 0);
-          if (this.$refs.stepTree && this.$refs.stepTree.root && this.$refs.stepTree.root.childNodes) {
-            this.hideTreeNode(this.$refs.stepTree.root, this.$refs.stepTree.root.childNodes);
-          }
         })
       }
     },
@@ -2002,8 +2013,9 @@ export default {
 }
 
 .ms-tree >>> .el-icon-caret-right:before {
-  content: '\e723';
+  /*content: '\e723';*/
-  font-size: 20px;
+  padding: 0;
+  content: "";
 }
 
 .ms-tree >>> .el-tree-node__expand-icon.is-leaf {
@@ -2016,8 +2028,9 @@ export default {
 
 .ms-tree >>> .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
   color: #7C3985;
-  content: "\e722";
+  /* content: "\e722";*/
-  font-size: 20px;
+  padding: 0;
+  content: "";
 }
 
 .ms-sc-variable-header >>> .el-dialog__body {
@@ -2081,4 +2094,13 @@ export default {
   z-index: 999;
 }
 
+.custom-node_e {
+  color: #7C3985;
+  font-size: 20px;
+}
+
+.custom-tree-node-col {
+  width: 20px;
+  padding: 0px;
+}
 </style>

frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue

@@ -32,10 +32,11 @@
         <slot name="message"></slot>
         <slot name="debugStepCode"></slot>
         <el-tooltip :content="$t('test_resource_pool.enable_disable')" placement="top" v-if="showBtn">
-          <el-switch v-model="data.enable" class="enable-switch" size="mini" :disabled="data.disabled && !data.root&&!showVersion" style="width: 30px"/>
+          <el-switch v-model="data.enable" class="enable-switch" size="mini" :disabled="(data.disabled && !data.root) || !showVersion" style="width: 30px"/>
         </el-tooltip>
-        <slot name="button" v-if="showVersion"></slot>
+        <slot name="button"></slot>
-        <el-button v-if="showVersion" size="mini" icon="el-icon-copy-document" circle @click="copyRow" style="padding: 5px" :disabled="data.disabled && !data.root"/>
+        <el-button v-if="showVersion" size="mini" icon="el-icon-copy-document" circle @click="copyRow" style="padding: 5px"
+                   :disabled="(data.disabled && !data.root) || !showVersion "/>
 
         <el-button v-if="showVersion && stepFilter.get('ALlSamplerStep').indexOf(data.type) !==-1" size="mini" icon="el-icon-delete" type="danger" style="padding: 5px" circle @click="remove"/>
         <step-extend-btns style="display: contents"

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

@@ -34,26 +34,40 @@
                    highlight-current
                    @node-expand="nodeExpand"
                    @node-collapse="nodeCollapse"
-                   :allow-drop="allowDrop" @node-drag-end="allowDrag" @node-click="nodeClick">
+                   :allow-drop="allowDrop" @node-drag-end="allowDrag" @node-click="nodeClick" class="ms-tree">
-              <span class="custom-tree-node father" slot-scope="{ node, data}" style="width: 96%">
+            <el-row class="custom-tree-node" :gutter="18" type="flex" align="middle" slot-scope="{node, data}" style="width: 100%">
+              <el-col class="custom-tree-node-col" style="padding-left:0px;padding-right:0px" v-if="node && data.hashTree && data.hashTree.length > 0 && !data.isLeaf">
+                <span v-if="!node.expanded" class="el-icon-circle-plus-outline custom-node_e" @click="openOrClose(node)"/>
+                <span v-else class="el-icon-remove-outline custom-node_e" @click="openOrClose(node)"/>
+              </el-col>
+              <el-col class="custom-tree-node-col" style="padding-left:0px;padding-right:0px" v-else>
+              </el-col>
+              <el-col>
                 <!-- 步骤组件-->
-                 <ms-component-config
+                <ms-component-config
-                   :isMax="true"
+                  :isMax="true"
-                   :type="data.type"
+                  :type="data.type"
-                   :scenario="data"
+                  :scenario="data"
-                   :response="response"
+                  :response="response"
-                   :currentScenario="currentScenario"
+                  :currentScenario="currentScenario"
-                   :currentEnvironmentId="currentEnvironmentId"
+                  :currentEnvironmentId="currentEnvironmentId"
-                   :node="node"
+                  :node="node"
-                   :project-list="projectList"
+                  :project-list="projectList"
-                   :env-map="projectEnvMap"
+                  :env-map="projectEnvMap"
-                   :message="message"
+                  :message="message"
-                   @remove="remove" @copyRow="copyRow"
+                  @remove="remove" @copyRow="copyRow"
-                   @runScenario="runScenario"
+                  @runScenario="runScenario"
-                   @stopScenario="stopScenario"
+                  @stopScenario="stopScenario"
-                   @suggestClick="suggestClick"
+                  @suggestClick="suggestClick"
-                   @refReload="refReload" @openScenario="openScenario"/>
+                  @refReload="refReload" @openScenario="openScenario"
-              </span>
+                  v-if="stepFilter.get('ALlSamplerStep').indexOf(data.type) ===-1
+                         || (!node.parent || !node.parent.data || stepFilter.get('AllSamplerProxy').indexOf(node.parent.data.type) === -1)"
+                />
+                <div v-else class="el-tree-node is-hidden is-focusable is-leaf" style="display: none;">
+                  {{ hideNode(node) }}
+                </div>
+              </el-col>
+            </el-row>
           </el-tree>
           <div @click="fabClick">
             <vue-fab id="fab" mainBtnColor="#783887" size="small" :global-options="globalOptions"
@@ -109,7 +123,7 @@
                 :draggable="false"
                 @remove="remove" @copyRow="copyRow" @suggestClick="suggestClick"
                 @refReload="refReload" @openScenario="openScenario"
-                v-if="selectedTreeNode && selectedNode"/>
+                v-if="selectedTreeNode && selectedNode && stepFilter.get('ALlSamplerStep').indexOf(item.type) ===-1"/>
             </div>
           </div>
         </div>
@@ -414,6 +428,7 @@ export default {
           arr[i].projectId = scenarioProjectId ? scenarioProjectId : this.projectId;
         }
         if (arr[i].hashTree != undefined && arr[i].hashTree.length > 0) {
+          this.hideTreeNode(arr[i], arr[i].hashTree);
           this.recursiveSorting(arr[i].hashTree, arr[i].projectId);
         }
         // 添加debug结果
@@ -422,6 +437,30 @@ export default {
         }
       }
     },
+    openOrClose(node) {
+      node.expanded = !node.expanded;
+      if (node.expanded) {
+        this.nodeExpand(node.data);
+      } else {
+        this.nodeCollapse(node.data);
+      }
+    },
+    hideNode(node) {
+      node.isLeaf = true;
+      node.visible = false;
+    },
+    hideTreeNode(node, array) {
+      let isLeaf = true;
+      array.forEach(item => {
+        if (this.stepFilter.get('ALlSamplerStep').indexOf(item.type) === -1) {
+          isLeaf = false;
+        }
+        if (item.hashTree && item.hashTree.length > 0) {
+          this.hideTreeNode(item, item.hashTree);
+        }
+      })
+      node.isLeaf = isLeaf;
+    },
     sort() {
       for (let i in this.scenarioDefinition) {
         // 排序
@@ -437,6 +476,7 @@ export default {
         }
 
         if (this.scenarioDefinition[i].hashTree != undefined && this.scenarioDefinition[i].hashTree.length > 0) {
+          this.hideTreeNode(this.scenarioDefinition[i], this.scenarioDefinition[i].hashTree);
           this.recursiveSorting(this.scenarioDefinition[i].hashTree, this.scenarioDefinition[i].projectId);
         }
         // 添加debug结果
@@ -899,7 +939,7 @@ export default {
     runScenario(scenario) {
       this.$emit('runScenario', scenario);
     },
-    stopScenario(){
+    stopScenario() {
       this.$emit('stopScenario');
     },
     editScenarioAdvance(data) {
@@ -996,14 +1036,16 @@ export default {
   z-index: 9;
 }
 
+
 .ms-tree >>> .el-tree-node__expand-icon.expanded {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 
 .ms-tree >>> .el-icon-caret-right:before {
-  content: '\e723';
+  /*content: '\e723';*/
-  font-size: 20px;
+  padding: 0;
+  content: "";
 }
 
 .ms-tree >>> .el-tree-node__expand-icon.is-leaf {
@@ -1016,8 +1058,9 @@ export default {
 
 .ms-tree >>> .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
   color: #7C3985;
-  content: "\e722";
+  /* content: "\e722";*/
-  font-size: 20px;
+  padding: 0;
+  content: "";
 }
 
 .ms-sc-variable-header >>> .el-dialog__body {
@@ -1092,4 +1135,14 @@ export default {
 .ms-aside-container {
   height: calc(100vh - 50px) !important;
 }
+
+.custom-node_e {
+  color: #7C3985;
+  font-size: 20px;
+}
+
+.custom-tree-node-col {
+  width: 20px;
+  padding: 0px;
+}
 </style>