Skip to content

GitLab

A
ant-design-pro
Commit cc28e069 authored by WhatAKitty's avatar WhatAKitty Committed by ddcat1115
Browse files
Options

Do with new router (#519) 

* Do with new router

* Move default values into form model
parent 8a15e9bd
Hide whitespace changes
Inline Side-by-side
Showing with 298 additions and 263 deletions
src/common/router.js
View file @ cc28e069
...@@ -54,6 +54,9 @@ export const getRouterData = (app) => { ...@@ -54,6 +54,9 @@ export const getRouterData = (app) => {
'/form/step-form': { '/form/step-form': {
component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/StepForm')), component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/StepForm')),
}, },
'/form/step-form/info': {
component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/StepForm/Step1')),
},
'/form/step-form/confirm': { '/form/step-form/confirm': {
component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/StepForm/Step2')), component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/StepForm/Step2')),
}, },
......
src/models/form.js
View file @ cc28e069
...@@ -7,6 +7,10 @@ export default { ...@@ -7,6 +7,10 @@ export default {
state: { state: {
step: { step: {
payAccount: 'ant-design@alipay.com',
receiverAccount: 'test@example.com',
receiverName: 'Alex',
amount: '500',
}, },
regularFormSubmitting: false, regularFormSubmitting: false,
stepFormSubmitting: false, stepFormSubmitting: false,
......
src/routes/Forms/StepForm/Step1.js
View file @ cc28e069
import React from 'react'; import React from 'react';
import { connect } from 'dva';
import { Form, Input, Button, Select, Divider } from 'antd'; import { Form, Input, Button, Select, Divider } from 'antd';
import { routerRedux } from 'dva/router'; import { routerRedux } from 'dva/router';
import styles from './style.less'; import styles from './style.less';
const { Option } = Select; const { Option } = Select;
export default ({ formItemLayout, form, dispatch, data }) => { const formItemLayout = {
const { getFieldDecorator, validateFields } = form; labelCol: {
const onValidateForm = () => { span: 5,
validateFields((err, values) => { },
if (!err) { wrapperCol: {
dispatch({ span: 19,
type: 'form/saveStepFormData', },
payload: values, };
});
dispatch(routerRedux.push('/form/step-form/confirm')); @Form.create()
} class Step1 extends React.PureComponent {
}); render() {
}; const { form, dispatch, data } = this.props;
return ( const { getFieldDecorator, validateFields } = form;
<div> const onValidateForm = () => {
<Form layout="horizontal" className={styles.stepForm} hideRequiredMark> validateFields((err, values) => {
<Form.Item if (!err) {
{...formItemLayout} dispatch({
label="付款账户" type: 'form/saveStepFormData',
> payload: values,
{getFieldDecorator('payAccount', { });
initialValue: data.payAccount || 'ant-design@alipay.com', dispatch(routerRedux.push('/form/step-form/confirm'));
rules: [{ required: true, message: '请选择付款账户' }], }
})( });
<Select placeholder="test@example.com"> };
<Option value="ant-design@alipay.com">ant-design@alipay.com</Option> return (
</Select> <div>
)} <Form layout="horizontal" className={styles.stepForm} hideRequiredMark>
</Form.Item> <Form.Item
<Form.Item {...formItemLayout}
{...formItemLayout} label="付款账户"
label="收款账户" >
> {getFieldDecorator('payAccount', {
<Input.Group compact> initialValue: data.payAccount,
<Select defaultValue="alipay" style={{ width: 100 }}> rules: [{ required: true, message: '请选择付款账户' }],
<Option value="alipay">支付宝</Option> })(
<Option value="bank">银行账户</Option> <Select placeholder="test@example.com">
</Select> <Option value="ant-design@alipay.com">ant-design@alipay.com</Option>
{getFieldDecorator('receiverAccount', { </Select>
initialValue: data.receiverAccount || 'test@example.com', )}
</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: [ rules: [
{ required: true, message: '请输入收款人账户' }, { required: true, message: '请输入转账金额' },
{ type: 'email', message: '账户名应为邮箱格式' }, { pattern: /^(\d+)((?:\.\d+)?)$/, message: '请输入合法金额数字' },
], ],
})( })(
<Input style={{ width: 'calc(100% - 100px)' }} placeholder="test@example.com" /> <Input prefix="￥" placeholder="请输入金额" />
)} )}
</Input.Group> </Form.Item>
</Form.Item> <Form.Item
<Form.Item wrapperCol={{
{...formItemLayout} xs: { span: 24, offset: 0 },
label="收款人姓名" sm: { span: formItemLayout.wrapperCol.span, offset: formItemLayout.labelCol.span },
> }}
{getFieldDecorator('receiverName', { label=""
initialValue: data.receiverName || 'Alex', >
rules: [{ required: true, message: '请输入收款人姓名' }], <Button type="primary" onClick={onValidateForm}>
})( 下一步
<Input placeholder="请输入收款人姓名" /> </Button>
)} </Form.Item>
</Form.Item> </Form>
<Form.Item <Divider style={{ margin: '40px 0 24px' }} />
{...formItemLayout} <div className={styles.desc}>
label="转账金额" <h3>说明</h3>
> <h4>转账到支付宝账户</h4>
{getFieldDecorator('amount', { <p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p>
initialValue: data.amount || '500', <h4>转账到银行卡</h4>
rules: [ <p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p>
{ required: true, message: '请输入转账金额' }, </div>
{ 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>
<Divider style={{ margin: '40px 0 24px' }} />
<div className={styles.desc}>
<h3>说明</h3>
<h4>转账到支付宝账户</h4>
<p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p>
<h4>转账到银行卡</h4>
<p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p>
</div> </div>
</div> );
); }
}; }
export default connect(({ form }) => ({
data: form.step,
}))(Step1);
src/routes/Forms/StepForm/Step2.js
View file @ cc28e069
import React from 'react'; import React from 'react';
import { connect } from 'dva';
import { Form, Input, Button, Alert, Divider } from 'antd'; import { Form, Input, Button, Alert, Divider } from 'antd';
import { routerRedux } from 'dva/router'; import { routerRedux } from 'dva/router';
import { digitUppercase } from '../../../utils/utils'; import { digitUppercase } from '../../../utils/utils';
import styles from './style.less'; import styles from './style.less';
export default ({ formItemLayout, form, data, dispatch, submitting }) => { const formItemLayout = {
const { getFieldDecorator, validateFields } = form; labelCol: {
const onPrev = () => { span: 5,
dispatch(routerRedux.push('/form/step-form')); },
}; wrapperCol: {
const onValidateForm = (e) => { span: 19,
e.preventDefault(); },
validateFields((err, values) => {
if (!err) {
dispatch({
type: 'form/submitStepForm',
payload: {
...data,
...values,
},
});
}
});
};
return (
<Form layout="horizontal" className={styles.stepForm}>
<Alert
closable
showIcon
message="确认转账后，资金将直接打入对方账户，无法退回。"
style={{ marginBottom: 24 }}
/>
<Form.Item
{...formItemLayout}
className={styles.stepFormText}
label="付款账户"
>
{data.payAccount}
</Form.Item>
<Form.Item
{...formItemLayout}
className={styles.stepFormText}
label="收款账户"
>
{data.receiverAccount}
</Form.Item>
<Form.Item
{...formItemLayout}
className={styles.stepFormText}
label="收款人姓名"
>
{data.receiverName}
</Form.Item>
<Form.Item
{...formItemLayout}
className={styles.stepFormText}
label="转账金额"
>
<span className={styles.money}>{data.amount}</span>
<span className={styles.uppercase}>（{digitUppercase(data.amount)}）</span>
</Form.Item>
<Divider style={{ margin: '24px 0' }} />
<Form.Item
{...formItemLayout}
label="支付密码"
required={false}
>
{getFieldDecorator('password', {
initialValue: '123456',
rules: [{
required: true, message: '需要支付密码才能进行支付',
}],
})(
<Input type="password" autoComplete="off" style={{ width: '80%' }} />
)}
</Form.Item>
<Form.Item
style={{ marginBottom: 8 }}
wrapperCol={{
xs: { span: 24, offset: 0 },
sm: { span: formItemLayout.wrapperCol.span, offset: formItemLayout.labelCol.span },
}}
label=""
>
<Button type="primary" onClick={onValidateForm} loading={submitting}>
提交
</Button>
<Button onClick={onPrev} style={{ marginLeft: 8 }}>
上一步
</Button>
</Form.Item>
</Form>
);
}; };
@Form.create()
class Step2 extends React.PureComponent {
render() {
const { form, data, dispatch, submitting } = this.props;
const { getFieldDecorator, validateFields } = form;
const onPrev = () => {
dispatch(routerRedux.push('/form/step-form'));
};
const onValidateForm = (e) => {
e.preventDefault();
validateFields((err, values) => {
if (!err) {
dispatch({
type: 'form/submitStepForm',
payload: {
...data,
...values,
},
});
}
});
};
return (
<Form layout="horizontal" className={styles.stepForm}>
<Alert
closable
showIcon
message="确认转账后，资金将直接打入对方账户，无法退回。"
style={{ marginBottom: 24 }}
/>
<Form.Item
{...formItemLayout}
className={styles.stepFormText}
label="付款账户"
>
{data.payAccount}
</Form.Item>
<Form.Item
{...formItemLayout}
className={styles.stepFormText}
label="收款账户"
>
{data.receiverAccount}
</Form.Item>
<Form.Item
{...formItemLayout}
className={styles.stepFormText}
label="收款人姓名"
>
{data.receiverName}
</Form.Item>
<Form.Item
{...formItemLayout}
className={styles.stepFormText}
label="转账金额"
>
<span className={styles.money}>{data.amount}</span>
<span className={styles.uppercase}>（{digitUppercase(data.amount)}）</span>
</Form.Item>
<Divider style={{ margin: '24px 0' }} />
<Form.Item
{...formItemLayout}
label="支付密码"
required={false}
>
{getFieldDecorator('password', {
initialValue: '123456',
rules: [{
required: true, message: '需要支付密码才能进行支付',
}],
})(
<Input type="password" autoComplete="off" style={{ width: '80%' }} />
)}
</Form.Item>
<Form.Item
style={{ marginBottom: 8 }}
wrapperCol={{
xs: { span: 24, offset: 0 },
sm: { span: formItemLayout.wrapperCol.span, offset: formItemLayout.labelCol.span },
}}
label=""
>
<Button type="primary" onClick={onValidateForm} loading={submitting}>
提交
</Button>
<Button onClick={onPrev} style={{ marginLeft: 8 }}>
上一步
</Button>
</Form.Item>
</Form>
);
}
}
export default connect(({ form }) => ({
submitting: form.stepFormSubmitting,
data: form.step,
}))(Step2);
src/routes/Forms/StepForm/Step3.js
View file @ cc28e069
import React from 'react'; import React from 'react';
import { connect } from 'dva';
import { Button, Row, Col } from 'antd'; import { Button, Row, Col } from 'antd';
import { routerRedux } from 'dva/router'; import { routerRedux } from 'dva/router';
import Result from '../../../components/Result'; import Result from '../../../components/Result';
import styles from './style.less'; import styles from './style.less';
export default ({ dispatch, data }) => { class Step3 extends React.PureComponent {
const onFinish = () => { render() {
dispatch(routerRedux.push('/form/step-form')); const { dispatch, data } = this.props;
}; const onFinish = () => {
const information = ( dispatch(routerRedux.push('/form/step-form'));
<div className={styles.information}> };
<Row> const information = (
<Col span={8} className={styles.label}>付款账户：</Col> <div className={styles.information}>
<Col span={16}>{data.payAccount}</Col> <Row>
</Row> <Col span={8} className={styles.label}>付款账户：</Col>
<Row> <Col span={16}>{data.payAccount}</Col>
<Col span={8} className={styles.label}>收款账户：</Col> </Row>
<Col span={16}>{data.receiverAccount}</Col> <Row>
</Row> <Col span={8} className={styles.label}>收款账户：</Col>
<Row> <Col span={16}>{data.receiverAccount}</Col>
<Col span={8} className={styles.label}>收款人姓名：</Col> </Row>
<Col span={16}>{data.receiverName}</Col> <Row>
</Row> <Col span={8} className={styles.label}>收款人姓名：</Col>
<Row> <Col span={16}>{data.receiverName}</Col>
<Col span={8} className={styles.label}>转账金额：</Col> </Row>
<Col span={16}><span className={styles.money}>{data.amount}</span> 元</Col> <Row>
</Row> <Col span={8} className={styles.label}>转账金额：</Col>
</div> <Col span={16}><span className={styles.money}>{data.amount}</span> 元</Col>
); </Row>
const actions = ( </div>
<div> );
<Button type="primary" onClick={onFinish}> const actions = (
再转一笔 <div>
</Button> <Button type="primary" onClick={onFinish}>
<Button> 再转一笔
查看账单 </Button>
</Button> <Button>
</div> 查看账单
); </Button>
return ( </div>
<Result );
type="success" return (
title="操作成功" <Result
description="预计两小时内到账" type="success"
extra={information} title="操作成功"
actions={actions} description="预计两小时内到账"
className={styles.result} extra={information}
/> actions={actions}
); className={styles.result}
}; />
);
}
}
export default connect(({ form }) => ({
data: form.step,
}))(Step3);
src/routes/Forms/StepForm/index.js
View file @ cc28e069
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { connect } from 'dva'; import { Route, Redirect, Switch } from 'dva/router';
import { Card, Steps, Form } from 'antd'; import { Card, Steps } from 'antd';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout'; import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import Step1 from './Step1'; import NotFound from '../../Exception/404';
import Step2 from './Step2'; import { getRoutes } from '../../../utils/utils';
import Step3 from './Step3';
import styles from '../style.less'; import styles from '../style.less';
const { Step } = Steps; const { Step } = Steps;
@Form.create() export default class StepForm extends PureComponent {
class StepForm extends PureComponent {
getCurrentStep() { getCurrentStep() {
const { location } = this.props; const { location } = this.props;
const { pathname } = location; const { pathname } = location;
const pathList = pathname.split('/'); const pathList = pathname.split('/');
switch (pathList[pathList.length - 1]) { switch (pathList[pathList.length - 1]) {
case 'step-form': return 0; case 'info': return 0;
case 'confirm': return 1; case 'confirm': return 1;
case 'result': return 2; case 'result': return 2;
default: return 0; default: return 0;
} }
} }
getCurrentComponent() {
const componentMap = {
0: Step1,
1: Step2,
2: Step3,
};
return componentMap[this.getCurrentStep()];
}
render() { render() {
const { form, stepFormData, submitting, dispatch } = this.props; const { match, routerData } = this.props;
const formItemLayout = {
labelCol: {
span: 5,
},
wrapperCol: {
span: 19,
},
};
const CurrentComponent = this.getCurrentComponent();
return ( return (
<PageHeaderLayout title="分步表单" content="将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。"> <PageHeaderLayout title="分步表单" content="将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。">
<Card bordered={false}> <Card bordered={false}>
...@@ -50,21 +31,23 @@ class StepForm extends PureComponent { ...@@ -50,21 +31,23 @@ class StepForm extends PureComponent {
<Step title="确认转账信息" /> <Step title="确认转账信息" />
<Step title="完成" /> <Step title="完成" />
</Steps> </Steps>
<CurrentComponent <Switch>
formItemLayout={formItemLayout} {
form={form} getRoutes(match.path, routerData).map(item => (
dispatch={dispatch} <Route
data={stepFormData} key={item.key}
submitting={submitting} path={item.path}
/> component={item.component}
exact={item.exact}
/>
))
}
<Redirect exact from="/form/step-form" to="/form/step-form/info" />
<Route render={NotFound} />
</Switch>
</div> </div>
</Card> </Card>
</PageHeaderLayout> </PageHeaderLayout>
); );
} }
} }
export default connect(state => ({
stepFormData: state.form.step,
submitting: state.form.stepFormSubmitting,
}))(StepForm);
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment