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

import { batchDeletePredictions, deletePrediction, getPredictions } from '@/services/api'; // 假设这些API已经实现
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { FooterToolbar, PageContainer, ProTable } from '@ant-design/pro-components';
import { Button, message, Popconfirm } from 'antd';
import React, { useRef, useState } from 'react';

const PredictionList: React.FC = () => {
  const actionRef = useRef<ActionType>();
  // const [currentRow, setCurrentRow] = useState<API.PredictionItem>();
  const [selectedRows, setSelectedRows] = useState<API.PredictionItem[]>([]);
  const [pageSize, setPageSize] = useState<number>(10);
  // const [updateModalOpen, handleUpdateModalOpen] = useState<boolean>(false);
  // const formRef = useRef<FormInstance>(null);

  const columns: ProColumns<API.PredictionItem>[] = [
    {
      title: '用户',
      dataIndex: 'username',
      valueType: 'text',
    },
    {
      title: '比赛',
      dataIndex: 'matchInfo',
      valueType: 'text',
      // ellipsis: true,
    },
    {
      title: '比赛时间',
      dataIndex: 'matchTime',
      valueType: 'text',
      // ellipsis: true,
    },
    {
      title: '胜负预测',
      dataIndex: 'whoWillWin',
      valueEnum: {
        home: { text: '主队胜' },
        away: { text: '客队胜' },
        draw: { text: '平局' },
      },
    },
    {
      title: '首先得分',
      dataIndex: 'firstTeamToScore',
      valueEnum: {
        home: { text: '主队' },
        away: { text: '客队' },
        no_goal: { text: '无进球' },
      },
    },
    {
      title: '总进球数',
      dataIndex: 'totalGoals',
      valueType: 'digit',
    },
    {
      title: '胜负预测结果',
      dataIndex: 'whoWillWinResult',
      valueEnum: {
        correct: { text: '正确', status: 'Success' },
        incorrect: { text: '错误', status: 'Error' },
        pending: { text: '-' },
      },
    },
    {
      title: '首先得分预测结果',
      dataIndex: 'firstTeamToScoreResult',
      valueEnum: {
        correct: { text: '正确', status: 'Success' },
        incorrect: { text: '错误', status: 'Error' },
        // pending: { text: '待定', status: 'Warning' },
        pending: { text: '-' },
      },
    },
    {
      title: '总进球数预测结果',
      dataIndex: 'totalGoalsResult',
      valueEnum: {
        correct: { text: '正确', status: 'Success' },
        incorrect: { text: '错误', status: 'Error' },
        // pending: { text: '待定', status: 'Warning' },
        pending: { text: '-' },
      },
    },
    {
      title: '获得积分',
      dataIndex: 'pointsEarned',
      valueType: 'digit',
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => [
        // <a
        //   key="edit"
        //   onClick={() => {
        //     handleUpdateModalOpen(true);
        //     setCurrentRow(record);
        //   }}
        // >
        //   编辑
        // </a>,
        <Popconfirm
          key="delete"
          title="确认删除"
          onConfirm={() => handleDelete(record)}
          okText="确定"
          cancelText="取消"
        >
          <a>删除</a>
        </Popconfirm>,
      ],
    },
  ];

  const handleDelete = async (record: API.PredictionItem) => {
    const res = await deletePrediction(record._id);
    if (res.success) {
      message.success('预测记录已成功删除');
      actionRef.current?.reload();
    }
  };

  return (
    <PageContainer>
      <ProTable<API.PredictionItem, API.PageParams>
        actionRef={actionRef}
        rowKey="_id"
        search={{
          labelWidth: 120,
        }}
        // toolBarRender={() => [
        //   <Button
        //     type="primary"
        //     key="primary"
        //     onClick={() => {
        //       handleModalOpen(true);
        //     }}
        //   >
        //     <PlusOutlined /> 新建预测
        //   </Button>,
        // ]}
        request={getPredictions}
        columns={columns}
        scroll={{ x: 1240 }}
        pagination={{
          showSizeChanger: true,
          pageSize: pageSize,
          onChange: (page, pageSize) => {
            setPageSize(pageSize);
          },
        }}
        rowSelection={{
          onChange: (_, selectedRows) => {
            setSelectedRows(selectedRows);
          },
        }}
      />

      {selectedRows?.length > 0 && (
        <FooterToolbar
          extra={
            <div>
              已选择 <a style={{ fontWeight: 600 }}>{selectedRows.length}</a> 项 &nbsp;&nbsp;
            </div>
          }
        >
          <Button
            onClick={async () => {
              console.log('selectedRows', selectedRows);

              const selectedRowKeys = selectedRows.map((row) => row._id);
              await batchDeletePredictions(selectedRowKeys);
              setSelectedRows([]);
              actionRef.current?.reloadAndRest?.();
            }}
          >
            批量删除
          </Button>
        </FooterToolbar>
      )}

      {/* <UpdateForm
        onSubmit={async (value) => {
          const res = await updatePrediction(value._id, value as API.PredictionItem);
          if (res.success) {
            message.success('修改成功');
            handleUpdateModalOpen(false);
            setCurrentRow(undefined);
            actionRef.current?.reload();
          }
        }}
        onCancel={() => {
          handleUpdateModalOpen(false);
        }}
        updateModalOpen={updateModalOpen}
        values={currentRow || {}}
      /> */}

      {/* <ModalForm
        title="编辑预测"
        width="400px"
        open={updateModalOpen}
        onOpenChange={handleUpdateModalOpen}
        onFinish={async (value) => {
          const res = await updatePrediction(currentRow?._id, value as API.PredictionItem);
          if (res.success) {
            message.success('修改成功');
            handleUpdateModalOpen(false);
            setCurrentRow(undefined);
            actionRef.current?.reload();
          }
        }}
        initialValues={currentRow}
      >

      </ModalForm> */}
    </PageContainer>
  );
};

export default PredictionList;