feat: 完成权限管理页面对接

mock/disaster-control/table.ts

@@ -65,7 +65,7 @@ const disasterList = [
 
 export default [
   {
-    url: '/eye_api_bak/api/admin/disaster/getDisasterList',
+    url: '/safety_api/api/admin/disaster/getDisasterList',
     timeout: 1000,
     method: 'get',
     response: () => {

src/api/system/permission.ts

@@ -0,0 +1,54 @@
+import { http } from '@/utils/http/axios';
+import { PermissionTree, PermissionItem } from '@/types/permission/type';
+
+/**
+ * 获取整个功能权限树
+ */
+export function getPermissionTree() {
+  return http.request<PermissionTree>({
+    url: '/admin/perm/queryAllPermissionTree',
+    method: 'post',
+  });
+}
+
+/**
+ * 获取当前用户拥有的功能权限树
+ */
+export function getOwnedPermissionTree() {
+  return http.request<PermissionTree>({
+    url: '/admin/perm/queryOwnedPermissionTree',
+    method: 'post',
+  });
+}
+
+/**
+ * 添加权限
+ */
+export function addPermission(data: PermissionItem) {
+  return http.request({
+    url: '/admin/perm/savePermission',
+    method: 'POST',
+    data,
+  });
+}
+
+/**
+ * 修改权限
+ */
+export function updatePermission(data: PermissionItem) {
+  return http.request({
+    url: '/admin/perm/updatePermission',
+    method: 'POST',
+    data,
+  });
+}
+
+/**
+ * 删除权限
+ */
+export function deletePermission(permissionId: number) {
+  return http.request({
+    url: `/admin/perm/deletePermission?permId=${permissionId}`,
+    method: 'POST',
+  });
+}

src/constant/nav.ts

@@ -39,12 +39,10 @@ export const NAV_LIST = [
   },
   {
     path: '/disaster-prevention',
-    component: 'MENU_LAYOUT',
     meta: {
       title: '灾害防范',
     },
     name: 'DisasterPrevention',
-    parentId: -1,
   },
   {
     name: '',
@@ -68,11 +66,10 @@ export const NAV_LIST = [
     },
   },
   {
-    name: 'System',
-    path: '/system',
-    component: 'MENU_LAYOUT',
+    name: 'Platform',
+    path: '/platform',
     meta: {
-      title: '系统设置',
+      title: '平台管理',
     },
   },
 ];

src/layout/MenuLayout.vue

@@ -4,16 +4,16 @@
     <aside class="aside">
       <el-menu :default-active="selectedKeys" :default-openeds="openKeys" router class="el-menu-vertical">
         <template v-for="item in subMenus" :key="item.name">
-          <el-sub-menu v-if="item.children" :index="item.name">
+          <el-sub-menu v-if="item.children" :index="item.path">
             <template #title>
               <component v-if="item.meta?.icon" :is="item.meta.icon" />
               <span class="menu-title">{{ item.meta?.title }}</span>
             </template>
-            <el-menu-item v-for="child in item.children" :key="child.name" :index="child.name">
+            <el-menu-item v-for="child in item.children" :key="child.name" :index="child.path">
               {{ child.meta?.title }}
             </el-menu-item>
           </el-sub-menu>
-          <el-menu-item v-else :index="item.name">
+          <el-menu-item v-else :index="item.path">
             <!-- <SvgIcon icon-name="overview" /> -->
             <component v-if="item.meta?.icon" :is="item.meta?.icon" />
             <span class="menu-title">
@@ -36,7 +36,7 @@
   // 当前路由
   const currentRoute = useRoute();
   const activeMenu = currentRoute.meta?.activeMenu || null; // activeMenu undefined，null 或 空字符串，统一变为 null。
-  const selectedKeys = ref<string>((activeMenu ?? currentRoute.name) as string);
+  const selectedKeys = ref<string>((activeMenu ?? currentRoute.path) as string);
 
   const openKeys = ref<string[]>([]);
 
@@ -68,7 +68,7 @@
       const matched = currentRoute.matched;
       openKeys.value = matched.map((item) => item.name) as string[];
       const activeMenu: string = (currentRoute.meta?.activeMenu as string) || '';
-      selectedKeys.value = activeMenu ? activeMenu : (currentRoute.name as string);
+      selectedKeys.value = activeMenu ? activeMenu : (currentRoute.path as string);
     },
   );
 </script>

src/router/full-routes.ts

@@ -50,7 +50,7 @@ export const disasterPreventionRoute = {
         query: '',
         title: '总览',
       },
-      name: '/disaster-prevention/overview',
+      name: 'disaster-prevention-overview',
       parentId: 1022,
       path: 'overview',
       redirect: '',
@@ -70,7 +70,7 @@ export const disasterPreventionRoute = {
         query: '',
         title: '重点区域监测',
       },
-      name: '/disaster-prevention/risk-point-monitoring',
+      name: 'risk-point-monitoring',
       parentId: 1022,
       path: 'risk-point-monitoring',
       redirect: '',
@@ -92,7 +92,7 @@ export const disasterPreventionRoute = {
             query: '',
             title: '预警信息',
           },
-          name: '/disaster-prevention/disaster-warning/warning-info',
+          name: 'disaster-warning/warning-info',
           parentId: 1027,
           path: 'warning-info',
           redirect: '',
@@ -112,7 +112,7 @@ export const disasterPreventionRoute = {
             query: '',
             title: '防御通知',
           },
-          name: '/disaster-prevention/disaster-warning/defense-notice',
+          name: 'disaster-warning/defense-notice',
           parentId: 1027,
           path: 'defense-notice',
           redirect: '',
@@ -132,7 +132,7 @@ export const disasterPreventionRoute = {
             query: '',
             title: '防御通知详情',
           },
-          name: '/disaster-prevention/disaster-warning/defense-notice-item',
+          name: 'defense-notice-item',
           parentId: 1027,
           path: 'defense-notice-item',
           redirect: '',
@@ -152,7 +152,7 @@ export const disasterPreventionRoute = {
         query: '',
         title: '灾害预警',
       },
-      name: '/disaster-prevention/disaster-warning',
+      name: 'disaster-warning',
       parentId: 1022,
       path: 'disaster-warning',
       redirect: '',
@@ -174,7 +174,7 @@ export const disasterPreventionRoute = {
             query: '',
             title: '任务管理',
           },
-          name: '/disaster-prevention/disaster-precaution/task-management',
+          name: 'disaster-precaution-task-management',
           parentId: 1028,
           path: 'task-management',
           redirect: '',
@@ -194,7 +194,7 @@ export const disasterPreventionRoute = {
             query: '',
             title: '任务列表详情',
           },
-          name: '/disaster-prevention/disaster-precaution/task-item',
+          name: 'disaster-precaution-task-item',
           parentId: 1028,
           path: 'task-item',
           redirect: '',
@@ -214,7 +214,7 @@ export const disasterPreventionRoute = {
             query: '',
             title: '任务执行',
           },
-          name: '/disaster-prevention/disaster-precaution/task-execution',
+          name: 'disaster-precaution-task-execution',
           parentId: 1028,
           path: 'task-execution',
           redirect: '',
@@ -234,7 +234,7 @@ export const disasterPreventionRoute = {
             query: '',
             title: '任务模板',
           },
-          name: '/disaster-prevention/disaster-precaution/task-template',
+          name: 'disaster-precaution-task-template',
           parentId: 1028,
           path: 'task-template',
           redirect: '',
@@ -254,7 +254,7 @@ export const disasterPreventionRoute = {
             query: '',
             title: '任务模板详情',
           },
-          name: '/disaster-prevention/disaster-precaution/template-detail',
+          name: 'disaster-precaution-template-detail',
           parentId: 1028,
           path: 'template-detail/:id',
           redirect: '',
@@ -277,7 +277,7 @@ export const disasterPreventionRoute = {
         // DisasterWarningIcon: renderSvg('disaster-warning'),
         // DisasterControlIcon: renderSvg('disaster-control'),
       },
-      name: '/disaster-prevention/disaster-precaution',
+      name: 'disaster-precaution',
       parentId: 1022,
       path: 'disaster-precaution',
       redirect: '',
@@ -297,7 +297,7 @@ export const disasterPreventionRoute = {
         query: '',
         title: '灾害处置',
       },
-      name: '/disaster-prevention/disaster-control',
+      name: 'disaster-control',
       parentId: 1022,
       path: 'disaster-control',
       redirect: '',
@@ -379,103 +379,155 @@ export const userRoutes: AppRouteRecordRaw =
     ],
   };
 
