diff --git a/src/App.tsx b/src/App.tsx
index 825af78333fb39d7b4f602149ae2d268807a90ed..4a0407fc83805d0838ee0869b450ff0b83fcaea1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,21 +1,15 @@
-import { Suspense } from "react";
-import { useRoutes } from "react-router-dom";
-import { router } from "@/router";
-import staticRouter from "@/router/staticRouter";
+// import { Suspense } from "react";
import "./App.css";
-
+import Router from "@/router/index";
function App() {
- const element = useRoutes(staticRouter);
- console.log("App-router", router);
return (
- loadding}
- >
- {element}
-
- {/* {[element]} */}
-
+ // loadding}
+ // >
+ //
+ //
+
);
}
export default App;
diff --git a/src/router/dynamicRouter.tsx b/src/router/dynamicRouter.tsx
deleted file mode 100644
index ab0afea1764a7b8dd7e09c0eb7cf4b5cacfa4655..0000000000000000000000000000000000000000
--- a/src/router/dynamicRouter.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import { useSelector } from "react-redux";
-import { RouteObject, Router } from "react-router-dom";
-import { IMenu } from "@/types";
-// import { Suspense, lazy } from "react";
-import store, { RootState } from "@/store";
-import { lazy } from "react";
-
-const modules = import.meta.glob("../views/**/*.tsx");
-const components = Object.keys(modules).reduce>(
- (prev: any, cur: any) => {
- prev[cur.replace("./views", "")] = modules[cur];
- return prev;
- },
- {}
-) as any;
-
-// const getElement = (path: string) => {
-// console.log("path", path);
-
-// const Element = lazy(() => import(`../${path}`));
-// return (
-// loading}>
-//
-//
-// );
-// };
-
-const getComponent = (childElement: IMenu) => {
- let filePath = "";
- if (childElement.viewPath) {
- const viewPath = `../views${childElement.viewPath}.tsx`;
- if (!viewPath) {
- console.error(
- `IMenu view path configuration error or view does not exist ../views${childElement.viewPath}.tsx`
- );
- } else {
- filePath = viewPath;
- }
- } else {
- const path = `../views${childElement.path}/index.tsx`;
- if (!path) {
- console.error(
- `IMenu routing path configuration error or view does not exist ../views${childElement.path}/index.tsx`
- );
- } else {
- filePath = path;
- }
- }
- return components[filePath];
-};
-const formatRouter = (data: IMenu[]) => {
- const arr: RouteObject[] = [];
- const firstMenuArr: IMenu[] = [];
- const secondMenuArr: IMenu[] = [];
- data.forEach((element: IMenu) => {
- if (element.menuType === 0) {
- firstMenuArr.push(element);
- } else if (element.menuType === 1) {
- secondMenuArr.push(element);
- }
- });
- console.log("secondMenuArr", secondMenuArr);
- const childMenus = secondMenuArr.filter((x) => Number(x.pId) === 0);
- console.log("childMenus", childMenus);
-
- childMenus.forEach((element) => {
- const component = getComponent(element);
- const routerObj: RouteObject = {
- id: element.menuId,
- path: element.path,
- Component: lazy(() => import("../layout")),
- // redirect: `${element.path}/index`,
- children: [
- {
- id: `${element.menuId}/index`,
- path: `${element.path}/index`,
- Component: component,
- },
- ],
- handle: {
- title: element.menuName,
- icon: element.icon,
- link: element.link,
- },
- };
- arr.push(routerObj);
- });
- firstMenuArr.forEach((element) => {
- const routerObj: RouteObject = {
- id: element.menuId,
- path: element.path,
- Component: lazy(() => import("../layout")),
- // redirect: "",
- children: [],
- handle: {
- title: element.menuName,
- icon: element.icon,
- link: element.link,
- },
- };
- const childMenu = secondMenuArr.filter((x) => x.pId === element.id);
- if (childMenu.length > 0) {
- // routerObj.redirect = childMenu[0].path;
- childMenu.forEach((childElement: IMenu) => {
- if (childElement.link) return;
- // console.log('childElement', childElement.menuName)
-
- const component = getComponent(childElement);
- const childRouterObj: RouteObject = {
- id: childElement.menuId,
- path: childElement.path,
- Component: component,
- handle: {
- title: childElement.menuName,
- icon: childElement.icon,
- link: childElement.link,
- },
- };
- if (routerObj.children) {
- routerObj.children.push(childRouterObj);
- }
- });
- }
- arr.push(routerObj);
- });
- return arr;
-};
-export const addRoutes = () => {
- const { permissionMenuList: menuList } = store.getState().user;
- const routerData = formatRouter(menuList);
- console.log("routerData", menuList);
- return routerData;
-};
diff --git a/src/router/index.tsx b/src/router/index.tsx
index 361e95dd7d1487aa6d31d037d346ecb5b45828ec..3bbb5e5b86c4b3066aa60bcf32cfbd04fede65e5 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -1,15 +1,91 @@
-// import { createBrowserRouter } from "react-router-dom";
-// import staticRouter from "./staticRouter";
-// import { addRoutes } from "./dynamicRouter";
+import { useRoutes, RouteObject, Navigate } from "react-router-dom";
+import { useSelector } from "react-redux";
+import { RootState } from "@/store";
+import { IMenubar } from "@/types";
+import { lazy, Suspense } from "react";
+import Layout from "@/layout/index";
+import Home from "@/views/home";
+import Login from "@/pages/login";
+import ChangePassword from "@/views/changePassword";
+import NotFound from "@/pages/404";
-// const routerData = addRoutes();
-// const routes = [...staticRouter];
-// routes[0].children?.push(...routerData);
-// export const router = createBrowserRouter([...routes]);
-// console.log("router.routes", router.routes);
+const Router = () => {
+ const user = useSelector((state: RootState) => state.user);
+ let menuList: IMenubar[] = [];
+ if (user) {
+ menuList = user.menuList;
+ }
+ const routes: RouteObject[] = [
+ {
+ path: "/",
+ element: ,
+ },
+ {
+ path: "/home",
+ element: ,
+ children: [
+ {
+ path: "/home",
+ element: ,
+ },
+ ],
+ },
-import { createBrowserRouter } from "react-router-dom";
-import staticRouter from "./staticRouter";
+ {
+ path: "/login",
+ element: ,
+ },
+ {
+ path: "/changePassword",
+ element: ,
+ children: [
+ {
+ path: "/changePassword/index",
+ element: ,
+ },
+ ],
+ },
+ // {
+ // path: "/:catchAll(.*)",
+ // element: ,
+ // },
+ ];
-export const router = createBrowserRouter([...staticRouter]);
-console.log('router',router);
+ const genRouter = (menuList: IMenubar[], routes: RouteObject[]) => {
+ menuList.map((ele: IMenubar) => {
+ const arr: RouteObject[] = [];
+ let path = "";
+ path = ele.path;
+ if (ele.children && ele.children.length > 0) {
+ ele.children.map((item: IMenubar) => {
+ arr.push({
+ path: item.path,
+ element: LazyWrapper(item.path),
+ });
+ });
+ }
+ routes.push({
+ path: path,
+ element: ,
+ children: arr,
+ });
+ });
+ };
+ const LazyWrapper = (path: any) => {
+ const Component = lazy(() => import(`../views${path}`));
+ return (
+
+
+
+ );
+ };
+ genRouter(menuList, routes);
+ routes.push({
+ path: "/:catchAll(.*)",
+ element: ,
+ });
+ const element = useRoutes(routes);
+ console.log("路由", routes);
+ return <>{element}>;
+};
+export default Router;
diff --git a/src/router/staticRouter.tsx b/src/router/staticRouter.tsx
deleted file mode 100644
index ffa01ea9e79bf70c9a17e6f595cb463e3cbd82c8..0000000000000000000000000000000000000000
--- a/src/router/staticRouter.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { lazy } from "react";
-import { Navigate, RouteObject } from "react-router-dom";
-import layout from "@/layout/index";
-
-const staticRouter: RouteObject[] = [
- {
- path: "/",
- Component: layout,
- children: [{
- path: "/home",
- // Component: lazy(() => import("@/pages/404"))
- Component: lazy(() => import("@/views/home"))
- // Component: lazy(() => import("@/views/system/user"))
- }]
- },
- {
- path: "/system",
- Component: layout,
- children: [{
- path: "/system/user",
- Component: lazy(() => import("@/views/system/user"))
- },{
- path: "/system/role",
- Component: lazy(() => import("@/views/system/role"))
- },{
- path: "/system/menu",
- Component: lazy(() => import("@/views/system/menu"))
- }]
- },
-
- // {
- // path:'/',
- // element: ,
- // },
- {
- path: "/login",
- Component: lazy(() => import("@/pages/login"))
- },
- {
- path: "/personalInfo",
- Component: layout,
- // element: ,
- children: [
- {
- path: "/personalInfo/index",
- Component: lazy(() => import("@/views/personalInfo"))
- }
- ]
- },
- {
- path: "/changePassword",
- Component: layout,
- // element: ,
- children: [
- {
- path: "/changePassword/index",
- Component: lazy(() => import("@/views/changePassword"))
- }
- ]
- },
- {
- path: "/:catchAll(.*)",
- Component: lazy(() => import("@/pages/404"))
- }
-];
-export default staticRouter;
diff --git a/src/views/system/menu/index.tsx b/src/views/system/menu/index.tsx
index c091d3217a8f739195a4d6c7ffdcc1d44333e8b8..e0fe2e9abf378ad83c2d04727a582e98df5c1574 100644
--- a/src/views/system/menu/index.tsx
+++ b/src/views/system/menu/index.tsx
@@ -1,8 +1,9 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Modal, message } from "antd";
import { ExclamationCircleFilled } from "@ant-design/icons";
import {
+ IActionbar,
IColumn,
IFormItem,
IPage,
@@ -25,24 +26,25 @@ import {
deleteMenu,
} from "@/api/system/menu";
import { AppDispatch, RootState } from "@/store";
-// import { getPermissionBtns } from "@/store/modules/user";
+import { getPermissionBtns } from "@/store/modules/user";
import "@/assets/iconfont/quickIconFont.js";
import quickIconFont from "@/config/quickIconFont.json";
const Menu: React.FC = () => {
- const dispatch: AppDispatch = useDispatch();
- const { activeTab } = useSelector((state: RootState) => state.tab);
- const { confirm } = Modal;
-
/**
* 属性
*/
+ const { confirm } = Modal;
+ const dispatch: AppDispatch = useDispatch();
+ const { activeTab } = useSelector((state: RootState) => state.tab);
+ useEffect(() => {
+ dispatch(getPermissionBtns(activeTab));
+ }, []);
+ const { permissionBtn }: { permissionBtn: IMenuPermissionButton } =
+ useSelector((state: RootState) => state.user);
const [loading, setLoading] = useState(false);
const [tableDataList, setTableDataList] = useState([]);
const [parentTreeData, setParentTreeData] = useState>([]);
- // const permissionBtn = dispatch(
- // getPermissionBtns(activeTab)
- // ) as IMenuPermissionButton;
/**
* 分页
@@ -76,7 +78,7 @@ const Menu: React.FC = () => {
hiddenImportButton: true,
hiddenExportButton: true,
hiddenPrintButton: true,
- // hiddenAddButton: !validatePermission(permissionBtn?.add),
+ hiddenAddButton: !validatePermission(permissionBtn?.add),
};
/**
@@ -308,6 +310,12 @@ const Menu: React.FC = () => {
},
});
};
+ const tableActionbar: IActionbar = {
+ width: 300,
+ hiddenEditButton: !validatePermission(permissionBtn?.edit),
+ hiddenDeleteButton: !validatePermission(permissionBtn?.delete),
+ hiddenDetailButton: !validatePermission(permissionBtn?.detail),
+ };
/**
* 表格
@@ -438,6 +446,7 @@ const Menu: React.FC = () => {
formItems={formItems}
tableData={tableDataList}
tableColumns={tableColumns}
+ tableActionbar={tableActionbar}
tableToolbar={tableToolbar}
searchFormItems={searchFormItems}
searchFormModel={searchForm}