2BCmsBrowser/src/routes/Terminal/List/index.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import queryString from 'query-string';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Card } from 'antd';
import TerminalTableList from './table';
import TerminalSearch from './search';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';

@connect(state => ({ terminal: state.terminal }))
export default class TerminalList extends Component {
  static propTypes = {
    Terminal: PropTypes.object,
    location: PropTypes.object,
    dispatch: PropTypes.func,
  };

  render() {
    const { dispatch, location, terminal } = this.props;

    location.query = queryString.parse(location.search);
    const { query, pathname } = location;
    const { field, keyword, ...filters } = query;

    Object.keys(filters).map(key => { filters[key] ? null : delete filters[key] });
    if (field && keyword) {
      filters.field = field;
      filters.keyword = keyword;
    }

    const { list, listLoading, pagination } = terminal;

    const searchProps = {
      field,
      keyword,
      onSearch: (payload) => {
        if (!payload.keyword.length) {
          delete payload.field;
          delete payload.keyword;
        }
        dispatch(routerRedux.push({
          pathname,
          search: queryString.stringify({
            ...payload
          })
        }));
      },
      onAdd: () => {
        dispatch(routerRedux.push({
          pathname: '/terminal/user/add',
          state: filters,
        }));
      }
    };

    const listProps = {
      curStatus: filters.status,
      dataSource: list,
      loading: listLoading,
      pagination,
      location,
      onChange: (pagination, filterArgs) => {
        const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');
        const tableFilters = Object.keys(filterArgs).reduce((obj, key) => {
          const newObj = { ...obj };
          newObj[key] = getValue(filterArgs[key]);
          return newObj;
        }, {});

        const data = { ...filters, ...tableFilters };
        Object.keys(data).map(key => data[key] ? null : delete data[key]);
        dispatch(routerRedux.push({
          pathname,
          search: queryString.stringify({
            ...data,
            pageNo: pagination.current,
            pageSize: pagination.pageSize,
          }),
        }));
      },
      onEditItem: (item) => {
        dispatch(routerRedux.push({
          pathname: `/terminal/user/edit/${item.id}`,
          state: filters,
          record: item,
        }));
      },
      onDeleteItem: (id) => {
        dispatch({
          type: 'terminal/delete',
          payload: id,
          callback: () => {
            dispatch(
              routerRedux.push({
                pathname,
                search: queryString.stringify(filters),
              })
            );
          }
        });
      },
      onRecoverItem: (payload) => {
        dispatch({
          type: 'terminal/recover',
          payload,
          callback: () => {
            dispatch(
              routerRedux.push({
                pathname,
                search: queryString.stringify(filters),
              })
            );
          }
        });
      }
    };

    return (
      <PageHeaderLayout>
        <Card>
          <TerminalSearch { ...searchProps } />
          <TerminalTableList { ...listProps } />
        </Card>
      </PageHeaderLayout>
    );
  }
}