feat: 完成菜单权限管理api
This commit is contained in:
parent
7dc783a27a
commit
5b5f0638b3
@ -5,12 +5,21 @@ const fix = "/menu";
|
||||
const url = {
|
||||
insert: `${fix}/insert`, // 分页查询
|
||||
tree: `${fix}/tree`, // 查询菜单
|
||||
update: `${fix}/update`, // 修改菜单
|
||||
delete: `${fix}/delete`, // 删除菜单
|
||||
};
|
||||
|
||||
export const insertMenu = (params: Object) => {
|
||||
return post(url.insert, params);
|
||||
};
|
||||
|
||||
export const getTree = () => {
|
||||
export const getMenuTree = () => {
|
||||
return get(url.tree);
|
||||
};
|
||||
|
||||
export const updateMenu = (params: Object) => {
|
||||
return post(url.update, params);
|
||||
};
|
||||
export const deleteMenu = (params: Object) => {
|
||||
return post(url.delete, params);
|
||||
};
|
||||
|
||||
@ -11,6 +11,7 @@ import {
|
||||
NText,
|
||||
NTime,
|
||||
NEllipsis,
|
||||
NPopconfirm,
|
||||
NConfigProvider,
|
||||
NMessageProvider,
|
||||
NDialogProvider,
|
||||
@ -113,6 +114,7 @@ const naive = create({
|
||||
NText,
|
||||
NTime,
|
||||
NEllipsis,
|
||||
NPopconfirm,
|
||||
NMessageProvider,
|
||||
NDialogProvider,
|
||||
NConfigProvider,
|
||||
|
||||
@ -150,8 +150,6 @@ const state = reactive({
|
||||
placement: "right" as const,
|
||||
});
|
||||
|
||||
console.log(state.formParams, "123");
|
||||
|
||||
const openDrawer = () => {
|
||||
state.isDrawer = true;
|
||||
};
|
||||
|
||||
@ -62,8 +62,6 @@
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- label-field="name"
|
||||
key-field="path" -->
|
||||
<n-tree
|
||||
block-line
|
||||
cascade
|
||||
@ -135,48 +133,52 @@
|
||||
v-model:value="formParams.meta.icon"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="嵌套地址" path="subtitle">
|
||||
<n-input
|
||||
placeholder="请输入组件名称"
|
||||
v-model:value="formParams.meta.frameSrc"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="固定" path="subtitle">
|
||||
<n-input
|
||||
placeholder="请输入组件名称"
|
||||
v-model:value="formParams.meta.affix"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="是否根路由" path="subtitle">
|
||||
<n-input
|
||||
placeholder="请输入组件名称"
|
||||
v-model:value="formParams.meta.isRoot"
|
||||
/>
|
||||
<n-form-item label="是否禁用" path="subtitle">
|
||||
<n-switch v-model:value="formParams.meta.disabled">
|
||||
<template #checked> 启用 </template>
|
||||
<template #unchecked> 禁用 </template>
|
||||
</n-switch>
|
||||
</n-form-item>
|
||||
<n-form-item label="是否缓存" path="subtitle">
|
||||
<n-input
|
||||
placeholder="请输入组件名称"
|
||||
v-model:value="formParams.meta.keepAlive"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="是否禁用" path="subtitle">
|
||||
<n-input
|
||||
placeholder="请输入组件名称"
|
||||
v-model:value="formParams.meta.disabled"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="计算根路由" path="subtitle">
|
||||
<n-input
|
||||
placeholder="请输入组件名称"
|
||||
v-model:value="formParams.meta.alwaysShow"
|
||||
/>
|
||||
<n-switch v-model:value="formParams.meta.keepAlive">
|
||||
<template #checked> 缓存页面 </template>
|
||||
<template #unchecked> 释放页面 </template>
|
||||
</n-switch>
|
||||
</n-form-item>
|
||||
<n-form-item label="是否隐藏" path="subtitle">
|
||||
<n-input
|
||||
placeholder="请输入组件名称"
|
||||
v-model:value="formParams.meta.hidden"
|
||||
/>
|
||||
<n-switch v-model:value="formParams.meta.hidden">
|
||||
<template #checked> 显示菜单 </template>
|
||||
<template #unchecked> 隐藏菜单 </template>
|
||||
</n-switch>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="是否固定" path="subtitle">
|
||||
<n-switch v-model:value="formParams.meta.affix">
|
||||
<template #checked> 多页签不可删除 </template>
|
||||
<template #unchecked>多页签可删除 </template>
|
||||
</n-switch>
|
||||
</n-form-item>
|
||||
<n-form-item label="是否根路由" path="subtitle">
|
||||
<n-switch v-model:value="formParams.meta.isRoot">
|
||||
<template #checked> 顶部混合菜单，必须开启 </template>
|
||||
<template #unchecked>侧边栏非必须 </template>
|
||||
</n-switch>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="计算根路由" path="subtitle">
|
||||
<n-switch v-model:value="formParams.meta.alwaysShow">
|
||||
<template #checked> 自动计算根路由模式 </template>
|
||||
<template #unchecked> 禁用自动计算根路由模式 </template>
|
||||
</n-switch>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="高亮菜单" path="subtitle">
|
||||
<n-input
|
||||
placeholder="请输入组件名称"
|
||||
@ -193,7 +195,7 @@
|
||||
|
||||
<n-form-item label="排序" path="auth">
|
||||
<n-input
|
||||
placeholder="请输入权限，多个权限用，分割"
|
||||
placeholder="请输入展示顺序"
|
||||
v-model:value="formParams.meta.sort"
|
||||
/>
|
||||
</n-form-item>
|
||||
@ -206,7 +208,12 @@
|
||||
>保存修改</n-button
|
||||
>
|
||||
<n-button @click="handleReset">重置</n-button>
|
||||
<n-button @click="handleDel">删除</n-button>
|
||||
<n-popconfirm @positive-click="handleDel">
|
||||
<template #trigger>
|
||||
<n-button>删除</n-button>
|
||||
</template>
|
||||
确定删除吗?
|
||||
</n-popconfirm>
|
||||
</n-space>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
@ -229,7 +236,7 @@ import {
|
||||
} from "@vicons/antd";
|
||||
import { getTreeItem } from "@/utils";
|
||||
import CreateDrawer from "./CreateDrawer.vue";
|
||||
import { getTree } from "@/api/system/menu";
|
||||
import { getMenuTree, updateMenu, deleteMenu } from "@/api/system/menu";
|
||||
interface TreeNode {
|
||||
key: string;
|
||||
children?: TreeNode[];
|
||||
@ -305,26 +312,23 @@ const formParams = reactive({
|
||||
},
|
||||
});
|
||||
|
||||
function selectAddMenu(key: string) {
|
||||
const selectAddMenu = (key: string) => {
|
||||
drawerTitle.value =
|
||||
key === "home" ? "添加顶栏菜单" : `添加子菜单：${treeItemTitle.value}`;
|
||||
openCreateDrawer();
|
||||
}
|
||||
};
|
||||
|
||||
function openCreateDrawer() {
|
||||
const openCreateDrawer = () => {
|
||||
createDrawerRef.value.openDrawer();
|
||||
}
|
||||
};
|
||||
|
||||
function selectedTree(keys) {
|
||||
const selectedTree = (keys) => {
|
||||
if (keys.length) {
|
||||
const treeItem = getTreeItem(unref(treeData), keys[0]);
|
||||
|
||||
treeItemKey.value = keys;
|
||||
treeItemTitle.value = treeItem.label;
|
||||
parentId.value = treeItem.id;
|
||||
Object.assign(formParams, treeItem);
|
||||
console.log(formParams);
|
||||
|
||||
isEditMenu.value = true;
|
||||
} else {
|
||||
isEditMenu.value = false;
|
||||
@ -332,25 +336,30 @@ function selectedTree(keys) {
|
||||
treeItemTitle.value = "";
|
||||
formParams.parentId = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function handleDel() {}
|
||||
const handleDel = async () => {
|
||||
const res = await deleteMenu({ id: formParams.id });
|
||||
if (res.status) window["$message"].success("删除成功!");
|
||||
getMenuTreeApi();
|
||||
};
|
||||
|
||||
function handleReset() {
|
||||
const handleReset = () => {
|
||||
const treeItem = getTreeItem(unref(treeData), treeItemKey.value[0]);
|
||||
Object.assign(formParams, treeItem);
|
||||
}
|
||||
};
|
||||
|
||||
function formSubmit() {
|
||||
formRef.value.validate((errors: boolean) => {
|
||||
const formSubmit = () => {
|
||||
formRef.value.validate(async (errors: boolean) => {
|
||||
if (!errors) {
|
||||
console.log(formParams);
|
||||
} else {
|
||||
const res = await updateMenu(formParams);
|
||||
if (res.status) window["$message"].success("修改成功");
|
||||
getMenuTreeApi();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function packHandle() {
|
||||
const packHandle = () => {
|
||||
if (expandedKeys.value.length) {
|
||||
expandedKeys.value = [];
|
||||
} else {
|
||||
@ -358,18 +367,18 @@ function packHandle() {
|
||||
(item: any) => item.key as string
|
||||
) as [];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function mapTreeData(data) {
|
||||
const mapTreeData = (data) => {
|
||||
return data.map((ele) => ({
|
||||
...ele,
|
||||
key: ele.name,
|
||||
label: ele.meta.title,
|
||||
children: ele.children ? mapTreeData(ele.children) : undefined,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
function getKeys(data: TreeNode[]): string[] {
|
||||
const getKeys = (data: TreeNode[]): string[] => {
|
||||
const keys: string[] = [];
|
||||
|
||||
function extractKeys(node: TreeNode) {
|
||||
@ -381,24 +390,26 @@ function getKeys(data: TreeNode[]): string[] {
|
||||
|
||||
data.forEach(extractKeys);
|
||||
return keys;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
const getMenuTreeApi = async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
const treeMenuList = await getTree();
|
||||
const treeMenuList = await getMenuTree();
|
||||
const res = mapTreeData(treeMenuList.data);
|
||||
|
||||
Object.assign(formParams, getKeys(res));
|
||||
treeData.value = res;
|
||||
|
||||
console.log(treeData.value);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getMenuTreeApi();
|
||||
});
|
||||
|
||||
function onExpandedKeys(keys) {
|
||||
const onExpandedKeys = (keys) => {
|
||||
expandedKeys.value = keys;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user