文件夹管理重构

test-test/src/main/java/com/test/test/controller/TestApiGroupController.java

@@ -1,65 +0,0 @@
-package com.test.test.controller;
-
-import java.util.List;
-
-import com.test.test.domain.qo.IDQO;
-import jakarta.annotation.Resource;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.RequestBody;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RestController;
-import com.test.common.annotation.Log;
-import com.test.common.core.controller.BaseController;
-import com.test.common.core.domain.AjaxResult;
-import com.test.common.enums.BusinessType;
-import com.test.test.domain.TestApiGroup;
-import com.test.test.service.ITestApiGroupService;
-
-/**
- * 接口节点Controller
- *
- * @author xiaoe
- */
-@RestController
-@RequestMapping("/test/group")
-public class TestApiGroupController extends BaseController {
-    @Resource
-    private ITestApiGroupService testApiGroupService;
-
-    /**
-     * 查询接口节点列表
-     */
-    @GetMapping("/list")
-    public AjaxResult list() {
-        List<TestApiGroup> list = testApiGroupService.selectTestApiGroupList();
-        return success(list);
-    }
-
-    /**
-     * 新增接口节点
-     */
-    @Log(title = "接口节点", businessType = BusinessType.INSERT)
-    @PostMapping("/add")
-    public AjaxResult add(@RequestBody TestApiGroup testApiGroup) {
-        return success(testApiGroupService.insertTestApiGroup(testApiGroup));
-    }
-
-    /**
-     * 修改接口节点
-     */
-    @Log(title = "接口节点", businessType = BusinessType.UPDATE)
-    @PostMapping("/edit")
-    public AjaxResult edit(@RequestBody TestApiGroup testApiGroup) {
-        return toAjax(testApiGroupService.updateTestApiGroup(testApiGroup));
-    }
-
-    /**
-     * 删除接口节点
-     */
-    @Log(title = "接口节点", businessType = BusinessType.DELETE)
-    @PostMapping("/del")
-    public AjaxResult remove(@RequestBody IDQO qo) {
-        return toAjax(testApiGroupService.deleteTestApiGroupById(qo.getId()));
-    }
-}

test-test/src/main/java/com/test/test/controller/TestGroupController.java

@@ -0,0 +1,56 @@
+package com.test.test.controller;
+
+import com.test.common.annotation.Log;
+import com.test.common.core.controller.BaseController;
+import com.test.common.core.domain.AjaxResult;
+import com.test.common.enums.BusinessType;
+import com.test.test.domain.TestGroup;
+import com.test.test.domain.qo.IDQO;
+import com.test.test.service.ITestGroupService;
+import jakarta.annotation.Resource;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
+
+@RestController
+@RequestMapping("/test/group")
+public class TestGroupController extends BaseController {
+    @Resource
+    private ITestGroupService testGroupService;
+
+    /**
+     * 查询接口节点列表
+     */
+    @GetMapping("/list")
+    public AjaxResult list(String type) {
+        List<TestGroup> list = testGroupService.selectTestGroupList(type);
+        return success(list);
+    }
+
+    /**
+     * 新增接口节点
+     */
+    @Log(title = "接口节点", businessType = BusinessType.INSERT)
+    @PostMapping("/add")
+    public AjaxResult add(@RequestBody TestGroup testGroup) {
+        return success(testGroupService.insertTestGroup(testGroup));
+    }
+
+    /**
+     * 修改接口节点
+     */
+    @Log(title = "接口节点", businessType = BusinessType.UPDATE)
+    @PostMapping("/edit")
+    public AjaxResult edit(@RequestBody TestGroup testGroup) {
+        return toAjax(testGroupService.updateTestGroup(testGroup));
+    }
+
+    /**
+     * 删除接口节点
+     */
+    @Log(title = "接口节点", businessType = BusinessType.DELETE)
+    @PostMapping("/del")
+    public AjaxResult remove(@RequestBody IDQO qo) {
+        return toAjax(testGroupService.deleteTestGroupById(qo.getId()));
+    }
+}

test-test/src/main/java/com/test/test/domain/TestGroup.java

@@ -7,14 +7,14 @@ import lombok.ToString;
 import com.test.common.annotation.Excel;
 
 /**
- * 接口节点对象 test_api_group
+ * 节点（文件夹）对象 test_group
  *
  * @author xiaoe
  */
 @Setter
 @Getter
 @ToString
