...

liyj

2020-06-24 7af09e42b49cd18f160c19297f47c4622b1eedc3

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
94
95
96
97
98
99
100
101
102
103
104
105
/* eslint-disable */
/**柯礼钦
 * 4/2/2020, 11:22:51 AM
 * doc comment for the file goes here
 */
 
/** 菜单渲染组件 */
 
import React, { useState } from 'react';
import { Layout, Menu, Icon, Badge } from 'antd';
import { RouteComponentProps } from 'react-router-dom';
import './index.scss';
 
const { SubMenu, Item } = Menu;
 
export default function MenuView({
    pathname,
    menudata,
    history,
}) {
    if (!menudata.length) return null;
 
    const { path, name, parentKey } = find(menudata, pathname);
 
    if (name) {
        const index = name.indexOf(' - ');
        if (index > -1) {
            document.title = `恒巨信息OA-${name.substr(index)}`;
        } else {
            document.title = `恒巨信息OA-${name}`;
        }
    } else {
        document.title = `恒巨信息`;
    }
 
    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 (
        <Menu
            key={defaultOpenKeys.join('-')}
            style={{ height: '100%', borderRight: 0 }}
            openKeys={openKeys}
            selectedKeys={path ? [path] : []}
            onOpenChange={onOpenChange}
            mode="inline">
            {render(menudata, history)}
        </Menu>
    );
}
 
const render = (data, history) => {
    return data.map(({ name, icon, path, count, children, type }, index) =>
        children && children.length ? (
            <SubMenu
                key={path}
                title={
                    <span>
                        <Icon type={icon || 'setting'} />
                        <span>{name}</span>
                    </span>
                }>
                {render(children, history)}
            </SubMenu>
        ) : (
                <Item
                    key={path}
                    title={name.length > 10 ? name : undefined}
                    onClick={() => {
                        if (type == 'open') {
                            window.open(path);
                        } else {
                            history.replace(path);
                        }
                    }}>
                    {Boolean(icon) && <Icon type={icon} />}
                    {Boolean(name) && <span>{name}</span>} <Badge count={count} />
                </Item>
            )
    );
};
 
const find = (data, full, pathname = { path: '', name: '' }) =>
    data.reduce((pn, { path, name, parentKey, children }) => {
        if (children && children.length) {
            return find(children, full, pn);
        }
        if (
            path.length > pn.path.length &&
            full.replace(/\/\d+/g, '').startsWith(path.replace(/\/\d+/g, ''))
        ) {
            return { path, name, parentKey };
        }
        return pn;
    }, pathname);