提交 db5f1e12ca8cae5677336cfe46c0ebcdb95165e3
1 个父辈
b30f6746
fix step routes error when add to a project
正在显示
5 个修改的文件
包含
43 行增加
和
25 行删除
1 | import React, { Fragment } from 'react'; | 1 | import React, { Fragment } from 'react'; |
2 | import { connect } from 'dva'; | 2 | import { connect } from 'dva'; |
3 | import { Form, Input, Button, Select, Divider } from 'antd'; | 3 | import { Form, Input, Button, Select, Divider } from 'antd'; |
4 | -import router from 'umi/router'; | ||
5 | import styles from './index.less'; | 4 | import styles from './index.less'; |
6 | 5 | ||
7 | const { Option } = Select; | 6 | const { Option } = Select; |
@@ -30,7 +29,10 @@ class Step1 extends React.PureComponent { | @@ -30,7 +29,10 @@ class Step1 extends React.PureComponent { | ||
30 | type: 'BLOCK_NAME_CAMEL_CASE/saveStepFormData', | 29 | type: 'BLOCK_NAME_CAMEL_CASE/saveStepFormData', |
31 | payload: values, | 30 | payload: values, |
32 | }); | 31 | }); |
33 | - router.push('/confirm'); | 32 | + dispatch({ |
33 | + type: 'BLOCK_NAME_CAMEL_CASE/saveCurrentStep', | ||
34 | + payload: 'confirm', | ||
35 | + }); | ||
34 | } | 36 | } |
35 | }); | 37 | }); |
36 | }; | 38 | }; |
1 | import React from 'react'; | 1 | import React from 'react'; |
2 | import { connect } from 'dva'; | 2 | import { connect } from 'dva'; |
3 | import { Form, Input, Button, Alert, Divider } from 'antd'; | 3 | import { Form, Input, Button, Alert, Divider } from 'antd'; |
4 | -import router from 'umi/router'; | ||
5 | import { digitUppercase } from '../../utils/utils'; | 4 | import { digitUppercase } from '../../utils/utils'; |
6 | import styles from './index.less'; | 5 | import styles from './index.less'; |
7 | 6 | ||
@@ -24,7 +23,10 @@ class Step2 extends React.PureComponent { | @@ -24,7 +23,10 @@ class Step2 extends React.PureComponent { | ||
24 | const { form, data, dispatch, submitting } = this.props; | 23 | const { form, data, dispatch, submitting } = this.props; |
25 | const { getFieldDecorator, validateFields } = form; | 24 | const { getFieldDecorator, validateFields } = form; |
26 | const onPrev = () => { | 25 | const onPrev = () => { |
27 | - router.push('info'); | 26 | + dispatch({ |
27 | + type: 'BLOCK_NAME_CAMEL_CASE/saveCurrentStep', | ||
28 | + payload: 'info', | ||
29 | + }); | ||
28 | }; | 30 | }; |
29 | const onValidateForm = e => { | 31 | const onValidateForm = e => { |
30 | e.preventDefault(); | 32 | e.preventDefault(); |
1 | import React, { Fragment } from 'react'; | 1 | import React, { Fragment } from 'react'; |
2 | import { connect } from 'dva'; | 2 | import { connect } from 'dva'; |
3 | import { Button, Row, Col } from 'antd'; | 3 | import { Button, Row, Col } from 'antd'; |
4 | -import router from 'umi/router'; | ||
5 | import { Result } from 'ant-design-pro'; | 4 | import { Result } from 'ant-design-pro'; |
6 | import styles from './index.less'; | 5 | import styles from './index.less'; |
7 | 6 | ||
@@ -10,9 +9,12 @@ import styles from './index.less'; | @@ -10,9 +9,12 @@ import styles from './index.less'; | ||
10 | })) | 9 | })) |
11 | class Step3 extends React.PureComponent { | 10 | class Step3 extends React.PureComponent { |
12 | render() { | 11 | render() { |
13 | - const { data } = this.props; | 12 | + const { data, dispatch } = this.props; |
14 | const onFinish = () => { | 13 | const onFinish = () => { |
15 | - router.push('info'); | 14 | + dispatch({ |
15 | + type: 'BLOCK_NAME_CAMEL_CASE/saveCurrentStep', | ||
16 | + payload: 'info', | ||
17 | + }); | ||
16 | }; | 18 | }; |
17 | const information = ( | 19 | const information = ( |
18 | <div className={styles.information}> | 20 | <div className={styles.information}> |
1 | import React, { PureComponent, Fragment } from 'react'; | 1 | import React, { PureComponent, Fragment } from 'react'; |
2 | import { Card, Steps } from 'antd'; | 2 | import { Card, Steps } from 'antd'; |
3 | +import { connect } from 'dva'; | ||
3 | import PageHeaderWrapper from './components/PageHeaderWrapper'; | 4 | import PageHeaderWrapper from './components/PageHeaderWrapper'; |
4 | import Step1 from './components/Step1'; | 5 | import Step1 from './components/Step1'; |
5 | import Step2 from './components/Step2'; | 6 | import Step2 from './components/Step2'; |
@@ -8,12 +9,13 @@ import styles from './style.less'; | @@ -8,12 +9,13 @@ import styles from './style.less'; | ||
8 | 9 | ||
9 | const { Step } = Steps; | 10 | const { Step } = Steps; |
10 | 11 | ||
11 | -export default class StepForm extends PureComponent { | 12 | +@connect(({ BLOCK_NAME_CAMEL_CASE }) => ({ |
13 | + current: BLOCK_NAME_CAMEL_CASE.current, | ||
14 | +})) | ||
15 | +class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent { | ||
12 | getCurrentStep() { | 16 | getCurrentStep() { |
13 | - const { location } = this.props; | ||
14 | - const { pathname } = location; | ||
15 | - const pathList = pathname.split('/'); | ||
16 | - switch (pathList[pathList.length - 1]) { | 17 | + const { current } = this.props; |
18 | + switch (current) { | ||
17 | case 'info': | 19 | case 'info': |
18 | return 0; | 20 | return 0; |
19 | case 'confirm': | 21 | case 'confirm': |
@@ -26,33 +28,33 @@ export default class StepForm extends PureComponent { | @@ -26,33 +28,33 @@ export default class StepForm extends PureComponent { | ||
26 | } | 28 | } |
27 | 29 | ||
28 | render() { | 30 | render() { |
29 | - const { location } = this.props; | ||
30 | - const { pathname } = location; | ||
31 | - let currentStep = null; | ||
32 | - if (/confirm\/?$/.test(pathname)) { | ||
33 | - currentStep = <Step2 />; | ||
34 | - } else if (/result\/?$/.test(pathname)) { | ||
35 | - currentStep = <Step3 />; | 31 | + const currentStep = this.getCurrentStep(); |
32 | + let stepComponent; | ||
33 | + if (currentStep === 1) { | ||
34 | + stepComponent = <Step2 />; | ||
35 | + } else if (currentStep === 2) { | ||
36 | + stepComponent = <Step3 />; | ||
36 | } else { | 37 | } else { |
37 | - currentStep = <Step1 />; | 38 | + stepComponent = <Step1 />; |
38 | } | 39 | } |
39 | return ( | 40 | return ( |
40 | <PageHeaderWrapper | 41 | <PageHeaderWrapper |
41 | title="分步表单" | 42 | title="分步表单" |
42 | - tabActiveKey={location.pathname} | ||
43 | content="将一个冗长或用户不熟悉的表单任务分成多个步骤,指导用户完成。" | 43 | content="将一个冗长或用户不熟悉的表单任务分成多个步骤,指导用户完成。" |
44 | > | 44 | > |
45 | <Card bordered={false}> | 45 | <Card bordered={false}> |
46 | <Fragment> | 46 | <Fragment> |
47 | - <Steps current={this.getCurrentStep()} className={styles.steps}> | 47 | + <Steps current={currentStep} className={styles.steps}> |
48 | <Step title="填写转账信息" /> | 48 | <Step title="填写转账信息" /> |
49 | <Step title="确认转账信息" /> | 49 | <Step title="确认转账信息" /> |
50 | <Step title="完成" /> | 50 | <Step title="完成" /> |
51 | </Steps> | 51 | </Steps> |
52 | - {currentStep} | 52 | + {stepComponent} |
53 | </Fragment> | 53 | </Fragment> |
54 | </Card> | 54 | </Card> |
55 | </PageHeaderWrapper> | 55 | </PageHeaderWrapper> |
56 | ); | 56 | ); |
57 | } | 57 | } |
58 | } | 58 | } |
59 | + | ||
60 | +export default PAGE_NAME_UPPER_CAMEL_CASE; |
1 | -import { routerRedux } from 'dva/router'; | ||
2 | import { fakeSubmitForm } from './service'; | 1 | import { fakeSubmitForm } from './service'; |
3 | 2 | ||
4 | export default { | 3 | export default { |
5 | namespace: 'BLOCK_NAME_CAMEL_CASE', | 4 | namespace: 'BLOCK_NAME_CAMEL_CASE', |
6 | 5 | ||
7 | state: { | 6 | state: { |
7 | + current: 'info', | ||
8 | step: { | 8 | step: { |
9 | payAccount: 'ant-design@alipay.com', | 9 | payAccount: 'ant-design@alipay.com', |
10 | receiverAccount: 'test@example.com', | 10 | receiverAccount: 'test@example.com', |
@@ -20,11 +20,21 @@ export default { | @@ -20,11 +20,21 @@ export default { | ||
20 | type: 'saveStepFormData', | 20 | type: 'saveStepFormData', |
21 | payload, | 21 | payload, |
22 | }); | 22 | }); |
23 | - yield put(routerRedux.push('result')); | 23 | + yield put({ |
24 | + type: 'saveCurrentStep', | ||
25 | + payload: 'result', | ||
26 | + }); | ||
24 | }, | 27 | }, |
25 | }, | 28 | }, |
26 | 29 | ||
27 | reducers: { | 30 | reducers: { |
31 | + saveCurrentStep(state, { payload }) { | ||
32 | + return { | ||
33 | + ...state, | ||
34 | + current: payload, | ||
35 | + }; | ||
36 | + }, | ||
37 | + | ||
28 | saveStepFormData(state, { payload }) { | 38 | saveStepFormData(state, { payload }) { |
29 | return { | 39 | return { |
30 | ...state, | 40 | ...state, |
请
注册
或
登录
后发表评论