-public class TestApiGroup extends BaseEntity
+public class TestGroup extends BaseEntity
 {
     /** 节点id */
     private Long id;
@@ -23,10 +23,15 @@ public class TestApiGroup extends BaseEntity
     @Excel(name = "父节点id")
     private Long parentId;
 
+    /** 节点类型 */
+    @Excel(name = "节点类型")
+    private String type;
+
     /** 节点名称 */
     @Excel(name = "节点名称")
     private String name;
 
     /** 删除标志（0代表存在 2代表删除） */
     private String delFlag;
+
 }

test-test/src/main/java/com/test/test/mapper/TestApiGroupMapper.java

@@ -1,43 +0,0 @@
-package com.test.test.mapper;
-
-import java.util.List;
-import com.test.test.domain.TestApiGroup;
-
-/**
- * 接口节点Mapper接口
- * 
- * @author xiaoe
- */
-public interface TestApiGroupMapper 
-{
-    /**
-     * 查询接口节点列表
-     * 
-     * @return 接口节点集合
-     */
-    public List<TestApiGroup> selectTestApiGroupList();
-
-    /**
-     * 新增接口节点
-     * 
-     * @param testApiGroup 接口节点
-     * @return 结果
-     */
-    public int insertTestApiGroup(TestApiGroup testApiGroup);
-
-    /**
-     * 修改接口节点
-     * 
-     * @param testApiGroup 接口节点
-     * @return 结果
-     */
-    public int updateTestApiGroup(TestApiGroup testApiGroup);
-
-    /**
-     * 删除接口节点
-     * 
-     * @param id 接口节点主键
-     * @return 结果
-     */
-    public int deleteTestApiGroupById(Long id);
-}

test-test/src/main/java/com/test/test/mapper/TestGroupMapper.java

@@ -0,0 +1,54 @@
+package com.test.test.mapper;
+
+import java.util.List;
+import com.test.test.domain.TestGroup;
+
+/**
+ * 节点（文件夹）Mapper接口
+ *
+ * @author xiaoe
+ * @date 2025-02-12
+ */
+public interface TestGroupMapper
+{
+    /**
+     * 查询节点（文件夹）
+     *
+     * @param id 节点（文件夹）主键
+     * @return 节点（文件夹）
+     */
+    public TestGroup selectTestGroupById(Long id);
+
+    /**
+     * 查询节点（文件夹）列表
+     *
+     * @param type 节点类型
+     * @return 节点（文件夹）集合
+     */
+    public List<TestGroup> selectTestGroupList(String type);
+
+    /**
+     * 新增节点（文件夹）
+     *
+     * @param testGroup 节点（文件夹）
+     * @return 结果
+     */
+    public int insertTestGroup(TestGroup testGroup);
+
+    /**
+     * 修改节点（文件夹）
+     *
+     * @param testGroup 节点（文件夹）
+     * @return 结果
+     */
+    public int updateTestGroup(TestGroup testGroup);
+
+    /**
+     * 删除节点（文件夹）
+     *
+     * @param id 节点（文件夹）主键
+     * @return 结果
+     */
+    public int deleteTestGroupById(Long id);
+
+}

test-test/src/main/java/com/test/test/service/ITestApiGroupService.java

@@ -1,44 +0,0 @@
-package com.test.test.service;
-
-import java.util.List;
-
-import com.test.test.domain.TestApiGroup;
-
-/**
- * 接口节点Service接口
- *
- * @author xiaoe
- */
-public interface ITestApiGroupService {
-
-    /**
-     * 查询接口节点列表
-     *
-     * @return 接口节点集合
-     */
-    public List<TestApiGroup> selectTestApiGroupList();
-
-    /**
-     * 新增接口节点
-     *
-     * @param testApiGroup 接口节点
-     * @return 结果
-     */
-    public TestApiGroup insertTestApiGroup(TestApiGroup testApiGroup);
-
-    /**
-     * 修改接口节点
-     *
-     * @param testApiGroup 接口节点
-     * @return 结果
-     */
-    public int updateTestApiGroup(TestApiGroup testApiGroup);
-
-    /**
-     * 删除接口节点信息
-     *
-     * @param id 接口节点主键
-     * @return 结果
-     */
-    public int deleteTestApiGroupById(Long id);
-}

test-test/src/main/java/com/test/test/service/ITestGroupService.java

