| | |
| | | |
| | | /** 菜单渲染组件 */ |
| | | |
| | | import React from 'react'; |
| | | import React, { useState } from 'react'; |
| | | import { Layout, Menu, Icon, Badge } from 'antd'; |
| | | import { RouteComponentProps } from 'react-router-dom'; |
| | | import './index.scss'; |
| | |
| | | }) { |
| | | if (!menudata.length) return null; |
| | | |
| | | const { path, name } = find(menudata, pathname); |
| | | const { path, name, parentKey } = find(menudata, pathname); |
| | | console.log('parentKey', parentKey) |
| | | |
| | | if (name) { |
| | | const index = name.indexOf(' - '); |
| | | if (index > -1) { |
| | | document.title = `${name.substr(index)}`; |
| | | document.title = `恒巨信息OA-${name.substr(index)}`; |
| | | } else { |
| | | document.title = `${name}`; |
| | | document.title = `恒巨信息OA-${name}`; |
| | | } |
| | | } else { |
| | | document.title = `xx系统`; |
| | | document.title = `恒巨信息`; |
| | | } |
| | | |
| | | const defaultOpenKeys = menudata.map(({ name }) => name); |
| | | const defaultOpenKeys = parentKey ? [parentKey] : [];//默认展开的菜单key |
| | | const [openKeys, setOpenKeys] = useState(defaultOpenKeys);//设置打开菜单的key |
| | | |
| | | function onOpenChange(key) { |
| | | let allKeys = menudata.map((d) => d.key); |
| | | const latestOpenKey = key.find(key => openKeys.indexOf(key) === -1); |
| | | if (allKeys.indexOf(latestOpenKey) === -1) { |
| | | setOpenKeys(key) |
| | | } else { |
| | | setOpenKeys(latestOpenKey ? [latestOpenKey] : []) |
| | | } |
| | | }; |
| | | |
| | | return ( |
| | | // <Layout.Sider |
| | | // // width={200} |
| | | // theme="light" |
| | | // style={{ backgroundColor: 'white' }}> |
| | | <Menu |
| | | key={defaultOpenKeys.join('-')} |
| | | style={{ height: '100%', borderRight: 0 }} |
| | | defaultOpenKeys={defaultOpenKeys} |
| | | openKeys={openKeys} |
| | | selectedKeys={path ? [path] : []} |
| | | onOpenChange={onOpenChange} |
| | | mode="inline"> |
| | | {render(menudata, history)} |
| | | </Menu> |
| | | // </Layout.Sider> |
| | | ); |
| | | } |
| | | |
| | |
| | | return data.map(({ name, icon, path, count, children, type }, index) => |
| | | children && children.length ? ( |
| | | <SubMenu |
| | | key={name} |
| | | key={path} |
| | | title={ |
| | | <span> |
| | | <Icon type={icon || 'setting'} /> |
| | |
| | | }; |
| | | |
| | | const find = (data, full, pathname = { path: '', name: '' }) => |
| | | data.reduce((pn, { path, name, children }) => { |
| | | data.reduce((pn, { path, name, parentKey, children }) => { |
| | | if (children && children.length) { |
| | | return find(children, full, pn); |
| | | } |
| | |
| | | path.length > pn.path.length && |
| | | full.replace(/\/\d+/g, '').startsWith(path.replace(/\/\d+/g, '')) |
| | | ) { |
| | | return { path, name }; |
| | | return { path, name, parentKey }; |
| | | } |
| | | return pn; |
| | | }, pathname); |