From 592790856fd1ac4a2e27eaf770e7494d7a12e798 Mon Sep 17 00:00:00 2001
From: chenjianxing <jianxing.chen@fit2cloud.com>
Date: Wed, 25 Mar 2020 13:02:11 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=B5=8B=E8=AF=95=E7=94=A8?=
 =?UTF-8?q?=E4=BE=8B=E6=A8=A1=E5=9D=97=E6=A0=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../io/metersphere/base/domain/TestCase.java  |   8 +-
 .../base/domain/TestCaseExample.java          |  30 +-
 .../metersphere/base/domain/TestCaseNode.java |   8 +-
 .../base/domain/TestCaseNodeExample.java      |  30 +-
 .../base/domain/TestPlanTestCase.java         |   8 +-
 .../base/domain/TestPlanTestCaseExample.java  |  30 +-
 .../base/mapper/TestCaseMapper.xml            |  18 +-
 .../base/mapper/TestCaseNodeMapper.java       |   4 +-
 .../base/mapper/TestCaseNodeMapper.xml        |  22 +-
 .../base/mapper/TestPlanTestCaseMapper.java   |   4 +-
 .../base/mapper/TestPlanTestCaseMapper.xml    |  26 +-
 .../resources/db/migration/V5__init_track.sql |  10 +-
 .../src/main/resources/generatorConfig.xml    |  19 +-
 frontend/package.json                         |   3 +-
 .../components/common/router/router.js        |  20 +-
 .../components/track/case/EditTestCase.vue    | 157 ++++++++++
 .../components/track/case/TestCase.vue        | 217 +++++++++++++-
 .../track/case/components/NodeTree.vue        | 278 ++++++++++++++++++
 18 files changed, 757 insertions(+), 135 deletions(-)
 create mode 100644 frontend/src/business/components/track/case/EditTestCase.vue
 create mode 100644 frontend/src/business/components/track/case/components/NodeTree.vue

