feat: 用户管理部分接口对接

Author: EmbraceAn

src/apis/SystemManagementApi/index.ts

@@ -0,0 +1,24 @@
+import axios from '@/utils/axios';
+import { ResponseData, TableResponseData } from '@/utils/commonTypes';
+import {
+    UserResponse,
+    UserRequest,
+    TAddUserRequest,
+    TAddUserResponse,
+} from './types';
+
+// 获取用户管理 表格数据
+const getUserList = (
+    params: UserRequest,
+): Promise<ResponseData<TableResponseData<UserResponse>>> =>
+    axios.get<never, ResponseData<TableResponseData<UserResponse>>>(`/user`, {
+        params,
+    });
+
+// 添加用户
+const postAddUser = (
+    data: TAddUserRequest,
+): Promise<ResponseData<TAddUserResponse>> =>
+    axios.post<never, ResponseData<TAddUserResponse>>('/user', data);
+
+export { getUserList, postAddUser };

src/apis/SystemManagementApi/types.ts

@@ -0,0 +1,53 @@
+interface User {
+    email?: string;
+    in_charge_of_systems?: string[];
+    role: string[];
+    user_group?: string;
+    username: string;
+}
+interface UserResponse {
+    list?: User[];
+}
+
+interface UserRequest {
+    limit?: number;
+    name?: string;
+    order?: Order;
+    order_by?: string;
+    page?: number;
+    role?: string;
+    user_group?: string;
+}
+
+enum Order {
+    Asc = 'asc',
+    Desc = 'desc',
+}
+
+/**
+ * NewUser
+ */
+interface TAddUserRequest {
+    email: string;
+    in_charge_of_systems?: string[];
+    node_ids?: string[];
+    role: string[];
+    user_group?: string;
+    username: string;
+}
+
+/**
+ * NewUserCreated
+ */
+interface TAddUserResponse {
+    password: string;
+    username: string;
+}
+
+export type {
+    UserResponse,
+    UserRequest,
+    User,
+    TAddUserRequest,
+    TAddUserResponse,
+};

src/pages/ReportManage/ReportManage.tsx

