Skip to content

X
xiaomai-cloud-class-web
Commit 587cdfab by maolipeng
Options

Merge branch 'master' into feature/maolipeng/20210610/zuhuyouhua 

# Conflicts:
#	src/modules/root/Menu.tsx
parents e935b932 84416698
Showing with 84 additions and 85 deletions
src/modules/root/Menu.tsx
import React, { Key, useContext, useEffect, useRef, useState } from 'react'; import React, { Key, useContext, useEffect, useRef, useState, useMemo } from 'react';
import { import {
withRouter, withRouter,
} from 'react-router-dom'; } from 'react-router-dom';
...@@ -13,7 +13,6 @@ import User from "@/common/js/user" ...@@ -13,7 +13,6 @@ import User from "@/common/js/user"
import _ from 'underscore'; import _ from 'underscore';
import "./Menu.less"; import "./Menu.less";
import { display } from 'html2canvas/dist/types/css/property-descriptors/display'; import { display } from 'html2canvas/dist/types/css/property-descriptors/display';
import moment from 'moment';
import ContactWidget from '@/components/ContactWidget'; import ContactWidget from '@/components/ContactWidget';
const { SubMenu } = Menu; const { SubMenu } = Menu;
...@@ -114,21 +113,20 @@ function VersionPanel(props: any) { ...@@ -114,21 +113,20 @@ function VersionPanel(props: any) {
function Aside(props: any) { function Aside(props: any) {
const {menuType,handleMenuType}= props const { menuType, handleMenuType } = props
const ctx: any = useContext(XMContext); const ctx: any = useContext(XMContext);
const [selectKey, setSelectKey] = useState(); const [selectKey, setSelectKey] = useState();
const [openKeys, setOpenKeys] = useState(['']); const [openKeys, setOpenKeys] = useState(['']);
const [lastOpenKeys, setLastOpenKeys] = useState(['']);
const [topLogoUrl, setTopLogoUrl] = useState("") const [topLogoUrl, setTopLogoUrl] = useState("")
const [collapsed, setCollapsed] = useState(false) 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;
menuList.map((item: any, index: any) => { menuList.map((item: any, index: any) => {
if (link.indexOf(item.link) !== -1) { if (link.indexOf(item.link) !== -1) {
setSelectKey(item.groupCode); setSelectKey(item.groupCode);
setOpenKeys([]) setOpenKeys([])
setLastOpenKeys([])
} else if (item.children) { } else if (item.children) {
item.children.map((_item: any, _index: any) => { item.children.map((_item: any, _index: any) => {
if (link.indexOf(_item.link) !== -1) { if (link.indexOf(_item.link) !== -1) {
...@@ -139,36 +137,37 @@ function Aside(props: any) { ...@@ -139,36 +137,37 @@ function Aside(props: any) {
return item; return item;
}) })
}, [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() })
.then(res=> { .then(res => {
if (_.isEmpty(res.result.logo)) { if (_.isEmpty(res.result.logo)) {
setTopLogoUrl("https://image.xiaomaiketang.com/xm/fe4NCjr7XF.png") setTopLogoUrl("https://image.xiaomaiketang.com/xm/fe4NCjr7XF.png")
} else { } else {
setTopLogoUrl(res.result.logo) setTopLogoUrl(res.result.logo)
} }
}) })
} }
} }
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: Key[]) { function onOpenChange(key: Key[]) {
if (typeof key === "string") { if (typeof key === "string") {
if (openKeys.includes(key)) { if (openKeys.includes(key)) {
setOpenKeys([]); setOpenKeys([]);
setLastOpenKeys([]);
} else { } else {
setOpenKeys([key]); setOpenKeys([key]);
setLastOpenKeys([key])
} }
} }
} }
...@@ -180,10 +179,8 @@ function Aside(props: any) { ...@@ -180,10 +179,8 @@ function Aside(props: any) {
if (typeof key === "string") { if (typeof key === "string") {
if (openKeys.includes(key)) { if (openKeys.includes(key)) {
setOpenKeys([]); setOpenKeys([]);
setLastOpenKeys([]);
} else { } else {
setOpenKeys([key]); setOpenKeys([key]);
setLastOpenKeys([key])
} }
} }
} }
...@@ -191,27 +188,29 @@ function Aside(props: any) { ...@@ -191,27 +188,29 @@ function Aside(props: any) {
function handleMenu() { function handleMenu() {
handleMenuType(); handleMenuType();
setCollapsed(!collapsed) setCollapsed(!collapsed)
if (!collapsed) {
setOpenKeys([])
} else {
setOpenKeys(lastOpenKeys)
}
} }
const openKeysConstrol = useMemo(() => {
return {
[menuType ? 'openKeys' : 'defaultOpenKeys']: openKeys
};
}, [menuType, openKeys])
return ( return (
<div <div
id="left-container" id="left-container"
className={ className={
menuType menuType
? "left-container" ? "left-container"
: "left-container left-container-vertical" : "left-container left-container-vertical"
} }
> >
<div className="top-ctrl"> <div className="top-ctrl">
<div className="topLogo"> <div className="topLogo">
{ menuType && <img src={topLogoUrl} alt="" className="img1"></img> } {menuType && <img src={topLogoUrl} alt="" className="img1"></img>}
</div> </div>
<div className="menu-type-icon" onClick={handleMenu}> <div className="menu-type-icon" onClick={handleMenu}>
{menuType ? ( {menuType ? (
<span <span
className="icon iconfont" className="icon iconfont"
...@@ -226,58 +225,58 @@ function Aside(props: any) { ...@@ -226,58 +225,58 @@ function Aside(props: any) {
</span> </span>
)} )}
</div> </div>
</div> </div>
<div className="left"> <div className="left">
<div className="nav"> <div className="nav">
<Menu <Menu
style={menuType ? { minHeight: "100%", background: '#0E1935' }:{minHeight: "100%", background: '#0E1935',width:"56px" }} {...openKeysConstrol}
selectedKeys={selectKey} style={menuType ? { minHeight: "100%", background: '#0E1935' } : { minHeight: "100%", background: '#0E1935', width: "56px" }}
openKeys={openKeys} selectedKeys={selectKey}
onOpenChange={onOpenChange}
inlineCollapsed={collapsed}
mode={menuType ? "inline" : "vertical"}
>
{
menuList.map((item: any, index: any) => {
if (ctx.xmState.storeUserPermissionList.indexOf(item.groupCode) === -1) {
return null;
}
if (item.children) {
return <SubMenu
key={item.groupCode}
style={{ marginTop: 0 }}
icon={<img src={item.img} className="icon-img"></img>}
title={menuType ? <span>{item.groupName}</span> : ""}
onTitleClick={() => onOpenChange(item.groupCode)}
>
{
item.children.map((_item: any, _index: any) => {
if (ctx.xmState.storeUserPermissionList.indexOf(_item.groupCode) === -1) {
return null;
}
return <Menu.Item onClick={() => { toggleMenu(_item) }} style={{ marginTop: 0 }} key={_item.groupCode + index + _index} >
<span className="name">{_item.groupName}</span>
</Menu.Item>
}) onOpenChange={onOpenChange}
} inlineCollapsed={collapsed}
</SubMenu> mode={menuType ? "inline" : "vertical"}
} else { >
return <Menu.Item {
onClick={() => { toggleMenu(item) }} menuList.map((item: any, index: any) => {
key={item.groupCode} if (ctx.xmState.storeUserPermissionList.indexOf(item.groupCode) === -1) {
icon={<img src={selectKey === item.groupCode ? item.selectImg : item.img} className="icon-img"></img>} return null;
> }
if (item.children) {
return <SubMenu
key={item.groupCode}
style={{ marginTop: 0 }}
icon={<img src={item.img} className="icon-img"></img>}
title={menuType ? <span>{item.groupName}</span> : ""}
onTitleClick={() => onOpenChange(item.groupCode)}
>
{
item.children.map((_item: any, _index: any) => {
if (ctx.xmState.storeUserPermissionList.indexOf(_item.groupCode) === -1) {
return null;
}
return <Menu.Item onClick={() => { toggleMenu(_item) }} style={{ marginTop: 0 }} key={_item.groupCode + index + _index} >
<span className="name">{_item.groupName}</span>
</Menu.Item>
})
}
</SubMenu>
} else {
return <Menu.Item
onClick={() => { toggleMenu(item) }}
key={item.groupCode}
icon={<img src={selectKey === item.groupCode ? item.selectImg : item.img} className="icon-img"></img>}
>
{menuType ? item.groupName : ""} {menuType ? item.groupName : ""}
</Menu.Item> </Menu.Item>
} }
}) })
} }
</Menu> </Menu>
</div> </div>
</div> </div>
{ {
menuType ? <VersionPanel /> : "" menuType ? <VersionPanel /> : ""
......
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