feat(用户管理): 添加用户编辑功能和状态切换
- 新增用户编辑表单和接口调用 - 添加用户启用/禁用功能及状态标签显示 - 优化用户列表查询参数处理 - 统一站点名称字段为name
This commit is contained in:
parent
456bbac8c6
commit
1d9d8a19f9
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -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: '站点名称为必填项' }]}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue