feat: 完成菜单权限管理api

src/api/system/menu.ts

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

src/plugins/naive.ts

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

src/views/system/menu/CreateDrawer.vue

@@ -150,8 +150,6 @@ const state = reactive({
   placement: "right" as const,
 });
 
-console.log(state.formParams, "123");
-
 const openDrawer = () => {
   state.isDrawer = true;
 };

src/views/system/menu/menu.vue

@@ -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-form-item label="是否禁用" path="subtitle">
-              <n-input
+              <n-switch v-model:value="formParams.meta.disabled">
-                placeholder="请输入组件名称"
+                <template #checked> 启用 </template>
-                v-model:value="formParams.meta.affix"
+                <template #unchecked> 禁用 </template>
-              />
+              </n-switch>
-            </n-form-item>
-            <n-form-item label="是否根路由" path="subtitle">
-              <n-input
-                placeholder="请输入组件名称"
-                v-model:value="formParams.meta.isRoot"
-              />
             </n-form-item>
             <n-form-item label="是否缓存" path="subtitle">
-              <n-input
+              <n-switch v-model:value="formParams.meta.keepAlive">
-                placeholder="请输入组件名称"
+                <template #checked> 缓存页面 </template>
-                v-model:value="formParams.meta.keepAlive"
+                <template #unchecked> 释放页面 </template>
-              />
+              </n-switch>
-            </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-form-item>
             <n-form-item label="是否隐藏" path="subtitle">
-              <n-input
+              <n-switch v-model:value="formParams.meta.hidden">
-                placeholder="请输入组件名称"
+                <template #checked> 显示菜单 </template>
-                v-model:value="formParams.meta.hidden"
+                <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() {
+const formSubmit = () => {
-  formRef.value.validate((errors: boolean) => {
+  formRef.value.validate(async (errors: boolean) => {
     if (!errors) {
-      console.log(formParams);
+      const res = await updateMenu(formParams);
-    } else {
+      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>