yapi/client/containers/User/LeftMenu.js

119 lines
3.1 KiB
JavaScript
Raw Normal View History

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-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-07-26 16:37:51 +08:00
curUid: state.login.uid + '',
curUserName: state.login.userName,
curUserRole: state.login.role
2017-07-25 15:53:55 +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,
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-07-27 19:08:40 +08:00
axios.get('/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;
}
}, 600)
}
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
}
]
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-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}
placeholder="input here"
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