import { Button , Divider , Form , Input , Select } from 'antd' ; import React , { Fragment } from 'react' ; import { Dispatch } from 'redux' ; import { FormComponentProps } from 'antd/es/form' ; import { connect } from 'dva' ; import { StepFormStateType } from '@/models/stepForm' ; import styles from './index.less' ; const { Option } = Select ; const formItemLayout = { labelCol : { span : 5 , } , wrapperCol : { span : 19 , } , } ; interface Step1Props extends FormComponentProps { data ? : StepFormStateType [ 'step' ] ; dispatch ? : Dispatch < any > ; } const Step1 = props => { const { form , dispatch , data } = props ; if ( ! data ) { return null ; } const { getFieldDecorator , validateFields } = form ; const onValidateForm = ( ) => { validateFields ( ( err , values ) => { if ( ! err && dispatch ) { dispatch ( { type : 'stepForm/saveStepFormData' , payload : values , } ) ; dispatch ( { type : 'stepForm/saveCurrentStep' , payload : 'confirm' , } ) ; } } ) ; } ; return ( < Fragment > < Form layout = "horizontal" className = { styles . stepForm } hideRequiredMark > < Form . Item { ... formItemLayout } label = "付款账户" > { getFieldDecorator ( 'payAccount' , { initialValue : data . payAccount , rules : [ { required : true , message : '请选择付款账户' } ] , } ) ( < Select placeholder = "fengshuan95@gmail.com" > < Option value = "18703738860@163.com" > 网易邮箱 < /Option> < /Select>)} < /Form.Item> < Form . Item { ... formItemLayout } label = "收款账户" > < Input . Group compact > < Select defaultValue = "alipay" style = { { width : 100 } } > < Option value = "alipay" > 支付宝 < /Option> < Option value = "bank" > 银行账户 < /Option> < /Select> { getFieldDecorator ( 'receiverAccount' , { initialValue : data . receiverAccount , rules : [ { required : true , message : '请输入收款人账户' } , { type : 'email' , message : '账户名应为邮箱格式' } , ] , } ) ( < Input style = { { width : 'calc(100% - 100px)' } } placeholder = "test@example.com" / > ) } < /Input.Group> < /Form.Item> < Form . Item { ... formItemLayout } label = "收款人姓名" > { getFieldDecorator ( 'receiverName' , { initialValue : data . receiverName , rules : [ { required : true , message : '请输入收款人姓名' } ] , } ) ( < Input placeholder = "请输入收款人姓名" / > ) } < /Form.Item> < Form . Item { ... formItemLayout } label = "转账金额" > { getFieldDecorator ( 'amount' , { initialValue : data . amount , rules : [ { required : true , message : '请输入转账金额' } , { pattern : /^(\d+)((?:\.\d+)?)$/ , message : '请输入合法金额数字' , } , ] , } ) ( < Input prefix = "￥" placeholder = "请输入金额" / > ) } < /Form.Item> < Form . Item wrapperCol = { { xs : { span : 24 , offset : 0 } , sm : { span : formItemLayout . wrapperCol . span , offset : formItemLayout . labelCol . span , } , } } label = "" > < Button type = "primary" onClick = { onValidateForm } > 下一步 < /Button> < /Form.Item> < /Form> < /Fragment>); } ; export default connect ( ( { stepForm } ) => ( { data : stepForm . step , } ) ) ( Form . create < Step1Props > ( ) ( Step1 ) ) ;