-export const systemRoutes =
-  /**
-   * 系统管理 （只有超管可见）
-   */
-  {
-    path: '/system',
-    name: 'System',
-    component: 'MENU_LAYOUT',
-    meta: {
-      icon: 'OptionsSharp',
-      title: '系统管理',
-    },
-    redirect: 'SystemMenu',
-    children: [
-      {
-        // 租户管理
-        path: 'tenant',
-        name: 'SystemTenant',
-        component: '/system/tenant/tenant',
-        meta: {
-          icon: '',
-          title: '租户管理',
-        },
-      },
-      {
-        // 菜单管理
-        path: 'menu',
-        name: 'SystemMenu',
-        component: '/system/menu/menu',
-        meta: {
-          icon: '',
-          title: '菜单管理',
-        },
-      },
-      {
-        // 权限管理
-        path: 'permission',
-        name: 'SystemPermission',
-        component: '/system/permssion/PagePermission',
-        meta: {
-          icon: '',
-          title: '权限管理',
-        },
-      },
-      {
-        // 权限管理
-        path: 'comments',
-        name: 'SystemComments',
-        component: '/system/comments/PageCommentsManage',
-        meta: {
-          icon: '',
-          title: '评论管理',
-        },
+// export const systemRoutesOld =
+//   /**
+//    * 系统管理 （只有超管可见）
+//    */
+//   {
+//     path: '/system',
+//     name: 'System',
+//     component: 'MENU_LAYOUT',
+//     meta: {
+//       icon: 'OptionsSharp',
+//       title: '系统管理',
+//     },
+//     redirect: 'SystemMenu',
+//     children: [
+//       {
+//         // 租户管理
+//         path: 'tenant',
+//         name: 'SystemTenant',
+//         component: '/system/tenant/tenant',
+//         meta: {
+//           icon: '',
+//           title: '租户管理',
+//         },
+//       },
+//       {
+//         // 菜单管理
+//         path: 'menu',
+//         name: 'SystemMenu',
+//         component: '/system/menu/menu',
+//         meta: {
+//           icon: '',
+//           title: '菜单管理',
+//         },
+//       },
+//       {
+//         // 权限管理
+//         path: 'permission',
+//         name: 'SystemPermission',
+//         component: '/system/permssion/PagePermission',
+//         meta: {
+//           icon: '',
+//           title: '权限管理',
+//         },
+//       },
+//       {
+//         // 权限管理
+//         path: 'comments',
+//         name: 'SystemComments',
+//         component: '/system/comments/PageCommentsManage',
+//         meta: {
+//           icon: '',
+//           title: '评论管理',
+//         },
+//       },
+//       {
+//         // 意见反馈
+//         path: 'feedback',
+//         name: 'SystemFeedback',
+//         component: '/feedback/feedback',
+//         meta: {
+//           icon: '',
+//           title: '意见反馈',
+//         },
+//       },
+//       {
+//         // 反馈处理 。意见反馈的二级页面。菜单不可见！！！
+//         path: 'feedback-handle',
+//         name: 'SystemFeedbackHandle',
+//         component: '/feedback/handleFeedback',
+//         meta: {
+//           icon: '',
+//           title: '反馈处理',
+//           activeMenu: 'SystemFeedback',
+//         },
+//       },
+//       // {
+//       //   // 字典管理 （暂时用不到）
+//       //   path: 'dictionary',
+//       //   name: 'SystemDictionary',
+//       //   component: '/system/dictionary/dictionary',
+//       //   meta: {
+//       //     icon: '',
+//       //     title: '字典管理',
+//       //   },
+//       // },
+//       {
+//         // 日志管理
+//         path: 'log',
+//         name: 'SystemLog',
+//         component: '/system/log/log',
+//         meta: {
+//           icon: '',
+//           title: '日志管理',
+//         },
+//       },
+//     ],
+//   };
+
+/** 平台管理 */
+export const platformRoutes = {
+  path: '/platform',
+  name: 'Platform',
+  component: 'MENU_LAYOUT',
+  meta: {
+    icon: '',
+    title: '平台管理',
+  },
+  redirect: '',
+  children: [
+    {
+      path: 'user',
+      name: 'User',
+      meta: {
+        icon: 'UserOutlined',
+        title: '用户管理',
       },
-      {
-        // 意见反馈
-        path: 'feedback',
-        name: 'SystemFeedback',
-        component: '/feedback/feedback',
-        meta: {
-          icon: '',
-          title: '意见反馈',
-        },
+      children: [],
+    },
+    {
+      // 菜单管理
+      path: 'menu',
+      name: 'SystemMenu',
+      component: '/system/menu/menu',
+      meta: {
+        icon: 'UserOutlined',
+        title: '菜单管理',
       },
-      {
-        // 反馈处理 。意见反馈的二级页面。菜单不可见！！！
-        path: 'feedback-handle',
-        name: 'SystemFeedbackHandle',
-        component: '/feedback/handleFeedback',
-        meta: {
-          icon: '',
-          title: '反馈处理',
-          activeMenu: 'SystemFeedback',
-        },
+    },
+    {
+      // 权限管理
+      path: 'permission',
+      name: 'SystemPermission',
+      component: '/system/permission/PagePermission',
+      meta: {
+        icon: 'UserOutlined',
+        title: '权限管理',
       },
-      // {
-      //   // 字典管理 （暂时用不到）
-      //   path: 'dictionary',
-      //   name: 'SystemDictionary',
-      //   component: '/system/dictionary/dictionary',
-      //   meta: {
-      //     icon: '',
-      //     title: '字典管理',
-      //   },
-      // },
-      {
-        // 日志管理
-        path: 'log',
-        name: 'SystemLog',
-        component: '/system/log/log',
-        meta: {
-          icon: '',
-          title: '日志管理',
-        },
+    },
+    {
+      path: 'dictionary',
+      name: 'SystemDictionary',
+      component: '/system/dictionary/dictionary',
+      meta: {
+        icon: 'UserOutlined',
+        title: '字典管理',
       },
-    ],
-  };
+    },
+  ],
+};
 
 export const exceptionRouters =
   /**
@@ -520,7 +572,8 @@ export const fullRoutes: AppRouteRecordRaw[] = [
 
   userRoutes,
 
-  systemRoutes,
+  // systemRoutes,
+  platformRoutes,
 
   /**
    * 消息管理

src/router/index.ts

@@ -3,7 +3,7 @@ import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
 import { RedirectRoute } from '@/router/base';
 import { PageEnum } from '@/enums/pageEnum';
 import { createRouterGuards } from './router-guards';
-import { disasterPreventionRoute, exceptionRouters, fullRoutes, HOME_PAGE, RootRoute } from './full-routes';
+import { exceptionRouters, HOME_PAGE, platformRoutes, RootRoute } from './full-routes';
 import { asyncImportRoute, routerGenerator } from './generator-routers';
 
 const modules: any = import.meta.glob('./modules/**/*.ts', { eager: true });
@@ -22,15 +22,7 @@ function sortRoute(a, b) {
 
 routeModuleList.sort(sortRoute);
 
-const { children, ...disasterPreventionTopRoute } = disasterPreventionRoute;
-const constantRoutes = [
-  RootRoute,
-  HOME_PAGE,
-  disasterPreventionTopRoute,
-  RedirectRoute,
-  exceptionRouters,
-  ...fullRoutes,
-];
+const constantRoutes = [RootRoute, HOME_PAGE, RedirectRoute, exceptionRouters];
 
 //需要验证权限
 export const asyncRoutes = [...routeModuleList];

src/views/system/permission/PagePermission.vue

@@ -53,12 +53,17 @@
       <el-col :span="18">
         <el-card shadow="hover">
           <template #header>
-            <div class="flex justify-between">
+            <div class="editPermission">
               <el-space>
                 <span>编辑权限: </span>
                 <span>{{ treeItemTitle }}</span>
               </el-space>
-              <el-popconfirm v-if="isEditing" :title="`确定要删除${treeItemTitle}吗？`" width="200" @confirm="handleDeletePermission">
+              <el-popconfirm
+                v-if="isEditing"
+                :title="`确定要删除${treeItemTitle}吗？`"
+                width="200"
+                @confirm="handleDeletePermission"
+              >
                 <template #reference>
                   <el-button type="danger" size="small">删除权限</el-button>
                 </template>
@@ -82,11 +87,7 @@
     </el-row>
 
     <!-- 添加新权限 -->
-    <CreateDrawer
-      ref="drawerInstance"
-      :permissionList="permissionViewTree"
-      @change="handleChangePermssion"
-    />
+    <CreateDrawer ref="drawerInstance" :permissionList="permissionViewTree" @change="handleChangePermssion" />
   </div>
 </template>
 
@@ -95,12 +96,17 @@
   import PermissionForm from './PermissionForm.vue';
   import CreateDrawer from './CreateDrawer.vue';
   import { AlignLeftOutlined, FileAddOutlined } from '@vicons/antd';
-  import { PermissionTree, PermissionView, PermissionViewItem, PermissionViewTree, Permission } from '@/types/permission/type';
+  import {
+    PermissionTree,
+    PermissionView,
+    PermissionViewItem,
+    PermissionViewTree,
+    Permission,
+  } from '@/types/permission/type';
   import { getPermissionTree, deletePermission } from '@/api/system/permission';
   import { getTreeItem } from '@/utils';
   import { cloneDeep } from 'lodash-es';
-import { ElMessage } from 'element-plus';
-  
+  import { ElMessage } from 'element-plus';
 
   // 左侧权限树相关
   const expandedKeys = ref<PermissionViewItem['value'][]>([]);
@@ -158,7 +164,7 @@ import { ElMessage } from 'element-plus';
     selectedPermissionId.value = permissionId;
     isEditing.value = true;
     treeItemTitle.value = data.label;
-      
+
     const treeItem: Permission = getTreeItem(permissionTree.value, permissionId, 'id');
     const permission = cloneDeep(treeItem);
     delete permission.children;
@@ -188,7 +194,6 @@ import { ElMessage } from 'element-plus';
     expandedKeys.value = keys;
   };
 
-
   function clearEditing() {
     isEditing.value = false;
     treeItemTitle.value = '';
@@ -204,7 +209,6 @@ import { ElMessage } from 'element-plus';
     queryPermissionTree();
   };
 
-
   /**
    * 不允许删除父节点
    */
@@ -219,10 +223,10 @@ import { ElMessage } from 'element-plus';
       await deletePermission(selectedPermissionId.value!);
       clearEditing();
       queryPermissionTree();
-    } catch(e) {
+    } catch (e) {
       console.error(e);
     }
-  }
+  };
 
   function openCreateDrawer() {
     drawerInstance.value?.openDrawer();
@@ -237,4 +241,8 @@ import { ElMessage } from 'element-plus';
   .page-permission {
     height: calc(100vh - 100px);
   }
+  .editPermission {
+    display: flex;
+    justify-content: space-between;
+  }
 </style>