forked from huge/frontEnd/hugeOA

Mr Ke
2020-04-27 5acddbdb6b6d48a08b52602fd232993fd5c3715d
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
/* eslint-disable */
/**柯礼钦
 * 4/2/2020, 11:22:51 AM
 * doc comment for the file goes here
 */
 
/** 菜单渲染组件 */
 
import React 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 } = find(menudata, pathname);
 
    if (name) {
        const index = name.indexOf(' - ');
        if (index > -1) {
            document.title = `${name.substr(index)}`;
        } else {
            document.title = `${name}`;
        }
    } else {
        document.title = `恒巨信息`;
    }
 
    const defaultOpenKeys = menudata.map(({ name }) => name);
 
    return (
        // <Layout.Sider
        //   // width={200}
        //   theme="light"
        //   style={{ backgroundColor: 'white' }}>
        <Menu
            key={defaultOpenKeys.join('-')}
            style={{ height: '100%', borderRight: 0 }}
            defaultOpenKeys={defaultOpenKeys}
            selectedKeys={path ? [path] : []}
            mode="inline">
            {render(menudata, history)}
        </Menu>
        // </Layout.Sider>
    );
}
 
const render = (data, history) => {
    return data.map(({ name, icon, path, count, children, type }, index) =>
        children && children.length ? (
            <SubMenu
                key={name}
                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, 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 };
        }
        return pn;
    }, pathname);