test/project/src/pages/Table/components/UpdateForm.tsx

import {
  ProFormDateTimePicker,
  ProFormRadio,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  StepsForm,
} from '@ant-design/pro-components';
import { Modal } from 'antd';
import React from 'react';

export interface FormValueType extends Partial<API.UserInfo> {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
}

export interface UpdateFormProps {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  updateModalVisible: boolean;
  values: Partial<API.UserInfo>;
}

const UpdateForm: React.FC<UpdateFormProps> = (props) => (
  <StepsForm
    stepsProps={{
      size: 'small',
    }}
    stepsFormRender={(dom, submitter) => {
      return (
        <Modal
          width={640}
          bodyStyle={{ padding: '32px 40px 48px' }}
          destroyOnClose
          title="规则配置"
          open={props.updateModalVisible}
          footer={submitter}
          onCancel={() => props.onCancel()}
        >
          {dom}
        </Modal>
      );
    }}
    onFinish={props.onSubmit}
  >
    <StepsForm.StepForm
      initialValues={{
        name: props.values.name,
        nickName: props.values.nickName,
      }}
      title="基本信息"
    >
      <ProFormText
        width="md"
        name="name"
        label="规则名称"
        rules={[{ required: true, message: '请输入规则名称！' }]}
      />
      <ProFormTextArea
        name="desc"
        width="md"
        label="规则描述"
        placeholder="请输入至少五个字符"
        rules={[
          { required: true, message: '请输入至少五个字符的规则描述！', min: 5 },
        ]}
      />
    </StepsForm.StepForm>
    <StepsForm.StepForm
      initialValues={{
        target: '0',
        template: '0',
      }}
      title="配置规则属性"
    >
      <ProFormSelect
        width="md"
        name="target"
        label="监控对象"
        valueEnum={{
          0: '表一',
          1: '表二',
        }}
      />
      <ProFormSelect
        width="md"
        name="template"
        label="规则模板"
        valueEnum={{
          0: '规则模板一',
          1: '规则模板二',
        }}
      />
      <ProFormRadio.Group
        name="type"
        width="md"
        label="规则类型"
        options={[
          {
            value: '0',
            label: '强',
          },
          {
            value: '1',
            label: '弱',
          },
        ]}
      />
    </StepsForm.StepForm>
    <StepsForm.StepForm
      initialValues={{
        type: '1',
        frequency: 'month',
      }}
      title="设定调度周期"
    >
      <ProFormDateTimePicker
        name="time"
        label="开始时间"
        rules={[{ required: true, message: '请选择开始时间！' }]}
      />
      <ProFormSelect
        name="frequency"
        label="监控对象"
        width="xs"
        valueEnum={{
          month: '月',
          week: '周',
        }}
      />
    </StepsForm.StepForm>
  </StepsForm>
);

export default UpdateForm;