yapi/client/containers/User/List.js

157 lines
3.3 KiB
JavaScript
Raw Normal View History

2017-07-14 19:47:12 +08:00
import React, { Component } from 'react'
2017-07-18 19:47:38 +08:00
import { formatTime } from '../../common.js'
2017-07-18 17:15:29 +08:00
import { Link } from 'react-router-dom'
2017-07-17 11:01:05 +08:00
//import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
2017-07-17 11:01:05 +08:00
import {
Table,
2017-07-18 19:47:38 +08:00
Popconfirm,
message
2017-07-17 11:01:05 +08:00
} from 'antd'
import axios from 'axios';
2017-07-17 11:01:05 +08:00
const limit = 10;
@connect(
state => {
return {
2017-08-10 21:20:57 +08:00
curUserRole: state.user.role
}
}
)
2017-07-17 11:01:05 +08:00
class List extends Component {
2017-07-14 19:47:12 +08:00
constructor(props) {
super(props)
this.state = {
data: [],
total: null,
current: 1
}
}
static propTypes = {
curUserRole: PropTypes.string
}
changePage =(current)=>{
this.setState({
current: current
}, this.getUserList)
}
getUserList() {
axios.get('/api/user/list?page=' + this.state.current).then((res) => {
2017-07-18 17:15:29 +08:00
let result = res.data;
2017-08-10 21:20:57 +08:00
2017-07-18 19:47:38 +08:00
if (result.errcode === 0) {
2017-07-18 17:15:29 +08:00
let list = result.data.list;
let total = result.data.total * limit;
2017-07-18 19:47:38 +08:00
list.map((item, index) => {
2017-07-18 17:15:29 +08:00
item.key = index;
item.up_time = formatTime(item.up_time)
2017-07-18 19:47:38 +08:00
})
2017-07-18 17:15:29 +08:00
this.setState({
data: list,
total: total
2017-07-18 17:15:29 +08:00
});
}
})
2017-07-14 19:47:12 +08:00
}
componentDidMount() {
this.getUserList()
}
2017-07-17 11:01:05 +08:00
2017-07-18 19:47:38 +08:00
confirm = (uid) =>{
axios.post('/api/user/del', {
2017-07-18 19:47:38 +08:00
id: uid
}).then( (res)=>{
if(res.data.errcode === 0){
message.success('已删除此用户');
let userlist = this.state.data;
userlist = userlist.filter( (item)=>{
return item._id != uid
} )
this.setState({
data: userlist
})
}else{
message.error(res.data.errmsg);
}
}, (err) => {
message.error(err.message);
} )
}
2017-07-14 19:47:12 +08:00
2017-07-18 19:47:38 +08:00
render() {
const role = this.props.curUserRole;
let data = [];
if(role === 'admin'){
data = this.state.data;
}
2017-07-18 19:47:38 +08:00
let columns = [{
title: 'UID',
dataIndex: '_id',
2017-07-26 11:17:07 +08:00
key: '_id',
2017-08-22 16:37:24 +08:00
width: 100
2017-07-18 19:47:38 +08:00
}, {
title: '用户名',
dataIndex: 'username',
2017-07-26 11:17:07 +08:00
key: 'username',
2017-08-22 16:37:24 +08:00
width: 180
2017-07-18 19:47:38 +08:00
}, {
title: 'Email',
dataIndex: 'email',
key: 'email'
}, {
title: '用户角色',
dataIndex: 'role',
2017-07-26 11:17:07 +08:00
key: 'role',
2017-08-22 16:37:24 +08:00
width:150
2017-07-18 19:47:38 +08:00
}, {
title: '更新日期',
dataIndex: 'up_time',
2017-07-26 11:17:07 +08:00
key: 'up_time',
2017-08-22 16:37:24 +08:00
width: 150
2017-07-18 19:47:38 +08:00
}, {
title: '功能',
key: 'action',
2017-08-24 11:00:10 +08:00
width:"90px",
2017-07-18 19:47:38 +08:00
render: (item) => {
return (
2017-08-10 21:20:57 +08:00
<span>
2017-07-26 11:17:07 +08:00
<Link to={"/user/profile/" + item._id} >查看</Link>
<span className="ant-divider" />
2017-07-27 15:17:46 +08:00
<Popconfirm title="确认删除此用户?" onConfirm={() => {this.confirm(item._id)}} okText="确定" cancelText="取消">
2017-07-26 11:17:07 +08:00
<a href="#">删除</a>
2017-07-18 19:47:38 +08:00
</Popconfirm>
</span>
)
}
}]
columns = columns.filter( (item)=>{
if(item.key === 'action' && role !== 'admin'){
return false;
}
return true;
} )
2017-07-14 19:47:12 +08:00
const pageConfig = {
total: this.state.total,
pageSize: limit,
current: this.state.current,
onChange: this.changePage
}
2017-07-14 19:47:12 +08:00
return (
2017-07-17 11:01:05 +08:00
<section className="user-table">
2017-07-26 11:17:07 +08:00
<Table bordered={true} columns={columns} pagination={pageConfig} dataSource={data} />
2017-07-17 11:01:05 +08:00
2017-07-14 19:47:12 +08:00
</section>
)
}
}
2017-07-17 11:01:05 +08:00
export default List