@ -8,6 +8,7 @@ import {
ProFormRadio ,
ProFormDateTimePicker ,
} from '@ant-design/pro-form' ;
import { useIntl , FormattedMessage } from 'umi' ;
import { TableListItem } from '../data.d' ;
@ -26,108 +27,178 @@ export interface UpdateFormProps {
values : Partial < TableListItem > ;
}
const UpdateForm : React.FC < UpdateFormProps > = ( props ) = > (
< StepsForm
stepsProps = { {
size : 'small' ,
} }
stepsFormRender = { ( dom , submitter ) = > {
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 ,
const UpdateForm : React.FC < UpdateFormProps > = ( props ) = > {
const intl = useIntl ( ) ;
return (
< StepsForm
stepsProps = { {
size : 'small' ,
} }
title = "基本信息"
>
< ProFormText
name = "name"
label = "规则名称"
rules = { [ { required : true , message : '请输入规则名称！' } ] }
/ >
< ProFormTextArea
name = "desc"
label = "规则描述"
placeholder = "请输入至少五个字符"
rules = { [ { required : true , message : '请输入至少五个字符的规则描述！' , min : 5 } ] }
/ >
< / StepsForm.StepForm >
< StepsForm.StepForm
initialValues = { {
target : '0' ,
template : '0' ,
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 >
) ;
} }
title = "配置规则属性"
onFinish = { props . onSubmit }
>
< ProFormSelect
name = "target"
label = "监控对象"
valueEnum = { {
0 : '表一' ,
1 : '表二' ,
< StepsForm.StepForm
initialValues = { {
name : props.values.name ,
desc : props.values.desc ,
} }
/ >
< ProFormSelect
name = "template"
label = "规则模板"
valueEnum = { {
0 : '规则模板一' ,
1 : '规则模板二' ,
title = { intl . formatMessage ( {
id : 'pages.searchTable.updateForm.basicConfig' ,
defaultMessage : '基本信息' ,
} ) }
>
< ProFormText
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' ,
} }
/ >
< ProFormRadio.Group
name = "type"
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 : '周' ,
title = { intl . formatMessage ( {
id : 'pages.searchTable.updateForm.ruleProps.title' ,
defaultMessage : '配置规则属性' ,
} ) }
>
< ProFormSelect
name = "target"
label = { intl . formatMessage ( {
id : 'pages.searchTable.updateForm.object' ,
defaultMessage : '监控对象' ,
} ) }
valueEnum = { {
0 : '表一' ,
1 : '表二' ,
} }
/ >
< ProFormSelect
name = "template"
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' ,
} }
/ >
< / StepsForm.StepForm >
< / StepsForm >
) ;
title = { intl . formatMessage ( {
id : 'pages.searchTable.updateForm.schedulingPeriod.title' ,
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 ;
kevinadhiguna
5 years ago
GitHub