diff --git a/backend/src/main/java/io/metersphere/base/domain/TestCase.java b/backend/src/main/java/io/metersphere/base/domain/TestCase.java
index 3196a870a6..8d79fe7bc6 100644
--- a/backend/src/main/java/io/metersphere/base/domain/TestCase.java
+++ b/backend/src/main/java/io/metersphere/base/domain/TestCase.java
@@ -5,7 +5,7 @@ import java.io.Serializable;
 public class TestCase implements Serializable {
     private String id;
 
-    private String nodeId;
+    private Integer nodeId;
 
     private String projectId;
 
@@ -33,12 +33,12 @@ public class TestCase implements Serializable {
         this.id = id == null ? null : id.trim();
     }
 
-    public String getNodeId() {
+    public Integer getNodeId() {
         return nodeId;
     }
 
-    public void setNodeId(String nodeId) {
-        this.nodeId = nodeId == null ? null : nodeId.trim();
+    public void setNodeId(Integer nodeId) {
+        this.nodeId = nodeId;
     }
 
     public String getProjectId() {
diff --git a/backend/src/main/java/io/metersphere/base/domain/TestCaseExample.java b/backend/src/main/java/io/metersphere/base/domain/TestCaseExample.java
index 84fffd493b..6c4bea98f1 100644
--- a/backend/src/main/java/io/metersphere/base/domain/TestCaseExample.java
+++ b/backend/src/main/java/io/metersphere/base/domain/TestCaseExample.java
@@ -184,62 +184,52 @@ public class TestCaseExample {
             return (Criteria) this;
         }
 
-        public Criteria andNodeIdEqualTo(String value) {
+        public Criteria andNodeIdEqualTo(Integer value) {
             addCriterion("node_id =", value, "nodeId");
             return (Criteria) this;
         }
 
-        public Criteria andNodeIdNotEqualTo(String value) {
+        public Criteria andNodeIdNotEqualTo(Integer value) {
             addCriterion("node_id <>", value, "nodeId");
             return (Criteria) this;
         }
 
-        public Criteria andNodeIdGreaterThan(String value) {
+        public Criteria andNodeIdGreaterThan(Integer value) {
             addCriterion("node_id >", value, "nodeId");
             return (Criteria) this;
         }
 
-        public Criteria andNodeIdGreaterThanOrEqualTo(String value) {
+        public Criteria andNodeIdGreaterThanOrEqualTo(Integer value) {
             addCriterion("node_id >=", value, "nodeId");
             return (Criteria) this;
         }
 
-        public Criteria andNodeIdLessThan(String value) {
+        public Criteria andNodeIdLessThan(Integer value) {
             addCriterion("node_id <", value, "nodeId");
             return (Criteria) this;
         }
 
-        public Criteria andNodeIdLessThanOrEqualTo(String value) {
+        public Criteria andNodeIdLessThanOrEqualTo(Integer value) {
             addCriterion("node_id <=", value, "nodeId");
             return (Criteria) this;
         }
 
-        public Criteria andNodeIdLike(String value) {
-            addCriterion("node_id like", value, "nodeId");
-            return (Criteria) this;
-        }
-
-        public Criteria andNodeIdNotLike(String value) {
-            addCriterion("node_id not like", value, "nodeId");
-            return (Criteria) this;
-        }
-
-        public Criteria andNodeIdIn(List<String> values) {
+        public Criteria andNodeIdIn(List<Integer> values) {
             addCriterion("node_id in", values, "nodeId");
             return (Criteria) this;
         }
 
-        public Criteria andNodeIdNotIn(List<String> values) {
+        public Criteria andNodeIdNotIn(List<Integer> values) {
             addCriterion("node_id not in", values, "nodeId");
             return (Criteria) this;
         }
 
-        public Criteria andNodeIdBetween(String value1, String value2) {
+        public Criteria andNodeIdBetween(Integer value1, Integer value2) {
             addCriterion("node_id between", value1, value2, "nodeId");
             return (Criteria) this;
         }
 
-        public Criteria andNodeIdNotBetween(String value1, String value2) {
+        public Criteria andNodeIdNotBetween(Integer value1, Integer value2) {
             addCriterion("node_id not between", value1, value2, "nodeId");
             return (Criteria) this;
         }
diff --git a/backend/src/main/java/io/metersphere/base/domain/TestCaseNode.java b/backend/src/main/java/io/metersphere/base/domain/TestCaseNode.java
index 7a7aa8a2e5..13a861b431 100644
--- a/backend/src/main/java/io/metersphere/base/domain/TestCaseNode.java
+++ b/backend/src/main/java/io/metersphere/base/domain/TestCaseNode.java
@@ -3,7 +3,7 @@ package io.metersphere.base.domain;
 import java.io.Serializable;
 
 public class TestCaseNode implements Serializable {
-    private String id;
+    private Integer id;
 
     private String projectId;
 
@@ -19,12 +19,12 @@ public class TestCaseNode implements Serializable {
 
     private static final long serialVersionUID = 1L;
 
-    public String getId() {
+    public Integer getId() {
         return id;
     }
 
-    public void setId(String id) {
-        this.id = id == null ? null : id.trim();
+    public void setId(Integer id) {
+        this.id = id;
     }
 
     public String getProjectId() {
diff --git a/backend/src/main/java/io/metersphere/base/domain/TestCaseNodeExample.java b/backend/src/main/java/io/metersphere/base/domain/TestCaseNodeExample.java
index 25dfd9fe76..b310940490 100644
--- a/backend/src/main/java/io/metersphere/base/domain/TestCaseNodeExample.java
+++ b/backend/src/main/java/io/metersphere/base/domain/TestCaseNodeExample.java
@@ -114,62 +114,52 @@ public class TestCaseNodeExample {
             return (Criteria) this;
         }
 
-        public Criteria andIdEqualTo(String value) {
+        public Criteria andIdEqualTo(Integer value) {
             addCriterion("id =", value, "id");
             return (Criteria) this;
         }
 
-        public Criteria andIdNotEqualTo(String value) {
+        public Criteria andIdNotEqualTo(Integer value) {
             addCriterion("id <>", value, "id");
             return (Criteria) this;
         }
 
-        public Criteria andIdGreaterThan(String value) {
+        public Criteria andIdGreaterThan(Integer value) {
             addCriterion("id >", value, "id");
             return (Criteria) this;
         }
 
-        public Criteria andIdGreaterThanOrEqualTo(String value) {
+        public Criteria andIdGreaterThanOrEqualTo(Integer value) {
             addCriterion("id >=", value, "id");
             return (Criteria) this;
         }
 
-        public Criteria andIdLessThan(String value) {
+        public Criteria andIdLessThan(Integer value) {
             addCriterion("id <", value, "id");
             return (Criteria) this;
         }
 
-        public Criteria andIdLessThanOrEqualTo(String value) {
+        public Criteria andIdLessThanOrEqualTo(Integer value) {
             addCriterion("id <=", value, "id");
             return (Criteria) this;
         }
 
-        public Criteria andIdLike(String value) {
-            addCriterion("id like", value, "id");
-            return (Criteria) this;
-        }
-
-        public Criteria andIdNotLike(String value) {
-            addCriterion("id not like", value, "id");
-            return (Criteria) this;
-        }
-
-        public Criteria andIdIn(List<String> values) {
+        public Criteria andIdIn(List<Integer> values) {
             addCriterion("id in", values, "id");
             return (Criteria) this;
         }
 
-        public Criteria andIdNotIn(List<String> values) {
+        public Criteria andIdNotIn(List<Integer> values) {
             addCriterion("id not in", values, "id");
             return (Criteria) this;
         }
 
-        public Criteria andIdBetween(String value1, String value2) {
+        public Criteria andIdBetween(Integer value1, Integer value2) {
             addCriterion("id between", value1, value2, "id");
             return (Criteria) this;
         }
 
-        public Criteria andIdNotBetween(String value1, String value2) {
+        public Criteria andIdNotBetween(Integer value1, Integer value2) {
             addCriterion("id not between", value1, value2, "id");
             return (Criteria) this;
         }
diff --git a/backend/src/main/java/io/metersphere/base/domain/TestPlanTestCase.java b/backend/src/main/java/io/metersphere/base/domain/TestPlanTestCase.java
index 8dc6147b72..c1fe14991f 100644
--- a/backend/src/main/java/io/metersphere/base/domain/TestPlanTestCase.java
+++ b/backend/src/main/java/io/metersphere/base/domain/TestPlanTestCase.java
@@ -3,7 +3,7 @@ package io.metersphere.base.domain;
 import java.io.Serializable;
 
 public class TestPlanTestCase implements Serializable {
-    private String id;
+    private Integer id;
 
     private String planId;
 
@@ -23,12 +23,12 @@ public class TestPlanTestCase implements Serializable {
 
     private static final long serialVersionUID = 1L;
 
-    public String getId() {
+    public Integer getId() {
         return id;
     }
 
-    public void setId(String id) {
-        this.id = id == null ? null : id.trim();
+    public void setId(Integer id) {
+        this.id = id;
     }
 
     public String getPlanId() {
diff --git a/backend/src/main/java/io/metersphere/base/domain/TestPlanTestCaseExample.java b/backend/src/main/java/io/metersphere/base/domain/TestPlanTestCaseExample.java
index a5136f7f26..0caea8e81d 100644
--- a/backend/src/main/java/io/metersphere/base/domain/TestPlanTestCaseExample.java
+++ b/backend/src/main/java/io/metersphere/base/domain/TestPlanTestCaseExample.java
@@ -114,62 +114,52 @@ public class TestPlanTestCaseExample {
             return (Criteria) this;
         }
 
-        public Criteria andIdEqualTo(String value) {
+        public Criteria andIdEqualTo(Integer value) {
             addCriterion("id =", value, "id");
             return (Criteria) this;
         }
 
-        public Criteria andIdNotEqualTo(String value) {
+        public Criteria andIdNotEqualTo(Integer value) {
             addCriterion("id <>", value, "id");
             return (Criteria) this;
         }
 
-        public Criteria andIdGreaterThan(String value) {
+        public Criteria andIdGreaterThan(Integer value) {
             addCriterion("id >", value, "id");
             return (Criteria) this;
         }
 
-        public Criteria andIdGreaterThanOrEqualTo(String value) {
+        public Criteria andIdGreaterThanOrEqualTo(Integer value) {
             addCriterion("id >=", value, "id");
             return (Criteria) this;
         }
 
-        public Criteria andIdLessThan(String value) {
+        public Criteria andIdLessThan(Integer value) {
             addCriterion("id <", value, "id");
             return (Criteria) this;
         }
 
-        public Criteria andIdLessThanOrEqualTo(String value) {
+        public Criteria andIdLessThanOrEqualTo(Integer value) {
             addCriterion("id <=", value, "id");
             return (Criteria) this;
         }
 
-        public Criteria andIdLike(String value) {
-            addCriterion("id like", value, "id");
-            return (Criteria) this;
-        }
-
-        public Criteria andIdNotLike(String value) {
-            addCriterion("id not like", value, "id");
-            return (Criteria) this;
-        }
-
-        public Criteria andIdIn(List<String> values) {
+        public Criteria andIdIn(List<Integer> values) {
             addCriterion("id in", values, "id");
             return (Criteria) this;
         }
 
-        public Criteria andIdNotIn(List<String> values) {
+        public Criteria andIdNotIn(List<Integer> values) {
             addCriterion("id not in", values, "id");
             return (Criteria) this;
         }
 
-        public Criteria andIdBetween(String value1, String value2) {
+        public Criteria andIdBetween(Integer value1, Integer value2) {
             addCriterion("id between", value1, value2, "id");
             return (Criteria) this;
         }
 
-        public Criteria andIdNotBetween(String value1, String value2) {
+        public Criteria andIdNotBetween(Integer value1, Integer value2) {
             addCriterion("id not between", value1, value2, "id");
             return (Criteria) this;
         }
diff --git a/backend/src/main/java/io/metersphere/base/mapper/TestCaseMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/TestCaseMapper.xml
index 879ae75b97..87b3e4d238 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/TestCaseMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/TestCaseMapper.xml
@@ -3,7 +3,7 @@
 <mapper namespace="io.metersphere.base.mapper.TestCaseMapper">
   <resultMap id="BaseResultMap" type="io.metersphere.base.domain.TestCase">
     <id column="id" jdbcType="VARCHAR" property="id" />
-    <result column="node_id" jdbcType="VARCHAR" property="nodeId" />
+    <result column="node_id" jdbcType="INTEGER" property="nodeId" />
     <result column="project_id" jdbcType="VARCHAR" property="projectId" />
     <result column="name" jdbcType="VARCHAR" property="name" />
     <result column="type" jdbcType="VARCHAR" property="type" />
@@ -137,7 +137,7 @@
       method, prerequisite, create_time, 
       update_time, detail, steps, 
       tags)
-    values (#{id,jdbcType=VARCHAR}, #{nodeId,jdbcType=VARCHAR}, #{projectId,jdbcType=VARCHAR}, 
+    values (#{id,jdbcType=VARCHAR}, #{nodeId,jdbcType=INTEGER}, #{projectId,jdbcType=VARCHAR}, 
       #{name,jdbcType=VARCHAR}, #{type,jdbcType=VARCHAR}, #{priority,jdbcType=VARCHAR}, 
       #{method,jdbcType=VARCHAR}, #{prerequisite,jdbcType=VARCHAR}, #{createTime,jdbcType=BIGINT}, 
       #{updateTime,jdbcType=BIGINT}, #{detail,jdbcType=LONGVARCHAR}, #{steps,jdbcType=LONGVARCHAR}, 
@@ -191,7 +191,7 @@
         #{id,jdbcType=VARCHAR},
       </if>
       <if test="nodeId != null">
-        #{nodeId,jdbcType=VARCHAR},
+        #{nodeId,jdbcType=INTEGER},
       </if>
       <if test="projectId != null">
         #{projectId,jdbcType=VARCHAR},
@@ -241,7 +241,7 @@
         id = #{record.id,jdbcType=VARCHAR},
       </if>
       <if test="record.nodeId != null">
-        node_id = #{record.nodeId,jdbcType=VARCHAR},
+        node_id = #{record.nodeId,jdbcType=INTEGER},
       </if>
       <if test="record.projectId != null">
         project_id = #{record.projectId,jdbcType=VARCHAR},
@@ -284,7 +284,7 @@
   <update id="updateByExampleWithBLOBs" parameterType="map">
     update test_case
     set id = #{record.id,jdbcType=VARCHAR},
-      node_id = #{record.nodeId,jdbcType=VARCHAR},
+      node_id = #{record.nodeId,jdbcType=INTEGER},
       project_id = #{record.projectId,jdbcType=VARCHAR},
       name = #{record.name,jdbcType=VARCHAR},
       type = #{record.type,jdbcType=VARCHAR},
@@ -303,7 +303,7 @@
   <update id="updateByExample" parameterType="map">
     update test_case
     set id = #{record.id,jdbcType=VARCHAR},
-      node_id = #{record.nodeId,jdbcType=VARCHAR},
+      node_id = #{record.nodeId,jdbcType=INTEGER},
       project_id = #{record.projectId,jdbcType=VARCHAR},
       name = #{record.name,jdbcType=VARCHAR},
       type = #{record.type,jdbcType=VARCHAR},
@@ -320,7 +320,7 @@
     update test_case
     <set>
       <if test="nodeId != null">
-        node_id = #{nodeId,jdbcType=VARCHAR},
+        node_id = #{nodeId,jdbcType=INTEGER},
       </if>
       <if test="projectId != null">
         project_id = #{projectId,jdbcType=VARCHAR},
@@ -360,7 +360,7 @@
   </update>
   <update id="updateByPrimaryKeyWithBLOBs" parameterType="io.metersphere.base.domain.TestCaseWithBLOBs">
     update test_case
-    set node_id = #{nodeId,jdbcType=VARCHAR},
+    set node_id = #{nodeId,jdbcType=INTEGER},
       project_id = #{projectId,jdbcType=VARCHAR},
       name = #{name,jdbcType=VARCHAR},
       type = #{type,jdbcType=VARCHAR},
@@ -376,7 +376,7 @@
   </update>
   <update id="updateByPrimaryKey" parameterType="io.metersphere.base.domain.TestCase">
     update test_case
-    set node_id = #{nodeId,jdbcType=VARCHAR},
+    set node_id = #{nodeId,jdbcType=INTEGER},
       project_id = #{projectId,jdbcType=VARCHAR},
       name = #{name,jdbcType=VARCHAR},
       type = #{type,jdbcType=VARCHAR},
diff --git a/backend/src/main/java/io/metersphere/base/mapper/TestCaseNodeMapper.java b/backend/src/main/java/io/metersphere/base/mapper/TestCaseNodeMapper.java
index 4e88faf0e7..cb3d24a25c 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/TestCaseNodeMapper.java
+++ b/backend/src/main/java/io/metersphere/base/mapper/TestCaseNodeMapper.java
@@ -10,7 +10,7 @@ public interface TestCaseNodeMapper {
 
     int deleteByExample(TestCaseNodeExample example);
 
-    int deleteByPrimaryKey(String id);
+    int deleteByPrimaryKey(Integer id);
 
     int insert(TestCaseNode record);
 
@@ -18,7 +18,7 @@ public interface TestCaseNodeMapper {
 
     List<TestCaseNode> selectByExample(TestCaseNodeExample example);
 
-    TestCaseNode selectByPrimaryKey(String id);
+    TestCaseNode selectByPrimaryKey(Integer id);
 
     int updateByExampleSelective(@Param("record") TestCaseNode record, @Param("example") TestCaseNodeExample example);
 
diff --git a/backend/src/main/java/io/metersphere/base/mapper/TestCaseNodeMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/TestCaseNodeMapper.xml
index f2776cda3b..86f87887e0 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/TestCaseNodeMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/TestCaseNodeMapper.xml
@@ -2,7 +2,7 @@
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="io.metersphere.base.mapper.TestCaseNodeMapper">
   <resultMap id="BaseResultMap" type="io.metersphere.base.domain.TestCaseNode">
-    <id column="id" jdbcType="VARCHAR" property="id" />
+    <id column="id" jdbcType="INTEGER" property="id" />
     <result column="project_id" jdbcType="VARCHAR" property="projectId" />
     <result column="name" jdbcType="VARCHAR" property="name" />
     <result column="p_id" jdbcType="VARCHAR" property="pId" />
@@ -85,15 +85,15 @@
       order by ${orderByClause}
     </if>
   </select>
-  <select id="selectByPrimaryKey" parameterType="java.lang.String" resultMap="BaseResultMap">
+  <select id="selectByPrimaryKey" parameterType="java.lang.Integer" resultMap="BaseResultMap">
     select 
     <include refid="Base_Column_List" />
     from test_case_node
-    where id = #{id,jdbcType=VARCHAR}
+    where id = #{id,jdbcType=INTEGER}
   </select>
-  <delete id="deleteByPrimaryKey" parameterType="java.lang.String">
+  <delete id="deleteByPrimaryKey" parameterType="java.lang.Integer">
     delete from test_case_node
-    where id = #{id,jdbcType=VARCHAR}
+    where id = #{id,jdbcType=INTEGER}
   </delete>
   <delete id="deleteByExample" parameterType="io.metersphere.base.domain.TestCaseNodeExample">
     delete from test_case_node
@@ -105,7 +105,7 @@
     insert into test_case_node (id, project_id, name, 
       p_id, order, create_time, 
       update_time)
-    values (#{id,jdbcType=VARCHAR}, #{projectId,jdbcType=VARCHAR}, #{name,jdbcType=VARCHAR}, 
+    values (#{id,jdbcType=INTEGER}, #{projectId,jdbcType=VARCHAR}, #{name,jdbcType=VARCHAR}, 
       #{pId,jdbcType=VARCHAR}, #{order,jdbcType=BIGINT}, #{createTime,jdbcType=BIGINT}, 
       #{updateTime,jdbcType=BIGINT})
   </insert>
@@ -136,7 +136,7 @@
     </trim>
     <trim prefix="values (" suffix=")" suffixOverrides=",">
       <if test="id != null">
-        #{id,jdbcType=VARCHAR},
+        #{id,jdbcType=INTEGER},
       </if>
       <if test="projectId != null">
         #{projectId,jdbcType=VARCHAR},
@@ -168,7 +168,7 @@
     update test_case_node
     <set>
       <if test="record.id != null">
-        id = #{record.id,jdbcType=VARCHAR},
+        id = #{record.id,jdbcType=INTEGER},
       </if>
       <if test="record.projectId != null">
         project_id = #{record.projectId,jdbcType=VARCHAR},
@@ -195,7 +195,7 @@
   </update>
   <update id="updateByExample" parameterType="map">
     update test_case_node
-    set id = #{record.id,jdbcType=VARCHAR},
+    set id = #{record.id,jdbcType=INTEGER},
       project_id = #{record.projectId,jdbcType=VARCHAR},
       name = #{record.name,jdbcType=VARCHAR},
       p_id = #{record.pId,jdbcType=VARCHAR},
@@ -228,7 +228,7 @@
         update_time = #{updateTime,jdbcType=BIGINT},
       </if>
     </set>
-    where id = #{id,jdbcType=VARCHAR}
+    where id = #{id,jdbcType=INTEGER}
   </update>
   <update id="updateByPrimaryKey" parameterType="io.metersphere.base.domain.TestCaseNode">
     update test_case_node
@@ -238,6 +238,6 @@
       order = #{order,jdbcType=BIGINT},
       create_time = #{createTime,jdbcType=BIGINT},
       update_time = #{updateTime,jdbcType=BIGINT}
-    where id = #{id,jdbcType=VARCHAR}
+    where id = #{id,jdbcType=INTEGER}
   </update>
 </mapper>
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/base/mapper/TestPlanTestCaseMapper.java b/backend/src/main/java/io/metersphere/base/mapper/TestPlanTestCaseMapper.java
index 86e0f91945..6f3f6a288c 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/TestPlanTestCaseMapper.java
+++ b/backend/src/main/java/io/metersphere/base/mapper/TestPlanTestCaseMapper.java
@@ -10,7 +10,7 @@ public interface TestPlanTestCaseMapper {
 
     int deleteByExample(TestPlanTestCaseExample example);
 
-    int deleteByPrimaryKey(String id);
+    int deleteByPrimaryKey(Integer id);
 
     int insert(TestPlanTestCase record);
 
@@ -20,7 +20,7 @@ public interface TestPlanTestCaseMapper {
 
     List<TestPlanTestCase> selectByExample(TestPlanTestCaseExample example);
 
-    TestPlanTestCase selectByPrimaryKey(String id);
+    TestPlanTestCase selectByPrimaryKey(Integer id);
 
     int updateByExampleSelective(@Param("record") TestPlanTestCase record, @Param("example") TestPlanTestCaseExample example);
 
diff --git a/backend/src/main/java/io/metersphere/base/mapper/TestPlanTestCaseMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/TestPlanTestCaseMapper.xml
index 3b77bcea04..d4428c1859 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/TestPlanTestCaseMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/TestPlanTestCaseMapper.xml
@@ -2,7 +2,7 @@
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="io.metersphere.base.mapper.TestPlanTestCaseMapper">
   <resultMap id="BaseResultMap" type="io.metersphere.base.domain.TestPlanTestCase">
-    <id column="id" jdbcType="VARCHAR" property="id" />
+    <id column="id" jdbcType="INTEGER" property="id" />
     <result column="plan_id" jdbcType="VARCHAR" property="planId" />
     <result column="case_id" jdbcType="VARCHAR" property="caseId" />
     <result column="executor" jdbcType="VARCHAR" property="executor" />
@@ -108,17 +108,17 @@
       order by ${orderByClause}
     </if>
   </select>
-  <select id="selectByPrimaryKey" parameterType="java.lang.String" resultMap="ResultMapWithBLOBs">
+  <select id="selectByPrimaryKey" parameterType="java.lang.Integer" resultMap="ResultMapWithBLOBs">
     select 
     <include refid="Base_Column_List" />
     ,
     <include refid="Blob_Column_List" />
     from test_plan_test_case
-    where id = #{id,jdbcType=VARCHAR}
+    where id = #{id,jdbcType=INTEGER}
   </select>
-  <delete id="deleteByPrimaryKey" parameterType="java.lang.String">
+  <delete id="deleteByPrimaryKey" parameterType="java.lang.Integer">
     delete from test_plan_test_case
-    where id = #{id,jdbcType=VARCHAR}
+    where id = #{id,jdbcType=INTEGER}
   </delete>
   <delete id="deleteByExample" parameterType="io.metersphere.base.domain.TestPlanTestCaseExample">
     delete from test_plan_test_case
@@ -131,7 +131,7 @@
       executor, status, remark, 
       create_time, update_time, results
       )
-    values (#{id,jdbcType=VARCHAR}, #{planId,jdbcType=VARCHAR}, #{caseId,jdbcType=VARCHAR}, 
+    values (#{id,jdbcType=INTEGER}, #{planId,jdbcType=VARCHAR}, #{caseId,jdbcType=VARCHAR}, 
       #{executor,jdbcType=VARCHAR}, #{status,jdbcType=VARCHAR}, #{remark,jdbcType=VARCHAR}, 
       #{createTime,jdbcType=BIGINT}, #{updateTime,jdbcType=BIGINT}, #{results,jdbcType=LONGVARCHAR}
       )
@@ -169,7 +169,7 @@
     </trim>
     <trim prefix="values (" suffix=")" suffixOverrides=",">
       <if test="id != null">
-        #{id,jdbcType=VARCHAR},
+        #{id,jdbcType=INTEGER},
       </if>
       <if test="planId != null">
         #{planId,jdbcType=VARCHAR},
@@ -207,7 +207,7 @@
     update test_plan_test_case
     <set>
       <if test="record.id != null">
-        id = #{record.id,jdbcType=VARCHAR},
+        id = #{record.id,jdbcType=INTEGER},
       </if>
       <if test="record.planId != null">
         plan_id = #{record.planId,jdbcType=VARCHAR},
@@ -240,7 +240,7 @@
   </update>
   <update id="updateByExampleWithBLOBs" parameterType="map">
     update test_plan_test_case
-    set id = #{record.id,jdbcType=VARCHAR},
+    set id = #{record.id,jdbcType=INTEGER},
       plan_id = #{record.planId,jdbcType=VARCHAR},
       case_id = #{record.caseId,jdbcType=VARCHAR},
       executor = #{record.executor,jdbcType=VARCHAR},
@@ -255,7 +255,7 @@
   </update>
   <update id="updateByExample" parameterType="map">
     update test_plan_test_case
-    set id = #{record.id,jdbcType=VARCHAR},
+    set id = #{record.id,jdbcType=INTEGER},
       plan_id = #{record.planId,jdbcType=VARCHAR},
       case_id = #{record.caseId,jdbcType=VARCHAR},
       executor = #{record.executor,jdbcType=VARCHAR},
@@ -295,7 +295,7 @@
         results = #{results,jdbcType=LONGVARCHAR},
       </if>
     </set>
-    where id = #{id,jdbcType=VARCHAR}
+    where id = #{id,jdbcType=INTEGER}
   </update>
   <update id="updateByPrimaryKeyWithBLOBs" parameterType="io.metersphere.base.domain.TestPlanTestCase">
     update test_plan_test_case
@@ -307,7 +307,7 @@
       create_time = #{createTime,jdbcType=BIGINT},
       update_time = #{updateTime,jdbcType=BIGINT},
       results = #{results,jdbcType=LONGVARCHAR}
-    where id = #{id,jdbcType=VARCHAR}
+    where id = #{id,jdbcType=INTEGER}
   </update>
   <update id="updateByPrimaryKey" parameterType="io.metersphere.base.domain.TestPlanTestCase">
     update test_plan_test_case
@@ -318,6 +318,6 @@
       remark = #{remark,jdbcType=VARCHAR},
       create_time = #{createTime,jdbcType=BIGINT},
       update_time = #{updateTime,jdbcType=BIGINT}
-    where id = #{id,jdbcType=VARCHAR}
+    where id = #{id,jdbcType=INTEGER}
   </update>
 </mapper>
\ No newline at end of file
diff --git a/backend/src/main/resources/db/migration/V5__init_track.sql b/backend/src/main/resources/db/migration/V5__init_track.sql
index c44ea2d45e..2a7688728b 100644
--- a/backend/src/main/resources/db/migration/V5__init_track.sql
+++ b/backend/src/main/resources/db/migration/V5__init_track.sql
@@ -18,16 +18,16 @@ CREATE TABLE IF NOT EXISTS `test_plan` (
 
 
 CREATE TABLE IF NOT EXISTS `test_case_node` (
-    `id`                     varchar(50) NOT NULL COMMENT 'Test case node ID',
+    `id`                     int(13) PRIMARY KEY AUTO_INCREMENT COMMENT 'Test case node ID',
     `project_id`             varchar(50) NOT NULL COMMENT 'Project ID this node belongs to',
     `name`                   varchar(64) NOT NULL COMMENT 'Node name',
     `p_id`                   varchar(50) NOT NULL COMMENT 'Parent node ID',
     `order`                  bigint(13)  COMMENT 'Node order',
     `create_time`            bigint(13)  NOT NULL COMMENT 'Create timestamp',
     `update_time`            bigint(13)  NOT NULL COMMENT 'Update timestamp',
-    PRIMARY KEY (`id`),
     FOREIGN KEY (`project_id`) references project(`id`)
 )
+    AUTO_INCREMENT = 1
     ENGINE = InnoDB
     DEFAULT CHARSET = utf8mb4
     COLLATE = utf8mb4_bin;
@@ -35,7 +35,7 @@ CREATE TABLE IF NOT EXISTS `test_case_node` (
 
 CREATE TABLE IF NOT EXISTS `test_case` (
     `id`                     varchar(50) NOT NULL COMMENT 'Test case ID',
-    `node_id`                varchar(50) NOT NULL COMMENT 'Node ID this case belongs to',
+    `node_id`                int(13) NOT NULL COMMENT 'Node ID this case belongs to',
     `project_id`             varchar(50) NOT NULL COMMENT 'Project ID this test belongs to',
     `name`                   varchar(64) NOT NULL COMMENT 'Case name',
     `type`                   varchar(25) NOT NULL COMMENT 'Test case type',
@@ -57,7 +57,7 @@ CREATE TABLE IF NOT EXISTS `test_case` (
 
 
 CREATE TABLE IF NOT EXISTS `test_plan_test_case` (
-    `id`                     varchar(50) NOT NULL COMMENT 'ID',
+    `id`                     int(13) PRIMARY KEY AUTO_INCREMENT COMMENT 'ID',
     `plan_id`                varchar(50) NOT NULL COMMENT 'Plan ID relation to',
     `case_id`                varchar(50) NOT NULL COMMENT 'Case ID relation to',
     `executor`               varchar(64) NOT NULL COMMENT 'Test case executor',
@@ -66,10 +66,10 @@ CREATE TABLE IF NOT EXISTS `test_plan_test_case` (
     `remark`                 varchar(255) DEFAULT NULL COMMENT 'Test case remark',
     `create_time`            bigint(13)  NOT NULL COMMENT 'Create timestamp',
     `update_time`            bigint(13)  NOT NULL COMMENT 'Update timestamp',
-    PRIMARY KEY (`id`),
     FOREIGN KEY (`plan_id`) references test_plan(`id`),
     FOREIGN KEY (`case_id`) references test_case(`id`)
 )
+    AUTO_INCREMENT = 1
     ENGINE = InnoDB
     DEFAULT CHARSET = utf8mb4
     COLLATE = utf8mb4_bin;
\ No newline at end of file
diff --git a/backend/src/main/resources/generatorConfig.xml b/backend/src/main/resources/generatorConfig.xml
index d3422ab9d7..68747a790f 100644
--- a/backend/src/main/resources/generatorConfig.xml
+++ b/backend/src/main/resources/generatorConfig.xml
@@ -46,19 +46,10 @@
 
         <!--要生成的数据库表 -->
 
-<!--        <table tableName="user"/>-->
-<!--        <table tableName="user_role"/>-->
-<!--        <table tableName="workspace"/>-->
-<!--        <table tableName="test_resource_pool"/>-->
-<!--        <table tableName="test_resource"/>-->
-<!--        <table tableName="system_parameter"/>-->
-<!--        <table tableName="role"/>-->
-<!--        <table tableName="project"/>-->
-<!--        <table tableName="organization"/>-->
-<!--        <table tableName="load_test_report"/>-->
-<!--        <table tableName="load_test"/>-->
-<!--        <table tableName="file_content"/>-->
-        <table tableName="file_metadata"/>
-<!--        <table tableName="load_test_file"/>-->
+        <table tableName="test_plan"/>
+        <table tableName="test_case_node"/>
+        <table tableName="test_case"/>
+        <table tableName="test_plan_test_case"/>
+
     </context>
 </generatorConfiguration>
\ No newline at end of file
diff --git a/frontend/package.json b/frontend/package.json
index 3939015765..e1212e4115 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -42,7 +42,8 @@
     ],
     "rules": {
       "vue/no-unused-components": "off",
-      "no-console":"off"
+      "no-console":"off",
+      "no-unused-vars": "off"
     },
     "parserOptions": {
       "parser": "babel-eslint"
diff --git a/frontend/src/business/components/common/router/router.js b/frontend/src/business/components/common/router/router.js
index d728aff1c0..84447ec048 100644
--- a/frontend/src/business/components/common/router/router.js
+++ b/frontend/src/business/components/common/router/router.js
@@ -28,6 +28,7 @@ import TrackHome from "../../track/home/TrackHome";
 import TestPlan from "../../track/plan/TestPlan";
 import TestCase from "../../track/case/TestCase";
 import TestTrack from "../../track/TestTrack";
+import EditTestCase from "../../track/case/EditTestCase";
 
 Vue.use(VueRouter);
 
@@ -203,7 +204,24 @@ const router = new VueRouter({
           component: TrackHome,
         },
         {
-          path: 'case',
+          path: 'case/create',
+          name: "createCase",
+          component: EditTestCase,
+        },
+        {
+          path: "case/edit/:caseId",
+          name: "editCase",
+          component: EditTestCase,
+          props: {
+            content: (route) => {
+              return {
+                ...route.params
+              }
+            }
+          }
+        },
+        {
+          path: 'case/:caseId',
           name: 'testCase',
           component: TestCase,
         },
diff --git a/frontend/src/business/components/track/case/EditTestCase.vue b/frontend/src/business/components/track/case/EditTestCase.vue
new file mode 100644
index 0000000000..545c26f987
--- /dev/null
+++ b/frontend/src/business/components/track/case/EditTestCase.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="edit-testplan-container">
+
+    <el-container>
+      <el-aside width="200px">
+        <el-tree
+          :data="data"
+          node-key="id"
+          default-expand-all
+          @node-drag-start="handleDragStart"
+          @node-drag-enter="handleDragEnter"
+          @node-drag-leave="handleDragLeave"
+          @node-drag-over="handleDragOver"
+          @node-drag-end="handleDragEnd"
+          @node-drop="handleDrop"
+          draggable
+          :allow-drop="allowDrop"
+          :allow-drag="allowDrag">
+        </el-tree>
+      </el-aside>
+      <el-main>
+
+main
+      </el-main>
+    </el-container>
+
+
+  </div>
+</template>
+
+<script>
+
+  export default {
+    name: "EditTestCase",
+    components: {
+
+    },
+    data() {
+      return {
+        data: [{
+          id: 1,
+          label: '一级 1',
+          children: [{
+            id: 4,
+            label: '二级 1-1',
+            children: [{
+              id: 9,
+              label: '三级 1-1-1'
+            }, {
+              id: 10,
+              label: '三级 1-1-2'
+            }]
+          }]
+        }, {
+          id: 2,
+          label: '一级 2',
+          children: [{
+            id: 5,
+            label: '二级 2-1'
+          }, {
+            id: 6,
+            label: '二级 2-2'
+          }]
+        }, {
+          id: 3,
+          label: '一级 3',
+          children: [{
+            id: 7,
+            label: '二级 3-1'
+          }, {
+            id: 8,
+            label: '二级 3-2',
+            children: [{
+              id: 11,
+              label: '三级 3-2-1'
+            }, {
+              id: 12,
+              label: '三级 3-2-2'
+            }, {
+              id: 13,
+              label: '三级 3-2-3'
+            }]
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        }
+      };
+    },
+    methods: {
+      handleDragStart(node, ev) {
+        console.log('drag start', node);
+      },
+      handleDragEnter(draggingNode, dropNode, ev) {
+        console.log('tree drag enter: ', dropNode.label);
+      },
+      handleDragLeave(draggingNode, dropNode, ev) {
+        console.log('tree drag leave: ', dropNode.label);
+      },
+      handleDragOver(draggingNode, dropNode, ev) {
+        console.log('tree drag over: ', dropNode.label);
+      },
+      handleDragEnd(draggingNode, dropNode, dropType, ev) {
+        console.log('tree drag end: ', dropNode && dropNode.label, dropType);
+      },
+      handleDrop(draggingNode, dropNode, dropType, ev) {
+        console.log('tree drop: ', dropNode.label, dropType);
+      },
+      allowDrop(draggingNode, dropNode, type) {
+        if (dropNode.data.label === '二级 3-1') {
+          return type !== 'inner';
+        } else {
+          return true;
+        }
+      },
+      allowDrag(draggingNode) {
+        return draggingNode.data.label.indexOf('三级 3-2-2') === -1;
+      }
+    }
+
+  }
+</script>
+
+<style scoped>
+  .edit-testplan-container {
+    float: none;
+    text-align: center;
+    padding: 15px;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+  }
+
+  .edit-testplan-container .main-content {
+    margin: 0 auto;
+    width: 100%;
+    max-width: 1200px;
+  }
+
+  .edit-testplan-container .testplan-config {
+    margin-top: 15px;
+  }
+
+  .el-select {
+    min-width: 130px;
+  }
+
+  .edit-testplan-container .input-with-select .el-input-group__prepend {
+    background-color: #fff;
+  }
+
+  .advanced-config {
+    height: calc(100vh - 280px);
+    overflow: auto;
+  }
+</style>
diff --git a/frontend/src/business/components/track/case/TestCase.vue b/frontend/src/business/components/track/case/TestCase.vue
index c1d3454975..55f24a4f6b 100644
--- a/frontend/src/business/components/track/case/TestCase.vue
+++ b/frontend/src/business/components/track/case/TestCase.vue
@@ -1,16 +1,223 @@
 <template>
-  <div>
-    <h1>测试用例</h1>
-  </div>
+  <div class="case_container" v-loading="result.loading">
 
+
+    <!--<div class="main-content">-->
+
+    <el-container>
+      <el-aside width="250px">
+        <node-tree class="node_tree"></node-tree>
+      </el-aside>
+
+      <el-main>
+        <el-card>
+          <div slot="header">
+            <el-row type="flex" justify="space-between" align="middle">
+              <span class="title">{{$t('commons.test')}}</span>
+              <span class="search">
+            <el-input type="text" size="small" :placeholder="$t('load_test.search_by_name')"
+                      prefix-icon="el-icon-search"
+                      maxlength="60"
+                      v-model="condition" @change="search" clearable/>
+          </span>
+            </el-row>
+          </div>
+          <el-table :data="tableData" class="test-content">
+            <el-table-column
+              prop="name"
+              :label="$t('commons.name')"
+              width="150"
+              show-overflow-tooltip>
+            </el-table-column>
+            <el-table-column
+              prop="description"
+              :label="$t('commons.description')"
+              show-overflow-tooltip>
+            </el-table-column>
+            <el-table-column
+              prop="projectName"
+              :label="$t('load_test.project_name')"
+              width="150"
+              show-overflow-tooltip>
+            </el-table-column>
+            <el-table-column
+              width="250"
+              :label="$t('commons.create_time')">
+              <template slot-scope="scope">
+                <span>{{ scope.row.createTime | timestampFormatDate }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              width="250"
+              :label="$t('commons.update_time')">
+              <template slot-scope="scope">
+                <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              width="150"
+              :label="$t('commons.operating')">
+              <template slot-scope="scope">
+                <el-button @click="handleEdit(scope.row)" type="primary" icon="el-icon-edit" size="mini" circle/>
+                <el-button @click="handleDelete(scope.row)" type="danger" icon="el-icon-delete" size="mini" circle/>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div>
+            <el-row>
+              <el-col :span="22" :offset="1">
+                <div class="table-page">
+                  <el-pagination
+                    @size-change="handleSizeChange"
+                    @current-change="handleCurrentChange"
+                    :current-page.sync="currentPage"
+                    :page-sizes="[5, 10, 20, 50, 100]"
+                    :page-size="pageSize"
+                    layout="total, sizes, prev, pager, next, jumper"
+                    :total="total">
+                  </el-pagination>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </el-main>
+
+    </el-container>
+
+    <!--</div>-->
+  </div>
 </template>
 
 <script>
-    export default {
-      name: "TestCase"
+
+  import NodeTree from './components/NodeTree';
+
+  export default {
+    name: "TestCase",
+    components: {NodeTree},
+    comments: {},
+    data() {
+      return {
+        result: {},
+        queryPath: "/testplan/list",
+        deletePath: "/testplan/delete",
+        condition: "",
+        projectId: null,
+        tableData: [],
+        multipleSelection: [],
+        currentPage: 1,
+        pageSize: 5,
+        total: 0,
+        loading: false,
+        testId: null,
+      }
+    },
+    watch: {
+      '$route'(to) {
+        this.projectId = to.params.projectId;
+        this.initTableData();
+      }
+    },
+    created: function () {
+      this.projectId = this.$route.params.projectId;
+      this.initTableData();
+    },
+    methods: {
+      initTableData() {
+        let param = {
+          name: this.condition,
+        };
+
+        if (this.projectId !== 'all') {
+          param.projectId = this.projectId;
+        }
+
+        this.result = this.$post(this.buildPagePath(this.queryPath), param, response => {
+          let data = response.data;
+          this.total = data.itemCount;
+          this.tableData = data.listObject;
+        });
+      },
+      search() {
+        this.initTableData();
+      },
+      buildPagePath(path) {
+        return path + "/" + this.currentPage + "/" + this.pageSize;
+      },
+      handleSizeChange(size) {
+        this.pageSize = size;
+        this.initTableData();
+      },
+      handleCurrentChange(current) {
+        this.currentPage = current;
+        this.initTableData();
+      },
+      handleSelectionChange(val) {
+        this.multipleSelection = val;
+      },
+      handleEdit(testPlan) {
+        this.$router.push({
+          path: '/performance/plan/edit/' + testPlan.id,
+        })
+      },
+      handleDelete(testPlan) {
+        this.$alert(this.$t('load_test.delete_confirm') + testPlan.name + "？", '', {
+          confirmButtonText: this.$t('commons.confirm'),
+          callback: (action) => {
+            if (action === 'confirm') {
+              this._handleDelete(testPlan);
+            }
+          }
+        });
+      },
+      _handleDelete(testPlan) {
+        let data = {
+          id: testPlan.id
+        };
+
+        this.result = this.$post(this.deletePath, data, () => {
+          this.$message({
+            message: this.$t('commons.delete_success'),
+            type: 'success'
+          });
+          this.initTableData();
+        });
+      },
     }
+  }
 </script>
 
 <style scoped>
+  .testplan-container {
+    padding: 15px;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+  }
 
+  .main-content {
+    margin: 0 auto;
+    width: 100%;
+    max-width: 1200px;
+  }
+
+  .test-content {
+    width: 100%;
+  }
+
+  .table-page {
+    padding-top: 20px;
+    margin-right: -9px;
+    float: right;
+  }
+
+  .case_container {
+    background: white;
+  }
+
+  .node_tree {
+    /*box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);*/
+    margin: 10%;
+  }
 </style>
diff --git a/frontend/src/business/components/track/case/components/NodeTree.vue b/frontend/src/business/components/track/case/components/NodeTree.vue
new file mode 100644
index 0000000000..aa10df55de
--- /dev/null
+++ b/frontend/src/business/components/track/case/components/NodeTree.vue
@@ -0,0 +1,278 @@
+<template>
+
+  <div>
+
+
+    <el-input placeholder="搜索模块" v-model="filterText"
+              size="small">
+      <el-button slot="append" icon="el-icon-folder-add" @click="editNode('add')"></el-button>
+    </el-input>
+
+    <el-tree
+      class="filter-tree node-tree"
+      :data="trees"
+      node-key="id"
+      @node-drag-start="handleDragStart"
+      @node-drag-enter="handleDragEnter"
+      @node-drag-leave="handleDragLeave"
+      @node-drag-over="handleDragOver"
+      @node-drag-end="handleDragEnd"
+      @node-drop="handleDrop"
+      :filter-node-method="filterNode"
+      :expand-on-click-node="false"
+      draggable
+      :allow-drop="allowDrop"
+      :allow-drag="allowDrag"
+      ref="tree">
+
+      <span class="custom-tree-node father" slot-scope="{ node, data }" @click="selectNode">
+              <span>{{node.label}}</span>
+              <el-dropdown class="node-dropdown child">
+                <span class="el-dropdown-link">
+                  <i class="el-icon-folder-add"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item>
+                  <div @click="editNode('edit', data)">重命名</div>
+                </el-dropdown-item>
+                <el-dropdown-item >
+                  <div @click="editNode('add', data)">添加子模块</div>
+                </el-dropdown-item>
+                <el-dropdown-item>
+                  <div @click="test">删除</div>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+              </el-dropdown>
+            </span>
+    </el-tree>
+
+    <el-dialog title="添加模块" :visible.sync="dialogFormVisible" width="500px">
+
+        <el-row type="flex" justify="center">
+          <el-col :span="18">
+            <el-form :model="form">
+              <el-form-item label="模块名称" :label-width="formLabelWidth">
+                <el-input v-model="form.name" autocomplete="off"></el-input>
+              </el-form-item>
+            </el-form>
+          </el-col>
+        </el-row>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="saveNode">确 定</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+
+
+</template>
+
+<script>
+    export default {
+      name: "NodeTree",
+      data() {
+        return {
+          filterText: '',
+          trees: [{
+            id: 1,
+            label: '一级 1',
+            children: [{
+              id: 4,
+              label: '二级 1-1',
+              children: [{
+                id: 9,
+                label: '三级 1-1-1'
+              }, {
+                id: 10,
+                label: '三级 1-1-2'
+              }]
+            }]
+          }, {
+            id: 2,
+            label: '一级 2',
+            children: [{
+              id: 5,
+              label: '二级 2-1'
+            }, {
+              id: 6,
+              label: '二级 2-2'
+            }]
+          }, {
+            id: 3,
+            label: '一级 3',
+            children: [{
+              id: 7,
+              label: '二级 3-1'
+            }, {
+              id: 8,
+              label: '二级 3-2',
+              children: [{
+                id: 11,
+                label: '三级 3-2-1'
+              }, {
+                id: 12,
+                label: '三级 3-2-2'
+              }, {
+                id: 13,
+                label: '三级 3-2-3'
+              }]
+            }]
+          }],
+          defaultProps: {
+            children: 'children',
+            label: 'label'
+          },
+          form: {
+            name: '',
+            region: '',
+            date1: '',
+            date2: '',
+            delivery: false,
+            type: [],
+            resource: '',
+            desc: ''
+          },
+          formLabelWidth: '80px',
+          dialogTableVisible: false,
+          dialogFormVisible: false,
+          editType: '',
+          editData: {}
+        };
+      },
+      watch: {
+        filterText(val) {
+          this.$refs.tree.filter(val);
+        }
+      },
+
+      methods: {
+        handleDragStart(node, ev) {
+          console.log('drag start', node);
+        },
+        handleDragEnter(draggingNode, dropNode, ev) {
+          console.log('tree drag enter: ', dropNode.label);
+        },
+        handleDragLeave(draggingNode, dropNode, ev) {
+          console.log('tree drag leave: ', dropNode.label);
+        },
+        handleDragOver(draggingNode, dropNode, ev) {
+          console.log('tree drag over: ', dropNode.label);
+        },
+        handleDragEnd(draggingNode, dropNode, dropType, ev) {
+          console.log('tree drag end: ', dropNode && dropNode.label, dropType);
+        },
+        handleDrop(draggingNode, dropNode, dropType, ev) {
+          console.log('tree drop: ', dropNode.label, dropType);
+        },
+        allowDrop(draggingNode, dropNode, type) {
+          if (dropNode.data.label === '二级 3-1') {
+            return type !== 'inner';
+          } else {
+            return true;
+          }
+        },
+        allowDrag(draggingNode) {
+          return draggingNode.data.label.indexOf('三级 3-2-2') === -1;
+        },
+
+        append(data) {
+          let id = 0;
+          const newChild = { id: id++, label: 'testtest', children: [] };
+          if (!data.children) {
+            this.$set(data, 'children', []);
+          }
+          data.children.push(newChild);
+        },
+
+        remove(node, data) {
+          const parent = node.parent;
+          const children = parent.data.children || parent.data;
+          const index = children.findIndex(d => d.id === data.id);
+          children.splice(index, 1);
+        },
+        selectNode() {
+          console.log("selet node-----");
+        },
+        filterNode(value, data) {
+          if (!value) return true;
+          return data.label.indexOf(value) !== -1;
+        },
+        saveNode() {
+
+          let type = this.editType;
+          let node = this.editData;
+          if( type === 'add' ){
+            if(node === undefined){
+              console.log("add root node");
+            } else {
+              console.log("add node");
+            }
+          } else if(type === 'edit'){
+            console.log("rename");
+          }
+
+          this.form.name = '';
+
+          this.dialogFormVisible = false;
+        },
+        editNode(type, data) {
+
+          this.editType = type;
+          this.editData = data;
+          this.dialogFormVisible = true;
+        },
+        test() {
+
+          console.log("----");
+          alert("ehllo");
+          // this.dialogFormVisible = true;
+        }
+      }
+    }
+</script>
+
+<style scoped>
+
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+    width: 100px;
+  }
+
+  .node-tree {
+    margin-top: 15px;
+  }
+
+
+  .node-dropdown {
+    /*align-items: right;*/
+    /*margin-left: 50px;*/
+    /*color: darkgrey;*/
+    /*opacity:0.1;*/
+    /*filter:alpha(opacity=1); !* 针对 IE8 以及更早的版本 *!*/
+  }
+
+
+  .father .child{
+    display:none;
+  }
+
+  .father:hover .child{
+    display:block;
+  }
+
+</style>