Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
A
ant-design-pro
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Service Desk
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Operations
Operations
Incidents
Environments
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
duanledexianxianxian
ant-design-pro
Commits
cc28e069
Commit
cc28e069
authored
7 years ago
by
WhatAKitty
Committed by
ddcat1115
7 years ago
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Do with new router (#519)
* Do with new router * Move default values into form model
parent
8a15e9bd
Changes
6
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
298 additions
and
263 deletions
+298
-263
src/common/router.js
src/common/router.js
+3
-0
src/models/form.js
src/models/form.js
+4
-0
src/routes/Forms/StepForm/Step1.js
src/routes/Forms/StepForm/Step1.js
+110
-92
src/routes/Forms/StepForm/Step2.js
src/routes/Forms/StepForm/Step2.js
+107
-88
src/routes/Forms/StepForm/Step3.js
src/routes/Forms/StepForm/Step3.js
+53
-45
src/routes/Forms/StepForm/index.js
src/routes/Forms/StepForm/index.js
+21
-38
No files found.
src/common/router.js
View file @
cc28e069
...
...
@@ -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
'
)),
},
...
...
This diff is collapsed.
Click to expand it.
src/models/form.js
View file @
cc28e069
...
...
@@ -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
,
...
...
This diff is collapsed.
Click to expand it.
src/routes/Forms/StepForm/Step1.js
View file @
cc28e069
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
);
This diff is collapsed.
Click to expand it.
src/routes/Forms/StepForm/Step2.js
View file @
cc28e069
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
);
This diff is collapsed.
Click to expand it.
src/routes/Forms/StepForm/Step3.js
View file @
cc28e069
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
);
This diff is collapsed.
Click to expand it.
src/routes/Forms/StepForm/index.js
View file @
cc28e069
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
);
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment