refactor(接口测试): 场景最大化页面优化

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

@@ -279,20 +279,22 @@
 
         <!--步骤最大化-->
         <ms-drawer :visible="drawer" :size="100" @close="close" direction="default" :show-full-screen="false" :is-show-close="false" style="overflow: hidden" v-if="drawer">
-          <template v-slot:header>
+          <maximize-scenario
-            <scenario-header
+            :scenario-definition="scenarioDefinition"
-              :currentScenario="currentScenario"
-              :projectEnvMap="projectEnvMap"
             :projectIds.sync="projectIds"
             :projectList="projectList"
-              :scenarioDefinition="scenarioDefinition"
+            :envMap="projectEnvMap"
-              :enableCookieShare="enableCookieShare"
+            :moduleOptions="moduleOptions"
-              :onSampleError="onSampleError"
+            :req-error="reqError"
-              :environment-type="environmentType"
+            :req-success="reqSuccess"
-              :group-id="envGroupId"
+            :req-total="reqTotal"
-              :execDebug="stopDebug"
+            :req-total-time="reqTotalTime"
-              :isFullUrl.sync="isFullUrl"
+            :currentScenario="currentScenario"
-              :clearMessage="clearMessage"
+            :type="type"
+            :debug="debugLoading"
+            :reloadDebug="reloadDebug"
+            :stepReEnable="stepEnable"
+            :message="message"
             @setEnvType="setEnvType"
             @envGroupId="setEnvGroup"
             @closePage="close"
@@ -305,23 +307,6 @@
             @setCookieShare="setCookieShare"
             @setSampleError="setSampleError"
             @stop="stop"
-              ref="maximizeHeader"/>
-          </template>
-
-          <maximize-scenario
-            :scenario-definition="scenarioDefinition"
-            :envMap="projectEnvMap"
-            :moduleOptions="moduleOptions"
-            :req-error="reqError"
-            :req-success="reqSuccess"
-            :req-total="reqTotal"
-            :req-total-time="reqTotalTime"
-            :currentScenario="currentScenario"
-            :type="type"
-            :debug="debug"
-            :reloadDebug="reloadDebug"
-            :stepReEnable="stepEnable"
-            :message="message"
             @openScenario="openScenario"
             @runScenario="runDebug"
             @stopScenario="stop"
