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

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>

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

@@ -1,80 +1,51 @@
<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>
<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"/>
</el-form-item>
<el-form-item label="请求类型" prop="method">
<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>
<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"/>
</el-form-item>
<el-form-item label="请求类型" prop="method">
<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"/>
</el-main>
</el-container>
</div>
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
</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();
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");
nodeSelected(id) {
this.queryParams.groupId = id;
this.getList();
},
/** 查询接口列表 */
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>