可用版本
This commit is contained in:
戚辰先生
parent
5cc0deb917
commit
445766b458
@ -1,11 +1,11 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Table, Button, Modal, Form, Input, Space, message, Switch, TreeSelect } from 'antd';
|
||||
import { PlusOutlined, EditOutlined, DeleteOutlined, KeyOutlined, TeamOutlined } from '@ant-design/icons';
|
||||
import type { UserResponse, Role } from './types';
|
||||
import type { DepartmentDTO } from '../Department/types';
|
||||
import { getUsers, createUser, updateUser, deleteUser, resetPassword } from './service';
|
||||
import { useTableData } from '@/hooks/useTableData';
|
||||
import type { FixedType, AlignType } from 'rc-table/lib/interface';
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import {Table, Button, Modal, Form, Input, Space, message, Switch, TreeSelect} from 'antd';
|
||||
import {PlusOutlined, EditOutlined, DeleteOutlined, KeyOutlined, TeamOutlined} from '@ant-design/icons';
|
||||
import type {UserResponse, Role} from './types';
|
||||
import type {DepartmentDTO} from '../Department/types';
|
||||
import {getUsers, createUser, updateUser, deleteUser, resetPassword} from './service';
|
||||
import {useTableData} from '@/hooks/useTableData';
|
||||
import type {FixedType, AlignType} from 'rc-table/lib/interface';
|
||||
|
||||
const UserPage: React.FC = () => {
|
||||
const {
|
||||
@ -117,26 +117,26 @@ const UserPage: React.FC = () => {
|
||||
title: 'ID',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
width: 80,
|
||||
width: 60,
|
||||
fixed: 'left' as FixedType
|
||||
},
|
||||
{
|
||||
title: '用户名',
|
||||
dataIndex: 'username',
|
||||
key: 'username',
|
||||
width: 120,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '昵称',
|
||||
dataIndex: 'nickname',
|
||||
key: 'nickname',
|
||||
width: 120,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '邮箱',
|
||||
dataIndex: 'email',
|
||||
key: 'email',
|
||||
width: 200,
|
||||
width: 180,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
@ -149,7 +149,7 @@ const UserPage: React.FC = () => {
|
||||
title: '角色',
|
||||
dataIndex: 'roles',
|
||||
key: 'roles',
|
||||
width: 150,
|
||||
width: 120,
|
||||
ellipsis: true,
|
||||
render: (roles: Role[]) => roles?.map(role => role.name).join(', ') || '-'
|
||||
},
|
||||
@ -157,35 +157,35 @@ const UserPage: React.FC = () => {
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
width: 180,
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'updateTime',
|
||||
key: 'updateTime',
|
||||
width: 180,
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'enabled',
|
||||
key: 'enabled',
|
||||
width: 80,
|
||||
width: 60,
|
||||
align: 'center' as AlignType,
|
||||
render: (enabled: boolean) => (
|
||||
<Switch checked={enabled} disabled size="small" />
|
||||
<Switch checked={enabled} disabled size="small"/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
width: 240,
|
||||
fixed: 'right' as FixedType,
|
||||
render: (_: any, record: UserResponse) => (
|
||||
<Space size="small">
|
||||
<Space size={0}>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
icon={<EditOutlined />}
|
||||
icon={<EditOutlined/>}
|
||||
onClick={() => handleEdit(record)}
|
||||
>
|
||||
编辑
|
||||
@ -193,7 +193,7 @@ const UserPage: React.FC = () => {
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
icon={<KeyOutlined />}
|
||||
icon={<KeyOutlined/>}
|
||||
onClick={() => handleResetPassword(record)}
|
||||
>
|
||||
重置密码
|
||||
@ -202,7 +202,7 @@ const UserPage: React.FC = () => {
|
||||
type="link"
|
||||
size="small"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
icon={<DeleteOutlined/>}
|
||||
onClick={() => handleDelete(record.id)}
|
||||
disabled={record.username === 'admin'}
|
||||
>
|
||||
@ -214,9 +214,9 @@ const UserPage: React.FC = () => {
|
||||
];
|
||||
|
||||
return (
|
||||
<div style={{ padding: '24px' }}>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
|
||||
<div style={{padding: '24px'}}>
|
||||
<div style={{marginBottom: 16}}>
|
||||
<Button type="primary" icon={<PlusOutlined/>} onClick={handleAdd}>
|
||||
新增用户
|
||||
</Button>
|
||||
</div>
|
||||
@ -226,7 +226,7 @@ const UserPage: React.FC = () => {
|
||||
columns={columns}
|
||||
dataSource={users}
|
||||
rowKey="id"
|
||||
scroll={{ x: 1500 }}
|
||||
scroll={{x: 1500}}
|
||||
pagination={{
|
||||
...pagination,
|
||||
showSizeChanger: true,
|
||||
@ -265,9 +265,9 @@ const UserPage: React.FC = () => {
|
||||
<Form.Item
|
||||
name="username"
|
||||
label="用户名"
|
||||
rules={[{ required: true, message: '请输入用户名' }]}
|
||||
rules={[{required: true, message: '请输入用户名'}]}
|
||||
>
|
||||
<Input placeholder="请输入用户名" disabled={!!editingUser} />
|
||||
<Input placeholder="请输入用户名" disabled={!!editingUser}/>
|
||||
</Form.Item>
|
||||
|
||||
{!editingUser && (
|
||||
@ -275,11 +275,11 @@ const UserPage: React.FC = () => {
|
||||
name="password"
|
||||
label="密码"
|
||||
rules={[
|
||||
{ required: true, message: '请输入密码' },
|
||||
{ min: 6, message: '密码长度不能小于6位' }
|
||||
{required: true, message: '请输入密码'},
|
||||
{min: 6, message: '密码长度不能小于6位'}
|
||||
]}
|
||||
>
|
||||
<Input.Password placeholder="请输入密码" />
|
||||
<Input.Password placeholder="请输入密码"/>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
@ -287,20 +287,20 @@ const UserPage: React.FC = () => {
|
||||
name="nickname"
|
||||
label="昵称"
|
||||
>
|
||||
<Input placeholder="请输入昵称" />
|
||||
<Input placeholder="请输入昵称"/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="email"
|
||||
label="邮箱"
|
||||
rules={[{ type: 'email', message: '请输入正确的邮箱格式' }]}
|
||||
rules={[{type: 'email', message: '请输入正确的邮箱格式'}]}
|
||||
>
|
||||
<Input placeholder="请输入邮箱" />
|
||||
<Input placeholder="请输入邮箱"/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="phone"
|
||||
label="手机号"
|
||||
>
|
||||
<Input placeholder="请输入手机号" />
|
||||
<Input placeholder="请输入手机号"/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="deptId"
|
||||
@ -311,7 +311,7 @@ const UserPage: React.FC = () => {
|
||||
placeholder="请选择所属部门"
|
||||
allowClear
|
||||
treeDefaultExpandAll
|
||||
style={{ width: '100%' }}
|
||||
style={{width: '100%'}}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
@ -320,7 +320,7 @@ const UserPage: React.FC = () => {
|
||||
valuePropName="checked"
|
||||
initialValue={true}
|
||||
>
|
||||
<Switch />
|
||||
<Switch/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
@ -358,19 +358,19 @@ const UserPage: React.FC = () => {
|
||||
name="password"
|
||||
label="新密码"
|
||||
rules={[
|
||||
{ required: true, message: '请输入新密码' },
|
||||
{ min: 6, message: '密码长度不能小于6位' }
|
||||
{required: true, message: '请输入新密码'},
|
||||
{min: 6, message: '密码长度不能小于6位'}
|
||||
]}
|
||||
>
|
||||
<Input.Password placeholder="请输入新密码" />
|
||||
<Input.Password placeholder="请输入新密码"/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="confirmPassword"
|
||||
label="确认密码"
|
||||
dependencies={['password']}
|
||||
rules={[
|
||||
{ required: true, message: '请确认新密码' },
|
||||
({ getFieldValue }) => ({
|
||||
{required: true, message: '请确认新密码'},
|
||||
({getFieldValue}) => ({
|
||||
validator(_, value) {
|
||||
if (!value || getFieldValue('password') === value) {
|
||||
return Promise.resolve();
|
||||
@ -380,7 +380,7 @@ const UserPage: React.FC = () => {
|
||||
}),
|
||||
]}
|
||||
>
|
||||
<Input.Password placeholder="请确认新密码" />
|
||||
<Input.Password placeholder="请确认新密码"/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user