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

 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 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) => {
@@ -26,7 +39,7 @@ export default ({ formItemLayout, form, dispatch, data }) => {
             label="付款账户"
           >
             {getFieldDecorator('payAccount', {
-            initialValue: data.payAccount || 'ant-design@alipay.com',
+              initialValue: data.payAccount,
               rules: [{ required: true, message: '请选择付款账户' }],
             })(
               <Select placeholder="test@example.com">
@@ -44,7 +57,7 @@ export default ({ formItemLayout, form, dispatch, data }) => {
                 <Option value="bank">银行账户</Option>
               </Select>
               {getFieldDecorator('receiverAccount', {
-              initialValue: data.receiverAccount || 'test@example.com',
+                initialValue: data.receiverAccount,
                 rules: [
                   { required: true, message: '请输入收款人账户' },
                   { type: 'email', message: '账户名应为邮箱格式' },
@@ -59,7 +72,7 @@ export default ({ formItemLayout, form, dispatch, data }) => {
             label="收款人姓名"
           >
             {getFieldDecorator('receiverName', {
-            initialValue: data.receiverName || 'Alex',
+              initialValue: data.receiverName,
               rules: [{ required: true, message: '请输入收款人姓名' }],
             })(
               <Input placeholder="请输入收款人姓名" />
@@ -70,7 +83,7 @@ export default ({ formItemLayout, form, dispatch, data }) => {
             label="转账金额"
           >
             {getFieldDecorator('amount', {
-            initialValue: data.amount || '500',
+              initialValue: data.amount,
               rules: [
                 { required: true, message: '请输入转账金额' },
                 { pattern: /^(\d+)((?:\.\d+)?)$/, message: '请输入合法金额数字' },
@@ -101,4 +114,9 @@ export default ({ formItemLayout, form, dispatch, data }) => {
         </div>
       </div>
     );
-};
+  }
+}
+
+export default connect(({ form }) => ({
+  data: form.step,
+}))(Step1);

src/routes/Forms/StepForm/Step2.js

 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 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'));
@@ -92,4 +105,10 @@ export default ({ formItemLayout, form, data, dispatch, submitting }) => {
         </Form.Item>
       </Form>
     );
-};
+  }
+}
+
+export default connect(({ form }) => ({
+  submitting: form.stepFormSubmitting,
+  data: form.step,
+}))(Step2);

src/routes/Forms/StepForm/Step3.js

 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 }) => {
+class Step3 extends React.PureComponent {
+  render() {
+    const { dispatch, data } = this.props;
     const onFinish = () => {
       dispatch(routerRedux.push('/form/step-form'));
     };
@@ -48,4 +51,9 @@ export default ({ dispatch, data }) => {
         className={styles.result}
       />
     );
-};
+  }
+}
+
+export default connect(({ form }) => ({
+  data: form.step,
+}))(Step3);

src/routes/Forms/StepForm/index.js

 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);