@@ -45,12 +45,11 @@ const ReportManage: FC = () => {
             rowSelection: 'checkbox',
             rowSelectKeys: deleteValues,
             onSelectChange: setDeleteValues,
-            width: 280,
         },
         {
             title: '任务名',
             dataIndex: 'source',
-            width: 240,
+            width: 320,
         },
         {
             title: '任务组',
@@ -61,7 +60,7 @@ const ReportManage: FC = () => {
         },
         {
             title: '生成时间',
-            width: 240,
+            width: 320,
             dataIndex: 'start_time',
             columnsHeaderFilterType: 'rangePicker',
             rangePickSetting: {

src/pages/SystemManagement/CreateUserModal.tsx

@@ -0,0 +1,99 @@
+import { postAddUser } from '@/apis/SystemManagementApi';
+import { WizardModal } from '@/compoments';
+import { UseModalRefType } from '@/compoments/WizardModal/useModal';
+import { useRequest } from 'ahooks';
+import { Button, Form, Input } from 'antd';
+import { forwardRef, useImperativeHandle } from 'react';
+
+const { Item } = Form;
+const layout = {
+    labelCol: { span: 3 },
+    wrapperCol: { span: 24 },
+};
+
+const CreateUserModal = forwardRef<
+    UseModalRefType,
+    {
+        title: string;
+        refresh: () => void;
+    }
+>(({ title, refresh }, ref) => {
+    const [model] = WizardModal.useModal();
+    const [form] = Form.useForm();
+
+    useImperativeHandle(ref, () => ({
+        open() {
+            console.log('打开', title, refresh);
+            model.open();
+        },
+    }));
+
+    const { run, loading } = useRequest(postAddUser, {
+        manual: true,
+        onSuccess: (values) => {
+            console.log(values, 'aaa');
+        },
+    });
+
+    const onOk = async () => {
+        try {
+            const formData = await form.validateFields();
+            run({ ...formData });
+        } catch (err) {
+            console.error(err);
+        }
+    };
+
+    return (
+        <WizardModal
+            footer={
+                <>
+                    <Button
+                        key="link"
+                        onClick={() => {
+                            model.close();
+                            form.resetFields();
+                        }}
+                    >
+                        取消
+                    </Button>
+                    <Button
+                        key="submit"
+                        type="primary"
+                        onClick={() => onOk()}
+                        loading={loading}
+                    >
+                        确定
+                    </Button>
+                </>
+            }
+            width={550}
+            modal={model}
+            title={title}
+        >
+            <div className="pt-2 px-6">
+                <Form form={form} layout="horizontal" {...layout}>
+                    <Item
+                        name={'username'}
+                        label="用户名"
+                        rules={[{ required: true, message: '用户名不能为空' }]}
+                    >
+                        <Input placeholder="请输入用户名" />
+                    </Item>
+                    <Item
+                        name={'email'}
+                        label="邮箱"
+                        rules={[
+                            { required: true, message: '邮箱不能为空' },
+                            { type: 'email', message: '邮箱格式不正确' },
+                        ]}
+                    >
+                        <Input placeholder="请输入邮箱" />
+                    </Item>
+                </Form>
+            </div>
+        </WizardModal>
+    );
+});
+
+export { CreateUserModal };

src/pages/SystemManagement/SystemManagement.tsx

@@ -1,7 +1,108 @@
-import { FC } from 'react';
+import { FC, useRef } from 'react';
+import { Button, Tag } from 'antd';
+
+import { getUserList } from '@/apis/SystemManagementApi';
+import { User, UserRequest } from '@/apis/SystemManagementApi/types';
+import { WizardTable } from '@/compoments';
+import { UseModalRefType } from '@/compoments/WizardModal/useModal';
+import { CreateTableProps } from '@/compoments/WizardTable/types';
+import { PlusOutlined } from '@ant-design/icons';
+import { CreateUserModal } from './CreateUserModal';
 
 const SystemManagement: FC = () => {
-    return '系统管理';
+    const [page] = WizardTable.usePage();
+    const CreateUserModalRef = useRef<UseModalRefType>(null);
+
+    const UserColumns: CreateTableProps<User>['columns'] = [
+        {
+            title: '用户名',
+            dataIndex: 'username',
+        },
+        {
+            title: '邮箱',
+            dataIndex: 'email',
+            width: 320,
+        },
+        {
+            title: 'Roles',
+            dataIndex: 'role',
+            width: 160,
+            render: (val) =>
+                val && Array.isArray(val) ? (
+                    <div className="flex items-center justify-center gap-2">
+                        {val.map((it) => (
+                            <Tag key={it} color="blue">
+                                {it}
+                            </Tag>
+                        ))}
+                    </div>
+                ) : (
+                    '-'
+                ),
+        },
+        {
+            title: '操作',
+            dataIndex: 'report_id',
+            fixed: 'right',
+            width: 160,
+            render: (_, record) => <div>这是操作项 {record?.email}</div>,
+        },
+    ];
+
+    const handCreateUser = async () => {
+        console.log(222);
+        CreateUserModalRef.current?.open();
+    };
+
+    return (
+        <>
+            <WizardTable
+                page={page}
+                rowKey="username"
+                columns={UserColumns}
+                tableHeader={{
+                    title: '用户管理列表',
+                    options: {
+                        optionsSearch: {
+                            key: 'name',
+                            placeholder: '请输入用户名搜索',
+                        },
+                        trigger: (
+                            <div className="flex gap-2">
+                                <Button onClick={async () => {}}>
+                                    <PlusOutlined /> 批量创建
+                                </Button>
+
+                                <Button
+                                    type="primary"
+                                    onClick={async () => handCreateUser()}
+                                >
+                                    <PlusOutlined /> 创建用户
+                                </Button>
+                            </div>
+                        ),
+                    },
+                }}
+                request={async (params, filter) => {
+                    const request = {
+                        ...params,
+                        ...filter,
+                    } as UserRequest;
+                    const result = await getUserList({ ...request });
+                    const { data } = result;
+                    return {
+                        list: data?.list ?? [],
+                        pagemeta: data?.pagemeta,
+                    };
+                }}
+            />
+            <CreateUserModal
+                ref={CreateUserModalRef}
+                title="创建用户"
+                refresh={page.refresh}
+            />
+        </>
+    );
 };
 
 export { SystemManagement };