395 lines
14 KiB
TypeScript
395 lines
14 KiB
TypeScript
import styles from '@/page/Home/User/index.module.scss'
|
||
import { useEffect, useState } from "react";
|
||
import Operation from '@/components/Operation';
|
||
import { Button, Input, Table, Pagination, Modal, message, Select } from "antd";
|
||
import { SearchOutlined } from '@ant-design/icons';
|
||
import { GetUserList, PostUser, PutUser, DeleteUser, PutUserPwd, GetRoleDpList } from '@/api/Home/User';
|
||
import { md5 } from 'js-md5';
|
||
const { Column } = Table
|
||
const User: React.FC = () => {
|
||
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
|
||
const [isCreateUser, setIsCreateUser] = useState(false);
|
||
const [list, setList] = useState({
|
||
data: [],
|
||
searchKeywod: '',
|
||
total: 0,
|
||
pageIndex: 1,
|
||
pageSize: 6,
|
||
})
|
||
const [roleList, setRoleList] = useState([])
|
||
const [addUserModal, setAddUserModal] = useState(false)
|
||
const [addUserFrom, setAddUserFrom] = useState({
|
||
Id: "",
|
||
Account: "",
|
||
RoleId: null,
|
||
Pwd: "",
|
||
UserName: ""
|
||
})
|
||
const [changeUserPawModal, setChangeUserPawModal] = useState(false)
|
||
const [changeUserPawFrom, setChangeUserPawFrom] = useState({
|
||
Pwd: "",
|
||
newPwd: '',
|
||
})
|
||
const [deleteUserPawModal, setDeleteUserPawModal] = useState(false)
|
||
|
||
useEffect(() => {
|
||
getUserList()
|
||
}, [list.pageIndex]);
|
||
|
||
const getUserList = async (): Promise<void> => {
|
||
await GetUserList({
|
||
pageIndex: list.pageIndex,
|
||
pageSize: list.pageSize,
|
||
searchKeywod: list.searchKeywod,
|
||
}).then(res => {
|
||
if (res.code === 200) {
|
||
setList({
|
||
...list,
|
||
total: res.data.total,
|
||
data: res.data.items.map((item: any) => {
|
||
return {
|
||
...item,
|
||
key: item.id,
|
||
}
|
||
}),
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
const getRoleDpList = async (callBack: Function): Promise<void> => {
|
||
await GetRoleDpList().then(res => {
|
||
if (res.code === 200) {
|
||
setRoleList(res.data.map((item: any) => {
|
||
return {
|
||
...item,
|
||
value: item.id,
|
||
label: item.roleName
|
||
}
|
||
}))
|
||
callBack(true)
|
||
}
|
||
})
|
||
}
|
||
return (
|
||
<>
|
||
<div className={styles.user}>
|
||
<div className={styles.userOperation}>
|
||
<Operation></Operation>
|
||
</div>
|
||
<div className={styles.userBtns}>
|
||
<div className={`${styles.userBtnsLeft} drag`}>
|
||
<Button type="primary"
|
||
onClick={() => {
|
||
getRoleDpList((bool: boolean) => {
|
||
if (bool) {
|
||
setIsCreateUser(true)
|
||
setAddUserFrom({
|
||
Id: "",
|
||
Account: "",
|
||
RoleId: null,
|
||
Pwd: "",
|
||
UserName: "",
|
||
})
|
||
setAddUserModal(true)
|
||
}
|
||
})
|
||
}}
|
||
icon={<img src="/src/assets/icon8.png" alt="" />}
|
||
className='m-ant-btn'>
|
||
添加用户
|
||
</Button>
|
||
<Button type="primary"
|
||
icon={<img src="/src/assets/icon21.png" alt="" />}
|
||
className={styles.userBtnsDel}
|
||
onClick={() => {
|
||
setDeleteUserPawModal(true)
|
||
}}
|
||
>
|
||
删除用户
|
||
</Button>
|
||
</div>
|
||
<div className={`${styles.userBtnsRight} drag`}>
|
||
<Input
|
||
placeholder="请输入用户名"
|
||
prefix={<SearchOutlined style={{ color: 'white' }} />}
|
||
onChange={(e) => {
|
||
setList({
|
||
...list,
|
||
searchKeywod: e.target.value,
|
||
})
|
||
}}
|
||
/>
|
||
<Button className='m-border-ant-button' onClick={() => {
|
||
if (list.pageIndex === 1) {
|
||
getUserList()
|
||
} else {
|
||
setList({
|
||
...list,
|
||
pageIndex: 1
|
||
})
|
||
}
|
||
}}>查询</Button>
|
||
</div>
|
||
</div>
|
||
<div className={`${styles.userContent} drag`}>
|
||
<Table
|
||
size={'small'}
|
||
rowSelection={{
|
||
selectedRowKeys,
|
||
onChange: (newSelectedRowKeys: React.Key[]) => {
|
||
setSelectedRowKeys(newSelectedRowKeys);
|
||
}
|
||
}}
|
||
dataSource={list.data}
|
||
pagination={false}
|
||
scroll={{ y: '70vh' }}
|
||
style={{ width: '81.4vw', flexGrow: 1 }}
|
||
>
|
||
<Column title="姓名" dataIndex="userName" key="userName" />
|
||
<Column title="账号" dataIndex="account" key="account" />
|
||
<Column title="角色" dataIndex="roleName" key="roleName" />
|
||
<Column title="在线状态" render={(item) => (
|
||
<>
|
||
<div style={{ color: '#02B188' }}>{item.account}</div>
|
||
</>
|
||
)} />
|
||
<Column title="操作" render={(item) => (
|
||
<>
|
||
<Button
|
||
type="primary"
|
||
style={{ backgroundColor: '#0085FF30', marginRight: '14px' }}
|
||
size={'small'}
|
||
onClick={() => {
|
||
getRoleDpList((bool: boolean) => {
|
||
if (bool) {
|
||
setIsCreateUser(false)
|
||
setAddUserFrom({
|
||
...addUserFrom,
|
||
Id: item.id,
|
||
Account: item.account,
|
||
RoleId: item.roleId,
|
||
UserName: item.userName,
|
||
})
|
||
setAddUserModal(true)
|
||
}
|
||
})
|
||
}}>编辑</Button>
|
||
<Button
|
||
type="primary"
|
||
style={{ backgroundColor: '#715AFF40', marginRight: '14px' }}
|
||
size={'small'}
|
||
onClick={() => {
|
||
setChangeUserPawFrom({
|
||
Pwd: "",
|
||
newPwd: '',
|
||
})
|
||
setAddUserFrom({
|
||
...addUserFrom,
|
||
Id: item.id,
|
||
Account: item.account,
|
||
RoleId: item.roleId,
|
||
UserName: item.userName,
|
||
})
|
||
setChangeUserPawModal(true)
|
||
}}>更改密码</Button>
|
||
</>
|
||
)} />
|
||
</Table>
|
||
<div className={styles.userContentPagination}>
|
||
<span>共{list.total}项数据</span>
|
||
<Pagination size="small" total={list.total} onChange={(e) => {
|
||
setList({
|
||
...list,
|
||
pageIndex: e
|
||
})
|
||
}} pageSize={list.pageSize} current={list.pageIndex} hideOnSinglePage={true} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Modal title={isCreateUser ? '添加用户' : '编辑用户'} open={addUserModal} footer={null} closable={false} centered width={'40vw'}>
|
||
<div>
|
||
<div className={styles.addUserModal}>
|
||
<div>
|
||
<span>账号：</span>
|
||
<Input
|
||
placeholder="请输入账号"
|
||
value={addUserFrom.Account}
|
||
onChange={(e) => {
|
||
setAddUserFrom({
|
||
...addUserFrom,
|
||
Account: e.target.value,
|
||
});
|
||
}}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<span>角色：</span>
|
||
<Select
|
||
placeholder='请选择角色'
|
||
options={roleList}
|
||
style={{ flexGrow: 1 }}
|
||
value={addUserFrom.RoleId} onChange={(e) => {
|
||
setAddUserFrom({
|
||
...addUserFrom,
|
||
RoleId: e
|
||
});
|
||
}} />;
|
||
</div>
|
||
{isCreateUser ? <div>
|
||
<span>密码：</span>
|
||
<Input.Password
|
||
placeholder="请输入密码"
|
||
style={{ flexGrow: 1 }}
|
||
value={addUserFrom.Pwd}
|
||
onChange={(e) => {
|
||
setAddUserFrom({
|
||
...addUserFrom,
|
||
Pwd: e.target.value,
|
||
});
|
||
}}
|
||
/>
|
||
</div> : null}
|
||
<div>
|
||
<span>用户名称：</span>
|
||
<Input
|
||
placeholder="请输入用户名称"
|
||
style={{ flexGrow: 1 }}
|
||
value={addUserFrom.UserName}
|
||
onChange={(e) => {
|
||
setAddUserFrom({
|
||
...addUserFrom,
|
||
UserName: e.target.value,
|
||
});
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div style={{
|
||
display: 'flex', justifyContent: 'center'
|
||
}}>
|
||
<Button type="primary" style={{ backgroundColor: '#31353A', marginRight: '14px' }} onClick={() => setAddUserModal(false)}>取消</Button>
|
||
<Button type="primary" className='m-ant-btn' onClick={async () => {
|
||
if (!addUserFrom.Account) {
|
||
return message.error('请输入账号！')
|
||
}
|
||
if (!addUserFrom.RoleId) {
|
||
return message.error('请选择角色！')
|
||
}
|
||
if (!addUserFrom.Pwd && isCreateUser) {
|
||
return message.error('请输入密码！')
|
||
}
|
||
if (!addUserFrom.UserName) {
|
||
return message.error('请输入用户名称！')
|
||
}
|
||
if (isCreateUser) {
|
||
await PostUser({
|
||
...addUserFrom,
|
||
Pwd: md5(addUserFrom.Pwd)
|
||
}).then(res => {
|
||
if (res.code === 200) {
|
||
setAddUserModal(false)
|
||
message.success('添加成功！')
|
||
}
|
||
})
|
||
} else {
|
||
await PutUser({
|
||
Id: addUserFrom.Id,
|
||
Account: addUserFrom.Account,
|
||
RoleId: addUserFrom.RoleId,
|
||
UserName: addUserFrom.UserName
|
||
}).then(res => {
|
||
if (res.code === 200) {
|
||
setAddUserModal(false)
|
||
message.success('修改成功！')
|
||
}
|
||
})
|
||
}
|
||
await getUserList()
|
||
}}>{isCreateUser ? '添加' : '修改'}</Button>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
<Modal title='更改密码' open={changeUserPawModal} footer={null} closable={false} centered width={'40vw'}>
|
||
<div>
|
||
<div className={styles.addUserModal}>
|
||
<div>
|
||
<span>新密码：</span>
|
||
<Input.Password
|
||
placeholder="请输入新密码"
|
||
style={{ flexGrow: 1 }}
|
||
value={changeUserPawFrom.Pwd}
|
||
onChange={(e) => {
|
||
setChangeUserPawFrom({
|
||
...changeUserPawFrom,
|
||
Pwd: e.target.value,
|
||
});
|
||
}}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<span>确认密码：</span>
|
||
<Input.Password
|
||
placeholder="再次输入密码"
|
||
style={{ flexGrow: 1 }}
|
||
value={changeUserPawFrom.newPwd}
|
||
onChange={(e) => {
|
||
setChangeUserPawFrom({
|
||
...changeUserPawFrom,
|
||
newPwd: e.target.value,
|
||
});
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div style={{
|
||
display: 'flex', justifyContent: 'center'
|
||
}}>
|
||
<Button type="primary" style={{ backgroundColor: '#31353A', marginRight: '14px' }} onClick={() => setChangeUserPawModal(false)}>取消</Button>
|
||
<Button type="primary" className='m-ant-btn' onClick={async () => {
|
||
if (!changeUserPawFrom.Pwd || !changeUserPawFrom.newPwd) {
|
||
return message.error('请输入密码！')
|
||
}
|
||
if (changeUserPawFrom.Pwd !== changeUserPawFrom.newPwd) {
|
||
return message.error('新密码与确认密码不一致！')
|
||
}
|
||
await PutUserPwd({ id: addUserFrom.Id, pwd: md5(changeUserPawFrom.Pwd) }).then(res => {
|
||
if (res.code === 200) {
|
||
setChangeUserPawModal(false)
|
||
message.success('修改成功')
|
||
}
|
||
})
|
||
await getUserList()
|
||
}}>修改</Button>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
<Modal title='' open={deleteUserPawModal} footer={null} centered width={'24vw'}>
|
||
<div>
|
||
<div style={{ color: 'white', fontSize: '18px', textAlign: 'center', marginBottom: '20px' }}>
|
||
是否确认删除该用户？
|
||
</div>
|
||
<div style={{
|
||
display: 'flex', justifyContent: 'center'
|
||
}}>
|
||
<Button type="primary" style={{ backgroundColor: '#31353A', marginRight: '14px' }}
|
||
onClick={() => setDeleteUserPawModal(false)}>取消</Button>
|
||
<Button type="primary" className='m-ant-btn' onClick={() => {
|
||
DeleteUser(selectedRowKeys).then(res => {
|
||
if (res.code === 200) {
|
||
setDeleteUserPawModal(true)
|
||
setSelectedRowKeys([])
|
||
message.success('删除成功！')
|
||
getUserList()
|
||
}
|
||
})
|
||
}}>确定</Button>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default User
|