2019-09-07-01

king

2019-09-07 c2a10e60d47895a58007201fd1fa88e453ddd653

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
106
107
108
109
110
111
112
113
114
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import { is, fromJS } from 'immutable'
import {Dropdown, Menu, Icon} from 'antd'
import {toggleCollapse, modifyMainMenu} from '@/store/action'
import Api from '@/api'
import logourl from '../../assets/img/mlogo.png'
import avatar from '../../assets/img/avatar.jpg'
import './header.scss'
 
class Header extends Component {
  static propTpyes = {
    collapse: PropTypes.bool,
    mainMenu: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.object
    ])
  }
  state = {
    menulist: null
  }
 
  handleCollapse = () => {
    this.props.toggleCollapse(!this.props.collapse)
  }
 
  onClick = () => {
    console.log('menu')
  }
 
  changeMenu = (value) => {
    this.props.modifyMainMenu(value)
  }
 
  async loadmenu () {
    // 获取主菜单
    let result = await Api.getMainMenuData()
    if (result.status) {
      this.setState({
        menulist: result.data
      })
      this.props.modifyMainMenu(result.data[0])
    }
  }
  
  UNSAFE_componentWillMount () {
    this.loadmenu()
  }
  componentDidMount () {
    console.log(13)
  }
  UNSAFE_componentWillReceiveProps () {
    // console.log('header componentWillReceiveProps')
  }
 
  shouldComponentUpdate(nextProps, nextState) {
    return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
  }
 
  componentDidUpdate () {
 
  }
 
  render () {
    const menu = (
      <Menu className="header-dropdown" onClick={this.onClick}>
        <Menu.Item key="1">修改密码</Menu.Item>
        <Menu.Item key="2">退出</Menu.Item>
      </Menu>
    )
    return (
      <header className="header-container ant-menu-dark">
        <div className={this.props.collapse ? "collapse header-logo" : "header-logo"}><img src={logourl} alt=""/></div>
        <div className={this.props.collapse ? "collapse header-collapse" : "header-collapse"} onClick={this.handleCollapse}>
          <Icon type={this.props.collapse ? 'menu-unfold' : 'menu-fold'} />
        </div>
        {this.state.menulist && <ul className="header-menu">{
          this.state.menulist.map(item => {
            return (
              <li key={item.id} onClick={() => {this.changeMenu(item)}} className={this.props.selectmenu.id === item.id ? 'active' : ''}>
                {item.MenuName}
              </li>
            )
          })
        }</ul>}
        <Dropdown className="header-setting" overlay={menu}>
          <div>
            <img src={avatar} alt=""/>
            <span>
              admin <Icon type="down" />
            </span>
          </div>
        </Dropdown>
      </header>
    )
  }
}
 
const mapStateToProps = (state) => {
  return {
    collapse: state.collapse,
    selectmenu: state.selectedMainMenu
  }
}
 
const mapDispatchToProps = (dispatch) => {
  return {
    toggleCollapse: (collapse) => dispatch(toggleCollapse(collapse)),
    modifyMainMenu: (selectmenu) => dispatch(modifyMainMenu(selectmenu))
  }
}
 
export default connect(mapStateToProps, mapDispatchToProps)(Header)