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

import React, { Component } from 'react';
import moment from 'moment';
import { Divider, Avatar, Modal, Badge, Table } from 'antd';
import { Codes, statuses, domains } from '../../utils/config';

export default class CMSUserTableList extends Component {
  handleOperateItem = (record) => {
    const { onDeleteItem, onRecoverItem } = this.props;
    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) => {
        return (
          <Avatar
            src={text}
            style={{ backgroundColor: colorList[Math.floor(Math.random() * (colorList.length - 1))], verticalAlign: 'middle' }}
          >
            {(record.nickName || record.name)[0]}
          </Avatar>
        );
      },
      width: '6%',
    }, {
      title: '用户名称',
      dataIndex: 'name',
      key: 'name',
      width: '14%',
    }, {
      title: '用户昵称',
      dataIndex: 'nickName',
      key: 'nickName',
      width: '13%',
    }, {
      title: '厂商名称',
      dataIndex: 'merchantId',
      key: 'merchantId',
      render: (text, record) => record.merchantName,
      width: '13%',
    }, {
      title: '厂商类型',
      dataIndex: 'domain',
      key: 'domain',
      render: (text, record) => domains[record.domain],
      width: '12%',
    }, {
      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,
      width: '10%',
    }, {
      title: '修改时间',
      dataIndex: 'gmtModified',
      key: 'gmtModified',
      render: text => (
        <div>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</div>
      ),
      width: '19%',
    }, {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      render: (text, record) => (
        <div>
          <a onClick={() => onEditItem(record)}>编辑</a>
          <Divider type="vertical" />
          <a onClick={() => this.handleOperateItem(record)}>{record.status === Codes.CODE_NORMAL ? '禁用' : '解禁'}</a>
        </div>
      ),
      width: '13%',
    }];

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

    return (
      <Table
        simple
        bordered
        {...tableProps}
        columns={columns}
        rowKey={record => record.id}
      />
    );
  }
}