diff --git a/src/components/layout/layout.tsx b/src/components/layout/layout.tsx index 797d380..c985090 100644 --- a/src/components/layout/layout.tsx +++ b/src/components/layout/layout.tsx @@ -3,13 +3,30 @@ import "./layout.less"; import { inject, observer } from "mobx-react"; import { Store } from "antd/es/form/interface"; import { useEffect, useState } from "react"; -import { Avatar, Breadcrumb, Layout, Menu, theme } from "antd"; +import { Avatar, Breadcrumb, Layout, Menu, MenuProps, theme } from "antd"; import { UserOutlined } from "@ant-design/icons"; import Sider from "antd/es/layout/Sider"; import { items, headItems } from "./layout_config"; import { Dropdown } from "antd/lib"; import { Outlet, useNavigate } from "react-router"; +const getLevelKeys = (items1) => { + const key: Record = {}; + const func = (items2: [], level = 1) => { + items2.forEach((item: any) => { + if (item.key) { + key[item.key] = level; + } + if (item.children) { + func(item.children, level + 1); + } + }); + }; + func(items1); + return key; +}; +const levelKeys = getLevelKeys(items); + const LayOut = (props: Store) => { const { usrStore } = props; const [collapsed, setCollapsed] = useState(false); @@ -35,24 +52,44 @@ const LayOut = (props: Store) => { { title: "数据集管理" }, { title: "数据管理" }, ]; + const [stateOpenKeys, setStateOpenKeys] = useState(['2', '23']); useEffect(() => { // if (usrStore.isNeedLogin) { // nav("/login"); // } // eslint-disable-next-line react-hooks/exhaustive-deps }, [usrStore.isNeedLogin]); + const onOpenChange: MenuProps['onOpenChange'] = (openKeys) => { + const currentOpenKey = openKeys.find((key) => stateOpenKeys.indexOf(key) === -1); + // open + if (currentOpenKey !== undefined) { + const repeatIndex = openKeys + .filter((key) => key !== currentOpenKey) + .findIndex((key) => levelKeys[key] === levelKeys[currentOpenKey]); + setStateOpenKeys( + openKeys + .filter((_, index) => index !== repeatIndex) + .filter((key) => levelKeys[key] <= levelKeys[currentOpenKey]), + ); + } else { + // close + setStateOpenKeys(openKeys); + } + }; return (
黄甲数据
- { - console.log(e.key==="loginout") - if (e.key==="loginout"){ - window.localStorage.removeItem("token") - nav("/login") + { + console.log(e.key === "loginout") + if (e.key === "loginout") { + window.localStorage.removeItem("token") + nav("/login") + } } - } }}> + }}> } />
@@ -68,11 +105,11 @@ const LayOut = (props: Store) => { mode="inline" theme="dark" defaultSelectedKeys={["1"]} - defaultOpenKeys={["sub1"]} + openKeys={stateOpenKeys} style={{ height: "100%", borderRight: 0 }} + onOpenChange={onOpenChange} items={items} onClick={(e) => { - console.log(e); nav(e.key); }} /> diff --git a/src/pages/role/index.tsx b/src/pages/role/index.tsx index 09e82ac..7eb3cb9 100644 --- a/src/pages/role/index.tsx +++ b/src/pages/role/index.tsx @@ -9,7 +9,7 @@ const Role = (props: Store) => { return (
= [ { - title: "角色名称", + title: "职位名称", dataIndex: "name", fixed: "left", }, { - title: "角色描述", + title: "职位描述", dataIndex: "desc", },