提交 b92db735d20fa19b7ef1263ea132359370fd5d6d

作者 愚道
1 个父辈 39982864

improve SearchListApplications block code

... ... @@ -13,9 +13,7 @@
13 13 "dependencies": {
14 14 "ant-design-pro": "^2.1.1",
15 15 "antd": "^3.10.9",
16   - "dva": "^2.4.0",
17   - "react": "^16.6.3",
18   - "umi-request": "^1.0.0"
  16 + "react": "^16.6.3"
19 17 },
20 18 "devDependencies": {
21 19 "umi": "^2.3.0-beta.1",
... ...
1 1 import React, { Component } from 'react';
2 2 import router from 'umi/router';
3   -import { connect } from 'dva';
4 3 import { Input } from 'antd';
5 4 import PageHeaderWrapper from './components/PageHeaderWrapper';
6 5
7   -@connect()
8   -class SearchList extends Component {
  6 +class PAGE_NAME_UPPER_CAMEL_CASE extends Component {
9 7 handleTabChange = key => {
10 8 const { match } = this.props;
11 9 switch (key) {
... ... @@ -72,4 +70,4 @@ class SearchList extends Component {
72 70 }
73 71 }
74 72
75   -export default SearchList;
  73 +export default PAGE_NAME_UPPER_CAMEL_CASE;
... ...
1   -let sourceData;
2   -
3 1 const titles = [
4 2 'Alipay',
5 3 'Angular',
... ... @@ -21,19 +19,6 @@ const avatars = [
21 19 'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack
22 20 ];
23 21
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 22 const covers = [
38 23 'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
39 24 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
... ... @@ -114,43 +99,9 @@ function getFakeList(req, res) {
114 99 const count = params.count * 1 || 20;
115 100
116 101 const result = fakeList(count);
117   - sourceData = result;
118   - return res.json(result);
119   -}
120   -
121   -function postFakeList(req, res) {
122   - const { /* url = '', */ body } = req;
123   - // const params = getUrlParams(url);
124   - const { method, id } = body;
125   - // const count = (params.count * 1) || 20;
126   - let result = sourceData;
127   -
128   - switch (method) {
129   - case 'delete':
130   - result = result.filter(item => item.id !== id);
131   - break;
132   - case 'update':
133   - result.forEach((item, i) => {
134   - if (item.id === id) {
135   - result[i] = Object.assign(item, body);
136   - }
137   - });
138   - break;
139   - case 'post':
140   - result.unshift({
141   - body,
142   - id: `fake-list-${result.length}`,
143   - createdAt: new Date().getTime(),
144   - });
145   - break;
146   - default:
147   - break;
148   - }
149   -
150 102 return res.json(result);
151 103 }
152 104
153 105 export default {
154   - 'GET /api/fake_list': getFakeList,
155   - 'POST /api/fake_list': postFakeList,
  106 + 'GET /api/BLOCK_NAME/fake_list': getFakeList,
156 107 };
... ...
... ... @@ -3,18 +3,17 @@ import numeral from 'numeral';
3 3 import { connect } from 'dva';
4 4 import { Row, Col, Form, Card, Select, Icon, Avatar, List, Tooltip, Dropdown, Menu } from 'antd';
5 5 import { TagSelect } from 'ant-design-pro';
6   -import StandardFormRow from '@/components/StandardFormRow';
7 6
8   -import { formatWan } from '@/utils/utils';
9   -
10   -import styles from './Applications.less';
  7 +import StandardFormRow from './components/StandardFormRow';
  8 +import { formatWan } from './utils/utils';
  9 +import styles from './style.less';
11 10
12 11 const { Option } = Select;
13 12 const FormItem = Form.Item;
14 13
15   -@connect(({ list, loading }) => ({
16   - list,
17   - loading: loading.models.list,
  14 +@connect(({ BLOCK_NAME, loading }) => ({
  15 + BLOCK_NAME,
  16 + loading: loading.models.BLOCK_NAME,
18 17 }))
19 18 @Form.create({
20 19 onValuesChange({ dispatch }, changedValues, allValues) {
... ... @@ -23,18 +22,18 @@ const FormItem = Form.Item;
23 22 console.log(changedValues, allValues);
24 23 // 模拟查询表单生效
25 24 dispatch({
26   - type: 'list/fetch',
  25 + type: 'BLOCK_NAME/fetch',
27 26 payload: {
28 27 count: 8,
29 28 },
30 29 });
31 30 },
32 31 })
33   -class FilterCardList extends PureComponent {
  32 +class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent {
34 33 componentDidMount() {
35 34 const { dispatch } = this.props;
36 35 dispatch({
37   - type: 'list/fetch',
  36 + type: 'BLOCK_NAME/fetch',
38 37 payload: {
39 38 count: 8,
40 39 },
... ... @@ -43,7 +42,7 @@ class FilterCardList extends PureComponent {
43 42
44 43 render() {
45 44 const {
46   - list: { list },
  45 + BLOCK_NAME: { list },
47 46 loading,
48 47 form,
49 48 } = this.props;
... ... @@ -180,4 +179,4 @@ class FilterCardList extends PureComponent {
180 179 }
181 180 }
182 181
183   -export default FilterCardList;
  182 +export default PAGE_NAME_UPPER_CAMEL_CASE;
... ...
1   -import { queryFakeList, removeFakeList, addFakeList, updateFakeList } from './service';
  1 +import { queryFakeList } from './service';
2 2
3 3 export default {
4   - namespace: 'list',
  4 + namespace: 'BLOCK_NAME',
5 5
6 6 state: {
7 7 list: [],
... ... @@ -15,26 +15,6 @@ export default {
15 15 payload: Array.isArray(response) ? response : [],
16 16 });
17 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 18 },
39 19
40 20 reducers: {
... ... @@ -44,11 +24,5 @@ export default {
44 24 list: action.payload,
45 25 };
46 26 },
47   - appendList(state, action) {
48   - return {
49   - ...state,
50   - list: state.list.concat(action.payload),
51   - };
52   - },
53 27 },
54 28 };
... ...
1 1 import request from 'umi-request';
2 2
3 3 export async function queryFakeList(params) {
4   - return request(`/api/fake_list`, {
  4 + return request(`/api/BLOCK_NAME/fake_list`, {
5 5 params,
6 6 });
7 7 }
8   -
9   -export async function removeFakeList(params) {
10   - const { count = 5, ...restParams } = params;
11   - return request(`/api/fake_list?count=${count}`, {
12   - method: 'POST',
13   - body: {
14   - ...restParams,
15   - method: 'delete',
16   - },
17   - });
18   -}
19   -
20   -export async function addFakeList(params) {
21   - const { count = 5, ...restParams } = params;
22   - return request(`/api/fake_list?count=${count}`, {
23   - method: 'POST',
24   - body: {
25   - ...restParams,
26   - method: 'post',
27   - },
28   - });
29   -}
30   -
31   -export async function updateFakeList(params) {
32   - const { count = 5, ...restParams } = params;
33   - return request(`/api/fake_list?count=${count}`, {
34   - method: 'POST',
35   - body: {
36   - ...restParams,
37   - method: 'update',
38   - },
39   - });
40   -}
... ...
1 1 @import '~antd/lib/style/themes/default.less';
2   -@import '~@/utils/utils.less';
  2 +@import './utils/utils.less';
3 3
4 4 .filterCardList {
5 5 margin-bottom: -24px;
... ...
  1 +import React from 'react';
  2 +
  3 +export function formatWan(val) {
  4 + const v = val * 1;
  5 + if (!v || Number.isNaN(v)) return '';
  6 +
  7 + let result = val;
  8 + if (val > 10000) {
  9 + result = Math.floor(val / 10000);
  10 + result = (
  11 + <span>
  12 + {result}
  13 + <span
  14 + style={{
  15 + position: 'relative',
  16 + top: -2,
  17 + fontSize: 14,
  18 + fontStyle: 'normal',
  19 + marginLeft: 2,
  20 + }}
  21 + >
  22 +
  23 + </span>
  24 + </span>
  25 + );
  26 + }
  27 + return result;
  28 +}
... ...
  1 +.textOverflow() {
  2 + overflow: hidden;
  3 + text-overflow: ellipsis;
  4 + word-break: break-all;
  5 + white-space: nowrap;
  6 +}
  7 +
  8 +.textOverflowMulti(@line: 3, @bg: #fff) {
  9 + overflow: hidden;
  10 + position: relative;
  11 + line-height: 1.5em;
  12 + max-height: @line * 1.5em;
  13 + text-align: justify;
  14 + margin-right: -1em;
  15 + padding-right: 1em;
  16 + &:before {
  17 + background: @bg;
  18 + content: '...';
  19 + padding: 0 1px;
  20 + position: absolute;
  21 + right: 14px;
  22 + bottom: 0;
  23 + }
  24 + &:after {
  25 + background: white;
  26 + content: '';
  27 + margin-top: 0.2em;
  28 + position: absolute;
  29 + right: 14px;
  30 + width: 1em;
  31 + height: 1em;
  32 + }
  33 +}
  34 +
  35 +// mixins for clearfix
  36 +// ------------------------
  37 +.clearfix() {
  38 + zoom: 1;
  39 + &:before,
  40 + &:after {
  41 + content: ' ';
  42 + display: table;
  43 + }
  44 + &:after {
  45 + clear: both;
  46 + visibility: hidden;
  47 + font-size: 0;
  48 + height: 0;
  49 + }
  50 +}
... ...
注册登录 后发表评论