初始化 antd-pro
This commit is contained in:
sin
115
admin-web/src/pages/Forms/StepForm/Step1.js
Normal file
115
admin-web/src/pages/Forms/StepForm/Step1.js
Normal file
@@ -0,0 +1,115 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { connect } from 'dva';
|
||||
import { Form, Input, Button, Select, Divider } from 'antd';
|
||||
import router from 'umi/router';
|
||||
import styles from './style.less';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
span: 5,
|
||||
},
|
||||
wrapperCol: {
|
||||
span: 19,
|
||||
},
|
||||
};
|
||||
|
||||
@connect(({ form }) => ({
|
||||
data: form.step,
|
||||
}))
|
||||
@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,
|
||||
});
|
||||
router.push('/form/step-form/confirm');
|
||||
}
|
||||
});
|
||||
};
|
||||
return (
|
||||
<Fragment>
|
||||
<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: '请输入转账金额' },
|
||||
{
|
||||
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>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Step1;
|
||||
99
admin-web/src/pages/Forms/StepForm/Step2.js
Normal file
99
admin-web/src/pages/Forms/StepForm/Step2.js
Normal file
@@ -0,0 +1,99 @@
|
||||
import React from 'react';
|
||||
import { connect } from 'dva';
|
||||
import { Form, Input, Button, Alert, Divider } from 'antd';
|
||||
import router from 'umi/router';
|
||||
import { digitUppercase } from '@/utils/utils';
|
||||
import styles from './style.less';
|
||||
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
span: 5,
|
||||
},
|
||||
wrapperCol: {
|
||||
span: 19,
|
||||
},
|
||||
};
|
||||
|
||||
@connect(({ form, loading }) => ({
|
||||
submitting: loading.effects['form/submitStepForm'],
|
||||
data: form.step,
|
||||
}))
|
||||
@Form.create()
|
||||
class Step2 extends React.PureComponent {
|
||||
render() {
|
||||
const { form, data, dispatch, submitting } = this.props;
|
||||
const { getFieldDecorator, validateFields } = form;
|
||||
const onPrev = () => {
|
||||
router.push('/form/step-form/info');
|
||||
};
|
||||
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 Step2;
|
||||
74
admin-web/src/pages/Forms/StepForm/Step3.js
Normal file
74
admin-web/src/pages/Forms/StepForm/Step3.js
Normal file
@@ -0,0 +1,74 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { connect } from 'dva';
|
||||
import { Button, Row, Col } from 'antd';
|
||||
import router from 'umi/router';
|
||||
import Result from '@/components/Result';
|
||||
import styles from './style.less';
|
||||
|
||||
@connect(({ form }) => ({
|
||||
data: form.step,
|
||||
}))
|
||||
class Step3 extends React.PureComponent {
|
||||
render() {
|
||||
const { data } = this.props;
|
||||
const onFinish = () => {
|
||||
router.push('/form/step-form/info');
|
||||
};
|
||||
const information = (
|
||||
<div className={styles.information}>
|
||||
<Row>
|
||||
<Col xs={24} sm={8} className={styles.label}>
|
||||
付款账户：
|
||||
</Col>
|
||||
<Col xs={24} sm={16}>
|
||||
{data.payAccount}
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col xs={24} sm={8} className={styles.label}>
|
||||
收款账户：
|
||||
</Col>
|
||||
<Col xs={24} sm={16}>
|
||||
{data.receiverAccount}
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col xs={24} sm={8} className={styles.label}>
|
||||
收款人姓名：
|
||||
</Col>
|
||||
<Col xs={24} sm={16}>
|
||||
{data.receiverName}
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col xs={24} sm={8} className={styles.label}>
|
||||
转账金额：
|
||||
</Col>
|
||||
<Col xs={24} sm={16}>
|
||||
<span className={styles.money}>{data.amount}</span> 元
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
const actions = (
|
||||
<Fragment>
|
||||
<Button type="primary" onClick={onFinish}>
|
||||
再转一笔
|
||||
</Button>
|
||||
<Button>查看账单</Button>
|
||||
</Fragment>
|
||||
);
|
||||
return (
|
||||
<Result
|
||||
type="success"
|
||||
title="操作成功"
|
||||
description="预计两小时内到账"
|
||||
extra={information}
|
||||
actions={actions}
|
||||
className={styles.result}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Step3;
|
||||
46
admin-web/src/pages/Forms/StepForm/index.js
Normal file
46
admin-web/src/pages/Forms/StepForm/index.js
Normal file
@@ -0,0 +1,46 @@
|
||||
import React, { PureComponent, Fragment } from 'react';
|
||||
import { Card, Steps } from 'antd';
|
||||
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||||
import styles from '../style.less';
|
||||
|
||||
const { Step } = Steps;
|
||||
|
||||
export default class StepForm extends PureComponent {
|
||||
getCurrentStep() {
|
||||
const { location } = this.props;
|
||||
const { pathname } = location;
|
||||
const pathList = pathname.split('/');
|
||||
switch (pathList[pathList.length - 1]) {
|
||||
case 'info':
|
||||
return 0;
|
||||
case 'confirm':
|
||||
return 1;
|
||||
case 'result':
|
||||
return 2;
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { location, children } = this.props;
|
||||
return (
|
||||
<PageHeaderWrapper
|
||||
title="分步表单"
|
||||
tabActiveKey={location.pathname}
|
||||
content="将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。"
|
||||
>
|
||||
<Card bordered={false}>
|
||||
<Fragment>
|
||||
<Steps current={this.getCurrentStep()} className={styles.steps}>
|
||||
<Step title="填写转账信息" />
|
||||
<Step title="确认转账信息" />
|
||||
<Step title="完成" />
|
||||
</Steps>
|
||||
{children}
|
||||
</Fragment>
|
||||
</Card>
|
||||
</PageHeaderWrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
78
admin-web/src/pages/Forms/StepForm/style.less
Normal file
78
admin-web/src/pages/Forms/StepForm/style.less
Normal file
@@ -0,0 +1,78 @@
|
||||
@import '~antd/lib/style/themes/default.less';
|
||||
|
||||
.stepForm {
|
||||
max-width: 500px;
|
||||
margin: 40px auto 0;
|
||||
}
|
||||
|
||||
.stepFormText {
|
||||
margin-bottom: 24px;
|
||||
:global {
|
||||
.ant-form-item-label,
|
||||
.ant-form-item-control {
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.result {
|
||||
max-width: 560px;
|
||||
margin: 0 auto;
|
||||
padding: 24px 0 8px;
|
||||
}
|
||||
|
||||
.desc {
|
||||
padding: 0 56px;
|
||||
color: @text-color-secondary;
|
||||
h3 {
|
||||
margin: 0 0 12px 0;
|
||||
color: @text-color-secondary;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
}
|
||||
h4 {
|
||||
margin: 0 0 4px 0;
|
||||
color: @text-color-secondary;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-md) {
|
||||
.desc {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.information {
|
||||
line-height: 22px;
|
||||
:global {
|
||||
.ant-row:not(:last-child) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
.label {
|
||||
padding-right: 8px;
|
||||
color: @heading-color;
|
||||
text-align: right;
|
||||
@media screen and (max-width: @screen-sm) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.money {
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
font-family: 'Helvetica Neue', sans-serif;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.uppercase {
|
||||
font-size: 12px;
|
||||
}
|
||||
Reference in New Issue
Block a user