Do with new router (#519)

* Do with new router

* Move default values into form model

src/common/router.js

@@ -54,6 +54,9 @@ export const getRouterData = (app) => {
     '/form/step-form': {
       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': {
       component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/StepForm/Step2')),
     },

src/models/form.js

@@ -7,6 +7,10 @@ export default {
 
   state: {
     step: {
+      payAccount: 'ant-design@alipay.com',
+      receiverAccount: 'test@example.com',
+      receiverName: 'Alex',
+      amount: '500',
     },
     regularFormSubmitting: false,
     stepFormSubmitting: false,

src/routes/Forms/StepForm/Step1.js

@@ -1,104 +1,122 @@
 import React from 'react';
+import { connect } from 'dva';
 import { Form, Input, Button, Select, Divider } from 'antd';
 import { routerRedux } from 'dva/router';
 import styles from './style.less';
 
 const { Option } = Select;
 
-export default ({ formItemLayout, form, dispatch, data }) => {
-  const { getFieldDecorator, validateFields } = form;
-  const onValidateForm = () => {
-    validateFields((err, values) => {
-      if (!err) {
-        dispatch({
-          type: 'form/saveStepFormData',
-          payload: values,
-        });
-        dispatch(routerRedux.push('/form/step-form/confirm'));
-      }
-    });
-  };
-  return (
-    <div>
-      <Form layout="horizontal" className={styles.stepForm} hideRequiredMark>
-        <Form.Item
-          {...formItemLayout}
-          label="付款账户"
-        >
-          {getFieldDecorator('payAccount', {
-            initialValue: data.payAccount || 'ant-design@alipay.com',
-            rules: [{ required: true, message: '请选择付款账户' }],
-          })(
-            <Select placeholder="test@example.com">
-              <Option value="ant-design@alipay.com">ant-design@alipay.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 || 'test@example.com',
+const formItemLayout = {
+  labelCol: {
+    span: 5,
+  },
+  wrapperCol: {
+    span: 19,
+  },
+};
+
+@Form.create()
+class Step1 extends React.PureComponent {
+  render() {
+    const { form, dispatch, data } = this.props;
+    const { getFieldDecorator, validateFields } = form;
+    const onValidateForm = () => {
+      validateFields((err, values) => {
+        if (!err) {
+          dispatch({
+            type: 'form/saveStepFormData',
+            payload: values,
+          });
+          dispatch(routerRedux.push('/form/step-form/confirm'));
+        }
+      });
+    };
+    return (
+      <div>
+        <Form layout="horizontal" className={styles.stepForm} hideRequiredMark>
+          <Form.Item
+            {...formItemLayout}
+            label="付款账户"
+          >
+            {getFieldDecorator('payAccount', {
+              initialValue: data.payAccount,
+              rules: [{ required: true, message: '请选择付款账户' }],
+            })(
+              <Select placeholder="test@example.com">
+                <Option value="ant-design@alipay.com">ant-design@alipay.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: '请输入收款人账户' },
-                { type: 'email', message: '账户名应为邮箱格式' },
+                { required: true, message: '请输入转账金额' },
+                { pattern: /^(\d+)((?:\.\d+)?)$/, message: '请输入合法金额数字' },
               ],
             })(
-              <Input style={{ width: 'calc(100% - 100px)' }} placeholder="test@example.com" />
+              <Input prefix="￥" placeholder="请输入金额" />
             )}
-          </Input.Group>
-        </Form.Item>
-        <Form.Item
-          {...formItemLayout}
-          label="收款人姓名"
-        >
-          {getFieldDecorator('receiverName', {
-            initialValue: data.receiverName || 'Alex',
-            rules: [{ required: true, message: '请输入收款人姓名' }],
-          })(
-            <Input placeholder="请输入收款人姓名" />
-          )}
-        </Form.Item>
-        <Form.Item
-          {...formItemLayout}
-          label="转账金额"
-        >
-          {getFieldDecorator('amount', {
-            initialValue: data.amount || '500',
-            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>
-      <Divider style={{ margin: '40px 0 24px' }} />
-      <div className={styles.desc}>
-        <h3>说明</h3>
-        <h4>转账到支付宝账户</h4>
-        <p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p>
-        <h4>转账到银行卡</h4>
-        <p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p>
+          </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

@@ -1,95 +1,114 @@
 import React from 'react';
+import { connect } from 'dva';
 import { Form, Input, Button, Alert, Divider } from 'antd';
 import { routerRedux } from 'dva/router';
 import { digitUppercase } from '../../../utils/utils';
 import styles from './style.less';
 
-export default ({ formItemLayout, form, data, dispatch, submitting }) => {
-  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>
-  );
+const formItemLayout = {
+  labelCol: {
+    span: 5,
+  },
+  wrapperCol: {
+    span: 19,
+  },
 };
+
+@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

@@ -1,51 +1,59 @@
 import React from 'react';
+import { connect } from 'dva';
 import { Button, Row, Col } from 'antd';
 import { routerRedux } from 'dva/router';
 import Result from '../../../components/Result';
 import styles from './style.less';
 
-export default ({ dispatch, data }) => {
-  const onFinish = () => {
-    dispatch(routerRedux.push('/form/step-form'));
-  };
-  const information = (
-    <div className={styles.information}>
-      <Row>
-        <Col span={8} className={styles.label}>付款账户：</Col>
-        <Col span={16}>{data.payAccount}</Col>
-      </Row>
-      <Row>
-        <Col span={8} className={styles.label}>收款账户：</Col>
-        <Col span={16}>{data.receiverAccount}</Col>
-      </Row>
-      <Row>
-        <Col span={8} className={styles.label}>收款人姓名：</Col>
-        <Col span={16}>{data.receiverName}</Col>
-      </Row>
-      <Row>
-        <Col span={8} className={styles.label}>转账金额：</Col>
-        <Col span={16}><span className={styles.money}>{data.amount}</span> 元</Col>
-      </Row>
-    </div>
-  );
-  const actions = (
-    <div>
-      <Button type="primary" onClick={onFinish}>
-        再转一笔
-      </Button>
-      <Button>
-        查看账单
-      </Button>
-    </div>
-  );
-  return (
-    <Result
-      type="success"
-      title="操作成功"
-      description="预计两小时内到账"
-      extra={information}
-      actions={actions}
-      className={styles.result}
-    />
-  );
-};
+class Step3 extends React.PureComponent {
+  render() {
+    const { dispatch, data } = this.props;
+    const onFinish = () => {
+      dispatch(routerRedux.push('/form/step-form'));
+    };
+    const information = (
+      <div className={styles.information}>
+        <Row>
+          <Col span={8} className={styles.label}>付款账户：</Col>
+          <Col span={16}>{data.payAccount}</Col>
+        </Row>
+        <Row>
+          <Col span={8} className={styles.label}>收款账户：</Col>
+          <Col span={16}>{data.receiverAccount}</Col>
+        </Row>
+        <Row>
+          <Col span={8} className={styles.label}>收款人姓名：</Col>
+          <Col span={16}>{data.receiverName}</Col>
+        </Row>
+        <Row>
+          <Col span={8} className={styles.label}>转账金额：</Col>
+          <Col span={16}><span className={styles.money}>{data.amount}</span> 元</Col>
+        </Row>
+      </div>
+    );
+    const actions = (
+      <div>
+        <Button type="primary" onClick={onFinish}>
+          再转一笔
+        </Button>
+        <Button>
+          查看账单
+        </Button>
+      </div>
+    );
+    return (
+      <Result
+        type="success"
+        title="操作成功"
+        description="预计两小时内到账"
+        extra={information}
+        actions={actions}
+        className={styles.result}
+      />
+    );
+  }
+}
+
+export default connect(({ form }) => ({
+  data: form.step,
+}))(Step3);

src/routes/Forms/StepForm/index.js

@@ -1,46 +1,27 @@
 import React, { PureComponent } from 'react';
-import { connect } from 'dva';
-import { Card, Steps, Form } from 'antd';
+import { Route, Redirect, Switch } from 'dva/router';
+import { Card, Steps } from 'antd';
 import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
-import Step1 from './Step1';
-import Step2 from './Step2';
-import Step3 from './Step3';
+import NotFound from '../../Exception/404';
+import { getRoutes } from '../../../utils/utils';
 import styles from '../style.less';
 
 const { Step } = Steps;
 
-@Form.create()
-class StepForm extends PureComponent {
+export default class StepForm extends PureComponent {
   getCurrentStep() {
     const { location } = this.props;
     const { pathname } = location;
     const pathList = pathname.split('/');
     switch (pathList[pathList.length - 1]) {
-      case 'step-form': return 0;
+      case 'info': return 0;
       case 'confirm': return 1;
       case 'result': return 2;
       default: return 0;
     }
   }
-  getCurrentComponent() {
-    const componentMap = {
-      0: Step1,
-      1: Step2,
-      2: Step3,
-    };
-    return componentMap[this.getCurrentStep()];
-  }
   render() {
-    const { form, stepFormData, submitting, dispatch } = this.props;
-    const formItemLayout = {
-      labelCol: {
-        span: 5,
-      },
-      wrapperCol: {
-        span: 19,
-      },
-    };
-    const CurrentComponent = this.getCurrentComponent();
+    const { match, routerData } = this.props;
     return (
       <PageHeaderLayout title="分步表单" content="将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。">
         <Card bordered={false}>
@@ -50,21 +31,23 @@ class StepForm extends PureComponent {
               <Step title="确认转账信息" />
               <Step title="完成" />
             </Steps>
-            <CurrentComponent
-              formItemLayout={formItemLayout}
-              form={form}
-              dispatch={dispatch}
-              data={stepFormData}
-              submitting={submitting}
-            />
+            <Switch>
+              {
+                getRoutes(match.path, routerData).map(item => (
+                  <Route
+                    key={item.key}
+                    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>
         </Card>
       </PageHeaderLayout>
     );
   }
 }
-
-export default connect(state => ({
-  stepFormData: state.form.step,
-  submitting: state.form.stepFormSubmitting,
-}))(StepForm);