2BContentCmsBrowser/src/routes/CmsUser/table.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import classnames from 'classnames';
import queryString from 'query-string';
import { Avatar, Modal, Badge, Table, Popconfirm, Menu, Icon } from 'antd';
import AnimTableBody from '../../components/Animation/AnimTableBody';
import { Codes, statuses, domains } from '../../utils/config';
import styles from './table.less';

export default class CMSUserTableList extends Component {
  handleOperateItem = (record) => {
    Modal.confirm({
      title: `您确定要${record.status === Codes.CODE_NORMAL ? '禁用' : '解禁'}该账户?`,
      onOk() {
        if (record.status === Codes.CODE_NORMAL) {
          onDeleteItem({ id: record.id });
        } else {
          onRecoverItem({ id: record.id, status: Codes.CODE_NORMAL });
        }
      },
    });
  }

  render() {
    const {
      onDeleteItem,
      onEditItem,
      onRecoverItem,
      location,
      curStatus,
      pagination,
      ...tableProps
    } = this.props;

    const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];

    const columns = [{
      title: '头像',
      dataIndex: 'avatar',
      key: 'avatar',
      render: (text, record) => (
        <Avatar
          src={text}
          style={{ backgroundColor: colorList[Math.floor(Math.random() * (colorList.length - 1))], verticalAlign: 'middle' }}
        >
          {record.nickname}
        </Avatar>
      ),
    }, {
      title: '用户名称',
      dataIndex: 'name',
      key: 'name',
    }, {
      title: '用户昵称',
      dataIndex: 'nickName',
      key: 'nickName',
    }, {
      title: '厂商名称',
      dataIndex: 'merchantId',
      key: 'merchantId',
      render: (text, record) => record.merchantName,
    }, {
      title: '厂商类型',
      dataIndex: 'domain',
      key: 'domain',
      render: (text, record) => domains[record.domain],
    }, {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (text, record) => {
        const statusMap = { [Codes.CODE_NORMAL]: 'success', [Codes.CODE_DELETE]: 'error' };
        return (<Badge status={statusMap[record.status]} text={statuses[record.status]} />);
      },
      filters: Object.keys(statuses).map(key => ({ text: statuses[key], value: key })),
      filterMultiple: false,
      filteredValue: curStatus,
    }, {
      title: '修改时间',
      dataIndex: 'gmtModified',
      key: 'gmtModified',
      render: (text, record) => (
        <div>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</div>
      ),
    }, {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      render: (text, record) => (
        <div>
          <a onClick={() => onEditItem(record)}>编辑</a>
          <span className={styles.splitLine} />
          <a onClick={() => this.handleOperateItem(record)}>{record.status === Codes.CODE_NORMAL ? '禁用' : '解禁'}</a>
        </div>
      ),
    }];

    // 配置分页
    tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条` };

    // 添加动画
    const AnimationTableBody = props => (<AnimTableBody {...props} />);

    return (
      <Table
        simple
        bordered
        {...tableProps}
        columns={columns}
        className={classnames({ [styles.table]: true, [styles.motion]: true })}
        rowKey={record => record.id}
        components={{
          body: { wrapper: AnimationTableBody },
        }}
      />
    );
  }
}