提交 63b92648d9604ccd60f160ef21a7e23e1c1fd304
提交者
Yu
1 个父辈
46ee3137
convert TableList to a umi block (#9)
* convert TableList to umi-blocks * remove useless mock data and service
正在显示
21 个修改的文件
包含
166 行增加
和
866 行删除
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 | -import React from 'react'; | |
2 | -import { FormattedMessage } from 'umi/locale'; | |
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'; | |
7 | -import styles from './index.less'; | |
8 | -import MenuContext from '@/layouts/MenuContext'; | |
9 | - | |
10 | -const PageHeaderWrapper = ({ children, contentWidth, wrapperClassName, top, ...restProps }) => ( | |
11 | - <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> | |
31 | - {children ? ( | |
32 | - <div className={styles.content}> | |
33 | - <GridContent>{children}</GridContent> | |
34 | - </div> | |
35 | - ) : null} | |
36 | - </div> | |
37 | -); | |
38 | - | |
39 | -export default connect(({ setting }) => ({ | |
40 | - contentWidth: setting.contentWidth, | |
41 | -}))(PageHeaderWrapper); |
1 | -import { stringify } from 'qs'; | |
2 | -import request from '@/utils/request'; | |
3 | - | |
4 | -export async function queryProjectNotice() { | |
5 | - return request('/api/project/notice'); | |
6 | -} | |
7 | - | |
8 | -export async function queryActivities() { | |
9 | - return request('/api/activities'); | |
10 | -} | |
11 | - | |
12 | -export async function queryRule(params) { | |
13 | - return request(`/api/rule?${stringify(params)}`); | |
14 | -} | |
15 | - | |
16 | -export async function removeRule(params) { | |
17 | - return request('/api/rule', { | |
18 | - method: 'POST', | |
19 | - body: { | |
20 | - ...params, | |
21 | - method: 'delete', | |
22 | - }, | |
23 | - }); | |
24 | -} | |
25 | - | |
26 | -export async function addRule(params) { | |
27 | - return request('/api/rule', { | |
28 | - method: 'POST', | |
29 | - body: { | |
30 | - ...params, | |
31 | - method: 'post', | |
32 | - }, | |
33 | - }); | |
34 | -} | |
35 | - | |
36 | -export async function updateRule(params) { | |
37 | - return request('/api/rule', { | |
38 | - method: 'POST', | |
39 | - body: { | |
40 | - ...params, | |
41 | - method: 'update', | |
42 | - }, | |
43 | - }); | |
44 | -} | |
45 | - | |
46 | -export async function fakeSubmitForm(params) { | |
47 | - return request('/api/forms', { | |
48 | - method: 'POST', | |
49 | - body: params, | |
50 | - }); | |
51 | -} | |
52 | - | |
53 | -export async function fakeChartData() { | |
54 | - return request('/api/fake_chart_data'); | |
55 | -} | |
56 | - | |
57 | -export async function queryTags() { | |
58 | - return request('/api/tags'); | |
59 | -} | |
60 | - | |
61 | -export async function queryBasicProfile() { | |
62 | - return request('/api/profile/basic'); | |
63 | -} | |
64 | - | |
65 | -export async function queryAdvancedProfile() { | |
66 | - return request('/api/profile/advanced'); | |
67 | -} | |
68 | - | |
69 | -export async function queryFakeList(params) { | |
70 | - return request(`/api/fake_list?${stringify(params)}`); | |
71 | -} | |
72 | - | |
73 | -export async function removeFakeList(params) { | |
74 | - const { count = 5, ...restParams } = params; | |
75 | - return request(`/api/fake_list?count=${count}`, { | |
76 | - method: 'POST', | |
77 | - body: { | |
78 | - ...restParams, | |
79 | - method: 'delete', | |
80 | - }, | |
81 | - }); | |
82 | -} | |
83 | - | |
84 | -export async function addFakeList(params) { | |
85 | - const { count = 5, ...restParams } = params; | |
86 | - return request(`/api/fake_list?count=${count}`, { | |
87 | - method: 'POST', | |
88 | - body: { | |
89 | - ...restParams, | |
90 | - method: 'post', | |
91 | - }, | |
92 | - }); | |
93 | -} | |
94 | - | |
95 | -export async function updateFakeList(params) { | |
96 | - const { count = 5, ...restParams } = params; | |
97 | - return request(`/api/fake_list?count=${count}`, { | |
98 | - method: 'POST', | |
99 | - body: { | |
100 | - ...restParams, | |
101 | - method: 'update', | |
102 | - }, | |
103 | - }); | |
104 | -} | |
105 | - | |
106 | -export async function fakeAccountLogin(params) { | |
107 | - return request('/api/login/account', { | |
108 | - method: 'POST', | |
109 | - body: params, | |
110 | - }); | |
111 | -} | |
112 | - | |
113 | -export async function fakeRegister(params) { | |
114 | - return request('/api/register', { | |
115 | - method: 'POST', | |
116 | - body: params, | |
117 | - }); | |
118 | -} | |
119 | - | |
120 | -export async function queryNotices() { | |
121 | - return request('/api/notices'); | |
122 | -} | |
123 | - | |
124 | -export async function getFakeCaptcha(mobile) { | |
125 | - return request(`/api/captcha?mobile=${mobile}`); | |
126 | -} |
1 | -import fetch from 'dva/fetch'; | |
2 | -import { notification } from 'antd'; | |
3 | -import router from 'umi/router'; | |
4 | -import hash from 'hash.js'; | |
5 | -import { isAntdPro } from './utils'; | |
6 | - | |
7 | -const codeMessage = { | |
8 | - 200: '服务器成功返回请求的数据。', | |
9 | - 201: '新建或修改数据成功。', | |
10 | - 202: '一个请求已经进入后台排队(异步任务)。', | |
11 | - 204: '删除数据成功。', | |
12 | - 400: '发出的请求有错误,服务器没有进行新建或修改数据的操作。', | |
13 | - 401: '用户没有权限(令牌、用户名、密码错误)。', | |
14 | - 403: '用户得到授权,但是访问是被禁止的。', | |
15 | - 404: '发出的请求针对的是不存在的记录,服务器没有进行操作。', | |
16 | - 406: '请求的格式不可得。', | |
17 | - 410: '请求的资源被永久删除,且不会再得到的。', | |
18 | - 422: '当创建一个对象时,发生一个验证错误。', | |
19 | - 500: '服务器发生错误,请检查服务器。', | |
20 | - 502: '网关错误。', | |
21 | - 503: '服务不可用,服务器暂时过载或维护。', | |
22 | - 504: '网关超时。', | |
23 | -}; | |
24 | - | |
25 | -const checkStatus = response => { | |
26 | - if (response.status >= 200 && response.status < 300) { | |
27 | - return response; | |
28 | - } | |
29 | - const errortext = codeMessage[response.status] || response.statusText; | |
30 | - notification.error({ | |
31 | - message: `请求错误 ${response.status}: ${response.url}`, | |
32 | - description: errortext, | |
33 | - }); | |
34 | - const error = new Error(errortext); | |
35 | - error.name = response.status; | |
36 | - error.response = response; | |
37 | - throw error; | |
38 | -}; | |
39 | - | |
40 | -const cachedSave = (response, hashcode) => { | |
41 | - /** | |
42 | - * Clone a response data and store it in sessionStorage | |
43 | - * Does not support data other than json, Cache only json | |
44 | - */ | |
45 | - const contentType = response.headers.get('Content-Type'); | |
46 | - if (contentType && contentType.match(/application\/json/i)) { | |
47 | - // All data is saved as text | |
48 | - response | |
49 | - .clone() | |
50 | - .text() | |
51 | - .then(content => { | |
52 | - sessionStorage.setItem(hashcode, content); | |
53 | - sessionStorage.setItem(`${hashcode}:timestamp`, Date.now()); | |
54 | - }); | |
55 | - } | |
56 | - return response; | |
57 | -}; | |
58 | - | |
59 | -/** | |
60 | - * Requests a URL, returning a promise. | |
61 | - * | |
62 | - * @param {string} url The URL we want to request | |
63 | - * @param {object} [option] The options we want to pass to "fetch" | |
64 | - * @return {object} An object containing either "data" or "err" | |
65 | - */ | |
66 | -export default function request(url, option) { | |
67 | - const options = { | |
68 | - expirys: isAntdPro(), | |
69 | - ...option, | |
70 | - }; | |
71 | - /** | |
72 | - * Produce fingerprints based on url and parameters | |
73 | - * Maybe url has the same parameters | |
74 | - */ | |
75 | - const fingerprint = url + (options.body ? JSON.stringify(options.body) : ''); | |
76 | - const hashcode = hash | |
77 | - .sha256() | |
78 | - .update(fingerprint) | |
79 | - .digest('hex'); | |
80 | - | |
81 | - const defaultOptions = { | |
82 | - credentials: 'include', | |
83 | - }; | |
84 | - const newOptions = { ...defaultOptions, ...options }; | |
85 | - if ( | |
86 | - newOptions.method === 'POST' || | |
87 | - newOptions.method === 'PUT' || | |
88 | - newOptions.method === 'DELETE' | |
89 | - ) { | |
90 | - if (!(newOptions.body instanceof FormData)) { | |
91 | - newOptions.headers = { | |
92 | - Accept: 'application/json', | |
93 | - 'Content-Type': 'application/json; charset=utf-8', | |
94 | - ...newOptions.headers, | |
95 | - }; | |
96 | - newOptions.body = JSON.stringify(newOptions.body); | |
97 | - } else { | |
98 | - // newOptions.body is FormData | |
99 | - newOptions.headers = { | |
100 | - Accept: 'application/json', | |
101 | - ...newOptions.headers, | |
102 | - }; | |
103 | - } | |
104 | - } | |
105 | - | |
106 | - const expirys = options.expirys && 60; | |
107 | - // options.expirys !== false, return the cache, | |
108 | - if (options.expirys !== false) { | |
109 | - const cached = sessionStorage.getItem(hashcode); | |
110 | - const whenCached = sessionStorage.getItem(`${hashcode}:timestamp`); | |
111 | - if (cached !== null && whenCached !== null) { | |
112 | - const age = (Date.now() - whenCached) / 1000; | |
113 | - if (age < expirys) { | |
114 | - const response = new Response(new Blob([cached])); | |
115 | - return response.json(); | |
116 | - } | |
117 | - sessionStorage.removeItem(hashcode); | |
118 | - sessionStorage.removeItem(`${hashcode}:timestamp`); | |
119 | - } | |
120 | - } | |
121 | - return fetch(url, newOptions) | |
122 | - .then(checkStatus) | |
123 | - .then(response => cachedSave(response, hashcode)) | |
124 | - .then(response => { | |
125 | - // DELETE and 204 do not return data by default | |
126 | - // using .json will report an error. | |
127 | - if (newOptions.method === 'DELETE' || response.status === 204) { | |
128 | - return response.text(); | |
129 | - } | |
130 | - return response.json(); | |
131 | - }) | |
132 | - .catch(e => { | |
133 | - const status = e.name; | |
134 | - if (status === 401) { | |
135 | - // @HACK | |
136 | - /* eslint-disable no-underscore-dangle */ | |
137 | - window.g_app._store.dispatch({ | |
138 | - type: 'login/logout', | |
139 | - }); | |
140 | - return; | |
141 | - } | |
142 | - // environment should not be used | |
143 | - if (status === 403) { | |
144 | - router.push('/exception/403'); | |
145 | - return; | |
146 | - } | |
147 | - if (status <= 504 && status >= 500) { | |
148 | - router.push('/exception/500'); | |
149 | - return; | |
150 | - } | |
151 | - if (status >= 404 && status < 422) { | |
152 | - router.push('/exception/404'); | |
153 | - } | |
154 | - }); | |
155 | -} |
... | ... | @@ -11,15 +11,14 @@ |
11 | 11 | "url": "https://github.com/umijs/umi-blocks/tablelist" |
12 | 12 | }, |
13 | 13 | "dependencies": { |
14 | - "react": "^16.6.3", | |
14 | + "ant-design-pro": "^2.1.1", | |
15 | + "antd": "^3.10.9", | |
15 | 16 | "dva": "^2.4.0", |
16 | 17 | "moment": "^2.22.2", |
17 | - "antd": "^3.10.9", | |
18 | - "ant-design-pro": "^2.1.1", | |
19 | - "qs": "^6.6.0", | |
20 | - "hash.js": "^1.1.5", | |
21 | 18 | "nzh": "^1.0.3", |
22 | - "mockjs": "*" | |
19 | + "qs": "^6.6.0", | |
20 | + "react": "^16.6.3", | |
21 | + "umi-request": "^1.0.0" | |
23 | 22 | }, |
24 | 23 | "devDependencies": { |
25 | 24 | "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 | -]; | |
1 | +import { parse } from 'url'; | |
2 | + | |
3 | +// mock tableListDataSource | |
4 | +let tableListDataSource = []; | |
5 | +for (let i = 0; i < 46; i += 1) { | |
6 | + tableListDataSource.push({ | |
7 | + key: i, | |
8 | + disabled: i % 6 === 0, | |
9 | + href: 'https://ant.design', | |
10 | + avatar: [ | |
11 | + 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png', | |
12 | + 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png', | |
13 | + ][i % 2], | |
14 | + name: `TradeCode ${i}`, | |
15 | + title: `一个任务名称 ${i}`, | |
16 | + owner: '曲丽丽', | |
17 | + desc: '这是一段描述', | |
18 | + callNo: Math.floor(Math.random() * 1000), | |
19 | + status: Math.floor(Math.random() * 10) % 4, | |
20 | + updatedAt: new Date(`2017-07-${Math.floor(i / 2) + 1}`), | |
21 | + createdAt: new Date(`2017-07-${Math.floor(i / 2) + 1}`), | |
22 | + progress: Math.ceil(Math.random() * 100), | |
23 | + }); | |
24 | +} | |
23 | 25 | |
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 | -]; | |
26 | +function getRule(req, res, u) { | |
27 | + let url = u; | |
28 | + if (!url || Object.prototype.toString.call(url) !== '[object String]') { | |
29 | + url = req.url; // eslint-disable-line | |
30 | + } | |
36 | 31 | |
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 | -]; | |
32 | + const params = parse(url, true).query; | |
50 | 33 | |
51 | -const user = [ | |
52 | - '付小小', | |
53 | - '曲丽丽', | |
54 | - '林东东', | |
55 | - '周星星', | |
56 | - '吴加好', | |
57 | - '朱偏右', | |
58 | - '鱼酱', | |
59 | - '乐哥', | |
60 | - '谭小仪', | |
61 | - '仲尼', | |
62 | -]; | |
34 | + let dataSource = tableListDataSource; | |
63 | 35 | |
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 | - ], | |
36 | + if (params.sorter) { | |
37 | + const s = params.sorter.split('_'); | |
38 | + dataSource = dataSource.sort((prev, next) => { | |
39 | + if (s[1] === 'descend') { | |
40 | + return next[s[0]] - prev[s[0]]; | |
41 | + } | |
42 | + return prev[s[0]] - next[s[0]]; | |
106 | 43 | }); |
107 | 44 | } |
108 | 45 | |
109 | - return list; | |
110 | -} | |
46 | + if (params.status) { | |
47 | + const status = params.status.split(','); | |
48 | + let filterDataSource = []; | |
49 | + status.forEach(s => { | |
50 | + filterDataSource = filterDataSource.concat( | |
51 | + dataSource.filter(data => parseInt(data.status, 10) === parseInt(s[0], 10)) | |
52 | + ); | |
53 | + }); | |
54 | + dataSource = filterDataSource; | |
55 | + } | |
111 | 56 | |
112 | -let sourceData; | |
57 | + if (params.name) { | |
58 | + dataSource = dataSource.filter(data => data.name.indexOf(params.name) > -1); | |
59 | + } | |
113 | 60 | |
114 | -function getFakeList(req, res) { | |
115 | - const params = req.query; | |
61 | + let pageSize = 10; | |
62 | + if (params.pageSize) { | |
63 | + pageSize = params.pageSize * 1; | |
64 | + } | |
116 | 65 | |
117 | - const count = params.count * 1 || 20; | |
66 | + const result = { | |
67 | + list: dataSource, | |
68 | + pagination: { | |
69 | + total: dataSource.length, | |
70 | + pageSize, | |
71 | + current: parseInt(params.currentPage, 10) || 1, | |
72 | + }, | |
73 | + }; | |
118 | 74 | |
119 | - const result = fakeList(count); | |
120 | - sourceData = result; | |
121 | 75 | return res.json(result); |
122 | 76 | } |
123 | 77 | |
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; | |
78 | +function postRule(req, res, u, b) { | |
79 | + let url = u; | |
80 | + if (!url || Object.prototype.toString.call(url) !== '[object String]') { | |
81 | + url = req.url; // eslint-disable-line | |
82 | + } | |
83 | + | |
84 | + const body = (b && b.body) || req.body; | |
85 | + const { method, name, desc, key } = body; | |
130 | 86 | |
131 | 87 | switch (method) { |
88 | + /* eslint no-case-declarations:0 */ | |
132 | 89 | case 'delete': |
133 | - result = result.filter(item => item.id !== id); | |
90 | + tableListDataSource = tableListDataSource.filter(item => key.indexOf(item.key) === -1); | |
134 | 91 | break; |
135 | - case 'update': | |
136 | - result.forEach((item, i) => { | |
137 | - if (item.id === id) { | |
138 | - result[i] = Object.assign(item, body); | |
139 | - } | |
92 | + case 'post': | |
93 | + const i = Math.ceil(Math.random() * 10000); | |
94 | + tableListDataSource.unshift({ | |
95 | + key: i, | |
96 | + href: 'https://ant.design', | |
97 | + avatar: [ | |
98 | + 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png', | |
99 | + 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png', | |
100 | + ][i % 2], | |
101 | + name: `TradeCode ${i}`, | |
102 | + title: `一个任务名称 ${i}`, | |
103 | + owner: '曲丽丽', | |
104 | + desc, | |
105 | + callNo: Math.floor(Math.random() * 1000), | |
106 | + status: Math.floor(Math.random() * 10) % 2, | |
107 | + updatedAt: new Date(), | |
108 | + createdAt: new Date(), | |
109 | + progress: Math.ceil(Math.random() * 100), | |
140 | 110 | }); |
141 | 111 | break; |
142 | - case 'post': | |
143 | - result.unshift({ | |
144 | - body, | |
145 | - id: `fake-list-${result.length}`, | |
146 | - createdAt: new Date().getTime(), | |
112 | + case 'update': | |
113 | + tableListDataSource = tableListDataSource.map(item => { | |
114 | + if (item.key === key) { | |
115 | + Object.assign(item, { desc, name }); | |
116 | + return item; | |
117 | + } | |
118 | + return item; | |
147 | 119 | }); |
148 | 120 | break; |
149 | 121 | default: |
150 | 122 | break; |
151 | 123 | } |
152 | 124 | |
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/', | |
125 | + const result = { | |
126 | + list: tableListDataSource, | |
127 | + pagination: { | |
128 | + total: tableListDataSource.length, | |
268 | 129 | }, |
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 | -]; | |
130 | + }; | |
319 | 131 | |
320 | -function getFakeCaptcha(req, res) { | |
321 | - return res.json('captcha-xxx'); | |
132 | + return res.json(result); | |
322 | 133 | } |
323 | 134 | |
324 | 135 | export default { |
325 | - 'GET /api/project/notice': getNotice, | |
326 | - 'GET /api/activities': getActivities, | |
327 | - 'POST /api/forms': (req, res) => { | |
328 | - res.send({ message: 'Ok' }); | |
329 | - }, | |
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, | |
136 | + 'GET /api/rule': getRule, | |
137 | + 'POST /api/rule': postRule, | |
336 | 138 | }; | ... | ... |
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 | -}; |
... | ... | @@ -22,9 +22,8 @@ import { |
22 | 22 | Radio, |
23 | 23 | } from 'antd'; |
24 | 24 | import StandardTable from '@/components/StandardTable'; |
25 | -import PageHeaderWrapper from '@/components/PageHeaderWrapper'; | |
26 | 25 | |
27 | -import styles from './TableList.less'; | |
26 | +import styles from './style.less'; | |
28 | 27 | |
29 | 28 | const FormItem = Form.Item; |
30 | 29 | const { Step } = Steps; |
... | ... | @@ -637,7 +636,7 @@ class TableList extends PureComponent { |
637 | 636 | handleUpdate: this.handleUpdate, |
638 | 637 | }; |
639 | 638 | return ( |
640 | - <PageHeaderWrapper title="查询表格"> | |
639 | + <Fragment> | |
641 | 640 | <Card bordered={false}> |
642 | 641 | <div className={styles.tableList}> |
643 | 642 | <div className={styles.tableListForm}>{this.renderForm()}</div> |
... | ... | @@ -674,7 +673,7 @@ class TableList extends PureComponent { |
674 | 673 | values={stepFormValues} |
675 | 674 | /> |
676 | 675 | ) : null} |
677 | - </PageHeaderWrapper> | |
676 | + </Fragment> | |
678 | 677 | ); |
679 | 678 | } |
680 | 679 | } | ... | ... |
1 | -import { queryFakeList, removeFakeList, addFakeList, updateFakeList } from '@/services/api'; | |
2 | - | |
3 | -export default { | |
4 | - namespace: 'list', | |
5 | - | |
6 | - state: { | |
7 | - list: [], | |
8 | - }, | |
9 | - | |
10 | - effects: { | |
11 | - *fetch({ payload }, { call, put }) { | |
12 | - const response = yield call(queryFakeList, payload); | |
13 | - yield put({ | |
14 | - type: 'queryList', | |
15 | - payload: Array.isArray(response) ? response : [], | |
16 | - }); | |
17 | - }, | |
18 | - *appendFetch({ payload }, { call, put }) { | |
19 | - const response = yield call(queryFakeList, payload); | |
20 | - yield put({ | |
21 | - type: 'appendList', | |
22 | - payload: Array.isArray(response) ? response : [], | |
23 | - }); | |
24 | - }, | |
25 | - *submit({ payload }, { call, put }) { | |
26 | - let callback; | |
27 | - if (payload.id) { | |
28 | - callback = Object.keys(payload).length === 1 ? removeFakeList : updateFakeList; | |
29 | - } else { | |
30 | - callback = addFakeList; | |
31 | - } | |
32 | - const response = yield call(callback, payload); // post | |
33 | - yield put({ | |
34 | - type: 'queryList', | |
35 | - payload: response, | |
36 | - }); | |
37 | - }, | |
38 | - }, | |
39 | - | |
40 | - reducers: { | |
41 | - queryList(state, action) { | |
42 | - return { | |
43 | - ...state, | |
44 | - list: action.payload, | |
45 | - }; | |
46 | - }, | |
47 | - appendList(state, action) { | |
48 | - return { | |
49 | - ...state, | |
50 | - list: state.list.concat(action.payload), | |
51 | - }; | |
52 | - }, | |
53 | - }, | |
54 | -}; |
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 | -}; |
ant-design-pro/TableList/src/service.js
0 → 100644
1 | +import { stringify } from 'qs'; | |
2 | +import request from 'umi-request'; | |
3 | + | |
4 | +export async function queryRule(params) { | |
5 | + return request(`/api/rule?${stringify(params)}`); | |
6 | +} | |
7 | + | |
8 | +export async function removeRule(params) { | |
9 | + return request('/api/rule', { | |
10 | + method: 'POST', | |
11 | + body: { | |
12 | + ...params, | |
13 | + method: 'delete', | |
14 | + }, | |
15 | + }); | |
16 | +} | |
17 | + | |
18 | +export async function addRule(params) { | |
19 | + return request('/api/rule', { | |
20 | + method: 'POST', | |
21 | + body: { | |
22 | + ...params, | |
23 | + method: 'post', | |
24 | + }, | |
25 | + }); | |
26 | +} | |
27 | + | |
28 | +export async function updateRule(params) { | |
29 | + return request('/api/rule', { | |
30 | + method: 'POST', | |
31 | + body: { | |
32 | + ...params, | |
33 | + method: 'update', | |
34 | + }, | |
35 | + }); | |
36 | +} | |
\ No newline at end of file | ... | ... |
请
注册
或
登录
后发表评论