提交 264b0a30020488e98792e28518d9c002e558d09f

作者 愚道
1 个父辈 bb4b47ba

improve advancedform

@@ -14,12 +14,7 @@ @@ -14,12 +14,7 @@
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 - "hash.js": "^1.1.5",  
18 "lodash": "^4.17.10", 17 "lodash": "^4.17.10",
19 - "mockjs": "*",  
20 - "moment": "^2.22.2",  
21 - "nzh": "^1.0.3",  
22 - "qs": "^6.6.0",  
23 "react": "^16.6.3", 18 "react": "^16.6.3",
24 "umi-request": "^1.0.0" 19 "umi-request": "^1.0.0"
25 }, 20 },
1 -import mockjs from 'mockjs';  
2 -  
3 -const titles = [  
4 - 'Alipay',  
5 - 'Angular',  
6 - 'Ant Design',  
7 - 'Ant Design Pro',  
8 - 'Bootstrap',  
9 - 'React',  
10 - 'Vue',  
11 - 'Webpack',  
12 -];  
13 -const avatars = [  
14 - 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay  
15 - 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular  
16 - 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design  
17 - 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', // Ant Design Pro  
18 - 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap  
19 - 'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React  
20 - 'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue  
21 - 'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack  
22 -];  
23 -  
24 -const avatars2 = [  
25 - 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',  
26 - 'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png',  
27 - 'https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png',  
28 - 'https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png',  
29 - 'https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png',  
30 - 'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png',  
31 - 'https://gw.alipayobjects.com/zos/rmsportal/psOgztMplJMGpVEqfcgF.png',  
32 - 'https://gw.alipayobjects.com/zos/rmsportal/ZpBqSxLxVEXfcUNoPKrz.png',  
33 - 'https://gw.alipayobjects.com/zos/rmsportal/laiEnJdGHVOhJrUShBaJ.png',  
34 - 'https://gw.alipayobjects.com/zos/rmsportal/UrQsqscbKEpNuJcvBZBu.png',  
35 -];  
36 -  
37 -const covers = [  
38 - 'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',  
39 - 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',  
40 - 'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png',  
41 - 'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png',  
42 -];  
43 -const desc = [  
44 - '那是一种内在的东西, 他们到达不了,也无法触及的',  
45 - '希望是一个好东西,也许是最好的,好东西是不会消亡的',  
46 - '生命就像一盒巧克力,结果往往出人意料',  
47 - '城镇中有那么多的酒馆,她却偏偏走进了我的酒馆',  
48 - '那时候我只会想自己想要什么,从不想自己拥有什么',  
49 -];  
50 -  
51 -const user = [  
52 - '付小小',  
53 - '曲丽丽',  
54 - '林东东',  
55 - '周星星',  
56 - '吴加好',  
57 - '朱偏右',  
58 - '鱼酱',  
59 - '乐哥',  
60 - '谭小仪',  
61 - '仲尼',  
62 -];  
63 -  
64 -function fakeList(count) {  
65 - const list = [];  
66 - for (let i = 0; i < count; i += 1) {  
67 - list.push({  
68 - id: `fake-list-${i}`,  
69 - owner: user[i % 10],  
70 - title: titles[i % 8],  
71 - avatar: avatars[i % 8],  
72 - cover: parseInt(i / 4, 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],  
73 - status: ['active', 'exception', 'normal'][i % 3],  
74 - percent: Math.ceil(Math.random() * 50) + 50,  
75 - logo: avatars[i % 8],  
76 - href: 'https://ant.design',  
77 - updatedAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i),  
78 - createdAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i),  
79 - subDescription: desc[i % 5],  
80 - description:  
81 - '在中台产品的研发过程中,会出现不同的设计规范和实现方式,但其中往往存在很多类似的页面和组件,这些类似的组件会被抽离成一套标准规范。',  
82 - activeUser: Math.ceil(Math.random() * 100000) + 100000,  
83 - newUser: Math.ceil(Math.random() * 1000) + 1000,  
84 - star: Math.ceil(Math.random() * 100) + 100,  
85 - like: Math.ceil(Math.random() * 100) + 100,  
86 - message: Math.ceil(Math.random() * 10) + 10,  
87 - content:  
88 - '段落示意:蚂蚁金服设计平台 ant.design,用最小的工作量,无缝接入蚂蚁金服生态,提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design,用最小的工作量,无缝接入蚂蚁金服生态,提供跨越设计与开发的体验解决方案。',  
89 - members: [  
90 - {  
91 - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',  
92 - name: '曲丽丽',  
93 - id: 'member1',  
94 - },  
95 - {  
96 - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',  
97 - name: '王昭君',  
98 - id: 'member2',  
99 - },  
100 - {  
101 - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',  
102 - name: '董娜娜',  
103 - id: 'member3',  
104 - },  
105 - ],  
106 - });  
107 - }  
108 -  
109 - return list;  
110 -}  
111 -  
112 -let sourceData;  
113 -  
114 -function getFakeList(req, res) {  
115 - const params = req.query;  
116 -  
117 - const count = params.count * 1 || 20;  
118 -  
119 - const result = fakeList(count);  
120 - sourceData = result;  
121 - return res.json(result);  
122 -}  
123 -  
124 -function postFakeList(req, res) {  
125 - const { /* url = '', */ body } = req;  
126 - // const params = getUrlParams(url);  
127 - const { method, id } = body;  
128 - // const count = (params.count * 1) || 20;  
129 - let result = sourceData;  
130 -  
131 - switch (method) {  
132 - case 'delete':  
133 - result = result.filter(item => item.id !== id);  
134 - break;  
135 - case 'update':  
136 - result.forEach((item, i) => {  
137 - if (item.id === id) {  
138 - result[i] = Object.assign(item, body);  
139 - }  
140 - });  
141 - break;  
142 - case 'post':  
143 - result.unshift({  
144 - body,  
145 - id: `fake-list-${result.length}`,  
146 - createdAt: new Date().getTime(),  
147 - });  
148 - break;  
149 - default:  
150 - break;  
151 - }  
152 -  
153 - return res.json(result);  
154 -}  
155 -  
156 -const getNotice = [  
157 - {  
158 - id: 'xxx1',  
159 - title: titles[0],  
160 - logo: avatars[0],  
161 - description: '那是一种内在的东西,他们到达不了,也无法触及的',  
162 - updatedAt: new Date(),  
163 - member: '科学搬砖组',  
164 - href: '',  
165 - memberLink: '',  
166 - },  
167 - {  
168 - id: 'xxx2',  
169 - title: titles[1],  
170 - logo: avatars[1],  
171 - description: '希望是一个好东西,也许是最好的,好东西是不会消亡的',  
172 - updatedAt: new Date('2017-07-24'),  
173 - member: '全组都是吴彦祖',  
174 - href: '',  
175 - memberLink: '',  
176 - },  
177 - {  
178 - id: 'xxx3',  
179 - title: titles[2],  
180 - logo: avatars[2],  
181 - description: '城镇中有那么多的酒馆,她却偏偏走进了我的酒馆',  
182 - updatedAt: new Date(),  
183 - member: '中二少女团',  
184 - href: '',  
185 - memberLink: '',  
186 - },  
187 - {  
188 - id: 'xxx4',  
189 - title: titles[3],  
190 - logo: avatars[3],  
191 - description: '那时候我只会想自己想要什么,从不想自己拥有什么',  
192 - updatedAt: new Date('2017-07-23'),  
193 - member: '程序员日常',  
194 - href: '',  
195 - memberLink: '',  
196 - },  
197 - {  
198 - id: 'xxx5',  
199 - title: titles[4],  
200 - logo: avatars[4],  
201 - description: '凛冬将至',  
202 - updatedAt: new Date('2017-07-23'),  
203 - member: '高逼格设计天团',  
204 - href: '',  
205 - memberLink: '',  
206 - },  
207 - {  
208 - id: 'xxx6',  
209 - title: titles[5],  
210 - logo: avatars[5],  
211 - description: '生命就像一盒巧克力,结果往往出人意料',  
212 - updatedAt: new Date('2017-07-23'),  
213 - member: '骗你来学计算机',  
214 - href: '',  
215 - memberLink: '',  
216 - },  
217 -];  
218 -  
219 -const getActivities = [  
220 - {  
221 - id: 'trend-1',  
222 - updatedAt: new Date(),  
223 - user: {  
224 - name: '曲丽丽',  
225 - avatar: avatars2[0],  
226 - },  
227 - group: {  
228 - name: '高逼格设计天团',  
229 - link: 'http://github.com/',  
230 - },  
231 - project: {  
232 - name: '六月迭代',  
233 - link: 'http://github.com/',  
234 - },  
235 - template: '在 @{group} 新建项目 @{project}',  
236 - },  
237 - {  
238 - id: 'trend-2',  
239 - updatedAt: new Date(),  
240 - user: {  
241 - name: '付小小',  
242 - avatar: avatars2[1],  
243 - },  
244 - group: {  
245 - name: '高逼格设计天团',  
246 - link: 'http://github.com/',  
247 - },  
248 - project: {  
249 - name: '六月迭代',  
250 - link: 'http://github.com/',  
251 - },  
252 - template: '在 @{group} 新建项目 @{project}',  
253 - },  
254 - {  
255 - id: 'trend-3',  
256 - updatedAt: new Date(),  
257 - user: {  
258 - name: '林东东',  
259 - avatar: avatars2[2],  
260 - },  
261 - group: {  
262 - name: '中二少女团',  
263 - link: 'http://github.com/',  
264 - },  
265 - project: {  
266 - name: '六月迭代',  
267 - link: 'http://github.com/',  
268 - },  
269 - template: '在 @{group} 新建项目 @{project}',  
270 - },  
271 - {  
272 - id: 'trend-4',  
273 - updatedAt: new Date(),  
274 - user: {  
275 - name: '周星星',  
276 - avatar: avatars2[4],  
277 - },  
278 - project: {  
279 - name: '5 月日常迭代',  
280 - link: 'http://github.com/',  
281 - },  
282 - template: '将 @{project} 更新至已发布状态',  
283 - },  
284 - {  
285 - id: 'trend-5',  
286 - updatedAt: new Date(),  
287 - user: {  
288 - name: '朱偏右',  
289 - avatar: avatars2[3],  
290 - },  
291 - project: {  
292 - name: '工程效能',  
293 - link: 'http://github.com/',  
294 - },  
295 - comment: {  
296 - name: '留言',  
297 - link: 'http://github.com/',  
298 - },  
299 - template: '在 @{project} 发布了 @{comment}',  
300 - },  
301 - {  
302 - id: 'trend-6',  
303 - updatedAt: new Date(),  
304 - user: {  
305 - name: '乐哥',  
306 - avatar: avatars2[5],  
307 - },  
308 - group: {  
309 - name: '程序员日常',  
310 - link: 'http://github.com/',  
311 - },  
312 - project: {  
313 - name: '品牌迭代',  
314 - link: 'http://github.com/',  
315 - },  
316 - template: '在 @{group} 新建项目 @{project}',  
317 - },  
318 -];  
319 -  
320 -function getFakeCaptcha(req, res) {  
321 - return res.json('captcha-xxx');  
322 -}  
323 -  
324 export default { 1 export default {
325 - 'GET /api/project/notice': getNotice,  
326 - 'GET /api/activities': getActivities,  
327 - 'POST /api/forms': (req, res) => { 2 + 'POST /api/BLOCK_NAME/forms': (req, res) => {
328 res.send({ message: 'Ok' }); 3 res.send({ message: 'Ok' });
329 }, 4 },
330 - 'GET /api/tags': mockjs.mock({  
331 - 'list|100': [{ name: '@city', 'value|1-100': 150, 'type|0-2': 1 }],  
332 - }),  
333 - 'GET /api/fake_list': getFakeList,  
334 - 'POST /api/fake_list': postFakeList,  
335 - 'GET /api/captcha': getFakeCaptcha,  
336 }; 5 };
1 import React, { PureComponent, Fragment } from 'react'; 1 import React, { PureComponent, Fragment } from 'react';
2 import { Table, Button, Input, message, Popconfirm, Divider } from 'antd'; 2 import { Table, Button, Input, message, Popconfirm, Divider } from 'antd';
3 -import isEqual from 'lodash/isEqual'; 3 +import { isEqual } from 'lodash';
4 import styles from '../style.less'; 4 import styles from '../style.less';
5 5
6 class TableForm extends PureComponent { 6 class TableForm extends PureComponent {
@@ -58,10 +58,10 @@ const tableData = [ @@ -58,10 +58,10 @@ const tableData = [
58 ]; 58 ];
59 59
60 @connect(({ loading }) => ({ 60 @connect(({ loading }) => ({
61 - submitting: loading.effects['form/submitAdvancedForm'], 61 + submitting: loading.effects['BLOCK_NAME/submitAdvancedForm'],
62 })) 62 }))
63 @Form.create() 63 @Form.create()
64 -class AdvancedForm extends PureComponent { 64 +class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent {
65 state = { 65 state = {
66 width: '100%', 66 width: '100%',
67 }; 67 };
@@ -139,7 +139,7 @@ class AdvancedForm extends PureComponent { @@ -139,7 +139,7 @@ class AdvancedForm extends PureComponent {
139 if (!error) { 139 if (!error) {
140 // submit the values 140 // submit the values
141 dispatch({ 141 dispatch({
142 - type: 'form/submitAdvancedForm', 142 + type: 'BLOCK_NAME/submitAdvancedForm',
143 payload: values, 143 payload: values,
144 }); 144 });
145 } 145 }
@@ -320,4 +320,4 @@ class AdvancedForm extends PureComponent { @@ -320,4 +320,4 @@ class AdvancedForm extends PureComponent {
320 } 320 }
321 } 321 }
322 322
323 -export default AdvancedForm; 323 +export default PAGE_NAME_UPPER_CAMEL_CASE;
1 -import { routerRedux } from 'dva/router';  
2 import { message } from 'antd'; 1 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',
7 6
8 state: {}, 7 state: {},
9 8
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 });
注册登录 后发表评论