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 { import {
usercontrollerAdduser, usercontrollerAdduser,
usercontrollerListusers, usercontrollerListusers,
usercontrollerToggleactive,
usercontrollerUpdateuser,
} from '@/servers/api/user'; } from '@/servers/api/user';
import { PlusOutlined } from '@ant-design/icons'; import { PlusOutlined } from '@ant-design/icons';
import { import {
@ -9,20 +11,33 @@ import {
PageContainer, PageContainer,
ProColumns, ProColumns,
ProForm, ProForm,
ProFormSwitch,
ProFormText, ProFormText,
ProFormTextArea,
ProTable, ProTable,
} from '@ant-design/pro-components'; } from '@ant-design/pro-components';
import { App, Button } from 'antd'; import { App, Button, Tag } from 'antd';
import { useRef } from 'react'; import { useRef } from 'react';
const ListPage: React.FC = () => { const ListPage: React.FC = () => {
const actionRef = useRef<ActionType>(); const actionRef = useRef<ActionType>();
const { message } = App.useApp();
const columns: ProColumns[] = [ const columns: ProColumns[] = [
{ {
title: '用户名', title: '用户名',
dataIndex: 'username', dataIndex: 'username',
}, },
{ {
title: '超管',
dataIndex: 'isSuper',
valueType: 'select',
valueEnum: {
true: { text: '是' },
false: { text: '否' },
},
},
{
title: '激活', title: '激活',
dataIndex: 'isActive', dataIndex: 'isActive',
valueEnum: { valueEnum: {
@ -33,18 +48,39 @@ const ListPage: React.FC = () => {
text: '否', text: '否',
}, },
}, },
render: (_, record: any) => (
<Tag color={record?.isActive ? 'green' : 'red'}>
{record?.isActive ? '启用中' : '已禁用'}
</Tag>
),
}, },
{ {
title: '超管', title: '备注',
dataIndex: 'isSuper', dataIndex: 'remark',
valueEnum: { ellipsis: true,
true: { },
text: '是', {
}, title: '操作',
false: { dataIndex: 'option',
text: '否', 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 ( return (
@ -53,15 +89,23 @@ const ListPage: React.FC = () => {
headerTitle="查询表格" headerTitle="查询表格"
actionRef={actionRef} actionRef={actionRef}
rowKey="id" 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 { return {
total: data?.total || 0, total: data?.total || 0,
data: data?.items || [], data: data?.items || [],
success, success,
}; };
}} }}
columns={columns} columns={columns}
toolBarRender={() => [<CreateForm tableRef={actionRef} />]} toolBarRender={() => [<CreateForm tableRef={actionRef} />]}
/> />
@ -101,6 +145,58 @@ const CreateForm: React.FC<{
message.error(error.message); 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> <ProForm.Group>
<ProFormText <ProFormText
@ -112,11 +208,13 @@ const CreateForm: React.FC<{
/> />
<ProFormText <ProFormText
name="password" name="password"
label="密码" label="密码(不填不改)"
width="lg" width="lg"
placeholder="请输入密码" 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> </ProForm.Group>
</DrawerForm> </DrawerForm>
); );

View File

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