123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194 |
- 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';
- import { TableListItem } from '../data.d';
- export interface FormValueType extends Partial<TableListItem> {
- 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<TableListItem>;
- }
- const UpdateForm: React.FC<UpdateFormProps> = (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="m"
- rules={[
- {
- required: true,
- message: '请输入规则名称!',
- },
- ]}
- />
- <ProFormTextArea
- name="desc"
- width="m"
- label={intl.formatMessage({
- id: 'pages.searchTable.updateForm.ruleDesc.descLabel',
- defaultMessage: '规则描述',
- })}
- placeholder={intl.formatMessage({
- id: 'pages.searchTable.updateForm.ruleDesc.descPlaceholder',
- defaultMessage: '请输入至少五个字符',
- })}
- rules={[
- {
- required: true,
- message: '请输入至少五个字符的规则描述!',
- 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="m"
- label={intl.formatMessage({
- id: 'pages.searchTable.updateForm.object',
- defaultMessage: '监控对象',
- })}
- valueEnum={{
- 0: '表一',
- 1: '表二',
- }}
- />
- <ProFormSelect
- name="template"
- width="m"
- 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="m"
- label={intl.formatMessage({
- id: 'pages.searchTable.updateForm.schedulingPeriod.timeLabel',
- defaultMessage: '开始时间',
- })}
- rules={[
- {
- required: true,
- message: '请选择开始时间!',
- },
- ]}
- />
- <ProFormSelect
- name="frequency"
- label={intl.formatMessage({
- id: 'pages.searchTable.updateForm.object',
- defaultMessage: '监控对象',
- })}
- width="m"
- valueEnum={{
- month: '月',
- week: '周',
- }}
- />
- </StepsForm.StepForm>
- </StepsForm>
- );
- };
- export default UpdateForm;
|