style:高度

zhangyongtian

2024-09-12 2d2efba54e188738ca3dba9820df14f58221487f

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
/*
 * @Company: hugeInfo
 * @Author: ldh
 * @Date: 2022-02-14 14:22:07
 * @LastEditTime: 2022-12-14 11:44:25
 * @LastEditors: ldh
 * @Version: 1.0.0
 * @Description: 导航菜单
 */
import React, { useState, useEffect, useMemo } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Menu } from 'antd';
import Icon, { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import { iconContrast } from '../../utils/utility';
 
const { SubMenu } = Menu;
 
const Navigation = ({ powerMap, sideMenu = [], roleActive }) => {
    const location = useLocation();
 
    const pathname = location.pathname;
 
    const [collapsed, setCollapsed] = useState();
 
    // 当前选择menuItem
    const [selectedKeys, setSelectedKeys] = useState(pathname);
 
    const [openKeys, setOpenKeys] = useState([]);
 
    function menuDom(data) {
        return data.map((x) => {
            if (x.powerUrl) {
                if (x.linkStatus == 2) {
                    return (
                        <Menu.Item key={x.powerTag} icon={x.powerIcon ? <Icon component={iconContrast[x.powerIcon]} /> : null}>
                            <div onClick={() => window.open(x.powerUrl)}>{x.label}</div>
                        </Menu.Item>
                    );
                }
                if (!powerMap[x.powerUrl]?.show || x.powerUrl === '/mediate/register') {
                    return false;
                }
                return (
                    <Menu.Item key={x.powerUrl || x.value} icon={x.powerIcon ? <Icon component={iconContrast[x.powerIcon]} /> : null}>
                        <Link to={x.powerUrl}>{x.label}</Link>
                    </Menu.Item>
                );
            } else {
                return (
                    <SubMenu key={x.powerTag || x.value} icon={<Icon component={iconContrast[x.powerIcon]} />} title={x.label}>
                        {menuDom(x.children)}
                    </SubMenu>
                );
            }
        });
    }
 
    // 路由更改时，判断当前页面是否有权限访问
    useEffect(() => {
        if (powerMap[pathname]) {
            setSelectedKeys(pathname);
        }
    }, [pathname, roleActive.id]);
 
    useEffect(() => {
        forEach: for (let i = 0; i < sideMenu.length; i++) {
            if (!sideMenu[i].powerUrl) {
                setOpenKeys([sideMenu[i].powerTag]);
                break forEach;
            }
        }
    }, [sideMenu.length, roleActive.id]);
 
    return (
        <nav className="nav" id="nav">
            <Menu
                style={{ width: collapsed ? '80px' : '220px', flex: 1, overflowY: 'auto', overflowX: 'hidden' }}
                mode="inline"
                selectedKeys={selectedKeys}
                openKeys={openKeys}
                inlineCollapsed={collapsed}
                onOpenChange={(openKeys) => setOpenKeys(openKeys)}
            >
                {menuDom(sideMenu)}
            </Menu>
            <div className="nav-menuFold" onClick={() => setCollapsed(!collapsed)}>
                {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            </div>
        </nav>
    );
};
 
export default Navigation;