react+antd的Modal与Form复合使用

效果图

 

点击发放按钮后弹出modal，点击“确认发放”按钮后校验“输入金额”输入框

用 visible控制modal的显示

 

具体实现代码

Modal+Form代码：

<Modal
    destroyOnClose
    title="工资发放"
    visible={this.state.visible}
    footer={null}
>
    <Form >
 
              <FormItem
            {...formItemLayout}
            label="输入金额"
            hasFeedback
        >
            {getFieldDecorator('account', {
                rules:[{
                    required:true,
                    pattern: new RegExp(  /^[0-9]+([.]\d{0,2})?$/),
                    message: '请输入正确价格'
                }],
            })(
                <Input />
            )}
        </FormItem>
        <FormItem
            {...formItemLayout}
            label="教师编号"
            hasFeedback
            hidden={true}
        >
            {getFieldDecorator('teacherId', {
                rules:[{
                    required:true,
                }],
            })(
                <Input  hidden={true}  />
            )}
        </FormItem>
        <FormItem
            {...formItemLayout}
            label="老师姓名"
            hasFeedback
        >
            {getFieldDecorator('nickName', {

            })(
                <Input  disabled ={true}/>
            )}
              

        </FormItem>
        <FormItem
            {...formItemLayout}
            label="手机号"
            hasFeedback
        >
            {getFieldDecorator('phone', {

            })(
                <Input disabled ={true} />
            )}
        </FormItem>
        <FormItem
            {...formItemLayout}
            label="所属银行"
            hasFeedback
        >
            {getFieldDecorator('openAccountBank', {

            })(
                <Input disabled ={true} />
            )}
        </FormItem>
        <FormItem
            {...formItemLayout}
            label="卡号"
            hasFeedback
        >
            {getFieldDecorator('accountNumber', {

            })(
                <Input disabled ={true} />
            )}
        </FormItem>
        <FormItem
            {...formItemLayout}
            label="银行卡姓名"
            hasFeedback
        >
            {getFieldDecorator('openAccountName', {

            })(
                <Input disabled ={true} />
            )}
        </FormItem>
        <FormItem
            {...formItemLayout}
            label="银行预留手机号"
            hasFeedback
        >
            {getFieldDecorator('openAccountPhone', {

            })(
                <Input disabled ={true} />
            )}
        </FormItem>

        <FormItem
            {...formItemLayout}
            label="身份证号"
            hasFeedback
        >
            {getFieldDecorator('openAccountPaper', {

            })(
                <Input disabled ={true} />
            )}
        </FormItem>
    </Form>

    <div style={{ width:'100%', margin: ' 20px  30% ' }}>
        <Button  onClick={this.handleCancelOrder}>取消</Button>
        <Button style={{ margin: ' 0  20px ' }}  onClick={this.saveOderInfo} type="primary">确认发放</Button>
    </div>


</Modal>

 

事件：

发放按钮触发事件

handleGive = (item) => {

    let id = item.id;

    this.setState({

        visible: true,

        id:id,

         });

    if(id == 'undefined'){

        return false

    }

    detailTeacherAudit({id:id}).then(res=>{

        if(res.code == 200) {

            console.log(res)

            let i = res.result

            this.setState({

                id:i.id,

            })

            this.props.form.setFieldsValue({



                nickName:i.nickName,//老师姓名

                phone:i.phone, //手机号

                accountNumber:i.accountNumber,//银行账号

                teacherId:i.teacherId,//老师姓名

                openAccountPhone:i.openAccountPhone, //开户手机号

                openAccountName:i.openAccountName,//开户姓名

                openAccountBank:i.openAccountBank, //开户银行

                openAccountPaper:i.openAccountPaper, //开户身份证号

                account:'',//账户金额

            });

        } else {


        }

    })

};

确认发放按钮事件

saveOderInfo = (e) => {

    e.preventDefault();

    this.props.form.validateFields((err, values) => {

        if (!err) {

            console.log('Received values of form: ', values);

            if(values.account == "") {

                message.error('请输入金额！');

            }

            var param= {}

                param = {

                    account:values.account, teacherId:values.teacherId,uid:localStorage.getItem('id'),

                }



            Modal.confirm({

                title: '确认',

                content: '您确认要发放？',

                cancelText:'取消',

                okText:"确定",

                onOk: () => {

                                      createOrderByTeacherID(param).then(res=>{

                        if(res.code == 200) {

                            message.success('申请成功');

                            this.setState({

                                visible: false,

                            });

                            this.props.history.replace('/teacherSalary');

                        }else if (res.code == '-1000'){

                            message.success(res.message);

                            message.success('该用户信息已发起过签约，签约结果：签约中');

                            this.props.history.replace('/teacherSalary');

                        }

                    })





                }

            })

        }

    });

 

取消按钮触发事件

handleCancelOrder = e => {

    console.log(e);

    this.setState({

        visible: false,

    });

};