@ -8,6 +8,7 @@ import {
ProFormRadio , ProFormRadio ,
ProFormDateTimePicker , ProFormDateTimePicker ,
} from '@ant-design/pro-form' ; } from '@ant-design/pro-form' ;
import { useIntl , FormattedMessage } from 'umi' ;
import { TableListItem } from '../data.d' ; import { TableListItem } from '../data.d' ;
@ -26,108 +27,178 @@ export interface UpdateFormProps {
values : Partial < TableListItem > ; values : Partial < TableListItem > ;
} }
const UpdateForm : React.FC < UpdateFormProps > = ( props ) = > ( const UpdateForm : React.FC < UpdateFormProps > = ( props ) = > {
< StepsForm const intl = useIntl ( ) ;
stepsProps = { { return (
size : 'small' , < StepsForm
} } stepsProps = { {
stepsFormRender = { ( dom , submitter ) = > { size : 'small' ,
return (
< Modal
width = { 640 }
bodyStyle = { { padding : '32px 40px 48px' } }
destroyOnClose
title = "规则配置"
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 = "基本信息" stepsFormRender = { ( dom , submitter ) = > {
> return (
< ProFormText < Modal
name = "name" width = { 640 }
label = "规则名称" bodyStyle = { { padding : '32px 40px 48px' } }
rules = { [ { required : true , message : '请输入规则名称！' } ] } destroyOnClose
/ > title = { intl . formatMessage ( {
< ProFormTextArea id : 'pages.searchTable.updateForm.ruleConfig' ,
name = "desc" defaultMessage : '规则配置' ,
label = "规则描述" } ) }
placeholder = "请输入至少五个字符" visible = { props . updateModalVisible }
rules = { [ { required : true , message : '请输入至少五个字符的规则描述！' , min : 5 } ] } footer = { submitter }
/ > onCancel = { ( ) = > props . onCancel ( ) }
< / StepsForm.StepForm > >
< StepsForm.StepForm { dom }
initialValues = { { < / Modal >
target : '0' , ) ;
template : '0' ,
} } } }
title = "配置规则属性" onFinish = { props . onSubmit }
> >
< ProFormSelect < StepsForm.StepForm
name = "target" initialValues = { {
label = "监控对象" name : props.values.name ,
valueEnum = { { desc : props.values.desc ,
0 : '表一' ,
1 : '表二' ,
} } } }
/ > title = { intl . formatMessage ( {
< ProFormSelect id : 'pages.searchTable.updateForm.basicConfig' ,
name = "template" defaultMessage : '基本信息' ,
label = "规则模板" } ) }
valueEnum = { { >
0 : '规则模板一' , < ProFormText
1 : '规则模板二' , name = "name"
label = { intl . formatMessage ( {
id : 'pages.searchTable.updateForm.ruleName.nameLabel' ,
defaultMessage : '规则名称' ,
} ) }
rules = { [
{
required : true ,
message : (
< FormattedMessage
id = "pages.searchTable.updateForm.ruleName.nameRules"
defaultMessage = "请输入规则名称！"
/ >
) ,
} ,
] }
/ >
< ProFormTextArea
name = "desc"
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 ( {
< ProFormRadio.Group id : 'pages.searchTable.updateForm.ruleProps.title' ,
name = "type" defaultMessage : '配置规则属性' ,
label = "规则类型" } ) }
options = { [ >
{ < ProFormSelect
value : '0' , name = "target"
label : '强' , label = { intl . formatMessage ( {
} , id : 'pages.searchTable.updateForm.object' ,
{ defaultMessage : '监控对象' ,
value : '1' , } ) }
label : '弱' , valueEnum = { {
} , 0 : '表一' ,
] } 1 : '表二' ,
/ > } }
< / StepsForm.StepForm > / >
< StepsForm.StepForm < ProFormSelect
initialValues = { { name = "template"
type : '1' , label = { intl . formatMessage ( {
frequency : 'month' , id : 'pages.searchTable.updateForm.ruleProps.templateLabel' ,
} } defaultMessage : '规则模板' ,
title = "设定调度周期" } ) }
> valueEnum = { {
< ProFormDateTimePicker 0 : '规则模板一' ,
name = "time" 1 : '规则模板二' ,
label = "开始时间" } }
rules = { [ { required : true , message : '请选择开始时间！' } ] } / >
/ > < ProFormRadio.Group
< ProFormSelect name = "type"
name = "frequency" label = { intl . formatMessage ( {
label = "监控对象" id : 'pages.searchTable.updateForm.ruleProps.typeLabel' ,
width = "xs" defaultMessage : '规则类型' ,
valueEnum = { { } ) }
month : '月' , options = { [
week : '周' , {
value : '0' ,
label : '强' ,
} ,
{
value : '1' ,
label : '弱' ,
} ,
] }
/ >
< / StepsForm.StepForm >
< StepsForm.StepForm
initialValues = { {
type : '1' ,
frequency : 'month' ,
} } } }
/ > title = { intl . formatMessage ( {
< / StepsForm.StepForm > id : 'pages.searchTable.updateForm.schedulingPeriod.title' ,
< / StepsForm > defaultMessage : '设定调度周期' ,
) ; } ) }
>
< ProFormDateTimePicker
name = "time"
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 = "xs"
valueEnum = { {
month : '月' ,
week : '周' ,
} }
/ >
< / StepsForm.StepForm >
< / StepsForm >
) ;
} ;
export default UpdateForm ; export default UpdateForm ;
kevinadhiguna
5 years ago
GitHub