feat(用户管理): 添加用户编辑功能和状态切换

- 新增用户编辑表单和接口调用
- 添加用户启用/禁用功能及状态标签显示
- 优化用户列表查询参数处理
- 统一站点名称字段为name
This commit is contained in:
tikkhun 2025-11-29 10:07:45 +08:00
parent 456bbac8c6
commit 1d9d8a19f9
2 changed files with 118 additions and 20 deletions

View File

@ -1,6 +1,8 @@
import {
usercontrollerAdduser,
usercontrollerListusers,
usercontrollerToggleactive,
usercontrollerUpdateuser,
} from '@/servers/api/user';
import { PlusOutlined } from '@ant-design/icons';
import {
@ -9,20 +11,33 @@ import {
PageContainer,
ProColumns,
ProForm,
ProFormSwitch,
ProFormText,
ProFormTextArea,
ProTable,
} from '@ant-design/pro-components';
import { App, Button } from 'antd';
import { App, Button, Tag } from 'antd';
import { useRef } from 'react';
const ListPage: React.FC = () => {
const actionRef = useRef<ActionType>();
const { message } = App.useApp();
const columns: ProColumns[] = [
{
title: '用户名',
dataIndex: 'username',
},
{
title: '超管',
dataIndex: 'isSuper',
valueType: 'select',
valueEnum: {
true: { text: '是' },
false: { text: '否' },
},
},
{
title: '激活',
dataIndex: 'isActive',
valueEnum: {
@ -33,18 +48,39 @@ const ListPage: React.FC = () => {
text: '否',
},
},
render: (_, record: any) => (
<Tag color={record?.isActive ? 'green' : 'red'}>
{record?.isActive ? '启用中' : '已禁用'}
</Tag>
),
},
{
title: '超管',
dataIndex: 'isSuper',
valueEnum: {
true: {
text: '是',
},
false: {
text: '否',
},
},
title: '备注',
dataIndex: 'remark',
ellipsis: true,
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
render: (_, record: any) => (
<>
<EditForm record={record} tableRef={actionRef} />
<Button
danger={record.isActive}
type="link"
onClick={async () => {
// 中文注释软删除为禁用isActive=false再次点击可启用
const next = !record.isActive;
const { success, message: errMsg } = await usercontrollerToggleactive({ userId: record.id, isActive: next });
if (!success) return message.error(errMsg);
actionRef.current?.reload();
}}
>
{record.isActive ? '禁用' : '启用'}
</Button>
</>
),
},
];
return (
@ -53,15 +89,23 @@ const ListPage: React.FC = () => {
headerTitle="查询表格"
actionRef={actionRef}
rowKey="id"
request={async (params) => {
const { data, success } = await usercontrollerListusers(params);
request={async (params) => {
const { current = 1, pageSize = 10, username, isActive, isSuper, remark } = params as any;
console.log(`params`,params)
const qp: any = { current, pageSize };
if (username) qp.username = username;
if (typeof isActive !== 'undefined' && isActive !== '') qp.isActive = String(isActive);
if (typeof isSuper !== 'undefined' && isSuper !== '') qp.isSuper = String(isSuper);
if (remark) qp.remark = remark;
const { data, success } = await usercontrollerListusers({ params: qp });
return {
total: data?.total || 0,
data: data?.items || [],
success,
};
}}
columns={columns}
toolBarRender={() => [<CreateForm tableRef={actionRef} />]}
/>
@ -101,6 +145,58 @@ const CreateForm: React.FC<{
message.error(error.message);
}
}}
>
<ProForm.Group>
<ProFormText
name="username"
label="用户名"
width="lg"
placeholder="请输入用户名"
rules={[{ required: true, message: '请输入用户名' }]}
/>
<ProFormText
name="password"
label="密码"
width="lg"
placeholder="请输入密码"
rules={[{ required: true, message: '请输入密码' }]}
/>
<ProFormSwitch name="isSuper" label="超管" />
<ProFormSwitch name="isAdmin" label="管理员" />
<ProFormTextArea name="remark" label="备注" placeholder="请输入备注" fieldProps={{ autoSize: { minRows: 2, maxRows: 4 } }} />
</ProForm.Group>
</DrawerForm>
);
};
const EditForm: React.FC<{
tableRef: React.MutableRefObject<ActionType | undefined>;
record: any;
}> = ({ tableRef, record }) => {
const { message } = App.useApp();
return (
<DrawerForm
title="编辑"
trigger={<Button type="link"></Button>}
initialValues={{
username: record.username,
isSuper: record.isSuper,
isAdmin: record.isAdmin,
remark: record.remark,
}}
onFinish={async (values: any) => {
try {
// 中文注释:更新用户,密码可选填
const { success, message: err } = await usercontrollerUpdateuser({ id: record.id }, values);
if (!success) throw new Error(err);
tableRef.current?.reload();
message.success('更新成功');
return true;
} catch (error: any) {
message.error(error.message);
return false;
}
}}
>
<ProForm.Group>
<ProFormText
@ -112,11 +208,13 @@ const CreateForm: React.FC<{
/>
<ProFormText
name="password"
label="密码"
label="密码(不填不改)"
width="lg"
placeholder="请输入密码"
rules={[{ required: true, message: '请输入密码' }]}
placeholder="如需修改请输入新密码"
/>
<ProFormSwitch name="isSuper" label="超管" />
<ProFormSwitch name="isAdmin" label="管理员" />
<ProFormTextArea name="remark" label="备注" placeholder="请输入备注" fieldProps={{ autoSize: { minRows: 2, maxRows: 4 } }} />
</ProForm.Group>
</DrawerForm>
);

View File

@ -73,7 +73,7 @@ const SiteList: React.FC = () => {
sorter: true,
hideInSearch: true,
},
{ title: '站点名称', dataIndex: 'siteName', width: 220 },
{ title: '名称', dataIndex: 'name', width: 220 },
{ title: 'API 地址', dataIndex: 'apiUrl', width: 280, hideInSearch: true },
{
title: 'SKU 前缀',
@ -260,7 +260,7 @@ const SiteList: React.FC = () => {
>
{/* 站点名称,必填 */}
<ProFormText
name="siteName"
name="name"
label="站点名称"
placeholder="例如:本地商店"
rules={[{ required: true, message: '站点名称为必填项' }]}