From 07d3ae45d0b3d8a655f1292b1f647b20977058fb Mon Sep 17 00:00:00 2001
From: chenjianxing <jianxing.chen@fit2cloud.com>
Date: Tue, 15 Dec 2020 18:17:23 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=8E=A5=E5=8F=A3=E8=87=AA?=
 =?UTF-8?q?=E5=8A=A8=E5=8C=96=E6=A8=A1=E5=9D=97=E6=A0=91=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dto/automation/ApiScenarioModuleDTO.java  |   7 +-
 .../api/service/ApiAutomationService.java     |   2 +-
 .../api/service/ApiScenarioModuleService.java |  54 +-
 .../base/domain/ApiScenarioModule.java        |   2 +
 .../base/domain/ApiScenarioModuleExample.java |  60 +++
 .../base/mapper/ApiScenarioModuleMapper.xml   |  25 +-
 .../ext/ExtApiScenarioModuleMapper.java       |  10 +
 .../mapper/ext/ExtApiScenarioModuleMapper.xml |  11 +
 backend/src/main/java/io/metersphere/xpack    |   2 +-
 .../db/migration/V50__api_scenario.sql        |   1 +
 .../src/main/resources/generatorConfig.xml    |   2 +-
 .../api/automation/ApiAutomation.vue          |  31 +-
 .../api/automation/ApiScenarioModule2.vue     | 440 ++++++++++++++++
 .../automation/scenario/ApiScenarioList.vue   |  33 +-
 .../automation/scenario/ApiScenarioModule.vue | 469 ++++++------------
 .../automation/scenario/EditApiScenario.vue   |   1 +
 .../api/definition/components/ApiList.vue     |   4 +-
 .../components/module/ApiModule.vue           |   7 +-
 .../components/module/ApiModuleHeader.vue     |  25 +-
 .../components/module/ModuleTrashButton.vue   |  48 ++
 frontend/src/business/components/xpack        |   2 +-
 21 files changed, 795 insertions(+), 441 deletions(-)
 create mode 100644 backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiScenarioModuleMapper.java
 create mode 100644 backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiScenarioModuleMapper.xml
 create mode 100644 frontend/src/business/components/api/automation/ApiScenarioModule2.vue
 create mode 100644 frontend/src/business/components/api/definition/components/module/ModuleTrashButton.vue

diff --git a/backend/src/main/java/io/metersphere/api/dto/automation/ApiScenarioModuleDTO.java b/backend/src/main/java/io/metersphere/api/dto/automation/ApiScenarioModuleDTO.java
index 40a463b38c..c4e9200298 100644
--- a/backend/src/main/java/io/metersphere/api/dto/automation/ApiScenarioModuleDTO.java
+++ b/backend/src/main/java/io/metersphere/api/dto/automation/ApiScenarioModuleDTO.java
@@ -1,6 +1,7 @@
 package io.metersphere.api.dto.automation;
 
 import io.metersphere.base.domain.ApiScenarioModule;
+import io.metersphere.track.dto.TreeNodeDTO;
 import lombok.Getter;
 import lombok.Setter;
 
@@ -8,9 +9,5 @@ import java.util.List;
 
 @Getter
 @Setter
