match-vote-admin/src/pages/Match/Football/UpdateForm.tsx

import {
  ModalForm,
  ProFormDatePicker,
  ProFormDigit,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import React from 'react';

export type UpdateFormProps = {
  onCancel: () => void;
  onSubmit: (values: API.MatchItem) => Promise<void>;
  updateModalOpen: boolean;
  values: Partial<API.MatchItem>;
};

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const { onCancel, onSubmit, updateModalOpen, values } = props;

  return (
    <ModalForm
      key={values._id}
      title="更新赛事"
      width="400px"
      open={updateModalOpen}
      onOpenChange={(visible) => {
        if (!visible) {
          onCancel();
        }
      }}
      onFinish={async (value) => {
        const formData = {
          ...values,
          ...value,
          homeTeam: {
            ...values.homeTeam,
            ...value.homeTeam,
          },
          awayTeam: {
            ...values.awayTeam,
            ...value.awayTeam,
          },
          // 根据新的数据模型调整
          football: {
            ...values.football,
            ...value.football,
            result: {
              ...values.football?.result,
              ...value.football?.result,
            },
            pointRewards: {
              ...values.football?.pointRewards,
              ...value.football?.pointRewards,
            },
          },
          // 保持基本字段
          homeTeamScore: value.homeTeamScore,
          awayTeamScore: value.awayTeamScore,
          status: value.status,
        };
        await onSubmit(formData as API.MatchItem);
      }}
      initialValues={{
        ...values,
        // 展开嵌套字段以匹配表单结构
        ...values.football,
      }}
    >
      <ProFormText
        rules={[
          {
            required: true,
            message: '主队名称是必填项',
          },
        ]}
        width="md"
        name={['homeTeam', 'name']}
        label="主队名称"
      />
      <ProFormText
        rules={[
          {
            required: true,
            message: '客队名称是必填项',
          },
        ]}
        width="md"
        name={['awayTeam', 'name']}
        label="客队名称"
      />
      <ProFormDatePicker
        rules={[
          {
            required: true,
            message: '比赛日期是必填项',
          },
        ]}
        width="md"
        name="date"
        label="比赛日期"
      />
      <ProFormText
        rules={[
          {
            required: true,
            message: '联赛是必填项',
          },
        ]}
        width="md"
        name="league"
        label="联赛"
      />
      <ProFormText
        rules={[
          {
            required: true,
            message: '比赛时间是必填项',
          },
        ]}
        width="md"
        name="time"
        label="比赛时间"
      />
      <ProFormDigit width="md" name="homeTeamScore" label="主队得分" />
      <ProFormDigit width="md" name="awayTeamScore" label="客队得分" />
      <ProFormSelect
        width="md"
        name={['football', 'result', 'whoWillWin']}
        label="胜负结果"
        valueEnum={{
          home: '主队胜',
          away: '客队胜',
          draw: '平局',
        }}
      />
      <ProFormSelect
        width="md"
        name={['football', 'result', 'firstTeamToScore']}
        label="首个进球球队"
        valueEnum={{
          home: '主队',
          away: '客队',
          no_goal: '无进球',
        }}
        
      />
      <ProFormDigit
        width="md"
        name={['football', 'pointRewards', 'whoWillWin']}
        label="胜负预测积分"
        disabled
      />
      <ProFormDigit
        width="md"
        name={['football', 'pointRewards', 'firstTeamToScore']}
        label="首进球预测积分"
        disabled
      />
      <ProFormDigit
        width="md"
        name={['football', 'pointRewards', 'totalGoals']}
        label="总进球预测积分"
        disabled
      />
      <ProFormSelect
        rules={[
          {
            required: true,
            message: '比赛状态是必填项',
          },
        ]}
        width="md"
        name="status"
        label="比赛状态"
        valueEnum={{
          未开始: '未开始',
          进行中: '进行中',
          已结束: '已结束',
        }}
      />
    </ModalForm>
  );
};

export default UpdateForm;