正在显示
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 | "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", |
@@ -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 | }); |
请
注册
或
登录
后发表评论