@@ -414,7 +399,6 @@ export default {
     ApiImport: () => import("../../definition/components/import/ApiImport"),
     EnvPopover: () => import("@/business/components/api/automation/scenario/EnvPopover"),
     MaximizeScenario: () => import("./maximize/MaximizeScenario"),
-    ScenarioHeader: () => import("./maximize/ScenarioHeader"),
     MsDrawer: () => import("../../../common/components/MsDrawer"),
     MsSelectTree: () => import("../../../common/select-tree/SelectTree"),
     MsChangeHistory: () => import("../../../history/ChangeHistory"),
@@ -614,7 +598,6 @@ export default {
       this.isBatchProcess = true;
       this.expandedNode = [];
       this.hideAllTreeNode(this.scenarioDefinition);
-      this.$refs.stepTree.root.expanded = true;
       this.reloadTreeStatus();
     },
     cancelBatchProcessing() {

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

@@ -6,9 +6,10 @@
           <div class="el-step__icon-inner" :key="$store.state.forceRerenderIndex">{{ data.index }}</div>
         </div>
         <slot name="behindHeaderLeft" v-if="!isMax"></slot>
-        <el-tag class="ms-left-btn" size="small" :style="{'color': color, 'background-color': backgroundColor}">{{ title }}</el-tag>
+        <el-tag class="ms-left-btn" size="mini" :style="{'color': color, 'background-color': backgroundColor}">{{ title }}</el-tag>
       </slot>
-      <span>
+
+      <span v-show="!isMax">
         <slot name="headerLeft">
           <i class="icon el-icon-arrow-right" :class="{'is-active': data.active}" @click="active(data)" v-if="data.type!='scenario' && !isMax " @click.stop/>
           <span @click.stop v-if="isShowInput && isShowNameInput">
@@ -25,9 +26,14 @@
           </span>
         </slot>
       </span>
+      <span v-show="isMax">
+        <slot name="headerLeft">
+            <span style="font-size: 12px" class="ms-step-name-width">{{ data.name }}</span>
+        </slot>
+      </span>
 
       <div v-if="!ifFromVariableAdvance" class="header-right" @click.stop>
-        <slot name="message"></slot>
+        <slot name="message" v-show="!isMax"></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"/>
@@ -240,9 +246,8 @@ export default {
 }
 
 .ms-left-btn {
-  font-size: 13px;
+  margin-right: 5px;
-  margin-right: 15px;
+  margin-left: 0px;
-  margin-left: 10px;
 }
 
 .header-right {
@@ -384,13 +389,13 @@ fieldset {
 
 .ms-step-name-width {
   display: inline-block;
-  margin: 0 5px;
+  margin: 0 0px;
   overflow-x: hidden;
   padding-bottom: 0;
   text-overflow: ellipsis;
   vertical-align: middle;
   white-space: nowrap;
-  width: 400px;
+  width: 60px;
 }
 
 .ms-step-selected {

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

@@ -131,7 +131,7 @@
     text-overflow: ellipsis;
     vertical-align: middle;
     white-space: nowrap;
-    width: 100px;
+    width: 80px;
   }
   .ms-test-running {
     color: #6D317C;

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

@@ -449,7 +449,7 @@ export default {
   text-overflow: ellipsis;
   vertical-align: middle;
   white-space: nowrap;
-  width: 100px;
+  width: 80px;
 }
 
 .ms-form-create >>> .el-select {

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

@@ -187,7 +187,7 @@ export default {
   text-overflow: ellipsis;
   vertical-align: middle;
   white-space: nowrap;
-  width: 100px;
+  width: 80px;
 }
 .ms-test-running {
   color: #6D317C;

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

@@ -1,30 +1,74 @@
 <template>
-  <div>
+  <div style="width: 100%;overflow: hidden">
+    <div class="ms-header">
+      <el-row>
+        <el-col :span="1" v-show="scenarioDefinition.length > 1">
+          <div class="ms-div" style="margin-left: 10px">
+            <el-tooltip :content="$t('test_track.case.batch_operate')" placement="top" effect="light" v-show="!isBatchProcess">
+              <font-awesome-icon class="ms-batch-btn" :icon="['fa', 'bars']" v-prevent-re-click @click="batchProcessing"/>
+            </el-tooltip>
+            <el-checkbox v-show="isBatchProcess" v-model="isCheckedAll" @change="checkedAll"/>
+            <el-tooltip :content="$t('commons.cancel')" placement="top" effect="light" v-show="isBatchProcess">
+              <font-awesome-icon class="ms-batch-btn" :icon="['fa', 'times']" v-prevent-re-click @click="cancelBatchProcessing"/>
+            </el-tooltip>
+          </div>
+        </el-col>
+
+        <el-col :span="9">
+          <div class="ms-div" @click="showAll">
+            <!-- 调试部分 -->
+            <el-row>
+              <el-col :span="8">
+                <el-tooltip placement="top" :content="currentScenario.name">
+                  <span style="margin-left: 10px">{{ currentScenario.name }}</span>
+                </el-tooltip>
+              </el-col>
+              <el-col :span="8">
+                {{ $t('api_test.automation.step_total') }}：{{ scenarioDefinition.length }}
+              </el-col>
+              <el-col :span="8">
+                <el-link class="head" @click="showScenarioParameters">{{ $t('api_test.automation.scenario_total') }}</el-link>
+                ：{{ getVariableSize() }}
+              </el-col>
+            </el-row>
+          </div>
+
+        </el-col>
+        <el-col :span="12">
+          <el-checkbox v-model="cookieShare" @change="setCookieShare">共享cookie</el-checkbox>
+          <el-checkbox v-model="sampleError" @change="setOnSampleError" style="margin-right: 10px">{{ $t('commons.failure_continues') }}</el-checkbox>
+          <env-popover :disabled="scenarioDefinition.length < 1" :isReadOnly="scenarioDefinition.length < 1"
+                       :env-map="projectEnvMap" :project-ids="projectIds" @setProjectEnvMap="setProjectEnvMap"
+                       :environment-type.sync="envType" :group-id="envGroupId"
+                       @showPopover="showPopover" :project-list="projectList" ref="envPopover" class="ms-right" :has-option-group="true"
+                       :result="envResult"/>
+
+          <el-dropdown split-button type="primary" @click="debugScenario" style="margin:0px 10px 0px" size="mini" @command="handleCommand" v-show="!debugLoading">
+            {{ $t('api_test.request.debug') }}
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>{{ $t('api_test.automation.generate_report') }}</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <el-button size="mini" type="primary" style="margin:0px 10px 0px" v-show="debugLoading" @click="stop">{{ $t('report.stop_btn') }}</el-button>
+        </el-col>
+
+        <font-awesome-icon class="ms-min-alt-ico" :icon="['fa', 'compress-alt']" size="lg" @click="unFullScreen"/>
+      </el-row>
+    </div>
+
     <!-- 场景步骤-->
     <ms-container :class="{'maximize-container': !asideHidden}">
-      <ms-aside-container @setAsideHidden="setAsideHidden" style="padding-top: 0px">
+      <ms-aside-container @setAsideHidden="setAsideHidden" style="padding-top: 0px;overflow: hidden">
-        <!-- 场景步骤内容 -->
+        <div class="ms-debug-result" v-if="reqTotal > 0">
-        <div v-loading="loading" v-if="!asideHidden">
+          <span style="float: right">
-          <el-tooltip :content="$t('api_test.automation.open_expansion')" placement="top" effect="light">
-            <i class="el-icon-circle-plus-outline  ms-open-btn ms-open-btn-left" v-prevent-re-click @click="openExpansion"/>
-          </el-tooltip>
-          <el-tooltip :content="$t('api_test.automation.close_expansion')" placement="top" effect="light">
-            <i class="el-icon-remove-outline ms-open-btn" size="mini" @click="closeExpansion"/>
-          </el-tooltip>
-          <el-tooltip :content="$t('api_test.scenario.disable')" placement="top" effect="light" v-if="!stepEnable">
-            <font-awesome-icon class="ms-open-btn" :icon="['fas', 'toggle-off']" @click="enableAll"/>
-          </el-tooltip>
-          <el-tooltip :content="$t('api_test.scenario.enable')" placement="top" effect="light" v-else>
-            <font-awesome-icon class="ms-open-btn" :icon="['fas', 'toggle-on']" @click="disableAll"/>
-          </el-tooltip>
-          <span class="ms-debug-result" v-if="debug">
-              <div class="ms-debug-result" v-if="debug">
              <span class="ms-message-right"> {{ reqTotalTime }} ms </span>
                 <span class="ms-message-right">{{ $t('api_test.automation.request_total') }} {{ reqTotal }}</span>
                 <span class="ms-message-right">{{ $t('api_test.automation.request_success') }} {{ reqSuccess }}</span>
                 <span class="ms-message-right"> {{ $t('api_test.automation.request_error') }} {{ reqError }}</span>
-              </div>
           </span>
+        </div>
+        <!-- 场景步骤内容 -->
+        <div v-loading="loading" v-if="!asideHidden">
           <el-tree node-key="resourceId"
                    v-if="showHideTree && !asideHidden"
                    :props="props"
@@ -32,15 +76,19 @@
                    :default-expanded-keys="expandedNode"
                    :expand-on-click-node="false"
                    highlight-current
+                   :show-checkbox="isBatchProcess"
                    @node-expand="nodeExpand"
                    @node-collapse="nodeCollapse"
-                   :allow-drop="allowDrop" @node-drag-end="allowDrag" @node-click="nodeClick" class="ms-tree">
+                   :allow-drop="allowDrop" @node-drag-end="allowDrag" @node-click="nodeClick" class="ms-tree" ref="maxStepTree">
-            <el-row class="custom-tree-node" :gutter="18" type="flex" align="middle" slot-scope="{node, data}" style="width: 100%">
+            <el-row class="custom-tree-node" :gutter="18" type="flex" align="middle" slot-scope="{node, data}" style="width: 98%">
-              <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">
+              <el-col class="custom-tree-node-col" style="padding-left:0px;padding-right:0px" v-show="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-show="!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 v-show="node.expanded" 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 :class="data.checkBox? 'custom-tree-node-hide' : 'custom-tree-node-col'" style="padding-left: 0px; padding-right: 0px;"
+                      v-show="(data.hashTree && data.hashTree.length === 0 )|| data.isLeaf">
+                <show-more-btn :is-show="node.checked" :buttons="batchOperators" :size="selectDataCounts" v-show="data.checkBox" style="margin-right: 3px"/>
               </el-col>
               <el-col>
                 <!-- 步骤组件-->
@@ -169,7 +217,7 @@
 import {API_STATUS, PRIORITY} from "../../../definition/model/JsonData";
 import {parseEnvironment} from "../../../definition/model/EnvironmentModel";
 import {ELEMENT_TYPE, STEP} from "../Setting";
-import {getCurrentProjectID, getUUID, hasLicense, strMapToObj} from "@/common/js/utils";
+import {exportPdf, getCurrentProjectID, getUUID, hasLicense, strMapToObj} from "@/common/js/utils";
 import "@/common/css/material-icons.css"
 import OutsideClick from "@/common/js/outside-click";
 import {handleCtrlSEvent} from "../../../../../../common/js/utils";
@@ -178,6 +226,7 @@ import {buttons, setComponent} from '../menu/Menu';
 import MsContainer from "../../../../common/components/MsContainer";
 import MsMainContainer from "../../../../common/components/MsMainContainer";
 import MsAsideContainer from "@/business/components/common/components/MsAsideContainer";
+import html2canvas from "html2canvas";
 // import MsAsideContainer from "./MsLeftContainer";
 
 let jsonPath = require('jsonpath');
@@ -197,6 +246,10 @@ export default {
     reqError: Number,
     reqTotalTime: Number,
     message: String,
+    environmentType: String,
+    groupId: String,
+    projectIds: Set,
+    projectList: Array,
   },
   components: {
     MsAsideContainer,
@@ -213,12 +266,14 @@ export default {
     ApiImport: () => import("../../../definition/components/import/ApiImport"),
     MsComponentConfig: () => import("../component/ComponentConfig"),
     EnvPopover: () => import("@/business/components/api/automation/scenario/EnvPopover"),
+    ShowMoreBtn: () => import( "@/business/components/track/case/components/ShowMoreBtn"),
   },
   data() {
     return {
       props: {
         label: "label",
-        children: "hashTree"
+        children: "hashTree",
+        disabled: false
       },
       rules: {
         name: [
@@ -231,6 +286,7 @@ export default {
         principal: [{required: true, message: this.$t('api_test.definition.request.responsible'), trigger: 'change'}],
       },
       environments: [],
+      projectEnvMap: Map,
       currentEnvironmentId: "",
       maintainerOptions: [],
       value: API_STATUS[0].id,
@@ -257,16 +313,51 @@ export default {
         spacing: 30
       },
       response: {},
-      projectIds: new Set,
-      projectEnvMap: new Map,
-      projectList: [],
       debugResult: new Map,
       expandedStatus: false,
       stepEnable: true,
       debugLoading: false,
       buttonData: [],
       stepFilter: new STEP,
-      asideHidden: false
+      asideHidden: false,
+      selectDataCounts: 0,
+      batchOperators: [
+        {
+          name: this.$t('api_test.automation.bulk_activation_steps'),
+          handleClick: this.enableAll,
+          permissions: ['PROJECT_API_SCENARIO:READ+DELETE']
+        },
+        {
+          name: this.$t('api_test.automation.batch_disable_steps'),
+          handleClick: this.disableAll,
+          permissions: ['PROJECT_API_SCENARIO:READ+DELETE']
+        },
+        {
+          name: this.$t('api_test.automation.open_expansion'),
+          handleClick: this.openExpansion,
+          permissions: ['PROJECT_API_SCENARIO:READ+DELETE']
+        },
+        {
+          name: this.$t('api_test.automation.close_expansion'),
+          handleClick: this.closeExpansion,
+          permissions: ['PROJECT_API_SCENARIO:READ+DELETE']
+        },
+        {
+          name: this.$t('api_test.definition.request.batch_delete') + "步骤",
+          handleClick: this.handleDeleteBatch,
+          permissions: ['PROJECT_API_SCENARIO:READ+DELETE']
+        },
+      ],
+      reloadKey: "",
+      envType: this.environmentType,
+      envGroupId: this.groupId,
+      cookieShare: false,
+      sampleError: true,
+      envResult: {
+        loading: false
+      },
+      isBatchProcess: false,
+      isCheckedAll: false,
     }
   },
   created() {
@@ -274,22 +365,22 @@ export default {
       this.currentScenario.apiScenarioModuleId = "";
     }
     this.operatingElements = this.stepFilter.get("ALL");
-    this.projectEnvMap = this.envMap;
     this.stepEnable = this.stepReEnable;
     this.initPlugins();
     this.buttonData = buttons(this);
+    this.projectEnvMap = this.envMap;
   },
   mounted() {
     this.$refs.refFab.openMenu();
   },
 
   watch: {
-    envMap() {
-      this.projectEnvMap = this.envMap;
-    },
     reloadDebug() {
       this.reload();
-    }
+    },
+    debug() {
+      this.debugLoading = this.debug;
+    },
   },
   directives: {OutsideClick},
   computed: {
@@ -516,6 +607,7 @@ export default {
       this.reload();
       this.initProjectIds();
       this.scenarioVisible = false;
+      this.cancelBatchProcessing();
     },
     setApiParameter(item, refType, referenced) {
       let request = {};
@@ -557,6 +649,7 @@ export default {
       this.sort();
       this.reload();
       this.initProjectIds();
+      this.cancelBatchProcessing();
     },
     openTagConfig() {
       if (!this.projectId) {
@@ -626,6 +719,10 @@ export default {
         this.loading = false
       })
     },
+    debugScenario() {
+      this.debugLoading = true;
+      this.$emit('runDebug');
+    },
     runDebug() {
       /*触发执行操作*/
       let sign = this.$refs.envPopover.checkEnv();
@@ -633,6 +730,7 @@ export default {
         this.errorRefresh();
         return;
       }
+      if (this.$refs['currentScenario']) {
         this.$refs['currentScenario'].validate((valid) => {
           if (valid) {
             Promise.all([
@@ -656,6 +754,7 @@ export default {
             this.errorRefresh();
           }
         })
+      }
     },
     getEnvironments() {
       if (this.projectId) {
@@ -899,13 +998,15 @@ export default {
     openExpansion() {
       this.expandedNode = [];
       this.expandedStatus = true;
-      this.changeNodeStatus(this.scenarioDefinition);
+      let resourceIds = this.getAllResourceIds();
+      this.changeNodeStatus(resourceIds, this.scenarioDefinition);
     },
     closeExpansion() {
       this.expandedStatus = false;
       this.expandedNode = [];
-      this.changeNodeStatus(this.scenarioDefinition);
+      let resourceIds = this.getAllResourceIds();
-      this.showHide();
+      this.changeNodeStatus(resourceIds, this.scenarioDefinition);
+      this.forceRerender();
     },
     stepNode() {
       //改变每个节点的状态
@@ -918,10 +1019,12 @@ export default {
         }
       }
     },
-    stepStatus(nodes) {
+    stepStatus(resourceIds, nodes) {
       for (let i in nodes) {
         if (nodes[i]) {
+          if (resourceIds.indexOf(nodes[i].resourceId) !== -1) {
             nodes[i].enable = this.stepEnable;
+          }
           if (nodes[i].hashTree != undefined && nodes[i].hashTree.length > 0) {
             this.stepStatus(nodes[i].hashTree);
           }
@@ -930,11 +1033,48 @@ export default {
     },
     enableAll() {
       this.stepEnable = true;
-      this.stepNode();
+      let resourceIds = this.getAllResourceIds();
+      this.stepStatus(resourceIds, this.scenarioDefinition);
     },
     disableAll() {
       this.stepEnable = false;
-      this.stepNode();
+      let resourceIds = this.getAllResourceIds();
+      this.stepStatus(resourceIds, this.scenarioDefinition);
+    },
+    handleDeleteBatch() {
+      this.getAllResourceIds().forEach(item => {
+        this.recursionDelete(item, this.scenarioDefinition);
+      });
+      this.sort();
+      this.forceRerender();
+    },
+    recursionDelete(resourceId, nodes) {
+      for (let i in nodes) {
+        if (nodes[i]) {
+          if (resourceId === nodes[i].resourceId) {
+            nodes.splice(i, 1);
+          } else {
+            if (nodes[i].hashTree != undefined && nodes[i].hashTree.length > 0) {
+              this.recursionDelete(resourceId, nodes[i].hashTree);
+            }
+          }
+        }
+      }
+    },
+    forceRerender() {
+      this.$nextTick(() => {
+        this.$store.state.forceRerenderIndex = getUUID();
+      });
+    },
+    getAllResourceIds() {
+      let selectValueArr = [];
+      if (this.$refs.maxStepTree) {
+        let checkNodes = this.$refs.maxStepTree.getCheckedNodes();
+        for (let node of checkNodes) {
+          selectValueArr.push(node.resourceId);
+        }
+      }
+      return selectValueArr;
     },
     runScenario(scenario) {
       this.$emit('runScenario', scenario);
@@ -945,47 +1085,148 @@ export default {
     editScenarioAdvance(data) {
       this.$emit('editScenarioAdvance', data);
     },
+
+    batchProcessing() {
+      this.isBatchProcess = true;
+      this.expandedNode = [];
+      this.hideAllTreeNode(this.scenarioDefinition);
+      if (this.$refs.maxStepTree && this.$refs.maxStepTree.root && this.$refs.maxStepTree.root.childNodes) {
+        this.stepCheckedAll(true, this.$refs.maxStepTree.root.childNodes);
       }
+      if (this.$refs.maxStepTree && this.$refs.maxStepTree.root && this.$refs.maxStepTree.root.childNodes) {
+        this.stepCheckedAll(false, this.$refs.maxStepTree.root.childNodes);
+      }
+      this.reload();
+    },
+    cancelBatchProcessing() {
+      this.isBatchProcess = false;
+      this.isCheckedAll = false;
+      if (this.$refs.maxStepTree && this.$refs.maxStepTree.root && this.$refs.maxStepTree.root.childNodes) {
+        this.stepCheckedAll(true, this.$refs.maxStepTree.root.childNodes);
+      }
+      if (this.$refs.maxStepTree && this.$refs.maxStepTree.root && this.$refs.maxStepTree.root.childNodes) {
+        this.stepCheckedAll(false, this.$refs.maxStepTree.root.childNodes);
+      }
+      this.selectDataCounts = 0;
+      this.commandTreeNode();
+      this.reload();
+    },
+    commandTreeNode(node, array) {
+      if (!array) {
+        array = this.scenarioDefinition;
+      }
+      let isLeaf = true;
+      array.forEach(item => {
+        item.checkBox = false;
+        if (isLeaf && this.stepFilter.get('ALlSamplerStep').indexOf(item.type) === -1) {
+          isLeaf = false;
+        }
+        if (item.hashTree && item.hashTree.length > 0) {
+          this.commandTreeNode(item, item.hashTree);
+        }
+      })
+      if (node) {
+        node.isBatchProcess = this.isBatchProcess;
+        node.checkBox = false;
+        node.isLeaf = isLeaf;
+      }
+    },
+    checkedAll(v) {
+      if (this.$refs.maxStepTree && this.$refs.maxStepTree.root && this.$refs.maxStepTree.root.childNodes) {
+        this.stepCheckedAll(v, this.$refs.maxStepTree.root.childNodes);
+      }
+    },
+    stepCheckedAll(v, array) {
+      if (array) {
+        array.forEach(item => {
+          if (item.childNodes && item.childNodes.length > 0) {
+            this.stepCheckedAll(v, item.childNodes);
+          }
+          item.checked = v;
+        })
+      }
+    },
+    reloadTreeStatus() {
+      this.reloadKey = "";
+      this.$nextTick(() => {
+        this.reloadKey = "reload";
+        let row = {resourceId: "ms-reload-max-test"};
+        if (this.$refs.maxStepTree && this.$refs.maxStepTree.root.data) {
+          this.$refs.maxStepTree.root.data.push(row);
+          this.$refs.maxStepTree.root.data.splice(this.$refs.maxStepTree.root.data.length - 1, 1);
+        }
+      });
+    },
+    hideAllTreeNode(array) {
+      array.forEach(item => {
+        if (item.hashTree && item.hashTree.length > 0) {
+          this.hideAllTreeNode(item.hashTree);
+        }
+        item.isLeaf = this.isBatchProcess;
+        item.isBatchProcess = this.isBatchProcess;
+        item.checkBox = this.isBatchProcess;
+      })
+    },
+    handleExport() {
+      let name = this.$t('commons.report_statistics.test_case_analysis');
+      this.$nextTick(function () {
+        setTimeout(() => {
+          html2canvas(document.getElementById('reportAnalysis'), {
+            scale: 2
+          }).then(function (canvas) {
+            exportPdf(name, [canvas]);
+          });
+        }, 1000);
+      });
+    },
+    stop() {
+      this.debugLoading = false;
+      this.$emit('stop');
+    },
+    close() {
+      this.$emit('closePage', this.currentScenario.name);
+    },
+    unFullScreen() {
+      this.$emit('unFullScreen');
+    },
+    handleCommand() {
+      this.debug = false;
+      this.debugLoading = false;
+      this.$emit('handleCommand');
+    },
+    setCookieShare() {
+      this.$emit('setCookieShare', this.cookieShare);
+    },
+    setOnSampleError() {
+      this.$emit('setSampleError', this.sampleError);
+    },
+
+    showPopover() {
+      let definition = JSON.parse(JSON.stringify(this.currentScenario));
+      definition.hashTree = this.scenarioDefinition;
+      this.envResult.loading = true;
+      this.getEnv(JSON.stringify(definition)).then(() => {
+        this.$refs.envPopover.openEnvSelect();
+        this.envResult.loading = false;
+      })
+    },
+    getEnv(definition) {
+      return new Promise((resolve) => {
+        this.$post("/api/automation/getApiScenarioEnv", {definition: definition}, res => {
+          if (res.data) {
+            res.data.projectIds.push(this.projectId);
+            this.$emit("update:projectIds", new Set(res.data.projectIds));
+            this.$emit("update:isFullUrl", res.data.fullUrl);
+          }
+          resolve();
+        })
+      });
+    },
+  },
 }
 </script>
 
 <style scoped>
-.card-content {
-  height: calc(100vh - 196px);
-  overflow-y: auto;
-}
-
-.ms-scenario-input {
-  width: 100%;
-}
-
-.ms-main-div {
-  background-color: white;
-}
-
-.ms-debug-div {
-  border: 1px #DCDFE6 solid;
-  border-radius: 4px;
-  margin-right: 20px;
-}
-
-.ms-scenario-button {
-  margin-left: 20px;
-  padding: 7px;
-}
-
-.ms-api-col {
-  background-color: #7C3985;
-  border-color: #7C3985;
-  margin-right: 10px;
-  color: white;
-}
-
-.ms-font {
-  color: #303133;
-  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
-  font-size: 13px;
-}
 
 .ms-col-one {
   margin-top: 10px;
@@ -1075,53 +1316,15 @@ export default {
   display: none;
 }
 
-.scenario-aside {
-  min-width: 400px;
-  position: relative;
-  border-radius: 4px;
-  border: 1px solid #EBEEF5;
-  box-sizing: border-box;
-}
-
-.scenario-main {
-  position: relative;
-  margin-left: 20px;
-  border: 1px solid #EBEEF5;
-}
-
-.scenario-list {
-  overflow-y: auto;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 28px;
-}
-
 .father:hover .child {
   display: block;
 }
 
-.ms-open-btn {
-  margin: 5px 5px 0px;
-  color: #6D317C;
-  font-size: 20px;
-}
-
-.ms-open-btn:hover {
-  background-color: #F2F9EE;
-  cursor: pointer;
-  color: #67C23A;
-}
-
-.ms-open-btn-left {
-  margin-left: 30px;
-}
-
 .ms-debug-result {
-  float: right;
+  font-size: 12px;
-  margin-right: 30px;
+  margin-right: 20px;
   margin-top: 3px;
+  height: 20px;
 }
 
 .ms-message-right {
@@ -1129,7 +1332,13 @@ export default {
 }
 
 .maximize-container .ms-aside-container {
-  min-width: 680px;
+  min-width: 500px;
+}
+
+.custom-tree-node-hide {
+  width: 10px;
+  padding: 0px;
+  vertical-align: center;
 }
 
 .ms-aside-container {
@@ -1142,7 +1351,40 @@ export default {
 }
 
 .custom-tree-node-col {
-  width: 20px;
+  width: 10px;
   padding: 0px;
 }
+
+.ms-header {
+  border-bottom: 1px solid #E6E6E6;
+  width: 100%;
+  height: 36px;
+  background-color: #FFF;
+  font-size: 12px;
+}
+
+.ms-div {
+  margin-top: 10px;
+}
+
+.ms-min-alt-ico {
+  font-size: 15px;
+  margin: 10px 10px 0px;
+  float: right;
+  color: #8c939d;
+}
+
+.ms-min-alt-ico:hover {
+  color: black;
+  cursor: pointer;
+}
+
+.ms-batch-btn {
+  margin-left: 5px;
+}
+
+.ms-batch-btn:hover {
+  cursor: pointer;
+  color: #6D317C;
+}
 </style>

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

@@ -1,276 +0,0 @@
-<template>
-  <div class="ms-header">
-    <el-row>
-      <el-col :span="10">
-        <div class="ms-div" v-loading="loading" @click="showAll">
-          <!-- 调试部分 -->
-          <el-row class="ms-header-margin">
-            <el-col :span="8">
-              <el-tooltip placement="top" :content="currentScenario.name">
-                <span class="ms-scenario-name">{{ currentScenario.name }}</span>
-              </el-tooltip>
-            </el-col>
-            <el-col :span="8">
-              {{ $t('api_test.automation.step_total') }}：{{ scenarioDefinition.length }}
-            </el-col>
-            <el-col :span="8">
-              <el-link class="head" @click="showScenarioParameters">{{ $t('api_test.automation.scenario_total') }}</el-link>
-              ：{{ varSize }}
-            </el-col>
-          </el-row>
-        </div>
-
-      </el-col>
-      <el-col :span="14">
-        <div class="ms-header-right">
-          <el-checkbox v-model="cookieShare" @change="setCookieShare">共享cookie</el-checkbox>
-          <el-checkbox v-model="sampleError" @change="setOnSampleError" style="margin-right: 10px">{{ $t('commons.failure_continues') }}</el-checkbox>
-          <env-popover :disabled="scenarioDefinition.length < 1" :isReadOnly="scenarioDefinition.length < 1"
-                       :env-map="envMap" :project-ids="projectIds" @setProjectEnvMap="setProjectEnvMap"
-                       :environment-type.sync="envType" :group-id="envGroupId"
-                       @showPopover="showPopover" :project-list="projectList" ref="envPopover" class="ms-right" :has-option-group="true"
-                       :result="envResult"/>
-
-          <el-dropdown split-button type="primary" @click="runDebug" style="margin-right: 10px" size="mini" @command="handleCommand" v-if="!debug">
-            {{ $t('api_test.request.debug') }}
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item>{{ $t('api_test.automation.generate_report') }}</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-          <el-button size="mini" type="primary" v-else @click="stop">{{ $t('report.stop_btn') }}</el-button>
-
-          <font-awesome-icon class="ms-alt-ico" :icon="['fa', 'compress-alt']" size="lg" @click="unFullScreen"/>
-        </div>
-
-      </el-col>
-    </el-row>
-
-
-  </div>
-</template>
-
-<script>
-import {exportPdf, getCurrentProjectID} from "@/common/js/utils";
-import html2canvas from 'html2canvas';
-import EnvPopover from "../../scenario/EnvPopover";
-
-export default {
-  name: "ScenarioHeader",
-  components: {EnvPopover},
-  props: {
-    currentScenario: {}, scenarioDefinition: Array, enableCookieShare: Boolean, onSampleError: Boolean,
-    projectEnvMap: Map,
-    environmentType: String,
-    groupId: String,
-    projectIds: Set,
-    projectList: Array,
-    isFullUrl: Boolean,
-    execDebug: String,
-    clearMessage: String,
-  },
-  data() {
-    return {
-      envMap: new Map,
-      envType: this.environmentType,
-      envGroupId: this.groupId,
-      loading: false,
-      varSize: 0,
-      cookieShare: false,
-      sampleError: true,
-      envResult: {
-        loading: false
-      },
-      debugLoading: false,
-      reqTotal: 0,
-      reqSuccess: 0,
-      reqError: 0,
-      reqTotalTime: 0,
-      debug: false,
-    }
-  },
-  computed: {
-    projectId() {
-      return getCurrentProjectID();
-    },
-  },
-  watch: {
-    envType(value) {
-      this.$emit("setEnvType", value);
-    },
-    envGroupId(value) {
-      this.$emit("setEnvGroupId", value);
-    },
-    execDebug() {
-      this.debug = false;
-    },
-    clearMessage() {
-      this.debug = false;
-      this.debugLoading = false;
-    }
-  },
-  mounted() {
-    this.envMap = this.projectEnvMap;
-    this.getVariableSize();
-    this.cookieShare = this.enableCookieShare;
-    this.sampleError = this.onSampleError;
-  },
-  methods: {
-    handleExport() {
-      let name = this.$t('commons.report_statistics.test_case_analysis');
-      this.$nextTick(function () {
-        setTimeout(() => {
-          html2canvas(document.getElementById('reportAnalysis'), {
-            scale: 2
-          }).then(function (canvas) {
-            exportPdf(name, [canvas]);
-          });
-        }, 1000);
-      });
-    },
-    stop() {
-      this.debug = false;
-      this.debugLoading = false;
-      this.$emit('stop');
-    },
-    showAll() {
-      this.$emit('showAllBtn');
-    },
-    close() {
-      this.$emit('closePage', this.currentScenario.name);
-    },
-    unFullScreen() {
-      this.$emit('unFullScreen');
-    },
-    runDebug() {
-      this.debug = true;
-      this.debugLoading = true;
-      this.$emit('runDebug');
-    },
-    handleCommand() {
-      this.debug = false;
-      this.debugLoading = false;
-      this.$emit('handleCommand');
-    },
-    setCookieShare() {
-      this.$emit('setCookieShare', this.cookieShare);
-    },
-    setOnSampleError() {
-      this.$emit('setSampleError', this.sampleError);
-    },
-    showScenarioParameters() {
-      this.$emit('showScenarioParameters');
-    },
-    getVariableSize() {
-      let size = 0;
-      if (this.currentScenario.variables) {
-        size += this.currentScenario.variables.length;
-      }
-      if (this.currentScenario.headers && this.currentScenario.headers.length > 1) {
-        size += this.currentScenario.headers.length - 1;
-      }
-      this.varSize = size;
-      this.reload();
-    },
-    reload() {
-      this.loading = true
-      this.$nextTick(() => {
-        this.loading = false
-      })
-    },
-    setProjectEnvMap(projectEnvMap) {
-      this.$emit('setProjectEnvMap', projectEnvMap);
-      this.envMap = projectEnvMap;
-    },
-    showPopover() {
-      let definition = JSON.parse(JSON.stringify(this.currentScenario));
-      definition.hashTree = this.scenarioDefinition;
-      this.envResult.loading = true;
-      this.getEnv(JSON.stringify(definition)).then(() => {
-        this.$refs.envPopover.openEnvSelect();
-        this.envResult.loading = false;
-      })
-    },
-    getEnv(definition) {
-      return new Promise((resolve) => {
-        this.$post("/api/automation/getApiScenarioEnv", {definition: definition}, res => {
-          if (res.data) {
-            res.data.projectIds.push(this.projectId);
-            this.$emit("update:projectIds", new Set(res.data.projectIds));
-            this.$emit("update:isFullUrl", res.data.fullUrl);
-          }
-          resolve();
-        })
-      });
-    },
-  },
-}
-</script>
-
-<style scoped>
-.ms-header {
-  border-bottom: 1px solid #E6E6E6;
-  height: 50px;
-  background-color: #FFF;
-}
-
-.ms-div {
-  float: left;
-  width: 60%;
-  margin-left: 20px;
-  margin-top: 12px;
-}
-
-.ms-header-right {
-  float: right;
-  margin-top: 4px;
-  z-index: 1;
-}
-
-.alt-ico-close {
-  font-size: 18px;
-  margin: 10px 10px 10px;
-}
-
-.alt-ico-close:hover {
-  color: black;
-  cursor: pointer;
-}
-
-.ms-alt-ico {
-  color: #8c939d;
-  font-size: 16px;
-  margin: 10px 30px 0px;
-}
-
-.ms-alt-ico:hover {
-  color: black;
-  cursor: pointer;
-}
-
-.ms-header-margin {
-  margin-top: 3px;
-}
-
-.ms-right {
-  margin-right: 40px;
-}
-
-.head {
-  border-bottom: 1px solid #303133;
-  color: #303133;
-  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
-  font-size: 13px;
-}
-
-.ms-scenario-name {
-  display: inline-block;
-  margin: 0 5px;
-  overflow-x: hidden;
-  padding-bottom: 0;
-  text-overflow: ellipsis;
-  vertical-align: middle;
-  white-space: nowrap;
-  width: 200px;
-}
-
-</style>