@@ -0,0 +1,44 @@
+package com.test.test.service;
+
+import java.util.List;
+import com.test.test.domain.TestGroup;
+
+/**
+ * 节点（文件夹）Service接口
+ *
+ * @author xiaoe
+ */
+public interface ITestGroupService
+{
+    /**
+     * 查询节点（文件夹）列表
+     *
+     * @param type 节点类型
+     * @return 节点（文件夹）集合
+     */
+    public List<TestGroup> selectTestGroupList(String type);
+
+    /**
+     * 新增节点（文件夹）
+     *
+     * @param testGroup 节点（文件夹）
+     * @return 结果
+     */
+    public TestGroup insertTestGroup(TestGroup testGroup);
+
+    /**
+     * 修改节点（文件夹）
+     *
+     * @param testGroup 节点（文件夹）
+     * @return 结果
+     */
+    public int updateTestGroup(TestGroup testGroup);
+
+    /**
+     * 删除节点（文件夹）信息
+     *
+     * @param id 节点（文件夹）主键
+     * @return 结果
+     */
+    public int deleteTestGroupById(Long id);
+}

test-test/src/main/java/com/test/test/service/impl/TestApiGroupServiceImpl.java

@@ -1,72 +0,0 @@
-package com.test.test.service.impl;
-
-import java.util.List;
-import com.test.common.utils.DateUtils;
-import jakarta.annotation.Resource;
-import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.stereotype.Service;
-import com.test.test.mapper.TestApiGroupMapper;
-import com.test.test.domain.TestApiGroup;
-import com.test.test.service.ITestApiGroupService;
-
-/**
- * 接口节点Service业务层处理
- * 
- * @author xiaoe
- */
-@Service
-public class TestApiGroupServiceImpl implements ITestApiGroupService 
-{
-    @Resource
-    private TestApiGroupMapper testApiGroupMapper;
-
-    /**
-     * 查询接口节点列表
-     * 
-     * @return 接口节点
-     */
-    @Override
-    public List<TestApiGroup> selectTestApiGroupList()
-    {
-        return testApiGroupMapper.selectTestApiGroupList();
-    }
-
-    /**
-     * 新增接口节点
-     * 
-     * @param testApiGroup 接口节点
-     * @return 结果
-     */
-    @Override
-    public TestApiGroup insertTestApiGroup(TestApiGroup testApiGroup)
-    {
-        testApiGroup.setCreateTime(DateUtils.getNowDate());
-        testApiGroupMapper.insertTestApiGroup(testApiGroup);
-        return testApiGroup;
-    }
-
-    /**
-     * 修改接口节点
-     * 
-     * @param testApiGroup 接口节点
-     * @return 结果
-     */
-    @Override
-    public int updateTestApiGroup(TestApiGroup testApiGroup)
-    {
-        testApiGroup.setUpdateTime(DateUtils.getNowDate());
-        return testApiGroupMapper.updateTestApiGroup(testApiGroup);
-    }
-
-    /**
-     * 删除接口节点信息
-     * 
-     * @param id 接口节点主键
-     * @return 结果
-     */
-    @Override
-    public int deleteTestApiGroupById(Long id)
-    {
-        return testApiGroupMapper.deleteTestApiGroupById(id);
-    }
-}

test-test/src/main/java/com/test/test/service/impl/TestGroupServiceImpl.java

@@ -0,0 +1,69 @@
+package com.test.test.service.impl;
+
+import java.util.List;
+
+import com.test.common.utils.DateUtils;
+import jakarta.annotation.Resource;
+import org.springframework.stereotype.Service;
+import com.test.test.mapper.TestGroupMapper;
+import com.test.test.domain.TestGroup;
+import com.test.test.service.ITestGroupService;
+
+/**
+ * 节点（文件夹）Service业务层处理
+ *
+ * @author xiaoe
+ */
+@Service
+public class TestGroupServiceImpl implements ITestGroupService {
+
+    @Resource
+    private TestGroupMapper testGroupMapper;
+
+    /**
+     * 查询节点（文件夹）列表
+     *
+     * @param type 节点类型
+     * @return 节点（文件夹）
+     */
+    @Override
+    public List<TestGroup> selectTestGroupList(String type) {
+        return testGroupMapper.selectTestGroupList(type);
+    }
+
+    /**
+     * 新增节点（文件夹）
+     *
+     * @param testGroup 节点（文件夹）
+     * @return 结果
+     */
+    @Override
+    public TestGroup insertTestGroup(TestGroup testGroup) {
+        testGroup.setCreateTime(DateUtils.getNowDate());
+        testGroupMapper.insertTestGroup(testGroup);
+        return testGroup;
+    }
+
+    /**
+     * 修改节点（文件夹）
+     *
+     * @param testGroup 节点（文件夹）
+     * @return 结果
+     */
+    @Override
+    public int updateTestGroup(TestGroup testGroup) {
+        testGroup.setUpdateTime(DateUtils.getNowDate());
+        return testGroupMapper.updateTestGroup(testGroup);
+    }
+
+    /**
+     * 删除节点（文件夹）信息
+     *
+     * @param id 节点（文件夹）主键
+     * @return 结果
+     */
+    @Override
+    public int deleteTestGroupById(Long id) {
+        return testGroupMapper.deleteTestGroupById(id);
+    }
+}

