123 lines
3.6 KiB
TypeScript
123 lines
3.6 KiB
TypeScript
/**
|
|
* Created by hao.cheng on 2017/4/16.
|
|
*/
|
|
import React from 'react';
|
|
import { Table, Input, Button } from 'antd';
|
|
import { trailwayDelUser, trailwayListUsers } from '../../service';
|
|
import AddUser from './AddUser';
|
|
import ChangePwd from './ChangePwd';
|
|
|
|
class UserManage extends React.Component {
|
|
constructor(props: {}) {
|
|
super(props);
|
|
}
|
|
private addUserRef = React.createRef<AddUser>();
|
|
private changePwdRef = React.createRef<ChangePwd>();
|
|
|
|
state = {
|
|
filterDropdownVisible: false,
|
|
data: [],
|
|
searchText: '',
|
|
filtered: false,
|
|
};
|
|
searchInput: any;
|
|
|
|
componentDidMount() {
|
|
this.refreshUser();
|
|
}
|
|
refreshUser = () => {
|
|
trailwayListUsers().then((res) => {
|
|
this.setState({
|
|
data: res.data,
|
|
});
|
|
});
|
|
};
|
|
showAddUser = () => {
|
|
this.addUserRef.current?.switchShow();
|
|
console.log('handleSwitchShow');
|
|
};
|
|
showChangePwd = (userId: Number) => {
|
|
this.changePwdRef.current?.switchShow(userId);
|
|
};
|
|
handleDel = (id: Number) => {
|
|
trailwayDelUser(id).then((res) => {
|
|
if (res.code == 200) {
|
|
this.refreshUser();
|
|
}
|
|
});
|
|
};
|
|
render() {
|
|
const columns = [
|
|
{
|
|
title: 'ID',
|
|
dataIndex: 'id',
|
|
key: 'id',
|
|
sorter: (a: any, b: any) => a.id - b.id,
|
|
},
|
|
{
|
|
title: '用户名',
|
|
dataIndex: 'username',
|
|
key: 'username',
|
|
},
|
|
{
|
|
title: '管理员',
|
|
dataIndex: 'role',
|
|
key: 'role',
|
|
render: (role: any) => (role === 1 ? '是' : '否'),
|
|
},
|
|
{
|
|
title: '操作',
|
|
render: (record: any) => (
|
|
<div>
|
|
<Button
|
|
onClick={() => this.showChangePwd(record.id)}
|
|
type="primary"
|
|
size="small"
|
|
>
|
|
修改密码
|
|
</Button>
|
|
<Button
|
|
type="primary"
|
|
size="small"
|
|
onClick={() => this.handleDel(record.id)}
|
|
>
|
|
删除
|
|
</Button>
|
|
</div>
|
|
),
|
|
},
|
|
];
|
|
return (
|
|
<div>
|
|
<Button onClick={this.showAddUser} type="primary">
|
|
增加用户
|
|
</Button>
|
|
<AddUser ref={this.addUserRef} onSuccess={this.refreshUser}></AddUser>
|
|
<ChangePwd ref={this.changePwdRef}></ChangePwd>
|
|
<Table
|
|
columns={columns}
|
|
dataSource={this.state.data}
|
|
rowKey={(record) => record.id}
|
|
/>
|
|
<style>{`
|
|
.custom-filter-dropdown {
|
|
padding: 8px;
|
|
border-radius: 6px;
|
|
background: #fff;
|
|
box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
|
|
}
|
|
.custom-filter-dropdown input {
|
|
width: 130px;
|
|
margin-right: 8px;
|
|
}
|
|
.highlight {
|
|
color: #f50;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default UserManage;
|