提交 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 3 "version": "0.0.1",
4 4 "description": "StepForm",
5 5 "main": "src/index.js",
... ... @@ -14,9 +14,9 @@
14 14 "ant-design-pro": "^2.1.1",
15 15 "antd": "^3.10.9",
16 16 "dva": "^2.4.0",
17   - "mockjs": "*",
18 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 21 "devDependencies": {
22 22 "umi": "^2.3.0-beta.1",
... ...
1 1 export default {
2   - 'POST /api/forms': (req, res) => {
  2 + 'POST /api/BLOCK_NAME/forms': (req, res) => {
3 3 res.send({ message: 'Ok' });
4 4 },
5 5 };
... ...
... ... @@ -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 21 @Form.create()
22 22 class Step1 extends React.PureComponent {
... ... @@ -27,7 +27,7 @@ class Step1 extends React.PureComponent {
27 27 validateFields((err, values) => {
28 28 if (!err) {
29 29 dispatch({
30   - type: 'form/saveStepFormData',
  30 + type: 'BLOCK_NAME_CAMEL_CASE/saveStepFormData',
31 31 payload: values,
32 32 });
33 33 router.push('/confirm');
... ...
... ... @@ -2,7 +2,7 @@ import React from 'react';
2 2 import { connect } from 'dva';
3 3 import { Form, Input, Button, Alert, Divider } from 'antd';
4 4 import router from 'umi/router';
5   -import { digitUppercase } from '@/utils/utils';
  5 +import { digitUppercase } from '../../utils/utils';
6 6 import styles from './index.less';
7 7
8 8 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 21 @Form.create()
22 22 class Step2 extends React.PureComponent {
... ... @@ -31,7 +31,7 @@ class Step2 extends React.PureComponent {
31 31 validateFields((err, values) => {
32 32 if (!err) {
33 33 dispatch({
34   - type: 'form/submitStepForm',
  34 + type: 'BLOCK_NAME_CAMEL_CASE/submitStepForm',
35 35 payload: {
36 36 ...data,
37 37 ...values,
... ...
... ... @@ -5,8 +5,8 @@ import router from 'umi/router';
5 5 import { Result } from 'ant-design-pro';
6 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 11 class Step3 extends React.PureComponent {
12 12 render() {
... ...
... ... @@ -4,7 +4,7 @@ import PageHeaderWrapper from './components/PageHeaderWrapper';
4 4 import Step1 from './components/Step1';
5 5 import Step2 from './components/Step2';
6 6 import Step3 from './components/Step3';
7   -import styles from '../style.less';
  7 +import styles from './style.less';
8 8
9 9 const { Step } = Steps;
10 10
... ... @@ -28,6 +28,14 @@ export default class StepForm extends PureComponent {
28 28 render() {
29 29 const { location } = this.props;
30 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 39 return (
32 40 <PageHeaderWrapper
33 41 title="分步表单"
... ... @@ -41,13 +49,7 @@ export default class StepForm extends PureComponent {
41 49 <Step title="确认转账信息" />
42 50 <Step title="完成" />
43 51 </Steps>
44   - {/confirm\/?$/.test(pathname) ? (
45   - <Step2 />
46   - ) : /result\/?$/.test(pathname) ? (
47   - <Step3 />
48   - ) : (
49   - <Step1 />
50   - )}
  52 + {currentStep}
51 53 </Fragment>
52 54 </Card>
53 55 </PageHeaderWrapper>
... ...
1 1 import { routerRedux } from 'dva/router';
2   -import { message } from 'antd';
3 2 import { fakeSubmitForm } from './service';
4 3
5 4 export default {
6   - namespace: 'form',
  5 + namespace: 'BLOCK_NAME_CAMEL_CASE',
7 6
8 7 state: {
9 8 step: {
... ...
1 1 import request from 'umi-request';
2 2
3 3 export async function fakeSubmitForm(params) {
4   - return request('/api/forms', {
  4 + return request('/api/BLOCK_NAME/forms', {
5 5 method: 'POST',
6 6 body: params,
7 7 });
... ...
  1 +
  2 +import nzh from 'nzh/cn';
  3 +
  4 +export function digitUppercase(n) {
  5 + return nzh.toMoney(n);
  6 +}
... ...
注册登录 后发表评论