match-vote-admin/src/pages/User/index.tsx

import {
  addUser,
  batchDeleteUsers,
  deleteUser,
  getUsers,
  updateUser,
  updateUserPoints,
} from '@/services/api';
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ModalForm, ProFormDigit, ProFormSelect, ProFormText } from '@ant-design/pro-form';

import { FooterToolbar, PageContainer, ProTable } from '@ant-design/pro-components';
import { Button, FormInstance, message, Popconfirm } from 'antd';
import React, { useRef, useState } from 'react';
import UpdateUser from './components/UpdateUser';
import UpdateUserPoints from './components/UpdateUserPoints';

const UserList: React.FC = () => {
  const [createModalOpen, handleModalOpen] = useState<boolean>(false);
  const [updateModalOpen, handleUpdateModalOpen] = useState<boolean>(false);
  const actionRef = useRef<ActionType>();
  const [currentRow, setCurrentRow] = useState<API.UserItem>();
  const [selectedRows, setSelectedRows] = useState<API.UserItem[]>([]);
  const [pageSize, setPageSize] = useState<number>(10);
  const formRef = useRef<FormInstance>(null);
  const [updatePointsModalOpen, setUpdatePointsModalOpen] = useState(false);

  const handleDelete = async (record: API.UserItem) => {
    const res = await deleteUser(record._id);
    if (res.success) {
      message.success('用户已成功删除');
      actionRef.current?.reload();
    }
  };

  const handleBatchDelete = async (selectedRowKeys: string[]) => {
    if (selectedRowKeys.length === 0) return;
    const res = await batchDeleteUsers(selectedRowKeys);
    if (res.success) {
      message.success(`${res.message}`);
      actionRef.current?.reload();
    }
  };

  const columns: ProColumns<API.UserItem>[] = [
    {
      title: '用户名',
      dataIndex: 'username',
      valueType: 'text',
    },
    {
      title: '角色',
      dataIndex: 'role',
      valueType: 'select',
      valueEnum: {
        user: { text: '普通用户' },
        admin: { text: '管理员' },
      },
    },
    {
      title: '积分',
      dataIndex: 'points',
      valueType: 'digit',
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => [
        <a
          key="edit"
          onClick={() => {
            handleUpdateModalOpen(true);
            setCurrentRow(record);
          }}
        >
          编辑用户
        </a>,
        <a
          key="edit"
          onClick={() => {
            setUpdatePointsModalOpen(true);
            setCurrentRow(record);
          }}
        >
          修改积分
        </a>,
        <Popconfirm
          key="delete"
          title="确认删除"
          description={`您确定要删除用户 ${record.username} 吗？`}
          onConfirm={() => handleDelete(record)}
          okText="确定"
          cancelText="取消"
        >
          <a>删除</a>
        </Popconfirm>,
      ],
    },
  ];

  return (
    <PageContainer>
      <ProTable<API.UserItem, API.PageParams>
        actionRef={actionRef}
        rowKey="_id"
        search={{
          labelWidth: 120,
        }}
        toolBarRender={() => [
          <Button
            type="primary"
            key="primary"
            onClick={() => {
              formRef.current?.resetFields();
              handleModalOpen(true);
            }}
          >
            <PlusOutlined /> 新建用户
          </Button>,
        ]}
        request={async (params) => {
          const response = await getUsers(params);
          return {
            data: response.data,
            success: response.success,
            total: response.total,
          };
        }}
        columns={columns}
        pagination={{
          showSizeChanger: true,
          pageSize: pageSize,
          onChange: (page, pageSize) => {
            setPageSize(pageSize);
            if (actionRef.current) {
              actionRef.current.reload();
            }
          },
        }}
        rowSelection={{
          onChange: (_, selectedRows) => {
            setSelectedRows(selectedRows);
          },
        }}
      />
      {selectedRows?.length > 0 && (
        <FooterToolbar
          extra={
            <div>
              已选择 <a style={{ fontWeight: 600 }}>{selectedRows.length}</a> 项 &nbsp;&nbsp;
            </div>
          }
        >
          <Button
            onClick={async () => {
              const selectedRowKeys = selectedRows.map((row) => row._id);
              await handleBatchDelete(selectedRowKeys);
              setSelectedRows([]);
              actionRef.current?.reloadAndRest?.();
            }}
          >
            批量删除
          </Button>
        </FooterToolbar>
      )}

      <ModalForm
        title="新建用户"
        width="400px"
        open={createModalOpen}
        onOpenChange={handleModalOpen}
        formRef={formRef}
        onFinish={async (value) => {
          const res = await addUser(value as API.UserItem);
          if (res.success) {
            message.success('创建成功');
            handleModalOpen(false);
            if (actionRef.current) {
              actionRef.current.reload();
            }
            formRef.current?.resetFields();
          }
        }}
      >
        <ProFormText
          rules={[
            {
              required: true,
              message: '用户名是必填项',
            },
          ]}
          width="md"
          name="username"
          label="用户名"
        />
        <ProFormText.Password
          rules={[
            {
              required: true,
              message: '密码是必填项',
            },
          ]}
          width="md"
          name="password"
          label="密码"
        />
        <ProFormSelect
          rules={[
            {
              required: true,
              message: '角色是必填项',
            },
          ]}
          width="md"
          name="role"
          label="角色"
          valueEnum={{
            user: '普通用户',
            admin: '管理员',
          }}
        />
        <ProFormDigit width="md" name="points" label="积分" initialValue={0} />
      </ModalForm>

      <UpdateUser
        onSubmit={async (value) => {
          const res = await updateUser(value._id, value as API.UserItem);
          if (res.success) {
            message.success('修改成功');
            handleUpdateModalOpen(false);
            setCurrentRow(undefined);
            if (actionRef.current) {
              actionRef.current.reload();
            }
          }
        }}
        onCancel={() => {
          handleUpdateModalOpen(false);
        }}
        updateUserModalOpen={updateModalOpen}
        values={currentRow || {}}
      />
      {/* 修改积分 */}
      <UpdateUserPoints
        onSubmit={async (value: API.UpdateUserPointsParams) => {
          const res = await updateUserPoints(value.userId, value.points, value.reason);
          if (res.success) {
            message.success('积分更新成功');
            setUpdatePointsModalOpen(false);
            setCurrentRow(undefined);
            if (actionRef.current) {
              actionRef.current.reload();
            }
          }
        }}
        onCancel={() => {
          setUpdatePointsModalOpen(false);
        }}
        updatePointsModalOpen={updatePointsModalOpen}
        currentUser={currentRow || {}}
      />
    </PageContainer>
  );
};

export default UserList;