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}