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