feat: 添加系统管理模块

src/api/systems.ts

+import { http } from "@/utils/http";
+
+type Result = {
+  success: boolean;
+  data?: {
+    /** 列表数据 */
+    list?: Array<any>;
+    [key: string]: any;
+  };
+};
+
+/** 获取Systems列表 */
+export const getSystemsList = (data?: object) => {
+  return http.request<Result>("post", "/get-systems-list", { data });
+};
+
+/** 创建Systems */
+export const createSystems = (data?: object) => {
+  return http.request<Result>("post", "/create-systems", { data });
+};
+
+/** 更新Systems */
+export const updateSystems = (data?: object) => {
+  return http.request<Result>("post", "/update-systems", { data });
+};
+
+/** 删除Systems */
+export const deleteSystems = (data?: { id: string }) => {
+  return http.request<Result>("post", "/delete-systems", { data });
+};

src/api/user.ts

@@ -37,6 +37,7 @@ export type RefreshTokenResult = {
 };
 
 export type UserInfo = {
+  menuList: Array<any>;
   /** 头像 */
   avatar: string;
   /** 用户名 */
@@ -81,8 +82,8 @@ export const refreshTokenApi = (data?: object) => {
 };
 
 /** 账户设置-个人信息 */
-export const getMine = (data?: object) => {
-  return http.request<UserInfoResult>("get", "/mine", { data });
+export const getMine = () => {
+  return http.request<UserInfoResult>("post", "/api/user/userInfo");
 };
 
 /** 账户设置-个人安全日志 */

src/router/utils.ts

@@ -27,7 +27,8 @@ const IFrame = () => import("@/layout/frame.vue");
 const modulesRoutes = import.meta.glob("/src/views/**/*.{vue,tsx}");
 
 // 动态路由
-import { getAsyncRoutes } from "@/api/routes";
+// import { getAsyncRoutes } from "@/api/routes";
+import { getMine } from "@/api/user";
 import { transformRoutes } from "@/utils/createTree";
 
 function handRank(routeInfo: any) {
@@ -203,9 +204,9 @@ function initRouter() {
       });
     } else {
       return new Promise(resolve => {
-        getAsyncRoutes({ pageNum: 1, pageSize: 10 }).then(({ data }) => {
+        getMine().then(({ data }) => {
           console.log("路由数据：", data);
-          // const treeData = transformRoutes(data.records);
+          // const treeData = transformRoutes(data.menuList);
           // console.log("树形数据：", treeData);
 
           // handleAsyncRoutes(cloneDeep(treeData));
@@ -216,12 +217,13 @@ function initRouter() {
     }
   } else {
     return new Promise(resolve => {
-      getAsyncRoutes({ pageNum: 1, pageSize: 10 }).then(({ data }) => {
+      getMine().then(({ data }) => {
         console.log("路由数据---：", data);
-        const treeData = transformRoutes(data.records);
+        data.menuList.shift();
+        const treeData = transformRoutes(data.menuList);
         handleAsyncRoutes(cloneDeep(treeData));
 
-        // const treeData = transformRoutes(data.records);
+        // const treeData = transformRoutes(data.menuList);
         // console.log("树形数据1111：", treeData);
         // handleAsyncRoutes(cloneDeep(treeData));
         // console.log("路由数据9999：", handleAsyncRoutes(cloneDeep(treeData)));

src/utils/createTree.ts

@@ -3,7 +3,7 @@ interface MenuItem {
   id: string; // 菜单项的唯一标识
   name: string; // 菜单项的名称
   parentId?: string; // 父菜单项的id，如果没有父菜单则为undefined或null
-  children?: treeType[]; // 子菜单项列表
+  children?: treeItem[]; // 子菜单项列表
   // remark: null;
   type: number;
   path: string;
@@ -17,12 +17,13 @@ interface MenuItem {
   roles?: string[]; // 角色权限
 }
 
-interface treeType {
+interface treeItem {
   path: string;
   name: string;
   redirect?: string;
-  children?: treeType[];
+  children?: treeItem[];
   component?: string;
+  id: string;
   meta?: {
     icon: string;
     title: string;
@@ -38,13 +39,14 @@ interface treeType {
  * @param item 菜单项
  * @returns
  */
-const transformData = (item: MenuItem): treeType => {
-  const { name, path, icon, redirect, children } = item;
+const transformData = (item: MenuItem): treeItem => {
+  const { name, path, icon, redirect, children, id } = item;
   return {
-    path: path,
+    path: path || "/system/menu/index" + "/" + id,
     name: name,
     redirect: redirect,
     children: children,
+    id: id,
     meta: {
       icon: icon || "ri:admin-line",
       title: name
@@ -57,31 +59,45 @@ const transformData = (item: MenuItem): treeType => {
  * @param menuList 后端返回的菜单数据列表
  * @returns 转换后的树形结构菜单数据
  */
-export function transformRoutes(menuList: MenuItem[]): treeType[] {
+export function transformRoutes(menuList: MenuItem[]): treeItem[] {
   // 创建一个映射表，用于快速查找每个菜单项
   const map = new Map<string, MenuItem>();
   menuList.forEach(item => {
-    map.set(item.id, { ...item });
+    map.set(item.id, item);
   });
 
   // 创建一个数组，用于存储根菜单项
-  const tree: treeType[] = [];
+  const tree: treeItem[] = [];
 
   menuList.forEach((item: MenuItem) => {
     // 如果有父菜单项，则将其添加到父菜单项的children中
-    if (item.type === 1) {
-      // 如果没有父菜单项，则将其添加到树的根节点
-      tree.push(transformData(item));
-    } else if (item.type === 2 && item.parentId) {
+    if (item.type === 2 && item.parentId) {
       const parentItem = map.get(item.parentId);
       if (parentItem) {
-        // if (!parentItem.children) {
-        //   parentItem.children = [];
-        // }
-        parentItem.children.push(transformData(item));
+        if (!parentItem.children) {
+          parentItem.children = [];
+        } else {
+          parentItem.children.push(item);
+        }
       }
     }
+    if (item.type === 1) {
+      // 如果没有父菜单项，则将其添加到树的根节点
+      tree.push(item);
+    }
+  });
+
+  // 遍历树，转换每个菜单项为树形结构
+  const transTree = tree.map((item: MenuItem) => {
+    const { children } = item;
+    if (children) {
+      item.children = children.map((child: MenuItem) => {
+        return transformData(child);
+      });
+    }
+    return transformData(item);
   });
+  console.log("tree", tree, transTree);
 
-  return tree;
+  return transTree;
 }

src/views/system/index.vue

+<template>
+  <div class="system">
+    <h2>System</h2>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+// 组件逻辑部分
+import { ref } from "vue";
+
+const count = ref(0);
+
+const increment = () => {
+  count.value++;
+};
+</script>
+
+<style scoped lang="scss">
+.system {
+  padding: 20px;
+  border: 1px solid #ccc;
+}
+</style>

src/views/systems/dep/index.vue

+<template>
+  <div class="systems">
+    <h2>Systems</h2>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+// 组件逻辑部分
+import { ref } from "vue";
+
+const count = ref(0);
+
+const increment = () => {
+  count.value++;
+};
+</script>
+
+<style scoped lang="scss">
+.systems {
+  padding: 20px;
+  border: 1px solid #ccc;
+}
+</style>

src/views/systems/index.vue

+<template>
+  <div class="systems">
+    <h2>Systems</h2>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+// 组件逻辑部分
+import { ref } from "vue";
+
+const count = ref(0);
+
+const increment = () => {
+  count.value++;
+};
+</script>
+
+<style scoped lang="scss">
+.systems {
+  padding: 20px;
+  border: 1px solid #ccc;
+}
+</style>

src/views/systems/menu/index.vue

+<template>
+  <div class="systems">
+    <h2>Systems</h2>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+// 组件逻辑部分
+import { ref } from "vue";
+
+const count = ref(0);
+
+const increment = () => {
+  count.value++;
+};
+</script>
+
+<style scoped lang="scss">
+.systems {
+  padding: 20px;
+  border: 1px solid #ccc;
+}
+</style>

src/views/systems/role/index.vue

+<template>
+  <div class="systems">
+    <h2>Systems</h2>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+// 组件逻辑部分
+import { ref } from "vue";
+
+const count = ref(0);
+
+const increment = () => {
+  count.value++;
+};
+</script>
+
+<style scoped lang="scss">
+.systems {
+  padding: 20px;
+  border: 1px solid #ccc;
+}
+</style>

src/views/systems/user/index.vue

+<template>
+  <div class="systems">
+    <h2>Systems</h2>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+// 组件逻辑部分
+import { ref } from "vue";
+
+const count = ref(0);
+
+const increment = () => {
+  count.value++;
+};
+</script>
+
+<style scoped lang="scss">
+.systems {
+  padding: 20px;
+  border: 1px solid #ccc;
+}
+</style>