UpdateForm.jsx

import React from "react";
import { Modal } from "antd";
import {
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  StepsForm,
  ProFormRadio,
  ProFormDateTimePicker,
} from "@ant-design/pro-form";
import { useIntl, FormattedMessage } from "umi";

const UpdateForm = (props) => {
  const intl = useIntl();
  return (
    <StepsForm
      stepsProps={{
        size: "small",
      }}
      stepsFormRender={(dom, submitter) => {
        return (
          <Modal
            width={640}
            bodyStyle={{
              padding: "32px 40px 48px",
            }}
            destroyOnClose
            title={intl.formatMessage({
              id: "pages.searchTable.updateForm.ruleConfig",
              defaultMessage: "规则配置",
            })}
            visible={props.updateModalVisible}
            footer={submitter}
            onCancel={() => {
              props.onCancel();
            }}
          >
            {dom}
          </Modal>
        );
      }}
      onFinish={props.onSubmit}
    >
      <StepsForm.StepForm
        initialValues={{
          name: props.values.name,
          desc: props.values.desc,
        }}
        title={intl.formatMessage({
          id: "pages.searchTable.updateForm.basicConfig",
          defaultMessage: "基本信息",
        })}
      >
        <ProFormText
          name="name"
          label={intl.formatMessage({
            id: "pages.searchTable.updateForm.ruleName.nameLabel",
            defaultMessage: "规则名称",
          })}
          width="md"
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage
                  id="pages.searchTable.updateForm.ruleName.nameRules"
                  defaultMessage="请输入规则名称！"
                />
              ),
            },
          ]}
        />
        <ProFormTextArea
          name="desc"
          width="md"
          label={intl.formatMessage({
            id: "pages.searchTable.updateForm.ruleDesc.descLabel",
            defaultMessage: "规则描述",
          })}
          placeholder={intl.formatMessage({
            id: "pages.searchTable.updateForm.ruleDesc.descPlaceholder",
            defaultMessage: "请输入至少五个字符",
          })}
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage
                  id="pages.searchTable.updateForm.ruleDesc.descRules"
                  defaultMessage="请输入至少五个字符的规则描述！"
                />
              ),
              min: 5,
            },
          ]}
        />
      </StepsForm.StepForm>
      <StepsForm.StepForm
        initialValues={{
          target: "0",
          template: "0",
        }}
        title={intl.formatMessage({
          id: "pages.searchTable.updateForm.ruleProps.title",
          defaultMessage: "配置规则属性",
        })}
      >
        <ProFormSelect
          name="target"
          width="md"
          label={intl.formatMessage({
            id: "pages.searchTable.updateForm.object",
            defaultMessage: "监控对象",
          })}
          valueEnum={{
            0: "表一",
            1: "表二",
          }}
        />
        <ProFormSelect
          name="template"
          width="md"
          label={intl.formatMessage({
            id: "pages.searchTable.updateForm.ruleProps.templateLabel",
            defaultMessage: "规则模板",
          })}
          valueEnum={{
            0: "规则模板一",
            1: "规则模板二",
          }}
        />
        <ProFormRadio.Group
          name="type"
          label={intl.formatMessage({
            id: "pages.searchTable.updateForm.ruleProps.typeLabel",
            defaultMessage: "规则类型",
          })}
          options={[
            {
              value: "0",
              label: "强",
            },
            {
              value: "1",
              label: "弱",
            },
          ]}
        />
      </StepsForm.StepForm>
      <StepsForm.StepForm
        initialValues={{
          type: "1",
          frequency: "month",
        }}
        title={intl.formatMessage({
          id: "pages.searchTable.updateForm.schedulingPeriod.title",
          defaultMessage: "设定调度周期",
        })}
      >
        <ProFormDateTimePicker
          name="time"
          width="md"
          label={intl.formatMessage({
            id: "pages.searchTable.updateForm.schedulingPeriod.timeLabel",
            defaultMessage: "开始时间",
          })}
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage
                  id="pages.searchTable.updateForm.schedulingPeriod.timeRules"
                  defaultMessage="请选择开始时间！"
                />
              ),
            },
          ]}
        />
        <ProFormSelect
          name="frequency"
          label={intl.formatMessage({
            id: "pages.searchTable.updateForm.object",
            defaultMessage: "监控对象",
          })}
          width="md"
          valueEnum={{
            month: "月",
            week: "周",
          }}
        />
      </StepsForm.StepForm>
    </StepsForm>
  );
};

export default UpdateForm;