提交 b02b0f3827060aa757b23e99cae9a5619b504005

作者 愚道
1 个父辈 f98970bb

refact: antd pro base form

1 1 export default {
2 2 plugins: [
3   - ['umi-plugin-block-dev', {}],
  3 + ['umi-plugin-block-dev', {
  4 + layout: 'ant-design-pro',
  5 + }],
4 6 ['umi-plugin-react', {
5 7 dva: true,
6 8 locale: true,
... ...
1   -import React, { PureComponent } from 'react';
2   -import { connect } from 'dva';
3   -import styles from './GridContent.less';
4   -
5   -class GridContent extends PureComponent {
6   - render() {
7   - const { contentWidth, children } = this.props;
8   - let className = `${styles.main}`;
9   - if (contentWidth === 'Fixed') {
10   - className = `${styles.main} ${styles.wide}`;
11   - }
12   - return <div className={className}>{children}</div>;
13   - }
14   -}
15   -
16   -export default connect(({ setting }) => ({
17   - contentWidth: setting.contentWidth,
18   -}))(GridContent);
1   -.main {
2   - width: 100%;
3   - height: 100%;
4   - min-height: 100%;
5   - transition: 0.3s;
6   - &.wide {
7   - max-width: 1200px;
8   - margin: 0 auto;
9   - }
10   -}
1   -import { createContext } from 'react';
2   -
3   -export default createContext();
... ... @@ -11,11 +11,11 @@
11 11 "url": "https://github.com/umijs/umi-blocks/basicform"
12 12 },
13 13 "dependencies": {
14   - "react": "^16.6.3",
15   - "dva": "^2.4.0",
16 14 "ant-design-pro": "^2.1.1",
17 15 "antd": "^3.10.9",
18   - "mockjs": "*"
  16 + "dva": "^2.4.0",
  17 + "react": "^16.6.3",
  18 + "umi-request": "^1.0.0"
19 19 },
20 20 "devDependencies": {
21 21 "umi": "^2.3.0-beta.1",
... ...
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 1 export default {
325   - 'GET /api/project/notice': getNotice,
326   - 'GET /api/activities': getActivities,
327 2 'POST /api/forms': (req, res) => {
328 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 1 import React from 'react';
2 2 import { FormattedMessage } from 'umi/locale';
3 3 import Link from 'umi/link';
4   -import PageHeader from 'ant-design-pro/lib/PageHeader';
5   -import { connect } from 'dva';
6   -import GridContent from './GridContent';
  4 +import { PageHeader } from 'ant-design-pro';
7 5 import styles from './index.less';
8   -import MenuContext from '@/layouts/MenuContext';
9 6
10   -const PageHeaderWrapper = ({ children, contentWidth, wrapperClassName, top, ...restProps }) => (
  7 +const PageHeaderWrapper = ({ children, wrapperClassName, ...restProps }) => (
11 8 <div style={{ margin: '-24px -24px 0' }} className={wrapperClassName}>
12   - {top}
13   - <MenuContext.Consumer>
14   - {value => (
15   - <PageHeader
16   - wide={contentWidth === 'Fixed'}
17   - home={<FormattedMessage id="menu.home" defaultMessage="Home" />}
18   - {...value}
19   - key="pageheader"
20   - {...restProps}
21   - linkElement={Link}
22   - itemRender={item => {
23   - if (item.locale) {
24   - return <FormattedMessage id={item.locale} defaultMessage={item.title} />;
25   - }
26   - return item.title;
27   - }}
28   - />
29   - )}
30   - </MenuContext.Consumer>
  9 + <PageHeader
  10 + home={<FormattedMessage id="menu.home" defaultMessage="Home" />}
  11 + key="pageheader"
  12 + {...restProps}
  13 + linkElement={Link}
  14 + itemRender={item => {
  15 + if (item.locale) {
  16 + return <FormattedMessage id={item.locale} defaultMessage={item.title} />;
  17 + }
  18 + return item.title;
  19 + }}
  20 + />
31 21 {children ? (
32 22 <div className={styles.content}>
33   - <GridContent>{children}</GridContent>
  23 + {children}
34 24 </div>
35 25 ) : null}
36 26 </div>
37 27 );
38 28
39   -export default connect(({ setting }) => ({
40   - contentWidth: setting.contentWidth,
41   -}))(PageHeaderWrapper);
  29 +export default PageHeaderWrapper;
... ...
1   -module.exports = {
2   - navTheme: 'dark', // theme for nav menu
3   - primaryColor: '#1890FF', // primary color of ant design
4   - layout: 'sidemenu', // nav menu position: sidemenu or topmenu
5   - contentWidth: 'Fluid', // layout of content: Fluid or Fixed, only works when layout is topmenu
6   - fixedHeader: false, // sticky header
7   - autoHideHeader: false, // auto hide header
8   - fixSiderbar: false, // sticky siderbar
9   -};
... ... @@ -13,7 +13,7 @@ import {
13 13 Icon,
14 14 Tooltip,
15 15 } from 'antd';
16   -import PageHeaderWrapper from '@/components/PageHeaderWrapper';
  16 +import PageHeaderWrapper from './components/PageHeaderWrapper';
17 17 import styles from './style.less';
18 18
19 19 const FormItem = Form.Item;
... ...
1 1 export default {
  2 + 'app.forms.basic.title': 'Basic form',
  3 + 'app.forms.basic.description':
  4 + 'Form pages are used to collect or verify information to users, and basic forms are common in scenarios where there are fewer data items.',
  5 +
  6 + 'validation.email.required': 'Please enter your email!',
  7 + 'validation.email.wrong-format': 'The email address is in the wrong format!',
  8 + 'validation.userName.required': 'Please enter your userName!',
  9 + 'validation.password.required': 'Please enter your password!',
  10 + 'validation.password.twice': 'The passwords entered twice do not match!',
  11 + 'validation.password.strength.msg':
  12 + "Please enter at least 6 characters and don't use passwords that are easy to guess.",
  13 + 'validation.password.strength.strong': 'Strength: strong',
  14 + 'validation.password.strength.medium': 'Strength: medium',
  15 + 'validation.password.strength.short': 'Strength: too short',
  16 + 'validation.confirm-password.required': 'Please confirm your password!',
  17 + 'validation.phone-number.required': 'Please enter your phone number!',
  18 + 'validation.phone-number.wrong-format': 'Malformed phone number!',
  19 + 'validation.verification-code.required': 'Please enter the verification code!',
  20 + 'validation.title.required': 'Please enter a title',
  21 + 'validation.date.required': 'Please select the start and end date',
  22 + 'validation.goal.required': 'Please enter a description of the goal',
  23 + 'validation.standard.required': 'Please enter a metric',
  24 +
2 25 'form.get-captcha': 'Get Captcha',
3 26 'form.captcha.second': 'sec',
4 27 'form.optional': ' (optional) ',
... ...
  1 +export default {
  2 + 'app.forms.basic.title': 'Basic form',
  3 + 'app.forms.basic.description':
  4 + 'Form pages are used to collect or verify information to users, and basic forms are common in scenarios where there are fewer data items.',
  5 +
  6 + 'validation.email.required': 'Por favor insira seu email!',
  7 + 'validation.email.wrong-format': 'O email está errado!',
  8 + 'validation.userName.required': 'Por favor insira nome de usuário!',
  9 + 'validation.password.required': 'Por favor insira sua senha!',
  10 + 'validation.password.twice': 'As senhas não estão iguais!',
  11 + 'validation.password.strength.msg':
  12 + 'Por favor insira pelo menos 6 caracteres e não use senhas fáceis de adivinhar.',
  13 + 'validation.password.strength.strong': 'Força: forte',
  14 + 'validation.password.strength.medium': 'Força: média',
  15 + 'validation.password.strength.short': 'Força: curta',
  16 + 'validation.confirm-password.required': 'Por favor confirme sua senha!',
  17 + 'validation.phone-number.required': 'Por favor insira seu telefone!',
  18 + 'validation.phone-number.wrong-format': 'Formato de telefone errado!',
  19 + 'validation.verification-code.required': 'Por favor insira seu código de verificação!',
  20 +
  21 + 'form.get-captcha': 'Get Captcha',
  22 + 'form.captcha.second': 'sec',
  23 + 'form.email.placeholder': 'Email',
  24 + 'form.password.placeholder': 'Senha',
  25 + 'form.confirm-password.placeholder': 'Confirme a senha',
  26 + 'form.phone-number.placeholder': 'Telefone',
  27 + 'form.verification-code.placeholder': 'Código de verificação',
  28 + 'form.optional': ' (optional) ',
  29 + 'form.submit': 'Submit',
  30 + 'form.save': 'Save',
  31 + 'form.title.label': 'Title',
  32 + 'form.title.placeholder': 'Give the target a name',
  33 + 'form.date.label': 'Start and end date',
  34 + 'form.date.placeholder.start': 'Start date',
  35 + 'form.date.placeholder.end': 'End date',
  36 + 'form.goal.label': 'Goal description',
  37 + 'form.goal.placeholder': 'Please enter your work goals',
  38 + 'form.standard.label': 'Metrics',
  39 + 'form.standard.placeholder': 'Please enter a metric',
  40 + 'form.client.label': 'Client',
  41 + 'form.client.label.tooltip': 'Target service object',
  42 + 'form.client.placeholder':
  43 + 'Please describe your customer service, internal customers directly @ Name / job number',
  44 + 'form.invites.label': 'Inviting critics',
  45 + 'form.invites.placeholder': 'Please direct @ Name / job number, you can invite up to 5 people',
  46 + 'form.weight.label': 'Weight',
  47 + 'form.weight.placeholder': 'Please enter weight',
  48 + 'form.public.label': 'Target disclosure',
  49 + 'form.public.label.help': 'Customers and invitees are shared by default',
  50 + 'form.public.radio.public': 'Public',
  51 + 'form.public.radio.partially-public': 'Partially public',
  52 + 'form.public.radio.private': 'Private',
  53 + 'form.publicUsers.placeholder': 'Open to',
  54 + 'form.publicUsers.option.A': 'Colleague A',
  55 + 'form.publicUsers.option.B': 'Colleague B',
  56 + 'form.publicUsers.option.C': 'Colleague C',
  57 +};
... ...
1 1 export default {
  2 + 'app.forms.basic.title': '基础表单',
  3 + 'app.forms.basic.description':
  4 + '表单页用于向用户收集或验证信息,基础表单常见于数据项较少的表单场景。',
  5 +
  6 + 'validation.email.required': '请输入邮箱地址!',
  7 + 'validation.email.wrong-format': '邮箱地址格式错误!',
  8 + 'validation.userName.required': '请输入用户名!',
  9 + 'validation.password.required': '请输入密码!',
  10 + 'validation.password.twice': '两次输入的密码不匹配!',
  11 + 'validation.password.strength.msg': '请至少输入 6 个字符。请不要使用容易被猜到的密码。',
  12 + 'validation.password.strength.strong': '强度:强',
  13 + 'validation.password.strength.medium': '强度:中',
  14 + 'validation.password.strength.short': '强度:太短',
  15 + 'validation.confirm-password.required': '请确认密码!',
  16 + 'validation.phone-number.required': '请输入手机号!',
  17 + 'validation.phone-number.wrong-format': '手机号格式错误!',
  18 + 'validation.verification-code.required': '请输入验证码!',
  19 + 'validation.title.required': '请输入标题',
  20 + 'validation.date.required': '请选择起止日期',
  21 + 'validation.goal.required': '请输入目标描述',
  22 + 'validation.standard.required': '请输入衡量标准',
  23 +
2 24 'form.get-captcha': '获取验证码',
3 25 'form.captcha.second': '秒',
4 26 'form.optional': '(选填)',
... ...
1 1 export default {
  2 + 'app.forms.basic.title': '基礎表單',
  3 + 'app.forms.basic.description':
  4 + '表單頁用於向用戶收集或驗證信息,基礎表單常見於數據項較少的表單場景。',
  5 +
  6 + 'validation.email.required': '請輸入郵箱地址!',
  7 + 'validation.email.wrong-format': '郵箱地址格式錯誤!',
  8 + 'validation.userName.required': '請輸入賬戶!',
  9 + 'validation.password.required': '請輸入密碼!',
  10 + 'validation.password.twice': '兩次輸入的密碼不匹配!',
  11 + 'validation.password.strength.msg': '請至少輸入 6 個字符。請不要使用容易被猜到的密碼。',
  12 + 'validation.password.strength.strong': '強度:強',
  13 + 'validation.password.strength.medium': '強度:中',
  14 + 'validation.password.strength.short': '強度:太短',
  15 + 'validation.confirm-password.required': '請確認密碼!',
  16 + 'validation.phone-number.required': '請輸入手機號!',
  17 + 'validation.phone-number.wrong-format': '手機號格式錯誤!',
  18 + 'validation.verification-code.required': '請輸入驗證碼!',
  19 + 'validation.title.required': '請輸入標題',
  20 + 'validation.date.required': '請選擇起止日期',
  21 + 'validation.goal.required': '請輸入目標描述',
  22 + 'validation.standard.required': '請輸入衡量標淮',
  23 +
2 24 'form.get-captcha': '獲取驗證碼',
3 25 'form.captcha.second': '秒',
4 26 'form.optional': '(選填)',
... ...
  1 +import { routerRedux } from 'dva/router';
  2 +import { message } from 'antd';
  3 +import { fakeSubmitForm } from './service';
  4 +
  5 +export default {
  6 + namespace: 'form',
  7 +
  8 + state: {
  9 + step: {
  10 + payAccount: 'ant-design@alipay.com',
  11 + receiverAccount: 'test@example.com',
  12 + receiverName: 'Alex',
  13 + amount: '500',
  14 + },
  15 + },
  16 +
  17 + effects: {
  18 + *submitRegularForm({ payload }, { call }) {
  19 + yield call(fakeSubmitForm, payload);
  20 + message.success('提交成功');
  21 + },
  22 + *submitStepForm({ payload }, { call, put }) {
  23 + yield call(fakeSubmitForm, payload);
  24 + yield put({
  25 + type: 'saveStepFormData',
  26 + payload,
  27 + });
  28 + yield put(routerRedux.push('/form/step-form/result'));
  29 + },
  30 + *submitAdvancedForm({ payload }, { call }) {
  31 + yield call(fakeSubmitForm, payload);
  32 + message.success('提交成功');
  33 + },
  34 + },
  35 +
  36 + reducers: {
  37 + saveStepFormData(state, { payload }) {
  38 + return {
  39 + ...state,
  40 + step: {
  41 + ...state.step,
  42 + ...payload,
  43 + },
  44 + };
  45 + },
  46 + },
  47 +};
... ...
1   -import { message } from 'antd';
2   -import defaultSettings from '../defaultSettings';
3   -
4   -let lessNodesAppended;
5   -const updateTheme = primaryColor => {
6   - // Don't compile less in production!
7   - if (APP_TYPE !== 'site') {
8   - return;
9   - }
10   - // Determine if the component is remounted
11   - if (!primaryColor) {
12   - return;
13   - }
14   - const hideMessage = message.loading('正在编译主题!', 0);
15   - function buildIt() {
16   - if (!window.less) {
17   - return;
18   - }
19   - setTimeout(() => {
20   - window.less
21   - .modifyVars({
22   - '@primary-color': primaryColor,
23   - })
24   - .then(() => {
25   - hideMessage();
26   - })
27   - .catch(() => {
28   - message.error('Failed to update theme');
29   - hideMessage();
30   - });
31   - }, 200);
32   - }
33   - if (!lessNodesAppended) {
34   - // insert less.js and color.less
35   - const lessStyleNode = document.createElement('link');
36   - const lessConfigNode = document.createElement('script');
37   - const lessScriptNode = document.createElement('script');
38   - lessStyleNode.setAttribute('rel', 'stylesheet/less');
39   - lessStyleNode.setAttribute('href', '/color.less');
40   - lessConfigNode.innerHTML = `
41   - window.less = {
42   - async: true,
43   - env: 'production',
44   - javascriptEnabled: true
45   - };
46   - `;
47   - lessScriptNode.src = 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js';
48   - lessScriptNode.async = true;
49   - lessScriptNode.onload = () => {
50   - buildIt();
51   - lessScriptNode.onload = null;
52   - };
53   - document.body.appendChild(lessStyleNode);
54   - document.body.appendChild(lessConfigNode);
55   - document.body.appendChild(lessScriptNode);
56   - lessNodesAppended = true;
57   - } else {
58   - buildIt();
59   - }
60   -};
61   -
62   -const updateColorWeak = colorWeak => {
63   - document.body.className = colorWeak ? 'colorWeak' : '';
64   -};
65   -
66   -export default {
67   - namespace: 'setting',
68   - state: defaultSettings,
69   - reducers: {
70   - getSetting(state) {
71   - const setting = {};
72   - const urlParams = new URL(window.location.href);
73   - Object.keys(state).forEach(key => {
74   - if (urlParams.searchParams.has(key)) {
75   - const value = urlParams.searchParams.get(key);
76   - setting[key] = value === '1' ? true : value;
77   - }
78   - });
79   - const { primaryColor, colorWeak } = setting;
80   - if (state.primaryColor !== primaryColor) {
81   - updateTheme(primaryColor);
82   - }
83   - updateColorWeak(colorWeak);
84   - return {
85   - ...state,
86   - ...setting,
87   - };
88   - },
89   - changeSetting(state, { payload }) {
90   - const urlParams = new URL(window.location.href);
91   - Object.keys(defaultSettings).forEach(key => {
92   - if (urlParams.searchParams.has(key)) {
93   - urlParams.searchParams.delete(key);
94   - }
95   - });
96   - Object.keys(payload).forEach(key => {
97   - if (key === 'collapse') {
98   - return;
99   - }
100   - let value = payload[key];
101   - if (value === true) {
102   - value = 1;
103   - }
104   - if (defaultSettings[key] !== value) {
105   - urlParams.searchParams.set(key, value);
106   - }
107   - });
108   - const { primaryColor, colorWeak, contentWidth } = payload;
109   - if (state.primaryColor !== primaryColor) {
110   - updateTheme(primaryColor);
111   - }
112   - if (state.contentWidth !== contentWidth && window.dispatchEvent) {
113   - window.dispatchEvent(new Event('resize'));
114   - }
115   - updateColorWeak(colorWeak);
116   - window.history.replaceState(null, 'setting', urlParams.href);
117   - return {
118   - ...state,
119   - ...payload,
120   - };
121   - },
122   - },
123   -};
  1 +import request from 'umi-request';
  2 +
  3 +export async function fakeSubmitForm(params) {
  4 + return request('/api/forms', {
  5 + method: 'POST',
  6 + body: params,
  7 + });
  8 +}
... ...
注册登录 后发表评论