文件夹管理重构
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user