-public class ApiScenarioModuleDTO extends ApiScenarioModule {
-
-    private String label;
-    private List<ApiScenarioModuleDTO> children;
-
+public class ApiScenarioModuleDTO extends TreeNodeDTO<ApiScenarioModuleDTO> {
 }
diff --git a/backend/src/main/java/io/metersphere/api/service/ApiAutomationService.java b/backend/src/main/java/io/metersphere/api/service/ApiAutomationService.java
index 90c436f519..ee13eb7368 100644
--- a/backend/src/main/java/io/metersphere/api/service/ApiAutomationService.java
+++ b/backend/src/main/java/io/metersphere/api/service/ApiAutomationService.java
@@ -104,7 +104,7 @@ public class ApiAutomationService {
         checkNameExist(request);
 
         final ApiScenario scenario = new ApiScenario();
-        scenario.setId(request.getId());
+        scenario.setId(UUID.randomUUID().toString());
         scenario.setName(request.getName());
         scenario.setProjectId(request.getProjectId());
         scenario.setTagId(request.getTagId());
diff --git a/backend/src/main/java/io/metersphere/api/service/ApiScenarioModuleService.java b/backend/src/main/java/io/metersphere/api/service/ApiScenarioModuleService.java
index 374f6a8c58..abe169d458 100644
--- a/backend/src/main/java/io/metersphere/api/service/ApiScenarioModuleService.java
+++ b/backend/src/main/java/io/metersphere/api/service/ApiScenarioModuleService.java
@@ -10,10 +10,12 @@ import io.metersphere.base.domain.ApiScenarioModule;
 import io.metersphere.base.domain.ApiScenarioModuleExample;
 import io.metersphere.base.mapper.ApiScenarioMapper;
 import io.metersphere.base.mapper.ApiScenarioModuleMapper;
+import io.metersphere.base.mapper.ext.ExtApiScenarioModuleMapper;
 import io.metersphere.commons.constants.TestCaseConstants;
 import io.metersphere.commons.exception.MSException;
 import io.metersphere.commons.utils.BeanUtils;
 import io.metersphere.i18n.Translator;
+import io.metersphere.service.NodeTreeService;
 import org.apache.commons.lang3.StringUtils;
 import org.apache.ibatis.session.ExecutorType;
 import org.apache.ibatis.session.SqlSession;
@@ -27,65 +29,22 @@ import java.util.stream.Collectors;
 
 @Service
 @Transactional(rollbackFor = Exception.class)
-public class ApiScenarioModuleService {
+public class ApiScenarioModuleService extends NodeTreeService<ApiScenarioModuleDTO> {
 
     @Resource
     ApiScenarioModuleMapper apiScenarioModuleMapper;
     @Resource
+    ExtApiScenarioModuleMapper extApiScenarioModuleMapper;
+    @Resource
     ApiAutomationService apiAutomationService;
     @Resource
     SqlSessionFactory sqlSessionFactory;
 
     public List<ApiScenarioModuleDTO> getNodeTreeByProjectId(String projectId) {
-        ApiScenarioModuleExample example = new ApiScenarioModuleExample();
-        example.createCriteria().andProjectIdEqualTo(projectId);
-        example.setOrderByClause("create_time asc");
-        List<ApiScenarioModule> nodes = apiScenarioModuleMapper.selectByExample(example);
+        List<ApiScenarioModuleDTO> nodes = extApiScenarioModuleMapper.getNodeTreeByProjectId(projectId);
         return getNodeTrees(nodes);
     }
 
-    public List<ApiScenarioModuleDTO> getNodeTrees(List<ApiScenarioModule> nodes) {
-        List<ApiScenarioModuleDTO> nodeTreeList = new ArrayList<>();
-        Map<Integer, List<ApiScenarioModule>> nodeLevelMap = new HashMap<>();
-        nodes.forEach(node -> {
-            Integer level = node.getLevel();
-            if (nodeLevelMap.containsKey(level)) {
-                nodeLevelMap.get(level).add(node);
-            } else {
-                List<ApiScenarioModule> apiScenarioModules = new ArrayList<>();
-                apiScenarioModules.add(node);
-                nodeLevelMap.put(node.getLevel(), apiScenarioModules);
-            }
-        });
-        List<ApiScenarioModule> rootNodes = Optional.ofNullable(nodeLevelMap.get(1)).orElse(new ArrayList<>());
-        rootNodes.forEach(rootNode -> nodeTreeList.add(buildNodeTree(nodeLevelMap, rootNode)));
-        return nodeTreeList;
-    }
-
-    /**
-     * 递归构建节点树
-     */
-    private ApiScenarioModuleDTO buildNodeTree(Map<Integer, List<ApiScenarioModule>> nodeLevelMap, ApiScenarioModule rootNode) {
-
-        ApiScenarioModuleDTO nodeTree = new ApiScenarioModuleDTO();
-        BeanUtils.copyBean(nodeTree, rootNode);
-        nodeTree.setLabel(rootNode.getName());
-
-        List<ApiScenarioModule> lowerNodes = nodeLevelMap.get(rootNode.getLevel() + 1);
-        if (lowerNodes == null) {
-            return nodeTree;
-        }
-        List<ApiScenarioModuleDTO> children = Optional.ofNullable(nodeTree.getChildren()).orElse(new ArrayList<>());
-        lowerNodes.forEach(node -> {
-            if (node.getParentId() != null && node.getParentId().equals(rootNode.getId())) {
-                children.add(buildNodeTree(nodeLevelMap, node));
-                nodeTree.setChildren(children);
-            }
-        });
-
-        return nodeTree;
-    }
-
     public String addNode(ApiScenarioModule node) {
         validateNode(node);
         node.setCreateTime(System.currentTimeMillis());
@@ -227,5 +186,4 @@ public class ApiScenarioModuleService {
         sqlSession.flushStatements();
     }
 
-
 }
diff --git a/backend/src/main/java/io/metersphere/base/domain/ApiScenarioModule.java b/backend/src/main/java/io/metersphere/base/domain/ApiScenarioModule.java
index ca48bfb138..82d9cbb204 100644
--- a/backend/src/main/java/io/metersphere/base/domain/ApiScenarioModule.java
+++ b/backend/src/main/java/io/metersphere/base/domain/ApiScenarioModule.java
@@ -19,5 +19,7 @@ public class ApiScenarioModule implements Serializable {
 
     private Long updateTime;
 
+    private Double pos;
+
     private static final long serialVersionUID = 1L;
 }
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/base/domain/ApiScenarioModuleExample.java b/backend/src/main/java/io/metersphere/base/domain/ApiScenarioModuleExample.java
index 48d8f981dd..d0eba1f079 100644
--- a/backend/src/main/java/io/metersphere/base/domain/ApiScenarioModuleExample.java
+++ b/backend/src/main/java/io/metersphere/base/domain/ApiScenarioModuleExample.java
@@ -563,6 +563,66 @@ public class ApiScenarioModuleExample {
             addCriterion("update_time not between", value1, value2, "updateTime");
             return (Criteria) this;
         }
+
+        public Criteria andPosIsNull() {
+            addCriterion("pos is null");
+            return (Criteria) this;
+        }
+
+        public Criteria andPosIsNotNull() {
+            addCriterion("pos is not null");
+            return (Criteria) this;
+        }
+
+        public Criteria andPosEqualTo(Double value) {
+            addCriterion("pos =", value, "pos");
+            return (Criteria) this;
+        }
+
+        public Criteria andPosNotEqualTo(Double value) {
+            addCriterion("pos <>", value, "pos");
+            return (Criteria) this;
+        }
+
+        public Criteria andPosGreaterThan(Double value) {
+            addCriterion("pos >", value, "pos");
+            return (Criteria) this;
+        }
+
+        public Criteria andPosGreaterThanOrEqualTo(Double value) {
+            addCriterion("pos >=", value, "pos");
+            return (Criteria) this;
+        }
+
+        public Criteria andPosLessThan(Double value) {
+            addCriterion("pos <", value, "pos");
+            return (Criteria) this;
+        }
+
+        public Criteria andPosLessThanOrEqualTo(Double value) {
+            addCriterion("pos <=", value, "pos");
+            return (Criteria) this;
+        }
+
+        public Criteria andPosIn(List<Double> values) {
+            addCriterion("pos in", values, "pos");
+            return (Criteria) this;
+        }
+
+        public Criteria andPosNotIn(List<Double> values) {
+            addCriterion("pos not in", values, "pos");
+            return (Criteria) this;
+        }
+
+        public Criteria andPosBetween(Double value1, Double value2) {
+            addCriterion("pos between", value1, value2, "pos");
+            return (Criteria) this;
+        }
+
+        public Criteria andPosNotBetween(Double value1, Double value2) {
+            addCriterion("pos not between", value1, value2, "pos");
+            return (Criteria) this;
+        }
     }
 
     public static class Criteria extends GeneratedCriteria {
diff --git a/backend/src/main/java/io/metersphere/base/mapper/ApiScenarioModuleMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/ApiScenarioModuleMapper.xml
index ca711317ba..0bfb36a80b 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ApiScenarioModuleMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/ApiScenarioModuleMapper.xml
@@ -9,6 +9,7 @@
     <result column="level" jdbcType="INTEGER" property="level" />
     <result column="create_time" jdbcType="BIGINT" property="createTime" />
     <result column="update_time" jdbcType="BIGINT" property="updateTime" />
+    <result column="pos" jdbcType="DOUBLE" property="pos" />
   </resultMap>
   <sql id="Example_Where_Clause">
     <where>
@@ -69,7 +70,7 @@
     </where>
   </sql>
   <sql id="Base_Column_List">
-    id, project_id, `name`, parent_id, `level`, create_time, update_time
+    id, project_id, `name`, parent_id, `level`, create_time, update_time, pos
   </sql>
   <select id="selectByExample" parameterType="io.metersphere.base.domain.ApiScenarioModuleExample" resultMap="BaseResultMap">
     select
@@ -104,10 +105,10 @@
   <insert id="insert" parameterType="io.metersphere.base.domain.ApiScenarioModule">
     insert into api_scenario_module (id, project_id, `name`, 
       parent_id, `level`, create_time, 
-      update_time)
+      update_time, pos)
     values (#{id,jdbcType=VARCHAR}, #{projectId,jdbcType=VARCHAR}, #{name,jdbcType=VARCHAR}, 
       #{parentId,jdbcType=VARCHAR}, #{level,jdbcType=INTEGER}, #{createTime,jdbcType=BIGINT}, 
-      #{updateTime,jdbcType=BIGINT})
+      #{updateTime,jdbcType=BIGINT}, #{pos,jdbcType=DOUBLE})
   </insert>
   <insert id="insertSelective" parameterType="io.metersphere.base.domain.ApiScenarioModule">
     insert into api_scenario_module
@@ -133,6 +134,9 @@
       <if test="updateTime != null">
         update_time,
       </if>
+      <if test="pos != null">
+        pos,
+      </if>
     </trim>
     <trim prefix="values (" suffix=")" suffixOverrides=",">
       <if test="id != null">
@@ -156,6 +160,9 @@
       <if test="updateTime != null">
         #{updateTime,jdbcType=BIGINT},
       </if>
+      <if test="pos != null">
+        #{pos,jdbcType=DOUBLE},
+      </if>
     </trim>
   </insert>
   <select id="countByExample" parameterType="io.metersphere.base.domain.ApiScenarioModuleExample" resultType="java.lang.Long">
@@ -188,6 +195,9 @@
       <if test="record.updateTime != null">
         update_time = #{record.updateTime,jdbcType=BIGINT},
       </if>
+      <if test="record.pos != null">
+        pos = #{record.pos,jdbcType=DOUBLE},
+      </if>
     </set>
     <if test="_parameter != null">
       <include refid="Update_By_Example_Where_Clause" />
@@ -201,7 +211,8 @@
       parent_id = #{record.parentId,jdbcType=VARCHAR},
       `level` = #{record.level,jdbcType=INTEGER},
       create_time = #{record.createTime,jdbcType=BIGINT},
-      update_time = #{record.updateTime,jdbcType=BIGINT}
+      update_time = #{record.updateTime,jdbcType=BIGINT},
+      pos = #{record.pos,jdbcType=DOUBLE}
     <if test="_parameter != null">
       <include refid="Update_By_Example_Where_Clause" />
     </if>
@@ -227,6 +238,9 @@
       <if test="updateTime != null">
         update_time = #{updateTime,jdbcType=BIGINT},
       </if>
+      <if test="pos != null">
+        pos = #{pos,jdbcType=DOUBLE},
+      </if>
     </set>
     where id = #{id,jdbcType=VARCHAR}
   </update>
@@ -237,7 +251,8 @@
       parent_id = #{parentId,jdbcType=VARCHAR},
       `level` = #{level,jdbcType=INTEGER},
       create_time = #{createTime,jdbcType=BIGINT},
-      update_time = #{updateTime,jdbcType=BIGINT}
+      update_time = #{updateTime,jdbcType=BIGINT},
+      pos = #{pos,jdbcType=DOUBLE}
     where id = #{id,jdbcType=VARCHAR}
   </update>
 </mapper>
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiScenarioModuleMapper.java b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiScenarioModuleMapper.java
new file mode 100644
index 0000000000..73304803ea
--- /dev/null
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiScenarioModuleMapper.java
@@ -0,0 +1,10 @@
+package io.metersphere.base.mapper.ext;
+
+import io.metersphere.api.dto.automation.ApiScenarioModuleDTO;
+import org.apache.ibatis.annotations.Param;
+
+import java.util.List;
+
+public interface ExtApiScenarioModuleMapper {
+    List<ApiScenarioModuleDTO> getNodeTreeByProjectId(@Param("projectId") String projectId);
+}
diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiScenarioModuleMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiScenarioModuleMapper.xml
new file mode 100644
index 0000000000..b679667954
--- /dev/null
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiScenarioModuleMapper.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="io.metersphere.base.mapper.ext.ExtApiScenarioModuleMapper">
+    <select id="getNodeTreeByProjectId" resultType="io.metersphere.api.dto.automation.ApiScenarioModuleDTO">
+        select
+        <include refid="io.metersphere.base.mapper.ApiScenarioModuleMapper.Base_Column_List"/>
+        from api_scenario_module
+        where api_module.project_id = #{projectId}
+        order by create_time asc
+    </select>
+</mapper>
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/xpack b/backend/src/main/java/io/metersphere/xpack
index 1fe20ba15a..bb494fc68a 160000
--- a/backend/src/main/java/io/metersphere/xpack
+++ b/backend/src/main/java/io/metersphere/xpack
@@ -1 +1 @@
-Subproject commit 1fe20ba15a7ca3fe9f77ddf866021e7c7dfe5969
+Subproject commit bb494fc68a2367359c9048fa7250c7618de4afb6
diff --git a/backend/src/main/resources/db/migration/V50__api_scenario.sql b/backend/src/main/resources/db/migration/V50__api_scenario.sql
index a43cca5292..cdee3a499f 100644
--- a/backend/src/main/resources/db/migration/V50__api_scenario.sql
+++ b/backend/src/main/resources/db/migration/V50__api_scenario.sql
@@ -32,6 +32,7 @@ CREATE TABLE `api_scenario_module` (
   `name` varchar(64) NOT NULL COMMENT 'Node name',
   `parent_id` varchar(50) DEFAULT NULL COMMENT 'Parent node ID',
   `level` int(10) DEFAULT '1' COMMENT 'Node level',
+  `pos` double DEFAULT NULL COMMENT 'Node order',
   `create_time` bigint(13) NOT NULL COMMENT 'Create timestamp',
   `update_time` bigint(13) NOT NULL COMMENT 'Update timestamp',
   PRIMARY KEY (`id`)
diff --git a/backend/src/main/resources/generatorConfig.xml b/backend/src/main/resources/generatorConfig.xml
index b178cd6d05..865eb05994 100644
--- a/backend/src/main/resources/generatorConfig.xml
+++ b/backend/src/main/resources/generatorConfig.xml
@@ -64,7 +64,7 @@
 
         <!--要生成的数据库表 -->
 
-        <table tableName="api_module"/>
+        <table tableName="api_scenario_module"/>
         <!--<table tableName="api_scenario_report"/>-->
 
     </context>
diff --git a/frontend/src/business/components/api/automation/ApiAutomation.vue b/frontend/src/business/components/api/automation/ApiAutomation.vue
index 8b489609e5..70aa7fb86d 100644
--- a/frontend/src/business/components/api/automation/ApiAutomation.vue
+++ b/frontend/src/business/components/api/automation/ApiAutomation.vue
@@ -1,14 +1,24 @@
 <template>
   <ms-container>
     <ms-aside-container>
-      <ms-api-scenario-module @selectModule="selectModule" @getApiModuleTree="initTree"
-                              @refresh="refresh" @saveAsEdit="editScenario"/>
+      <!--<ms-api-scenario-module @selectModule="selectModule" @getApiModuleTree="initTree"-->
+                              <!--@refresh="refresh" @saveAsEdit="editScenario"/>-->
+    <ms-api-scenario-module
+      @nodeSelectEvent="nodeChange"
+      @refreshTable="refresh"
+      @saveAsEdit="editScenario"
+      @setModuleOptions="setModuleOptions"
+      @enableTrash="enableTrash"
+      :type="'edit'"
+      ref="nodeTree"/>
     </ms-aside-container>
+
     <ms-main-container>
       <el-tabs v-model="activeName" @tab-click="addTab" @tab-remove="removeTab">
         <el-tab-pane name="default" :label="$t('api_test.automation.scenario_test')">
           <ms-api-scenario-list
-            :current-module="currentModule"
+            :select-node-ids="selectNodeIds"
+            :trash-enable="trashEnable"
             @edit="editScenario"
             ref="apiScenarioList"/>
         </el-tab-pane>
@@ -55,6 +65,8 @@
         currentModule: null,
         moduleOptions: {},
         tabs: [],
+        trashEnable: false,
+        selectNodeIds: [],
       }
     },
     watch: {},
@@ -97,15 +109,22 @@
         this.setTabLabel(data);
         this.$refs.apiScenarioList.search(data);
       },
-      initTree(data) {
-        this.moduleOptions = data;
-      },
       refresh(data) {
         this.$refs.apiScenarioList.search(data);
       },
       editScenario(row) {
         this.addTab({name: 'edit', currentScenario: row});
       },
+
+      nodeChange(node, nodeIds, pNodes) {
+        this.selectNodeIds = nodeIds;
+      },
+      setModuleOptions(data) {
+        this.moduleOptions = data;
+      },
+      enableTrash(data) {
+        this.trashEnable = data;
+      }
     }
   }
 </script>