test-test/src/main/resources/mapper/test/TestGroupMapper.xml

@@ -1,12 +1,13 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <!DOCTYPE mapper
-PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
+        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
-"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
-<mapper namespace="com.test.test.mapper.TestApiGroupMapper">
+<mapper namespace="com.test.test.mapper.TestGroupMapper">
 
-    <resultMap type="TestApiGroup" id="TestApiGroupResult">
+    <resultMap type="TestGroup" id="TestGroupResult">
         <result property="id"    column="id"    />
         <result property="parentId"    column="parent_id"    />
+        <result property="type"    column="type"    />
         <result property="name"    column="name"    />
         <result property="delFlag"    column="del_flag"    />
         <result property="createBy"    column="create_by"    />
@@ -15,18 +16,27 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
         <result property="updateTime"    column="update_time"    />
     </resultMap>
 
-    <sql id="selectTestApiGroupVo">
+    <sql id="selectTestGroupVo">
-        select id, parent_id, name, del_flag, create_by, create_time, update_by, update_time from test_api_group
+        select id, parent_id, type, name, del_flag, create_by, create_time, update_by, update_time from test_group
     </sql>
 
-    <select id="selectTestApiGroupList" resultMap="TestApiGroupResult">
+    <select id="selectTestGroupList" parameterType="String" resultMap="TestGroupResult">
-        <include refid="selectTestApiGroupVo"/>
+        <include refid="selectTestGroupVo"/>
+        <where>
+            type = #{type}
+        </where>
     </select>
 
-    <insert id="insertTestApiGroup" parameterType="TestApiGroup" useGeneratedKeys="true" keyProperty="id">
+    <select id="selectTestGroupById" parameterType="Long" resultMap="TestGroupResult">
-        insert into test_api_group
+        <include refid="selectTestGroupVo"/>
+        where id = #{id}
+    </select>
+
+    <insert id="insertTestGroup" parameterType="TestGroup" useGeneratedKeys="true" keyProperty="id">
+        insert into test_group
         <trim prefix="(" suffix=")" suffixOverrides=",">
             <if test="parentId != null">parent_id,</if>
+            <if test="type != null">type,</if>
             <if test="name != null">name,</if>
             <if test="delFlag != null">del_flag,</if>
             <if test="createBy != null">create_by,</if>
@@ -36,6 +46,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
         </trim>
         <trim prefix="values (" suffix=")" suffixOverrides=",">
             <if test="parentId != null">#{parentId},</if>
+            <if test="type != null">#{type},</if>
             <if test="name != null">#{name},</if>
             <if test="delFlag != null">#{delFlag},</if>
             <if test="createBy != null">#{createBy},</if>
@@ -45,10 +56,11 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
         </trim>
     </insert>
 
-    <update id="updateTestApiGroup" parameterType="TestApiGroup">
+    <update id="updateTestGroup" parameterType="TestGroup">
-        update test_api_group
+        update test_group
         <trim prefix="SET" suffixOverrides=",">
             <if test="parentId != null">parent_id = #{parentId},</if>
+            <if test="type != null">type = #{type},</if>
             <if test="name != null">name = #{name},</if>
             <if test="delFlag != null">del_flag = #{delFlag},</if>
             <if test="createBy != null">create_by = #{createBy},</if>
@@ -59,7 +71,14 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
         where id = #{id}
     </update>
 
