import React, {Component} from 'react';
import {itemRender} from '../../utils/utils'
import {
Badge,
Button,
Col,
Divider,
Dropdown,
Form,
Input,
Layout,
Menu,
Modal,
PageHeader,
Row,
Space,
Table,
Tag,
Tooltip,
Typography,
} from "antd";
import qs from "qs";
import UserModal from "./UserModal";
import request from "../../common/request";
import {message} from "antd/es";
import {
DeleteOutlined,
DownOutlined,
ExclamationCircleOutlined,
LockOutlined,
PlusOutlined,
SyncOutlined,
UndoOutlined
} from '@ant-design/icons';
import Logout from "./Logout";
import UserShareAsset from "./UserShareAsset";
import {hasPermission} from "../../service/permission";
const confirm = Modal.confirm;
const {Search} = Input;
const {Title, Text} = Typography;
const {Content} = Layout;
const routes = [
{
path: '',
breadcrumbName: '首页',
},
{
path: 'user',
breadcrumbName: '用户',
}
];
class User extends Component {
inputRefOfNickname = React.createRef();
inputRefOfUsername = React.createRef();
changePasswordFormRef = React.createRef()
state = {
items: [],
total: 0,
queryParams: {
pageIndex: 1,
pageSize: 10
},
loading: false,
modalVisible: false,
modalTitle: '',
modalConfirmLoading: false,
model: null,
selectedRowKeys: [],
delBtnLoading: false,
assetVisible: false,
changePasswordVisible: false,
changePasswordConfirmLoading: false,
selectedRow: {}
};
componentDidMount() {
this.loadTableData();
}
async delete(id) {
let result = await request.delete('/users/' + id);
if (result.code === 1) {
message.success('操作成功', 3);
await this.loadTableData(this.state.queryParams);
} else {
message.error('删除失败 :( ' + result.message, 10);
}
}
async loadTableData(queryParams) {
this.setState({
loading: true
});
queryParams = queryParams || this.state.queryParams;
let paramsStr = qs.stringify(queryParams);
let data = {
items: [],
total: 0
};
try {
let result = await request.get('/users/paging?' + paramsStr);
if (result.code === 1) {
data = result.data;
} else {
message.error(result.message, 10);
}
} catch (e) {
} finally {
const items = data.items.map(item => {
return {'key': item['id'], ...item}
})
this.setState({
items: items,
total: data.total,
queryParams: queryParams,
loading: false
});
}
}
handleChangPage = (pageIndex, pageSize) => {
let queryParams = this.state.queryParams;
queryParams.pageIndex = pageIndex;
queryParams.pageSize = pageSize;
this.setState({
queryParams: queryParams
});
this.loadTableData(queryParams).then(r => {
})
};
showDeleteConfirm(id, content) {
let self = this;
confirm({
title: '您确定要删除此用户吗?',
content: content,
okText: '确定',
okType: 'danger',
cancelText: '取消',
onOk() {
self.delete(id);
}
});
};
showModal(title, user = {}) {
this.setState({
model: user,
modalVisible: true,
modalTitle: title
});
};
handleCancelModal = e => {
this.setState({
modalVisible: false,
modalTitle: ''
});
};
handleOk = async (formData) => {
// 弹窗 form 传来的数据
this.setState({
modalConfirmLoading: true
});
if (formData.id) {
// 向后台提交数据
const result = await request.put('/users/' + formData.id, formData);
if (result.code === 1) {
message.success('操作成功', 3);
this.setState({
modalVisible: false
});
await this.loadTableData(this.state.queryParams);
} else {
message.error('操作失败 :( ' + result.message, 10);
}
} else {
// 向后台提交数据
const result = await request.post('/users', formData);
if (result.code === 1) {
message.success('操作成功', 3);
this.setState({
modalVisible: false
});
await this.loadTableData(this.state.queryParams);
} else {
message.error('操作失败 :( ' + result.message, 10);
}
}
this.setState({
modalConfirmLoading: false
});
};
handleSearchByUsername = username => {
let query = {
...this.state.queryParams,
'pageIndex': 1,
'pageSize': this.state.queryParams.pageSize,
'username': username,
}
this.loadTableData(query);
};
handleSearchByNickname = nickname => {
let query = {
...this.state.queryParams,
'pageIndex': 1,
'pageSize': this.state.queryParams.pageSize,
'nickname': nickname,
}
this.loadTableData(query);
};
batchDelete = async () => {
this.setState({
delBtnLoading: true
})
try {
let result = await request.delete('/users/' + this.state.selectedRowKeys.join(','));
if (result['code'] === 1) {
message.success('操作成功', 3);
this.setState({
selectedRowKeys: []
})
await this.loadTableData(this.state.queryParams);
} else {
message.error(result['message'], 10);
}
} finally {
this.setState({
delBtnLoading: false
})
}
}
handleAssetCancel = () => {
this.loadTableData()
this.setState({
assetVisible: false
})
}
handleChangePassword = async (values) => {
this.setState({
changePasswordConfirmLoading: true
})
let result = await request.post(`/users/${this.state.selectedRow['id']}/change-password?password=${values['password']}`);
if (result['code'] === 1) {
message.success('操作成功', 3);
} else {
message.error(result['message'], 10);
}
this.setState({
changePasswordConfirmLoading: false,
changePasswordVisible: false
})
}
render() {
const columns = [{
title: '序号',
dataIndex: 'id',
key: 'id',
render: (id, record, index) => {
return index + 1;
}
}, {
title: '登录账号',
dataIndex: 'username',
key: 'username',
}, {
title: '用户昵称',
dataIndex: 'nickname',
key: 'nickname',
}, {
title: '用户类型',
dataIndex: 'type',
key: 'type',
render: (text, record) => {
if (text === 'user') {
return (
普通用户
);
} else if (text === 'admin') {
return (
管理用户
);
} else {
return text;
}
}
}, {
title: '在线状态',
dataIndex: 'online',
key: 'online',
render: text => {
if (text) {
return ();
} else {
return ();
}
}
}, {
title: '授权资产',
dataIndex: 'sharerAssetCount',
key: 'sharerAssetCount',
render: (text, record, index) => {
return
}
}, {
title: '创建日期',
dataIndex: 'created',
key: 'created'
},
{
title: '操作',
key: 'action',
render: (text, record) => {
const menu = (
);
return (
)
},
}
];
const selectedRowKeys = this.state.selectedRowKeys;
const rowSelection = {
selectedRowKeys: this.state.selectedRowKeys,
onChange: (selectedRowKeys, selectedRows) => {
this.setState({selectedRowKeys});
},
};
const hasSelected = selectedRowKeys.length > 0;
return (
<>
]}
subTitle="平台用户管理"
>
用户列表
{/**/}
{/* */}
{/**/}
{/**/}
{/* */}
{/**/}
`总计 ${total} 条`
}}
loading={this.state.loading}
/>
{/* 为了屏蔽ant modal 关闭后数据仍然遗留的问题*/}
{
this.state.modalVisible ?
: undefined
}
{
}}
onCancel={this.handleAssetCancel}
okText='确定'
cancelText='取消'
footer={null}
>
{
this.state.changePasswordVisible ?
{
this.changePasswordFormRef.current
.validateFields()
.then(values => {
this.changePasswordFormRef.current.resetFields();
this.handleChangePassword(values);
})
.catch(info => {
});
}}
onCancel={() => {
this.setState({
changePasswordVisible: false
})
}}>
: undefined
}
);
}
}
export default User;