正在显示
11 个修改的文件
包含
32 行增加
和
208 行删除
ant-design-pro/StepForm/@/utils/utils.js
已删除
100644 → 0
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", |
... | ... |
... | ... | @@ -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> |
... | ... |
请
注册
或
登录
后发表评论