提交 9684c7d24e219f1d4f60d75fcf4e819e574cb6ab

作者 愚道
1 个父辈 065f5814

improve step form code

1 -import moment from 'moment';  
2 -import React from 'react';  
3 -import nzh from 'nzh/cn';  
4 -import { parse, stringify } from 'qs';  
5 -  
6 -export function fixedZero(val) {  
7 - return val * 1 < 10 ? `0${val}` : val;  
8 -}  
9 -  
10 -export function getTimeDistance(type) {  
11 - const now = new Date();  
12 - const oneDay = 1000 * 60 * 60 * 24;  
13 -  
14 - if (type === 'today') {  
15 - now.setHours(0);  
16 - now.setMinutes(0);  
17 - now.setSeconds(0);  
18 - return [moment(now), moment(now.getTime() + (oneDay - 1000))];  
19 - }  
20 -  
21 - if (type === 'week') {  
22 - let day = now.getDay();  
23 - now.setHours(0);  
24 - now.setMinutes(0);  
25 - now.setSeconds(0);  
26 -  
27 - if (day === 0) {  
28 - day = 6;  
29 - } else {  
30 - day -= 1;  
31 - }  
32 -  
33 - const beginTime = now.getTime() - day * oneDay;  
34 -  
35 - return [moment(beginTime), moment(beginTime + (7 * oneDay - 1000))];  
36 - }  
37 -  
38 - if (type === 'month') {  
39 - const year = now.getFullYear();  
40 - const month = now.getMonth();  
41 - const nextDate = moment(now).add(1, 'months');  
42 - const nextYear = nextDate.year();  
43 - const nextMonth = nextDate.month();  
44 -  
45 - return [  
46 - moment(`${year}-${fixedZero(month + 1)}-01 00:00:00`),  
47 - moment(moment(`${nextYear}-${fixedZero(nextMonth + 1)}-01 00:00:00`).valueOf() - 1000),  
48 - ];  
49 - }  
50 -  
51 - const year = now.getFullYear();  
52 - return [moment(`${year}-01-01 00:00:00`), moment(`${year}-12-31 23:59:59`)];  
53 -}  
54 -  
55 -export function getPlainNode(nodeList, parentPath = '') {  
56 - const arr = [];  
57 - nodeList.forEach(node => {  
58 - const item = node;  
59 - item.path = `${parentPath}/${item.path || ''}`.replace(/\/+/g, '/');  
60 - item.exact = true;  
61 - if (item.children && !item.component) {  
62 - arr.push(...getPlainNode(item.children, item.path));  
63 - } else {  
64 - if (item.children && item.component) {  
65 - item.exact = false;  
66 - }  
67 - arr.push(item);  
68 - }  
69 - });  
70 - return arr;  
71 -}  
72 -  
73 -export function digitUppercase(n) {  
74 - return nzh.toMoney(n);  
75 -}  
76 -  
77 -function getRelation(str1, str2) {  
78 - if (str1 === str2) {  
79 - console.warn('Two path are equal!'); // eslint-disable-line  
80 - }  
81 - const arr1 = str1.split('/');  
82 - const arr2 = str2.split('/');  
83 - if (arr2.every((item, index) => item === arr1[index])) {  
84 - return 1;  
85 - }  
86 - if (arr1.every((item, index) => item === arr2[index])) {  
87 - return 2;  
88 - }  
89 - return 3;  
90 -}  
91 -  
92 -function getRenderArr(routes) {  
93 - let renderArr = [];  
94 - renderArr.push(routes[0]);  
95 - for (let i = 1; i < routes.length; i += 1) {  
96 - // 去重  
97 - renderArr = renderArr.filter(item => getRelation(item, routes[i]) !== 1);  
98 - // 是否包含  
99 - const isAdd = renderArr.every(item => getRelation(item, routes[i]) === 3);  
100 - if (isAdd) {  
101 - renderArr.push(routes[i]);  
102 - }  
103 - }  
104 - return renderArr;  
105 -}  
106 -  
107 -/**  
108 - * Get router routing configuration  
109 - * { path:{name,...param}}=>Array<{name,path ...param}>  
110 - * @param {string} path  
111 - * @param {routerData} routerData  
112 - */  
113 -export function getRoutes(path, routerData) {  
114 - let routes = Object.keys(routerData).filter(  
115 - routePath => routePath.indexOf(path) === 0 && routePath !== path  
116 - );  
117 - // Replace path to '' eg. path='user' /user/name => name  
118 - routes = routes.map(item => item.replace(path, ''));  
119 - // Get the route to be rendered to remove the deep rendering  
120 - const renderArr = getRenderArr(routes);  
121 - // Conversion and stitching parameters  
122 - const renderRoutes = renderArr.map(item => {  
123 - const exact = !routes.some(route => route !== item && getRelation(route, item) === 1);  
124 - return {  
125 - exact,  
126 - ...routerData[`${path}${item}`],  
127 - key: `${path}${item}`,  
128 - path: `${path}${item}`,  
129 - };  
130 - });  
131 - return renderRoutes;  
132 -}  
133 -  
134 -export function getPageQuery() {  
135 - return parse(window.location.href.split('?')[1]);  
136 -}  
137 -  
138 -export function getQueryPath(path = '', query = {}) {  
139 - const search = stringify(query);  
140 - if (search.length) {  
141 - return `${path}?${search}`;  
142 - }  
143 - return path;  
144 -}  
145 -  
146 -/* eslint no-useless-escape:0 */  
147 -const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;  
148 -  
149 -export function isUrl(path) {  
150 - return reg.test(path);  
151 -}  
152 -  
153 -export function formatWan(val) {  
154 - const v = val * 1;  
155 - if (!v || Number.isNaN(v)) return '';  
156 -  
157 - let result = val;  
158 - if (val > 10000) {  
159 - result = Math.floor(val / 10000);  
160 - result = (  
161 - <span>  
162 - {result}  
163 - <span  
164 - style={{  
165 - position: 'relative',  
166 - top: -2,  
167 - fontSize: 14,  
168 - fontStyle: 'normal',  
169 - marginLeft: 2,  
170 - }}  
171 - >  
172 -  
173 - </span>  
174 - </span>  
175 - );  
176 - }  
177 - return result;  
178 -}  
179 -  
180 -// 给官方演示站点用,用于关闭真实开发环境不需要使用的特性  
181 -export function isAntdPro() {  
182 - return window.location.hostname === 'preview.pro.ant.design';  
183 -}  
1 { 1 {
2 - "name": "@umi-block/stepform", 2 + "name": "@umi-block/step-form",
3 "version": "0.0.1", 3 "version": "0.0.1",
4 "description": "StepForm", 4 "description": "StepForm",
5 "main": "src/index.js", 5 "main": "src/index.js",
@@ -14,9 +14,9 @@ @@ -14,9 +14,9 @@
14 "ant-design-pro": "^2.1.1", 14 "ant-design-pro": "^2.1.1",
15 "antd": "^3.10.9", 15 "antd": "^3.10.9",
16 "dva": "^2.4.0", 16 "dva": "^2.4.0",
17 - "mockjs": "*",  
18 "react": "^16.6.3", 17 "react": "^16.6.3",
19 - "umi-request": "^1.0.0" 18 + "umi-request": "^1.0.0",
  19 + "nzh": "^1.0.3"
20 }, 20 },
21 "devDependencies": { 21 "devDependencies": {
22 "umi": "^2.3.0-beta.1", 22 "umi": "^2.3.0-beta.1",
1 export default { 1 export default {
2 - 'POST /api/forms': (req, res) => { 2 + 'POST /api/BLOCK_NAME/forms': (req, res) => {
3 res.send({ message: 'Ok' }); 3 res.send({ message: 'Ok' });
4 }, 4 },
5 }; 5 };
@@ -15,8 +15,8 @@ const formItemLayout = { @@ -15,8 +15,8 @@ const formItemLayout = {
15 }, 15 },
16 }; 16 };
17 17
18 -@connect(({ form }) => ({  
19 - data: form.step, 18 +@connect(({ BLOCK_NAME_CAMEL_CASE }) => ({
  19 + data: BLOCK_NAME_CAMEL_CASE.step,
20 })) 20 }))
21 @Form.create() 21 @Form.create()
22 class Step1 extends React.PureComponent { 22 class Step1 extends React.PureComponent {
@@ -27,7 +27,7 @@ class Step1 extends React.PureComponent { @@ -27,7 +27,7 @@ class Step1 extends React.PureComponent {
27 validateFields((err, values) => { 27 validateFields((err, values) => {
28 if (!err) { 28 if (!err) {
29 dispatch({ 29 dispatch({
30 - type: 'form/saveStepFormData', 30 + type: 'BLOCK_NAME_CAMEL_CASE/saveStepFormData',
31 payload: values, 31 payload: values,
32 }); 32 });
33 router.push('/confirm'); 33 router.push('/confirm');
@@ -2,7 +2,7 @@ import React from 'react'; @@ -2,7 +2,7 @@ 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'; 4 import router from 'umi/router';
5 -import { digitUppercase } from '@/utils/utils'; 5 +import { digitUppercase } from '../../utils/utils';
6 import styles from './index.less'; 6 import styles from './index.less';
7 7
8 const formItemLayout = { 8 const formItemLayout = {
@@ -14,9 +14,9 @@ const formItemLayout = { @@ -14,9 +14,9 @@ const formItemLayout = {
14 }, 14 },
15 }; 15 };
16 16
17 -@connect(({ form, loading }) => ({  
18 - submitting: loading.effects['form/submitStepForm'],  
19 - data: form.step, 17 +@connect(({ BLOCK_NAME_CAMEL_CASE, loading }) => ({
  18 + submitting: loading.effects['BLOCK_NAME_CAMEL_CASE/submitStepForm'],
  19 + data: BLOCK_NAME_CAMEL_CASE.step,
20 })) 20 }))
21 @Form.create() 21 @Form.create()
22 class Step2 extends React.PureComponent { 22 class Step2 extends React.PureComponent {
@@ -31,7 +31,7 @@ class Step2 extends React.PureComponent { @@ -31,7 +31,7 @@ class Step2 extends React.PureComponent {
31 validateFields((err, values) => { 31 validateFields((err, values) => {
32 if (!err) { 32 if (!err) {
33 dispatch({ 33 dispatch({
34 - type: 'form/submitStepForm', 34 + type: 'BLOCK_NAME_CAMEL_CASE/submitStepForm',
35 payload: { 35 payload: {
36 ...data, 36 ...data,
37 ...values, 37 ...values,
@@ -5,8 +5,8 @@ import router from 'umi/router'; @@ -5,8 +5,8 @@ import router from 'umi/router';
5 import { Result } from 'ant-design-pro'; 5 import { Result } from 'ant-design-pro';
6 import styles from './index.less'; 6 import styles from './index.less';
7 7
8 -@connect(({ form }) => ({  
9 - data: form.step, 8 +@connect(({ BLOCK_NAME_CAMEL_CASE }) => ({
  9 + data: BLOCK_NAME_CAMEL_CASE.step,
10 })) 10 }))
11 class Step3 extends React.PureComponent { 11 class Step3 extends React.PureComponent {
12 render() { 12 render() {
@@ -4,7 +4,7 @@ import PageHeaderWrapper from './components/PageHeaderWrapper'; @@ -4,7 +4,7 @@ import PageHeaderWrapper from './components/PageHeaderWrapper';
4 import Step1 from './components/Step1'; 4 import Step1 from './components/Step1';
5 import Step2 from './components/Step2'; 5 import Step2 from './components/Step2';
6 import Step3 from './components/Step3'; 6 import Step3 from './components/Step3';
7 -import styles from '../style.less'; 7 +import styles from './style.less';
8 8
9 const { Step } = Steps; 9 const { Step } = Steps;
10 10
@@ -28,6 +28,14 @@ export default class StepForm extends PureComponent { @@ -28,6 +28,14 @@ export default class StepForm extends PureComponent {
28 render() { 28 render() {
29 const { location } = this.props; 29 const { location } = this.props;
30 const { pathname } = location; 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 />;
  36 + } else {
  37 + currentStep = <Step1 />;
  38 + }
31 return ( 39 return (
32 <PageHeaderWrapper 40 <PageHeaderWrapper
33 title="分步表单" 41 title="分步表单"
@@ -41,13 +49,7 @@ export default class StepForm extends PureComponent { @@ -41,13 +49,7 @@ export default class StepForm extends PureComponent {
41 <Step title="确认转账信息" /> 49 <Step title="确认转账信息" />
42 <Step title="完成" /> 50 <Step title="完成" />
43 </Steps> 51 </Steps>
44 - {/confirm\/?$/.test(pathname) ? (  
45 - <Step2 />  
46 - ) : /result\/?$/.test(pathname) ? (  
47 - <Step3 />  
48 - ) : (  
49 - <Step1 />  
50 - )} 52 + {currentStep}
51 </Fragment> 53 </Fragment>
52 </Card> 54 </Card>
53 </PageHeaderWrapper> 55 </PageHeaderWrapper>
1 import { routerRedux } from 'dva/router'; 1 import { routerRedux } from 'dva/router';
2 -import { message } from 'antd';  
3 import { fakeSubmitForm } from './service'; 2 import { fakeSubmitForm } from './service';
4 3
5 export default { 4 export default {
6 - namespace: 'form', 5 + namespace: 'BLOCK_NAME_CAMEL_CASE',
7 6
8 state: { 7 state: {
9 step: { 8 step: {
1 import request from 'umi-request'; 1 import request from 'umi-request';
2 2
3 export async function fakeSubmitForm(params) { 3 export async function fakeSubmitForm(params) {
4 - return request('/api/forms', { 4 + return request('/api/BLOCK_NAME/forms', {
5 method: 'POST', 5 method: 'POST',
6 body: params, 6 body: params,
7 }); 7 });
  1 +
  2 +import nzh from 'nzh/cn';
  3 +
  4 +export function digitUppercase(n) {
  5 + return nzh.toMoney(n);
  6 +}
注册登录 后发表评论