diff --git a/frontend/src/business/components/api/automation/ApiScenarioModule2.vue b/frontend/src/business/components/api/automation/ApiScenarioModule2.vue
new file mode 100644
index 0000000000..edbd91f712
--- /dev/null
+++ b/frontend/src/business/components/api/automation/ApiScenarioModule2.vue
@@ -0,0 +1,440 @@
+<template>
+  <div>
+    <el-input style="width: 275px;" :placeholder="$t('test_track.module.search')" v-model="filterText"
+              size="small">
+      <template v-slot:append>
+        <el-button icon="el-icon-folder-add" @click="addScenario"/>
+      </template>
+    </el-input>
+
+    <el-tree :data="data"
+             class="filter-tree node-tree"
+             node-key="id"
+             :default-expanded-keys="expandedNode"
+             :expand-on-click-node="false"
+             @node-expand="nodeExpand"
+             @node-collapse="nodeCollapse"
+             @node-click="selectModule"
+             @node-drag-end="handleDragEnd"
+             :filter-node-method="filterNode"
+             draggable
+             :allow-drop="allowDrop"
+             :allow-drag="allowDrag" ref="tree">
+        <span class="custom-tree-node father"
+              slot-scope="{ node, data }">
+          <!-- 如果是编辑状态 -->
+          <template v-if="data.isEdit === 1">
+            <el-input ref="input"
+                      @blur="() => submitEdit(node,data)"
+                      v-model="newLabel"
+                      class="ms-el-input" size="mini"></el-input>
+          </template>
+          <!-- 如果不是编辑状态 -->
+            <i class="el-icon-delete" v-if="data.isEdit!=1 && data.id==='gc'"/>
+            <i class="el-icon-folder" v-if="data.isEdit!=1 && data.id!='gc'"/>
+            <span class="node-title" v-if="data.isEdit!=1" v-text="data.name"></span>
+
+          <span class="node-operate child">
+            <el-tooltip
+              v-if="data.id!=='root' && data.id!=='gc'"
+              class="item"
+              effect="dark"
+              :open-delay="200"
+              :content="$t('test_track.module.rename')"
+              placement="top">
+              <i @click.stop="() => edit(node,data)" class="el-icon-edit"></i>
+            </el-tooltip>
+
+            <el-tooltip
+              v-if="data.id!=='gc'"
+              class="item"
+              effect="dark"
+              :open-delay="200"
+              :content="$t('test_track.module.add_submodule')"
+              placement="top">
+              <i @click.stop="() => append(node,data)" class="el-icon-circle-plus-outline"></i>
+            </el-tooltip>
+
+             <el-tooltip
+               v-if="data.id!=='root' && data.id!=='gc'"
+               class="item"
+               effect="dark"
+               :open-delay="200"
+               :content="$t('commons.delete')"
+               placement="top">
+              <i @click.stop="() => remove(node, data)" class="el-icon-delete"></i>
+            </el-tooltip>
+          </span>
+        </span>
+    </el-tree>
+
+    <ms-add-basis-scenario ref="basisScenario"/>
+  </div>
+
+</template>
+
+<script>
+  import SelectMenu from "../../../track/common/SelectMenu";
+  import MsAddBasisScenario from "@/business/components/api/automation/scenario/AddBasisScenario";
+  import {getCurrentProjectID} from "@/common/js/utils";
+
+  export default {
+    name: 'MsApiScenarioModule',
+    components: {
+      MsAddBasisScenario,
+      SelectMenu,
+    },
+    data() {
+      return {
+        httpVisible: false,
+        expandedNode: [],
+        filterText: "",
+        nextFlag: true,
+        currentModule: {},
+        newLabel: "",
+        data: [{
+          "id": "gc",
+          "name": "回收站",
+          "level": 1,
+          "children": [],
+        }, {
+          "id": "root",
+          "name": "默认模块",
+          "level": 0,
+          "children": [],
+        }]
+      }
+    },
+    mounted() {
+      this.changeProtocol();
+    },
+    watch: {
+      filterText(val) {
+        this.$refs.tree.filter(val);
+      }
+    },
+    methods: {
+      getApiModuleTree() {
+        this.nextFlag = true;
+        let projectId = getCurrentProjectID();
+        if (projectId) {
+          if (this.expandedNode.length === 0) {
+            this.expandedNode.push("root");
+          }
+          this.$get("/api/automation/module/list/" + projectId, response => {
+            if (response.data !== undefined && response.data !== null) {
+              this.data[1].children = response.data;
+              let moduleOptions = [];
+              this.data[1].children.forEach(node => {
+                this.buildNodePath(node, {path: ''}, moduleOptions);
+              });
+              this.$emit('getApiModuleTree', moduleOptions);
+            }
+          });
+        }
+      },
+      buildNodePath(node, option, moduleOptions) {
+        //递归构建节点路径
+        option.id = node.id;
+        option.path = option.path + '/' + node.name;
+        node.path = option.path;
+        moduleOptions.push(option);
+        if (node.children) {
+          for (let i = 0; i < node.children.length; i++) {
+            this.buildNodePath(node.children[i], {path: option.path}, moduleOptions);
+          }
+        }
+      },
+      findTreeByNodeId(rootNode, nodeId) {
+        if (rootNode.id === nodeId) {
+          return rootNode;
+        }
+        if (rootNode.children) {
+          for (let i = 0; i < rootNode.children.length; i++) {
+            if (this.findTreeByNodeId(rootNode.children[i], nodeId)) {
+              return rootNode;
+            }
+          }
+        }
+      },
+      buildParam(draggingNode, dropNode, dropType) {
+        let param = {};
+        param.id = draggingNode.data.id;
+        param.name = draggingNode.data.name;
+        param.projectId = draggingNode.data.projectId;
+        if (dropType === "inner") {
+          param.parentId = dropNode.data.id;
+          param.level = dropNode.data.level;
+        } else {
+          if (!dropNode.parent.id || dropNode.parent.id === 0) {
+            param.parentId = 0;
+            param.level = 1;
+          } else {
+            param.parentId = dropNode.parent.data.id;
+            param.level = dropNode.parent.data.level;
+          }
+        }
+        let nodeIds = [];
+        this.getChildNodeId(draggingNode.data, nodeIds);
+        if (dropNode.level === 1 && dropType !== "inner") {
+          param.nodeTree = draggingNode.data;
+        } else {
+          for (let i = 0; i < this.data.length; i++) {
+            param.nodeTree = this.findTreeByNodeId(this.data[i], dropNode.data.id);
+            if (param.nodeTree) {
+              break;
+            }
+          }
+        }
+        param.nodeIds = nodeIds;
+        return param;
+      },
+      getTreeNode(nodes, id, list) {
+        if (!nodes) {
+          return;
+        }
+        for (let i = 0; i < nodes.length; i++) {
+          if (nodes[i].id === id) {
+            i - 1 >= 0 ? list[0] = nodes[i - 1].id : list[0] = "";
+            list[1] = nodes[i].id;
+            i + 1 < nodes.length ? list[2] = nodes[i + 1].id : list[2] = "";
+            return;
+          }
+          if (nodes[i].children) {
+            this.getTreeNode(nodes[i].children, id, list);
+          }
+        }
+      },
+      handleDragEnd(draggingNode, dropNode, dropType) {
+        if (dropNode.data.id === "root" || dropType === "none" || dropType === undefined) {
+          return;
+        }
+        let param = this.buildParam(draggingNode, dropNode, dropType);
+
+        this.list = [];
+        if (param.parentId === "root") {
+          param.parentId = null;
+        }
+        this.getTreeNode(this.data, draggingNode.data.id, this.list);
+
+        this.$post("/api/automation/module/drag", param, () => {
+          this.getApiModuleTree();
+        }, () => {
+          this.getApiModuleTree();
+        });
+      },
+
+      allowDrop(draggingNode, dropNode) {
+        return dropNode.data.id !== "root";
+      },
+      allowDrag(draggingNode) {
+        // 顶层默认分组不允许拖拽
+        return draggingNode.data.id !== "root";
+      },
+      append(node, data) {
+        if (this.nextFlag === true) {
+          const newChild = {
+            id: "newId",
+            isEdit: 0,
+            name: "",
+            children: []
+          }
+          if (!data.children) {
+            this.$set(data, 'children', [])
+          }
+          this.nextFlag = false;
+          data.children.push(newChild)
+          this.edit(node, newChild);
+        } else {
+          this.$message.warning(this.$t('commons.please_save'));
+        }
+      },
+
+      remove(node, data) {
+        if (data.name === "") {
+          this.nextFlag = true;
+        }
+        let delIds = [];
+        this.getChildNodeId(data, delIds);
+        delIds.push(data.id);
+        this.$post("/api/automation/module/delete", delIds, () => {
+          this.$success(this.$t('commons.save_success'));
+          // 移除节点
+          const parent = node.parent
+          const children = parent.data.children || parent.data
+          const index = children.findIndex(d => d.id !== undefined && data.id !== undefined && d.id === data.id)
+          children.splice(index, 1);
+          this.getApiModuleTree();
+        });
+      },
+
+      edit(node, data) {
+        this.$set(data, 'isEdit', 1)
+        this.newLabel = data.name
+        this.$nextTick(() => {
+        })
+      },
+
+      submitEdit(node, data) {
+        // 触发了保存按钮
+        if (this.newLabel === "") {
+          this.nextFlag = false;
+          this.$message.warning(this.$t('commons.input_name'));
+          return;
+        }
+
+        this.$set(data, 'name', this.newLabel)
+        let flag = this.editApiModule(node, data);
+        if (flag === false) {
+          this.$set(data, 'isEdit', 1)
+          return;
+        }
+        this.$set(data, 'isEdit', 0)
+        this.newLabel = ""
+        this.nextFlag = true;
+      },
+
+      cancelEdit(node, data) {
+        this.newLabel = ""
+        this.$set(data, 'isEdit', 0)
+      },
+
+      getChildNodeId(rootNode, nodeIds) {
+        //递归获取所有子节点ID
+        nodeIds.push(rootNode.id);
+        this.nodePath += rootNode.name + "/";
+        if (rootNode.children) {
+          for (let i = 0; i < rootNode.children.length; i++) {
+            this.getChildNodeId(rootNode.children[i], nodeIds);
+          }
+        }
+      },
+      // 保存或修改
+      editApiModule(node, data) {
+        let projectId = getCurrentProjectID();
+        if (!projectId) {
+          this.$error(this.$t('api_test.select_project'));
+          return;
+        }
+        let url = "";
+        if (data.id === "newId") {
+          url = '/api/automation/module/add';
+          data.level = 1;
+          if (node.parent && node.parent.key !== "root") {
+            data.parentId = node.parent.key;
+            data.level = node.parent.level;
+          }
+        } else {
+          url = '/api/automation/module/edit';
+          let ids = [];
+          this.getChildNodeId(data, ids);
+          data.nodeIds = ids;
+        }
+        data.protocol = this.protocol;
+        data.projectId = projectId;
+        this.$post(url, data, () => {
+          this.$success(this.$t('commons.save_success'));
+          this.getApiModuleTree();
+          this.nextFlag = true;
+          return true;
+        });
+        return false;
+      },
+
+      selectModule(data) {
+        if (data.id !== "root") {
+          if (data.path !== undefined && !data.path.startsWith("/")) {
+            data.path = "/" + data.path;
+          }
+          if (data.path !== undefined && data.path.endsWith("/")) {
+            data.path = data.path.substr(0, data.path.length - 1);
+          }
+          let nodeIds = [];
+          this.getChildNodeId(data, nodeIds);
+          data.ids = nodeIds;
+          this.currentModule = data;
+        }
+        this.$emit('selectModule', data);
+      },
+      refresh(data) {
+        this.$emit('refresh', data);
+      },
+      saveAsEdit(data) {
+        this.$emit('saveAsEdit', data);
+      },
+      filterNode(value, data) {
+        if (!value) return true;
+        return data.name.indexOf(value) !== -1;
+      },
+      addScenario() {
+        this.$refs.basisScenario.open(this.currentModule);
+      },
+      nodeExpand(data) {
+        if (data.id) {
+          this.expandedNode.push(data.id);
+        }
+      },
+      nodeCollapse(data) {
+        if (data.id) {
+          this.expandedNode.splice(this.expandedNode.indexOf(data.id), 1);
+        }
+      },
+      changeProtocol() {
+        this.getApiModuleTree();
+        this.$emit('changeProtocol', this.protocol);
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .node-tree {
+    margin-top: 15px;
+    margin-bottom: 15px;
+  }
+
+  .ms-el-input {
+    height: 25px;
+    line-height: 25px;
+  }
+
+  .custom-tree-node {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+    width: 100%;
+  }
+
+  .father .child {
+    display: none;
+  }
+
+  .father:hover .child {
+    display: block;
+  }
+
+  .node-title {
+    width: 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1 1 auto;
+    padding: 0 5px;
+    overflow: hidden;
+  }
+
+  .node-operate > i {
+    color: #409eff;
+    margin: 0 5px;
+  }
+
+  /deep/ .el-tree-node__content {
+    height: 33px;
+  }
+
+  .ms-api-buttion {
+    width: 30px;
+  }
+</style>
diff --git a/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue b/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
index 16c40b99d9..20eb794b26 100644
--- a/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
+++ b/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
@@ -49,7 +49,7 @@
                          show-overflow-tooltip/>
         <el-table-column :label="$t('commons.operating')" width="200px" v-if="!referenced">
           <template v-slot:default="{row}">
-            <div v-if="currentModule!=undefined && currentModule.id === 'gc'">
+            <div v-if="trashEnable">
               <el-button type="text" @click="reductionApi(row)">恢复</el-button>
               <el-button type="text" @click="remove(row)">{{ $t('api_test.automation.remove') }}</el-button>
             </div>
@@ -95,10 +95,14 @@
     name: "MsApiScenarioList",
     components: {MsTablePagination, MsTableMoreBtn, ShowMoreBtn, MsTableHeader, MsTag, MsApiReportDetail, MsScenarioExtendButtons, MsTestPlanList},
     props: {
-      currentModule: Object,
       referenced: {
         type: Boolean,
         default: false,
+      },
+      selectNodeIds: Array,
+      trashEnable: {
+        type: Boolean,
+        default: false,
       }
     },
     data() {
@@ -133,24 +137,27 @@
       this.search();
     },
     watch: {
-      currentModule() {
+      selectNodeIds() {
         this.search();
       },
+      trashEnable() {
+        if (this.trashEnable) {
+          this.search();
+        }
+      },
     },
     methods: {
       search() {
         this.loading = true;
         this.condition.filters = ["Prepare", "Underway", "Completed"];
-        if (this.currentModule != null) {
-          if (this.currentModule.id === "root") {
-            this.condition.moduleIds = [];
-          } else if (this.currentModule.id === "gc") {
-            this.condition.moduleIds = [];
-            this.condition.filters = ["Trash"];
-          } else {
-            this.condition.moduleIds = this.currentModule.ids;
-          }
+
+        this.condition.moduleIds = this.selectNodeIds;
+
+        if (this.trashEnable) {
+          this.condition.filters = ["Trash"];
+          this.condition.moduleIds = [];
         }
+
         if (this.projectId != null) {
           this.condition.projectId = this.projectId;
         }
@@ -242,7 +249,7 @@
         this.reportId = row.reportId;
       },
       remove(row) {
-        if (this.currentModule !== undefined && this.currentModule != null && this.currentModule.id === "gc") {
+        if (this.trashEnable) {
           this.$get('/api/automation/delete/' + row.id, () => {
             this.$success(this.$t('commons.delete_success'));
             this.search();
diff --git a/frontend/src/business/components/api/automation/scenario/ApiScenarioModule.vue b/frontend/src/business/components/api/automation/scenario/ApiScenarioModule.vue
index edbd91f712..9ef68f1538 100644
--- a/frontend/src/business/components/api/automation/scenario/ApiScenarioModule.vue
+++ b/frontend/src/business/components/api/automation/scenario/ApiScenarioModule.vue
@@ -1,72 +1,28 @@
 <template>
   <div>
-    <el-input style="width: 275px;" :placeholder="$t('test_track.module.search')" v-model="filterText"
-              size="small">
-      <template v-slot:append>
-        <el-button icon="el-icon-folder-add" @click="addScenario"/>
-      </template>
-    </el-input>
 
-    <el-tree :data="data"
-             class="filter-tree node-tree"
-             node-key="id"
-             :default-expanded-keys="expandedNode"
-             :expand-on-click-node="false"
-             @node-expand="nodeExpand"
-             @node-collapse="nodeCollapse"
-             @node-click="selectModule"
-             @node-drag-end="handleDragEnd"
-             :filter-node-method="filterNode"
-             draggable
-             :allow-drop="allowDrop"
-             :allow-drag="allowDrag" ref="tree">
-        <span class="custom-tree-node father"
-              slot-scope="{ node, data }">
-          <!-- 如果是编辑状态 -->
-          <template v-if="data.isEdit === 1">
-            <el-input ref="input"
-                      @blur="() => submitEdit(node,data)"
-                      v-model="newLabel"
-                      class="ms-el-input" size="mini"></el-input>
+    <ms-node-tree
+      v-loading="result.loading"
+      :tree-nodes="data"
+      :type="'edit'"
+      @add="add"
+      @edit="edit"
+      @drag="drag"
+      @remove="remove"
+      @nodeSelectEvent="nodeChange"
+      ref="nodeTree">
+
+      <template v-slot:header>
+        <el-input style="width: 275px;" :placeholder="$t('test_track.module.search')" v-model="condition.filterText"
+                  size="small">
+          <template v-slot:append>
+            <el-button icon="el-icon-folder-add" @click="addScenario"/>
           </template>
-          <!-- 如果不是编辑状态 -->
-            <i class="el-icon-delete" v-if="data.isEdit!=1 && data.id==='gc'"/>
-            <i class="el-icon-folder" v-if="data.isEdit!=1 && data.id!='gc'"/>
-            <span class="node-title" v-if="data.isEdit!=1" v-text="data.name"></span>
+        </el-input>
+        <module-trash-button :condition="condition" :exe="enableTrash"/>
+      </template>
 
-          <span class="node-operate child">
-            <el-tooltip
-              v-if="data.id!=='root' && data.id!=='gc'"
-              class="item"
-              effect="dark"
-              :open-delay="200"
-              :content="$t('test_track.module.rename')"
-              placement="top">
-              <i @click.stop="() => edit(node,data)" class="el-icon-edit"></i>
-            </el-tooltip>
-
-            <el-tooltip
-              v-if="data.id!=='gc'"
-              class="item"
-              effect="dark"
-              :open-delay="200"
-              :content="$t('test_track.module.add_submodule')"
-              placement="top">
-              <i @click.stop="() => append(node,data)" class="el-icon-circle-plus-outline"></i>
-            </el-tooltip>
-
-             <el-tooltip
-               v-if="data.id!=='root' && data.id!=='gc'"
-               class="item"
-               effect="dark"
-               :open-delay="200"
-               :content="$t('commons.delete')"
-               placement="top">
-              <i @click.stop="() => remove(node, data)" class="el-icon-delete"></i>
-            </el-tooltip>
-          </span>
-        </span>
-    </el-tree>
+    </ms-node-tree>
 
     <ms-add-basis-scenario ref="basisScenario"/>
   </div>
@@ -77,312 +33,165 @@
   import SelectMenu from "../../../track/common/SelectMenu";
   import MsAddBasisScenario from "@/business/components/api/automation/scenario/AddBasisScenario";
   import {getCurrentProjectID} from "@/common/js/utils";
+  import MsNodeTree from "../../../track/common/NodeTree";
+  import {buildNodePath} from "../../definition/model/NodeTree";
+  import ModuleTrashButton from "../../definition/components/module/ModuleTrashButton";
 
   export default {
     name: 'MsApiScenarioModule',
     components: {
+      ModuleTrashButton,
+      MsNodeTree,
       MsAddBasisScenario,
       SelectMenu,
     },
     data() {
       return {
-        httpVisible: false,
-        expandedNode: [],
-        filterText: "",
-        nextFlag: true,
+        // httpVisible: false,
+        // expandedNode: [],
+        // filterText: "",
+        // nextFlag: true,
+        // currentModule: {},
+        // newLabel: "",
+        // data: [{
+        //   "id": "gc",
+        //   "name": "回收站",
+        //   "level": 1,
+        //   "children": [],
+        // }, {
+        //   "id": "root",
+        //   "name": "默认模块",
+        //   "level": 0,
+        //   "children": [],
+        // }]
+        result: {},
+        condition: {
+          filterText: "",
+          trashEnable: false
+        },
+        projectId: "",
+        data: [],
         currentModule: {},
-        newLabel: "",
-        data: [{
-          "id": "gc",
-          "name": "回收站",
-          "level": 1,
-          "children": [],
-        }, {
-          "id": "root",
-          "name": "默认模块",
-          "level": 0,
-          "children": [],
-        }]
       }
     },
     mounted() {
-      this.changeProtocol();
+      this.projectId = getCurrentProjectID();
+      this.list();
     },
     watch: {
-      filterText(val) {
-        this.$refs.tree.filter(val);
-      }
+      'condition.filterText'(val) {
+        this.$refs.nodeTree.filter(val);
+      },
     },
     methods: {
-      getApiModuleTree() {
-        this.nextFlag = true;
-        let projectId = getCurrentProjectID();
-        if (projectId) {
-          if (this.expandedNode.length === 0) {
-            this.expandedNode.push("root");
-          }
-          this.$get("/api/automation/module/list/" + projectId, response => {
-            if (response.data !== undefined && response.data !== null) {
-              this.data[1].children = response.data;
+
+      list() {
+        if (this.projectId) {
+          this.result = this.$get("/api/automation/module/list/" + this.projectId + "/", response => {
+            if (response.data != undefined && response.data != null) {
+              this.data = response.data;
               let moduleOptions = [];
-              this.data[1].children.forEach(node => {
-                this.buildNodePath(node, {path: ''}, moduleOptions);
+              this.data.forEach(node => {
+                buildNodePath(node, {path: ''}, moduleOptions);
               });
-              this.$emit('getApiModuleTree', moduleOptions);
+              this.$emit('setModuleOptions', moduleOptions);
             }
           });
         }
       },
-      buildNodePath(node, option, moduleOptions) {
-        //递归构建节点路径
-        option.id = node.id;
-        option.path = option.path + '/' + node.name;
-        node.path = option.path;
-        moduleOptions.push(option);
-        if (node.children) {
-          for (let i = 0; i < node.children.length; i++) {
-            this.buildNodePath(node.children[i], {path: option.path}, moduleOptions);
-          }
-        }
+      edit(param) {
+        param.projectId = this.projectId;
+        param.protocol = this.condition.protocol;
+        this.$post("/api/automation/module/edit", param, () => {
+          this.$success(this.$t('commons.save_success'));
+          this.list();
+          this.refresh();
+        }, (error) => {
+          this.list();
+        });
       },
-      findTreeByNodeId(rootNode, nodeId) {
-        if (rootNode.id === nodeId) {
-          return rootNode;
-        }
-        if (rootNode.children) {
-          for (let i = 0; i < rootNode.children.length; i++) {
-            if (this.findTreeByNodeId(rootNode.children[i], nodeId)) {
-              return rootNode;
-            }
-          }
-        }
+      add(param) {
+        param.projectId = this.projectId;
+        param.protocol = this.condition.protocol;
+        this.$post("/api/automation/module/add", param, () => {
+          this.$success(this.$t('commons.save_success'));
+          this.list();
+        }, (error) => {
+          this.list();
+        });
       },
-      buildParam(draggingNode, dropNode, dropType) {
-        let param = {};
-        param.id = draggingNode.data.id;
-        param.name = draggingNode.data.name;
-        param.projectId = draggingNode.data.projectId;
-        if (dropType === "inner") {
-          param.parentId = dropNode.data.id;
-          param.level = dropNode.data.level;
-        } else {
-          if (!dropNode.parent.id || dropNode.parent.id === 0) {
-            param.parentId = 0;
-            param.level = 1;
-          } else {
-            param.parentId = dropNode.parent.data.id;
-            param.level = dropNode.parent.data.level;
-          }
-        }
-        let nodeIds = [];
-        this.getChildNodeId(draggingNode.data, nodeIds);
-        if (dropNode.level === 1 && dropType !== "inner") {
-          param.nodeTree = draggingNode.data;
-        } else {
-          for (let i = 0; i < this.data.length; i++) {
-            param.nodeTree = this.findTreeByNodeId(this.data[i], dropNode.data.id);
-            if (param.nodeTree) {
-              break;
-            }
-          }
-        }
-        param.nodeIds = nodeIds;
-        return param;
+      remove(nodeIds) {
+        this.$post("/api/automation/module/delete", nodeIds, () => {
+          this.list();
+          this.refresh();
+        }, (error) => {
+          this.list();
+        });
       },
-      getTreeNode(nodes, id, list) {
-        if (!nodes) {
-          return;
-        }
-        for (let i = 0; i < nodes.length; i++) {
-          if (nodes[i].id === id) {
-            i - 1 >= 0 ? list[0] = nodes[i - 1].id : list[0] = "";
-            list[1] = nodes[i].id;
-            i + 1 < nodes.length ? list[2] = nodes[i + 1].id : list[2] = "";
-            return;
-          }
-          if (nodes[i].children) {
-            this.getTreeNode(nodes[i].children, id, list);
-          }
-        }
-      },
-      handleDragEnd(draggingNode, dropNode, dropType) {
-        if (dropNode.data.id === "root" || dropType === "none" || dropType === undefined) {
-          return;
-        }
-        let param = this.buildParam(draggingNode, dropNode, dropType);
-
-        this.list = [];
-        if (param.parentId === "root") {
-          param.parentId = null;
-        }
-        this.getTreeNode(this.data, draggingNode.data.id, this.list);
-
+      drag(param, list) {
         this.$post("/api/automation/module/drag", param, () => {
-          this.getApiModuleTree();
-        }, () => {
-          this.getApiModuleTree();
+          // this.$post("/api/module/pos", list); //todo 排序
+          this.list();
+        }, (error) => {
+          this.list();
         });
       },
-
-      allowDrop(draggingNode, dropNode) {
-        return dropNode.data.id !== "root";
-      },
-      allowDrag(draggingNode) {
-        // 顶层默认分组不允许拖拽
-        return draggingNode.data.id !== "root";
-      },
-      append(node, data) {
-        if (this.nextFlag === true) {
-          const newChild = {
-            id: "newId",
-            isEdit: 0,
-            name: "",
-            children: []
-          }
-          if (!data.children) {
-            this.$set(data, 'children', [])
-          }
-          this.nextFlag = false;
-          data.children.push(newChild)
-          this.edit(node, newChild);
+      nodeChange(node, nodeIds, pNodes) {
+        this.currentModule = node.data;
+        this.condition.trashEnable = false;
+        if (node.data.id === 'root') {
+          this.$emit("nodeSelectEvent", node, [], pNodes);
         } else {
-          this.$message.warning(this.$t('commons.please_save'));
+          this.$emit("nodeSelectEvent", node, nodeIds, pNodes);
         }
       },
-
-      remove(node, data) {
-        if (data.name === "") {
-          this.nextFlag = true;
-        }
-        let delIds = [];
-        this.getChildNodeId(data, delIds);
-        delIds.push(data.id);
-        this.$post("/api/automation/module/delete", delIds, () => {
-          this.$success(this.$t('commons.save_success'));
-          // 移除节点
-          const parent = node.parent
-          const children = parent.data.children || parent.data
-          const index = children.findIndex(d => d.id !== undefined && data.id !== undefined && d.id === data.id)
-          children.splice(index, 1);
-          this.getApiModuleTree();
-        });
-      },
-
-      edit(node, data) {
-        this.$set(data, 'isEdit', 1)
-        this.newLabel = data.name
-        this.$nextTick(() => {
-        })
-      },
-
-      submitEdit(node, data) {
-        // 触发了保存按钮
-        if (this.newLabel === "") {
-          this.nextFlag = false;
-          this.$message.warning(this.$t('commons.input_name'));
-          return;
-        }
-
-        this.$set(data, 'name', this.newLabel)
-        let flag = this.editApiModule(node, data);
-        if (flag === false) {
-          this.$set(data, 'isEdit', 1)
-          return;
-        }
-        this.$set(data, 'isEdit', 0)
-        this.newLabel = ""
-        this.nextFlag = true;
-      },
-
-      cancelEdit(node, data) {
-        this.newLabel = ""
-        this.$set(data, 'isEdit', 0)
-      },
-
-      getChildNodeId(rootNode, nodeIds) {
-        //递归获取所有子节点ID
-        nodeIds.push(rootNode.id);
-        this.nodePath += rootNode.name + "/";
-        if (rootNode.children) {
-          for (let i = 0; i < rootNode.children.length; i++) {
-            this.getChildNodeId(rootNode.children[i], nodeIds);
-          }
-        }
-      },
-      // 保存或修改
-      editApiModule(node, data) {
-        let projectId = getCurrentProjectID();
-        if (!projectId) {
-          this.$error(this.$t('api_test.select_project'));
-          return;
-        }
-        let url = "";
-        if (data.id === "newId") {
-          url = '/api/automation/module/add';
-          data.level = 1;
-          if (node.parent && node.parent.key !== "root") {
-            data.parentId = node.parent.key;
-            data.level = node.parent.level;
-          }
-        } else {
-          url = '/api/automation/module/edit';
-          let ids = [];
-          this.getChildNodeId(data, ids);
-          data.nodeIds = ids;
-        }
-        data.protocol = this.protocol;
-        data.projectId = projectId;
-        this.$post(url, data, () => {
-          this.$success(this.$t('commons.save_success'));
-          this.getApiModuleTree();
-          this.nextFlag = true;
-          return true;
-        });
-        return false;
-      },
-
-      selectModule(data) {
-        if (data.id !== "root") {
-          if (data.path !== undefined && !data.path.startsWith("/")) {
-            data.path = "/" + data.path;
-          }
-          if (data.path !== undefined && data.path.endsWith("/")) {
-            data.path = data.path.substr(0, data.path.length - 1);
-          }
-          let nodeIds = [];
-          this.getChildNodeId(data, nodeIds);
-          data.ids = nodeIds;
-          this.currentModule = data;
-        }
-        this.$emit('selectModule', data);
-      },
-      refresh(data) {
-        this.$emit('refresh', data);
-      },
+      // exportAPI() {
+      //   this.$emit('exportAPI');
+      // },
+      // debug() {
+      //   this.$emit('debug');
+      // },
       saveAsEdit(data) {
         this.$emit('saveAsEdit', data);
       },
-      filterNode(value, data) {
-        if (!value) return true;
-        return data.name.indexOf(value) !== -1;
+      refresh() {
+        this.$emit("refreshTable");
       },
       addScenario() {
         this.$refs.basisScenario.open(this.currentModule);
       },
-      nodeExpand(data) {
-        if (data.id) {
-          this.expandedNode.push(data.id);
-        }
-      },
-      nodeCollapse(data) {
-        if (data.id) {
-          this.expandedNode.splice(this.expandedNode.indexOf(data.id), 1);
-        }
-      },
-      changeProtocol() {
-        this.getApiModuleTree();
-        this.$emit('changeProtocol', this.protocol);
+      enableTrash() {
+        this.condition.trashEnable = true;
+        this.$emit('enableTrash', this.condition.trashEnable);
       }
+
+      // refresh(data) {
+      //   this.$emit('refresh', data);
+      // },
+      // saveAsEdit(data) {
+      //   this.$emit('saveAsEdit', data);
+      // },
+      // filterNode(value, data) {
+      //   if (!value) return true;
+      //   return data.name.indexOf(value) !== -1;
+      // },
+      // addScenario() {
+      //   this.$refs.basisScenario.open(this.currentModule);
+      // },
+      // nodeExpand(data) {
+      //   if (data.id) {
+      //     this.expandedNode.push(data.id);
+      //   }
+      // },
+      // nodeCollapse(data) {
+      //   if (data.id) {
+      //     this.expandedNode.splice(this.expandedNode.indexOf(data.id), 1);
+      //   }
+      // },
+      // changeProtocol() {
+      //   this.getApiModuleTree();
+      //   this.$emit('changeProtocol', this.protocol);
+      // }
     }
   }
 </script>
diff --git a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
index 457257e1bd..b902991d83 100644
--- a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
+++ b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
@@ -720,6 +720,7 @@
           this.currentScenario.modulePath = this.currentModule.method !== undefined ? this.currentModule.method : null;
           this.currentScenario.apiScenarioModuleId = this.currentModule.id;
         }
+        this.currentScenario.projectId = this.projectId;
       },
       runRefresh() {
         this.debugVisible = true;
diff --git a/frontend/src/business/components/api/definition/components/ApiList.vue b/frontend/src/business/components/api/definition/components/ApiList.vue
index 18908ffd09..2de37eacab 100644
--- a/frontend/src/business/components/api/definition/components/ApiList.vue
+++ b/frontend/src/business/components/api/definition/components/ApiList.vue
@@ -188,12 +188,12 @@
       initApiTable() {
         this.selectRows = new Set();
         this.condition.filters = ["Prepare", "Underway", "Completed"];
+
+        this.condition.moduleIds = this.selectNodeIds;
         if (this.trashEnable) {
           this.condition.filters = ["Trash"];
           this.condition.moduleIds = [];
         }
-        this.condition.moduleIds = this.selectNodeIds;
-
         if (this.projectId != null) {
           this.condition.projectId = this.projectId;
         }
diff --git a/frontend/src/business/components/api/definition/components/module/ApiModule.vue b/frontend/src/business/components/api/definition/components/module/ApiModule.vue
index cb7de53ffb..76b70f53c6 100644
--- a/frontend/src/business/components/api/definition/components/module/ApiModule.vue
+++ b/frontend/src/business/components/api/definition/components/module/ApiModule.vue
@@ -55,14 +55,9 @@
           filterText: "",
           trashEnable: false
         },
-
-        httpVisible: false,
-        expandedNode: [],
-        nextFlag: true,
         projectId: "",
         data: [],
         currentModule: {},
-        newLabel: ""
       }
     },
     mounted() {
@@ -135,7 +130,7 @@
         });
       },
       nodeChange(node, nodeIds, pNodes) {
-        this.currentModule = node;
+        this.currentModule = node.data;
         this.condition.trashEnable = false;
         if (node.data.id === 'root') {
           this.$emit("nodeSelectEvent", node, [], pNodes);
diff --git a/frontend/src/business/components/api/definition/components/module/ApiModuleHeader.vue b/frontend/src/business/components/api/definition/components/module/ApiModuleHeader.vue
index 24e45d7a06..310cfa75b7 100644
--- a/frontend/src/business/components/api/definition/components/module/ApiModuleHeader.vue
+++ b/frontend/src/business/components/api/definition/components/module/ApiModuleHeader.vue
@@ -24,9 +24,7 @@
         </template>
       </el-input>
 
-      <div @click="enableTrash" class="recycle" :class="{'is-active': condition.trashEnable}">
-        <i class="el-icon-delete">  回收站</i>
-      </div>
+      <module-trash-button :condition="condition" :exe="enableTrash"/>
 
       <ms-add-basis-api
         :current-protocol="condition.protocol"
@@ -41,10 +39,11 @@
     import {OPTIONS} from "../../model/JsonData";
     import MsAddBasisApi from "../basis/AddBasisApi";
     import ApiImport from "../import/ApiImport";
+    import ModuleTrashButton from "./ModuleTrashButton";
 
     export default {
       name: "ApiModuleHeader",
-      components: {ApiImport, MsAddBasisApi},
+      components: {ModuleTrashButton, ApiImport, MsAddBasisApi},
       data() {
         return {
           options: OPTIONS,
@@ -110,22 +109,4 @@
     width: 175px;
     padding-left: 3px;
   }
-
-  .recycle {
-    padding-left: 25px;
-    margin-top: 15px;
-    height: 26px;
-    line-height: 26px;
-    margin-bottom: -10px;
-  }
-
-  .recycle:hover {
-    color: #6d317c;
-    cursor: pointer;
-  }
-
-  .is-active {
-    background-color: #f3f6f9;
-  }
-
 </style>
diff --git a/frontend/src/business/components/api/definition/components/module/ModuleTrashButton.vue b/frontend/src/business/components/api/definition/components/module/ModuleTrashButton.vue
new file mode 100644
index 0000000000..0ad9a069a3
--- /dev/null
+++ b/frontend/src/business/components/api/definition/components/module/ModuleTrashButton.vue
@@ -0,0 +1,48 @@
+<template>
+  <div @click="exe" class="recycle" :class="{'is-active': condition.trashEnable}">
+    <i class="el-icon-delete">  回收站</i>
+  </div>
+</template>
+
+<script>
+    export default {
+      name: "ModuleTrashButton",
+      props: {
+        condition: {
+          type: Object,
+          default() {
+            return {}
+          }
+        },
+        exe: {
+          type: Function
+        },
+      },
+      methods: {
+        // enableTrash() {
+        //
+        // }
+      }
+    }
+</script>
+
+<style scoped>
+
+  .recycle {
+    padding-left: 25px;
+    margin-top: 15px;
+    height: 26px;
+    line-height: 26px;
+    margin-bottom: -10px;
+  }
+
+  .recycle:hover {
+    color: #6d317c;
+    cursor: pointer;
+  }
+
+  .is-active {
+    background-color: #f3f6f9;
+  }
+
+</style>
diff --git a/frontend/src/business/components/xpack b/frontend/src/business/components/xpack
index 29a8fc0960..a22a3005d9 160000
--- a/frontend/src/business/components/xpack
+++ b/frontend/src/business/components/xpack
@@ -1 +1 @@
-Subproject commit 29a8fc09602fde5708af06582ac972d98eb69836
+Subproject commit a22a3005d9bd254793fcf634d72539cbdf31be3a