-    <delete id="deleteTestApiGroupById" parameterType="Long">
+    <delete id="deleteTestGroupById" parameterType="Long">
-        delete from test_api_group where id = #{id}
+        delete from test_group where id = #{id}
+    </delete>
+
+    <delete id="deleteTestGroupByIds" parameterType="String">
+        delete from test_group where id in
+        <foreach item="id" collection="array" open="(" separator="," close=")">
+            #{id}
+        </foreach>
     </delete>
 </mapper>

test-ui/src/api/test/api.js

@@ -44,39 +44,3 @@ export function delApi(id) {
     params: {id}
   })
 }
-
-
-// 查询接口节点列表
-export function listGroup() {
-  return request({
-    url: '/test/group/list',
-    method: 'get'
-  })
-}
-
-// 新增接口节点
-export function addGroup(data) {
-  return request({
-    url: '/test/group/add',
-    method: 'post',
-    data: data
-  })
-}
-
-// 修改接口节点
-export function updateGroup(data) {
-  return request({
-    url: '/test/group/edit',
-    method: 'post',
-    data: data
-  })
-}
-
-// 删除接口节点
-export function delGroup(id) {
-  return request({
-    url: '/test/group/del',
-    method: 'post',
-    data: {id}
-  })
-}

test-ui/src/api/test/group.js

