2017-07-17 11:01:05 +08:00
|
|
|
import React, { Component } from 'react'
|
|
|
|
import { Link } from 'react-router-dom'
|
2017-07-19 13:58:12 +08:00
|
|
|
import { Row, Col, Menu, AutoComplete, Input, Icon } from 'antd'
|
|
|
|
import axios from 'axios'
|
2017-07-25 15:53:55 +08:00
|
|
|
import { connect } from 'react-redux'
|
|
|
|
import PropTypes from 'prop-types'
|
2017-08-09 20:09:59 +08:00
|
|
|
import Avatar from './Avatar.js'
|
2017-07-17 11:01:05 +08:00
|
|
|
|
2017-07-19 13:58:12 +08:00
|
|
|
const Option = AutoComplete.Option;
|
2017-07-25 15:53:55 +08:00
|
|
|
@connect(
|
|
|
|
state => {
|
|
|
|
console.log(state);
|
|
|
|
return {
|
2017-08-10 21:20:57 +08:00
|
|
|
curUid: state.user.uid + '',
|
|
|
|
curUserName: state.user.userName,
|
|
|
|
curUserRole: state.user.role
|
2017-07-25 15:53:55 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
)
|
2017-07-18 15:35:32 +08:00
|
|
|
class LeftMenu extends Component {
|
2017-07-17 11:01:05 +08:00
|
|
|
constructor(props) {
|
|
|
|
super(props)
|
2017-07-19 13:58:12 +08:00
|
|
|
this.state = {
|
|
|
|
dataSource: []
|
|
|
|
}
|
|
|
|
this.searchSign = 0;
|
|
|
|
this._searchSign = 0;
|
|
|
|
this.interval = null;
|
2017-07-17 11:01:05 +08:00
|
|
|
}
|
|
|
|
|
2017-07-25 15:53:55 +08:00
|
|
|
static propTypes = {
|
2017-07-26 16:37:51 +08:00
|
|
|
curUid: PropTypes.string,
|
2017-08-01 14:08:51 +08:00
|
|
|
curUserName: PropTypes.string,
|
|
|
|
curUserRole: PropTypes.string
|
2017-07-25 15:53:55 +08:00
|
|
|
}
|
2017-07-19 13:58:12 +08:00
|
|
|
|
|
|
|
//延迟搜索
|
|
|
|
handleSearch = (value) => {
|
|
|
|
if(!value || value.length < 1) return ;
|
|
|
|
this.searchSign = this.searchSign + 1;
|
|
|
|
this.interval && clearInterval(this.interval)
|
|
|
|
this.interval = setInterval(() => {
|
|
|
|
if (this.searchSign === this._searchSign) {
|
|
|
|
this.interval = clearInterval(this.interval)
|
2017-08-11 10:25:19 +08:00
|
|
|
axios.get('/api/user/search?q=' + value).then((res) => {
|
2017-07-19 13:58:12 +08:00
|
|
|
if (res.data.errcode === 0) {
|
|
|
|
this.setState({
|
|
|
|
dataSource: res.data.data
|
|
|
|
})
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
} else {
|
|
|
|
this._searchSign = this.searchSign;
|
|
|
|
}
|
2017-08-01 15:37:07 +08:00
|
|
|
}, 60)
|
2017-07-19 13:58:12 +08:00
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
renderOption = (item) => {
|
|
|
|
return (
|
|
|
|
<Option key={item.uid} text={item.username} >
|
|
|
|
<Link to={"/user/profile/" + item.uid} > {item.username} </Link>
|
|
|
|
</Option>
|
|
|
|
)
|
2017-07-17 11:01:05 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const menus = [{
|
|
|
|
title: '个人资料',
|
2017-07-25 15:53:55 +08:00
|
|
|
path: `/user/profile/${this.props.curUid}`
|
2017-07-17 11:01:05 +08:00
|
|
|
}
|
|
|
|
]
|
2017-08-01 14:08:51 +08:00
|
|
|
if(this.props.curUserRole === 'admin'){
|
|
|
|
menus.push({
|
|
|
|
title: '用户管理',
|
|
|
|
path: '/user/list'
|
|
|
|
})
|
|
|
|
}
|
2017-07-19 13:58:12 +08:00
|
|
|
let content = menus.map((menu) => {
|
2017-07-17 11:01:05 +08:00
|
|
|
return (
|
2017-07-19 13:58:12 +08:00
|
|
|
<Menu.Item key={'#' + menu.path} >
|
2017-07-17 11:01:05 +08:00
|
|
|
<Link to={menu.path} >{menu.title}</Link>
|
2017-07-19 13:58:12 +08:00
|
|
|
</Menu.Item>
|
2017-07-17 11:01:05 +08:00
|
|
|
)
|
|
|
|
})
|
|
|
|
|
2017-07-19 13:58:12 +08:00
|
|
|
const { dataSource } = this.state;
|
|
|
|
return (<div className="user-list">
|
2017-07-26 16:37:51 +08:00
|
|
|
<div className='cur-user'>
|
2017-08-09 20:09:59 +08:00
|
|
|
<Avatar />
|
2017-07-27 15:50:04 +08:00
|
|
|
<div className='user-name'><span>用户名 :</span>{`${this.props.curUserName}`}</div>
|
2017-07-26 16:37:51 +08:00
|
|
|
</div>
|
2017-07-17 11:01:05 +08:00
|
|
|
<Row type="flex" justify="start" className="search">
|
|
|
|
<Col span="24">
|
2017-07-19 13:58:12 +08:00
|
|
|
<div className="certain-category-search-wrapper" style={{ width: "100%" }}>
|
|
|
|
<AutoComplete
|
|
|
|
className="certain-category-search"
|
|
|
|
dropdownClassName="certain-category-search-dropdown"
|
|
|
|
size="large"
|
|
|
|
style={{ width: '100%' }}
|
|
|
|
dataSource={dataSource.map(this.renderOption)}
|
|
|
|
onSearch={this.handleSearch}
|
2017-08-01 15:37:07 +08:00
|
|
|
placeholder="搜索用户"
|
2017-07-19 13:58:12 +08:00
|
|
|
optionLabelProp="text"
|
|
|
|
>
|
|
|
|
<Input suffix={<Icon type="search" className="certain-category-icon" />} />
|
|
|
|
</AutoComplete>
|
|
|
|
</div>
|
2017-07-17 11:01:05 +08:00
|
|
|
</Col>
|
|
|
|
</Row>
|
2017-07-27 19:08:40 +08:00
|
|
|
<Menu mode='inline' defaultSelectedKeys={[location.hash]} className="user-nav">
|
2017-07-17 11:01:05 +08:00
|
|
|
{content}
|
2017-07-19 13:58:12 +08:00
|
|
|
</Menu>
|
2017-07-17 11:01:05 +08:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-07-27 19:08:40 +08:00
|
|
|
export default LeftMenu
|