xiaoe/test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

文件夹管理重构

Browse Source
This commit is contained in:
赵昱涵
2025-02-12 14:01:27 +08:00
parent c8a854d89d
commit 977722f2c2
14 changed files with 585 additions and 490 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
test-test/src/main/java/com/test/test/controller/TestApiGroupController.java
View File

@@ -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()));
}
}

56
test-test/src/main/java/com/test/test/controller/TestGroupController.java Normal file
View File

@@ -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()));
}
}

9
test-test/src/main/java/com/test/test/domain/TestApiGroup.java → test-test/src/main/java/com/test/test/domain/TestGroup.java
View File

@@ -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;
}

43
test-test/src/main/java/com/test/test/mapper/TestApiGroupMapper.java
View File

@@ -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);
}

54
test-test/src/main/java/com/test/test/mapper/TestGroupMapper.java Normal file
View File

@@ -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);
}

44
test-test/src/main/java/com/test/test/service/ITestApiGroupService.java
View File

@@ -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);
}

44
test-test/src/main/java/com/test/test/service/ITestGroupService.java Normal file
View File

@@ -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);
}

72
test-test/src/main/java/com/test/test/service/impl/TestApiGroupServiceImpl.java
View File

@@ -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);
}
}

69
test-test/src/main/java/com/test/test/service/impl/TestGroupServiceImpl.java Normal file
View File

@@ -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);
}
}

47
test-test/src/main/resources/mapper/test/TestApiGroupMapper.xml → test-test/src/main/resources/mapper/test/TestGroupMapper.xml
View File

@@ -1,12 +1,13 @@
<?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="com.test.test.mapper.TestApiGroupMapper">
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<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">
select id, parent_id, name, del_flag, create_by, create_time, update_by, update_time from test_api_group
<sql id="selectTestGroupVo">
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">
<include refid="selectTestApiGroupVo"/>
<select id="selectTestGroupList" parameterType="String" resultMap="TestGroupResult">
<include refid="selectTestGroupVo"/>
<where>
type = #{type}
</where>
</select>
<insert id="insertTestApiGroup" parameterType="TestApiGroup" useGeneratedKeys="true" keyProperty="id">
insert into test_api_group
<select id="selectTestGroupById" parameterType="Long" resultMap="TestGroupResult">
<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 test_api_group
<update id="updateTestGroup" parameterType="TestGroup">
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 from test_api_group where id = #{id}
<delete id="deleteTestGroupById" parameterType="Long">
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>

36
test-ui/src/api/test/api.js
View File

@@ -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}
})
}

37
test-ui/src/api/test/group.js Normal file
View File

@@ -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}
})
}

239
test-ui/src/components/FolderPage/index.vue Normal file
View File

@@ -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>

184
test-ui/src/views/test/api/index.vue
View File

@@ -1,34 +1,5 @@
<template>
<div class="app-container">
<el-container>
<el-aside>
<el-input placeholder="输入关键字进行过滤" v-model="filterText" size="small" style="margin-bottom: 10px"/>
<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>
<folder-page type="api" @click="nodeSelected">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="接口名称" prop="name">
<el-input v-model="queryParams.name" placeholder="请输入接口名称" clearable @keyup.enter.native="handleQuery"/>
@@ -65,16 +36,16 @@
</el-table>
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
</el-main>
</el-container>
</div>
</folder-page>
</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() {
listGroup().then(res => {
let child = []
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();
nodeSelected(id) {
this.queryParams.groupId = id;
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>