@@ -0,0 +1,37 @@
+import request from '@/utils/request'
+
+// 查询节点列表
+export function listGroup(type) {
+  return request({
+    url: '/test/group/list',
+    method: 'get',
+    params: {type}
+  })
+}
+
+// 新增节点
+export function addGroup(data) {
+  return request({
+    url: '/test/group/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改节点
+export function updateGroup(data) {
+  return request({
+    url: '/test/group/edit',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除节点
+export function delGroup(id) {
+  return request({
+    url: '/test/group/del',
+    method: 'post',
+    data: {id}
+  })
+}

test-ui/src/components/FolderPage/index.vue

@@ -0,0 +1,239 @@
+<template>
+  <div class="app-container">
+    <el-container>
+      <el-aside>
+        <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="small" style="margin-bottom: 10px" clearable />
+        <el-tree class="filter-tree" :data="groupList" @node-click="nodeClick" node-key="id" highlight-current :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" :default-expanded-keys="[0]">
+          <span class="custom-tree-node" slot-scope="{ node, data }" v-if="groupState !== 'list' && editId === data.id">
+            <span>
+              <el-form ref="form" :model="form" :rules="rules">
+                <el-input v-model="form.name" placeholder="请输入节点名称" class="custom-tree-node-input"/>
+              </el-form>
+            </span>
+            <span>
+              <el-button type="text" size="mini"><i class="el-icon-check" @click="submitNode(node)"/></el-button>
+              <el-button type="text" size="mini"><i class="el-icon-close" @click="cancelNode(node)"/></el-button>
+            </span>
+          </span>
+          <span class="custom-tree-node" slot-scope="{ node, data }" v-else>
+            <span @click="nodeSelected(data)" style="width: 100%;">{{ node.label }}</span>
+            <span v-if="data.id === 0">
+              <el-button type="text" size="mini" @click="nodeAdd(node)"><i class="el-icon-plus"/></el-button>
+            </span>
+            <span class="custom-tree-node-option" v-else>
+              <el-button type="text" size="mini" @click="nodeAdd(node)"><i class="el-icon-plus"/></el-button>
+              <el-button type="text" size="mini"><i class="el-icon-edit" @click="nodeEdit(node)"/></el-button>
+              <el-button type="text" size="mini"><i class="el-icon-delete" @click="nodeDelete(node)"/></el-button>
+            </span>
+          </span>
+        </el-tree>
+      </el-aside>
+      <el-main>
+        <slot/>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import {addGroup, delGroup, listGroup, updateGroup} from "@/api/test/group";
+
+export default {
+  name: "FolderPage",
+  props: {
+    type: {
+      type: String,
+      required: true,
+      validator: function (value) {
+        return ['api', 'task', 'case'].includes(value)
+      }
+    }
+  },
+  data() {
+    return {
+      filterText: "",
+      groupList: [],
+      groupState: "list",
+      editId: null,
+      groupId: null,
+      form: {
+        name: null
+      },
+      rules: {
+        name: [
+          {required: true, message: "节点名不能为空", trigger: "blur"}
+        ],
+      },
+    };
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    },
+  },
+  created() {
+    this.getGroup();
+  },
+  methods: {
+    getGroup() {
+      this.groupList = [{
+        id: 0,
+        label: "",
+        children: []
+      }]
+      switch (this.type) {
+        case "api":
+          this.groupList[0].label = "接口管理";
+          break;
+        case "task":
+          this.groupList[0].label = "自动化测试管理";
+          break;
+        case "case":
+          this.groupList[0].label = "用例管理";
+          break;
+      }
+      listGroup(this.type).then(res => {
+        res.data.filter(item => item.parentId === 0).map(item => {
+          this.groupList[0].children.push({
+            id: item.id,
+            label: item.name,
+            children: this.getChild(res.data, item.id)
+          })
+        });
+        if (res.data && res.data.length > 0) {
+          this.groupId = res.data[0].id;
+          this.$refs.tree.setCurrentKey(this.groupId);
+          this.$emit('click', this.groupId);
+        }
+      })
+    },
+    getChild(data, parentId) {
+      return data.filter(item => item.parentId === parentId).map(item => {
+        return {
+          id: item.id,
+          label: item.name,
+          children: this.getChild(data, item.id)
+        }
+      });
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    nodeClick() {
+      this.$refs.tree.setCurrentKey(this.groupId);
+    },
+    nodeSelected(data) {
+      if (data.id > 0 && this.groupId !== data.id) {
+        this.groupId = data.id;
+        this.$emit('click', data.id);
+      } else {
+        this.$refs.tree.setCurrentKey(this.groupId);
+      }
+    },
+    nodeAdd(node) {
+      this.groupState = "add";
+      const newChild = {id: -1, label: '', children: []};
+      if (!node.data.children) {
+        this.$set(node.data, 'children', []);
+      }
+      node.data.children.push(newChild);
+      this.$refs.tree.store.nodesMap[node.data.id].expanded = true;
+      this.editId = -1;
+    },
+    nodeEdit(node) {
+      this.groupState = "edit";
+      this.editId = node.data.id;
+      this.form.name = node.label;
+    },
+    nodeDelete(node) {
+      this.$refs.tree.setCurrentKey(this.groupId);
+      if (node.data.children && node.data.children.length > 0) {
+        this.$message.error("包含子节点，无法删除")
+        return
+      }
+      this.$modal.confirm('是否确认删除？').then(function () {
+        return delGroup(node.data.id);
+      }).then(() => {
+        this.$modal.msgSuccess("删除成功");
+        this.$refs.tree.remove(node)
+      })
+    },
+    submitNode(node) {
+      this.$refs["form"].validate(valid => {
+        if (!valid) return
+        if (node.data.id === -1) {
+          addGroup({
+            parentId: node.parent.data.id,
+            type: this.type,
+            name: this.form.name,
+          }).then(res => {
+            this.$modal.msgSuccess("新增成功");
+            this.cancelNode();
+            this.getGroup();
+          });
+        } else {
+          updateGroup({
+            id: node.data.id,
+            name: this.form.name,
+          }).then(res => {
+            this.$modal.msgSuccess("修改成功");
+            node.data.label = this.form.name;
+            this.cancelNode();
+          });
+        }
+      });
+    },
+    cancelNode(node) {
+      if (node && node.data.id === -1) {
+        this.$refs.tree.remove(node);
+      }
+      this.groupState = "list";
+      this.editId = null;
+      this.form = {
+        name: null,
+      };
+      this.resetForm("form");
+    },
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.el-aside {
+  padding: 20px 0 0;
+}
+
+.custom-tree-node-input {
+  ::v-deep .el-input__inner {
+    height: 24px;
+    line-height: 24px;
+    font-size: 12px;
+  }
+}
+
+.el-container {
+  height: calc(100vh - 124px);
+}
+
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+
+.el-tree-node__content {
+  .custom-tree-node-option {
+    display: none;
+  }
+
+  &:hover {
+    .custom-tree-node-option {
+      display: unset;
+    }
+  }
+}
+</style>

test-ui/src/views/test/api/index.vue

@@ -1,80 +1,51 @@
 <template>
-  <div class="app-container">
+  <folder-page type="api" @click="nodeSelected">
-    <el-container>
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-aside>
+      <el-form-item label="接口名称" prop="name">
-        <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="small" style="margin-bottom: 10px"/>
+        <el-input v-model="queryParams.name" placeholder="请输入接口名称" clearable @keyup.enter.native="handleQuery"/>
-        <el-tree class="filter-tree" :data="groupList" @node-click="nodeClick" node-key="id" highlight-current :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" :default-expanded-keys="[0]">
+      </el-form-item>
-          <span class="custom-tree-node" slot-scope="{ node, data }" v-if="groupState !== 'list' && editId === data.id">
+      <el-form-item label="请求类型" prop="method">
-            <span>
+        <el-select v-model="queryParams.method" placeholder="请输入接口请求类型" clearable @keyup.enter.native="handleQuery">
-              <el-form ref="form" :model="form" :rules="rules">
+          <el-option v-for="dict in dict.type.http_method" :key="dict.value" :label="dict.label" :value="dict.value"/>
-                <el-input v-model="form.name" placeholder="请输入节点名称" class="custom-tree-node-input"/>
+        </el-select>
-              </el-form>
+      </el-form-item>
-            </span>
+      <el-form-item label="接口路径" prop="uri">
-            <span>
+        <el-input v-model="queryParams.uri" placeholder="请输入接口路径" clearable @keyup.enter.native="handleQuery"/>
-              <el-button type="text" size="mini"><i class="el-icon-check" @click="submitNode(node)"/></el-button>
+      </el-form-item>
-              <el-button type="text" size="mini"><i class="el-icon-close" @click="cancelNode(node)"/></el-button>
+      <el-form-item>
-            </span>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-          </span>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-          <span class="custom-tree-node" slot-scope="{ node, data }" v-else>
+      </el-form-item>
-            <span @click="nodeSelected(data)" style="width: 100%;">{{ node.label }}</span>
+    </el-form>
-            <span v-if="data.id === 0">
+    <el-row :gutter="10" class="mb8">
-              <el-button type="text" size="mini" @click="nodeAdd(node)"><i class="el-icon-plus"/></el-button>
+      <el-col :span="1.5">
-            </span>
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
-            <span class="custom-tree-node-option" v-else>
+      </el-col>
-              <el-button type="text" size="mini" @click="nodeAdd(node)"><i class="el-icon-plus"/></el-button>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-              <el-button type="text" size="mini"><i class="el-icon-edit" @click="nodeEdit(node)"/></el-button>
+    </el-row>
-              <el-button type="text" size="mini"><i class="el-icon-delete" @click="nodeDelete(node)"/></el-button>
+    <el-table v-loading="loading" :data="apiList">
-            </span>
+      <el-table-column label="接口名称" align="center" prop="name"/>
-          </span>
+      <el-table-column label="接口请求类型" align="center" prop="method"/>
-        </el-tree>
+      <el-table-column label="接口路径" align="center" prop="uri"/>
-      </el-aside>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-      <el-main>
+        <template slot-scope="scope">
-        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
-          <el-form-item label="接口名称" prop="name">
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
-            <el-input v-model="queryParams.name" placeholder="请输入接口名称" clearable @keyup.enter.native="handleQuery"/>
+        </template>
-          </el-form-item>
+      </el-table-column>
-          <el-form-item label="请求类型" prop="method">
+    </el-table>
-            <el-select v-model="queryParams.method" placeholder="请输入接口请求类型" clearable @keyup.enter.native="handleQuery">
-              <el-option v-for="dict in dict.type.http_method" :key="dict.value" :label="dict.label" :value="dict.value"/>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="接口路径" prop="uri">
-            <el-input v-model="queryParams.uri" placeholder="请输入接口路径" clearable @keyup.enter.native="handleQuery"/>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-          </el-form-item>
-        </el-form>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
-          </el-col>
-          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-        </el-row>
-        <el-table v-loading="loading" :data="apiList">
-          <el-table-column label="接口名称" align="center" prop="name"/>
-          <el-table-column label="接口请求类型" align="center" prop="method"/>
-          <el-table-column label="接口路径" align="center" prop="uri"/>
-          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-            <template slot-scope="scope">
-              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
-              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
 
-        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
-      </el-main>
+  </folder-page>
-    </el-container>
-  </div>
 </template>
 
 <script>
-import {listApi, delApi, listGroup, delGroup, addGroup, updateGroup} from "@/api/test/api";
+import {listApi, delApi} from "@/api/test/api";
+import FolderPage from "@/components/FolderPage/index.vue";
 
 export default {
   name: "Api",
+  components: {FolderPage},
   dicts: ['http_method'],
   data() {
     return {
@@ -86,7 +57,7 @@ export default {
       }],
       groupState: "list",
       editId: null,
-      loading: true,
+      loading: false,
       showSearch: true,
       total: 0,
       apiList: [],
@@ -113,116 +84,10 @@ export default {
       this.$refs.tree.filter(val);
     }
   },
-  created() {
-    this.getGroup();
-  },
   methods: {
-    getGroup() {
+    nodeSelected(id) {
-      listGroup().then(res => {
+      this.queryParams.groupId = id;
-        let child = []
+      this.getList();
-        res.data.filter(item => item.parentId === 0).map(item => {
-          child.push({
-            id: item.id,
-            label: item.name,
-            children: this.getChild(res.data, item.id)
-          })
-        });
-        this.groupList[0].children = child;
-        this.queryParams.groupId = res.data[0].id;
-        this.nodeClick();
-        this.getList();
-      })
-    },
-    getChild(data, parentId) {
-      return data.filter(item => item.parentId === parentId).map(item => {
-        return {
-          id: item.id,
-          label: item.name,
-          children: this.getChild(data, item.id)
-        }
-      });
-    },
-    filterNode(value, data) {
-      if (!value) return true;
-      return data.label.indexOf(value) !== -1;
-    },
-    nodeClick() {
-      this.$refs.tree.setCurrentKey(this.queryParams.groupId);
-    },
-    nodeSelected(data) {
-      if (data.id > 0 && this.queryParams.groupId !== data.id) {
-        this.queryParams.groupId = data.id;
-        this.getList();
-      } else {
-        this.$refs.tree.setCurrentKey(this.queryParams.groupId);
-      }
-    },
-    nodeAdd(node) {
-      this.groupState = "add";
-      const newChild = {id: -1, label: '', children: []};
-      if (!node.data.children) {
-        this.$set(node.data, 'children', []);
-      }
-      node.data.children.push(newChild);
-      this.$refs.tree.store.nodesMap[node.id].expanded = true;
-      this.editId = -1;
-    },
-    nodeEdit(node) {
-      this.groupState = "edit";
-      this.editId = node.data.id;
-      this.form.name = node.label;
-    },
-    nodeDelete(node) {
-      this.$refs.tree.setCurrentKey(this.queryParams.groupId);
-      if (node.data.children && node.data.children.length > 0) {
-        this.$message.error("包含子节点，无法删除")
-        return
-      }
-      this.$modal.confirm('是否确认删除？').then(function () {
-        return delGroup(node.data.id);
-      }).then(() => {
-        this.$modal.msgSuccess("删除成功");
-        this.$refs.tree.remove(node)
-      })
-    },
-    submitNode(node) {
-      this.$refs["form"].validate(valid => {
-        if (!valid) return
-        if (node.data.id === -1) {
-          addGroup({
-            parentId: node.parent.data.id,
-            name: this.form.name,
-          }).then(res => {
-            this.$modal.msgSuccess("新增成功");
-            node.data = {
-              id: res.data.id,
-              label: res.data.name,
-              children: []
-            }
-            this.cancelNode();
-          });
-        } else {
-          updateGroup({
-            id: node.data.id,
-            name: this.form.name,
-          }).then(res => {
-            this.$modal.msgSuccess("修改成功");
-            node.data.label = this.form.name
-            this.cancelNode();
-          });
-        }
-      });
-    },
-    cancelNode(node) {
-      if (node && node.data.id === -1) {
-        this.$refs.tree.remove(node);
-      }
-      this.groupState = "list";
-      this.editId = null;
-      this.form = {
-        name: null,
-      };
-      this.resetForm("form");
     },
     /** 查询接口列表 */
     getList() {
@@ -266,40 +131,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.custom-tree-node-input {
-  ::v-deep .el-input__inner {
-    height: 24px;
-    line-height: 24px;
-    font-size: 12px;
-  }
-}
-
-.el-container {
-  height: calc(100vh - 124px);
-}
-
-.custom-tree-node {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 14px;
-  padding-right: 8px;
-}
-
 .el-aside {
   padding: 20px 0 0;
 }
-
-.el-tree-node__content {
-  .custom-tree-node-option {
-    display: none;
-  }
-
-  &:hover {
-    .custom-tree-node-option {
-      display: unset;
-    }
-  }
-}
 </style>