Skip to content

X
xiaomai-cloud-class-web
Commit 23e7fe66 by maolipeng
Options

fix:菜单优化。。。。

parent 598c1e29
Showing with 18 additions and 24 deletions
src/modules/root/Menu.tsx
...@@ -18,6 +18,7 @@ function Aside(props: any) { ...@@ -18,6 +18,7 @@ function Aside(props: any) {
const [selectKey, setSelectKey] = useState(); const [selectKey, setSelectKey] = useState();
const [openKeys, setOpenKeys] = useState(['']); const [openKeys, setOpenKeys] = useState(['']);
const [topLogoUrl, setTopLogoUrl] = useState("") const [topLogoUrl, setTopLogoUrl] = useState("")
const [collapsed, setCollapsed] = useState(false)
const rootSubmenuKeys = _.pluck(menuList, 'groupCode'); const rootSubmenuKeys = _.pluck(menuList, 'groupCode');
useEffect(() => { useEffect(() => {
const link = props.location.pathname; const link = props.location.pathname;
...@@ -37,7 +38,7 @@ function Aside(props: any) { ...@@ -37,7 +38,7 @@ function Aside(props: any) {
}, [props.location.pathname]) }, [props.location.pathname])
useEffect(()=> { useEffect(()=> {
getTopLeftLogo() getTopLeftLogo()
}) },[])
function getTopLeftLogo() { function getTopLeftLogo() {
if (User.getToken()) { if (User.getToken()) {
StoreService.getStoreDetail({storeId:User.getStoreId()}) StoreService.getStoreDetail({storeId:User.getStoreId()})
...@@ -53,9 +54,9 @@ function Aside(props: any) { ...@@ -53,9 +54,9 @@ function Aside(props: any) {
} }
function toggleMenu(item: any) { function toggleMenu(item: any) {
window.RCHistory.push(item.link) window.RCHistory.push(item.link)
if (!menuType) { // if (!menuType) {
setOpenKeys([]) // setOpenKeys([])
} // }
} }
function onOpenChange(key: any) { function onOpenChange(key: any) {
if (openKeys.includes(key)) { if (openKeys.includes(key)) {
...@@ -76,6 +77,7 @@ function Aside(props: any) { ...@@ -76,6 +77,7 @@ function Aside(props: any) {
} }
function handleMenu() { function handleMenu() {
handleMenuType(); handleMenuType();
setCollapsed(!collapsed)
} }
return ( return (
...@@ -113,9 +115,7 @@ function Aside(props: any) { ...@@ -113,9 +115,7 @@ function Aside(props: any) {
<Menu <Menu
style={{ minHeight: "100%", background: '#0E1935' }} style={{ minHeight: "100%", background: '#0E1935' }}
selectedKeys={selectKey} inlineCollapsed={collapsed}
openKeys={openKeys}
inlineCollapsed={false}
mode={menuType ? "inline" : "vertical"} mode={menuType ? "inline" : "vertical"}
> >
{ {
...@@ -124,13 +124,11 @@ function Aside(props: any) { ...@@ -124,13 +124,11 @@ function Aside(props: any) {
return null; return null;
} }
if (item.children) { if (item.children) {
return <SubMenu onTitleMouseEnter={() => onOpenChangeForHover(item.groupCode)} key={item.groupCode} style={{ marginTop: 0 }} className="first-menu-item" title={<div > return <SubMenu
{/* <span style={{ marginRight: 16 }} className="iconfont icon" dangerouslySetInnerHTML={{ __html:item.icon}}></span> */} key={item.groupCode}
<img src={item.img} className="icon-img"></img> style={{ marginTop: 0 }}
{menuType && title={<div><img src={item.img} className="icon-img"></img><span>{item.groupName}</span></div> }
<span>{item.groupName}</span> onTitleClick={() => onOpenChange(item.groupCode)}>
}</div>
} onTitleClick={() => onOpenChange(item.groupCode)}>
{ {
item.children.map((_item: any, _index: any) => { item.children.map((_item: any, _index: any) => {
if (ctx.xmState.storeUserPermissionList.indexOf(_item.groupCode) === -1) { if (ctx.xmState.storeUserPermissionList.indexOf(_item.groupCode) === -1) {
...@@ -144,16 +142,12 @@ function Aside(props: any) { ...@@ -144,16 +142,12 @@ function Aside(props: any) {
} }
</SubMenu> </SubMenu>
} else { } else {
return <Menu.Item onClick={() => { toggleMenu(item) }} key={item.groupCode} className="first-menu-item"> return <Menu.Item
{/* <span style={{ marginRight: 16 }} className="iconfont icon" dangerouslySetInnerHTML={{ __html:item.icon}}></span> */} onClick={() => { toggleMenu(item) }}
{selectKey === item.groupCode ? key={item.groupCode}
<img src={item.selectImg} className="icon-img"></img> icon={selectKey === item.groupCode ? <img src={item.selectImg} className="icon-img"></img>:<img src={item.img} className="icon-img"></img>}
: >
<img src={item.img} className="icon-img"></img> {item.groupName}
}
{menuType &&
<span>{item.groupName}</span>
}
</Menu.Item> </Menu.Item>
} }
}) })
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment