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
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { withRouter } from 'dva/router';
import { Layout } from 'antd';
import SiderLogo from '../../components/layout/sider/SiderLogo';
import SiderMenu from '../../components/layout/sider/SiderMenu';
import HeaderPane from './header';
import { thisPush } from '../../services/route';
import styles from './index.less';
const { Sider, Header, Content, Footer } = Layout;
class Main extends React.Component {
constructor(props, context) {
super(props, context);
this.onClick = this::this.onClick;
this.onCollapse = this::this.onCollapse;
this.state = {
collapsed: false,
mode: 'inline',
};
}
componentDidMount() {
this.props.dispatch({ type: 'main/fetchModules' });
}
onClick({ keyPath }) {
const paths = keyPath.reverse().join('/');
thisPush(this, `/main/${paths}`);
// this.props.dispatch(routerRedux.push(fullPath(`/main/${paths}`)));
}
onCollapse(collapsed) {
this.setState({
collapsed,
mode: collapsed ? 'vertical' : 'inline',
});
}
render() {
const { main, children } = this.props;
const { menus } = main;
const mode = this.state.mode;
const menuProps = {
mode,
menus,
onClick: this.onClick,
};
const { routes, params } = this.props;
const headerProps = {
routes,
params,
menus,
};
return (
<Layout className={styles.layout}>
<Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
<SiderLogo />
<SiderMenu {...menuProps} />
</Sider>
<Layout>
<Header>
<HeaderPane {...headerProps} />
</Header>
<Content>
{ children }
</Content>
<Footer>
<span className={styles.company}>®上海铂蓝信息科技有限公司</span>
</Footer>
</Layout>
</Layout>
);
}
}
Main.propTypes = {
children: PropTypes.element,
main: PropTypes.object.isRequired,
};
export default connect(({ main }) => ({ main }))(withRouter(Main));