intimate_view/src/Table.js

import React, { useState } from 'react';
import { Table, Input,  Select, Tag, Row, Col } from 'antd';
import './Table.less';
import apihost from './Var';

 const { Option } = Select;

const columns = [
  {
    title: '平台',
    dataIndex: 'Platform',
    editable: false,
    key: 'Platform',
    //   width: "8%",
  },
  {
    title: 'userid',
    dataIndex: 'UserId',
    editable: false,
    key: 'UserId',
    //   width: "7%",
  },
  {
    title: '名称',
    dataIndex: 'UserName',
    editable: false,
    key: 'UserName',
    // width: "7%",
  },
  {
    title: '标签',
    dataIndex: 'Tags',
    editable: false,
    render: tags => (
      <>
        {
          tags != null ?
            tags.map(tag => {
              let color = "purple";
              if (tag.length < 3) {
                color = 'green';
              } else if (tag.length < 6) {
                color = 'geekblue';
              } else if (tag.length < 9) {
                color = 'volcano';
              }

              return (
                <Tag color={color} key={tag}>
                  {tag}
                </Tag>
              );
            }

            ) : null}
      </>)
  },
  {
    title: '粉丝数(关注)',
    dataIndex: 'Followers',
    key: 'Followers',
    width: "8%",
  },
  {
    title: '礼物数(币|钱)',
    dataIndex: 'Gratuity',
    key: 'Gratuity',
    width: "8%",
    sorter: (a, b) => a.Gratuity - b.Gratuity,
    // sortOrder: sortedInfo.columnKey === 'Gratuity' && sortedInfo.order,
    ellipsis: true,
  },
  {
    title: '数据更新时间',
    dataIndex: 'UpdateTime',
    key: 'UpdateTime',
    // width: "7%",
  },
];






class DataTable extends React.Component {



  state = {
    data: [],
    platform: "openrec",
    pagination: {
      current: 1,
      pageSize: 20,
      position: ["topLeft"],
    },
    loading: false,
  };

  expandedRow = (record) => {

    const ecolumns = [
      {
        title: 'uid',
        dataIndex: 'Uid',
        key: 'Uid',
      },
      {
        title: '直播地址',
        dataIndex: 'LiveUrl',
        key: 'LiveUrl',
      },
      {
        title: '直播标题',
        dataIndex: 'LiveTitle',
        key: 'LiveTitle',
      },
      {
        title: '近直播开始时间',
        dataIndex: 'LiveStartTime',
        key: 'LiveStartTime',
      },
      {
        title: '近直播结束时间',
        dataIndex: 'LiveEndTime',
        key: 'LiveEndTime',
      },
    ];

    var data = [record];
    return <Table rowClassName="subtable" size="small" bordered={true} columns={ecolumns} dataSource={data} pagination={false} />;
  };

  updatePlatform(p) {

    const { pagination } = this.state;
    pagination.current = 1;
    this.setState({ platform: p }, () => {
      this.fetchapi({
        pagination
      });
    });

  }

  componentDidMount() {
    const { platform } = this.state;
    this.updatePlatform(platform);
  }

  handleTableChange = (pagination, filters, sorter) => {
    console.log(filters, sorter);
    this.fetchapi({
      sortField: sorter.field,
      sortOrder: sorter.order,
      pagination,
      ...filters,
    });
  };

  fetchapi = (params = {}) => {
    this.setState({ loading: true });
    const { platform, pagination } = this.state;

    fetch(`${apihost}/${platform}/query?page=${pagination.current}&psize=${pagination.pageSize}`, { mode: "cors" }).then((response) => {
      // console.log(response);
      response.json().then(
        (data) => {
          var result = JSON.parse(data)
          this.setState({
            loading: false,
            data: result.Data ? result.Data : [],
            pagination: {
              ...params.pagination,
              total: 100000,
            },
          });
        }
      )
    })
  };

  render() {

    const { data, pagination, loading } = this.state;
    return (
      <div>

{/* <Row justify="start">
      <Col span={6}>
      <Input.Group compact size="small">
          <Select size="small" defaultValue="operator">
            <Option value="operator">operator</Option>
            <Option value="uid">uid</Option>
          </Select>
          <Input size="small" style={{ width: '50%' }} defaultValue="123" />
      </Input.Group>
      </Col>
      <Col span={6}>
      <Input.Group compact size="small">
          <Select size="small" defaultValue="Zhejiang">
            <Option value="Zhejiang">Zhejiang</Option>
            <Option value="Jiangsu">Jiangsu</Option>
          </Select>
          <Input size="small" style={{ width: '50%' }} defaultValue="Xihu District, Hangzhou" />
      </Input.Group>
      </Col>
  </Row> */}

      <Table
        bordered={true}
        size={"middle"}
        columns={columns}
        dataSource={data}
        pagination={pagination}
        loading={loading}
        onChange={this.handleTableChange}
        expandable={{
          expandedRowRender: this.expandedRow
        }} />
     

      </div>
    );
  }
};

export default DataTable;
//