From 698c5c4cc89b1bbb174a43b21ad167dde4a12143 Mon Sep 17 00:00:00 2001 From: jessica <3344538341@qq.com> Date: Wed, 24 Apr 2024 10:29:43 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat=EF=BC=9A=E6=96=B0=E5=A2=9E=E6=8C=89?= =?UTF-8?q?=E9=92=AE=E6=9D=83=E9=99=90=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/system/menu/index.tsx | 29 +++++++++++++++++++---------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/src/views/system/menu/index.tsx b/src/views/system/menu/index.tsx index c091d32..e0fe2e9 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} -- Gitee From 623025deb1b7834cd070cbb661f67824e0d0ab0b Mon Sep 17 00:00:00 2001 From: jessica <3344538341@qq.com> Date: Sun, 28 Apr 2024 11:42:10 +0800 Subject: [PATCH 2/3] =?UTF-8?q?refactor=EF=BC=9A=E9=87=8D=E6=9E=84?= =?UTF-8?q?=E8=B7=AF=E7=94=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 24 ++++------- src/router/index.tsx | 100 +++++++++++++++++++++++++++++++++++++------ 2 files changed, 97 insertions(+), 27 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 825af78..4a0407f 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/index.tsx b/src/router/index.tsx index 361e95d..3bbb5e5 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; -- Gitee From 37067386cfb0a29db5f38827e8cde678776c95d7 Mon Sep 17 00:00:00 2001 From: jessica <3344538341@qq.com> Date: Sun, 28 Apr 2024 14:54:45 +0800 Subject: [PATCH 3/3] =?UTF-8?q?fix=EF=BC=9A=E5=88=A0=E9=99=A4=E9=9D=99?= =?UTF-8?q?=E6=80=81=E5=8A=A8=E6=80=81=E8=B7=AF=E7=94=B1=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/router/dynamicRouter.tsx | 133 ----------------------------------- src/router/staticRouter.tsx | 66 ----------------- 2 files changed, 199 deletions(-) delete mode 100644 src/router/dynamicRouter.tsx delete mode 100644 src/router/staticRouter.tsx diff --git a/src/router/dynamicRouter.tsx b/src/router/dynamicRouter.tsx deleted file mode 100644 index ab0afea..0000000 --- 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/staticRouter.tsx b/src/router/staticRouter.tsx deleted file mode 100644 index ffa01ea..0000000 --- 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; -- Gitee