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;








class DataTable extends React.Component {



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

  expandedRow = (record) => {

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

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

  updatePlatform(p) {

    const { pagination, sorter, filters } = this.state;
    // console.log("filters", filters); // ${filters?`&filters=${filters}`:""}
    // console.log("sorter", sorter);
    pagination.current = 1;
    this.setState({ platform: p }, () => {
      this.fetchapi({
        pagination,
        sorter,
        filters
      });
    });

  }

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

  handleTableChange = (pagination, filters, sorter) => {
 
    this.fetchapi({
      pagination,
      sorter,
      filters,
    });
  };

  fetchapi = (params = {}) => {
 
    const { pagination, sorter, filters } = params;
    const { platform,  } = this.state;
    this.setState({ loading: true });
    // console.log("filters", filters); // ${filters?`&filters=${filters}`:""}
    // console.log("sorter", sorter);
    fetch(`${apihost}/${platform}/query?page=${pagination.current}&psize=${pagination.pageSize}${sorter?`&orderfield=${sorter.column?sorter.column.dataField:""}&ordertype=${sorter.order}`:""}`, { 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,
            },
            filters: filters, 
            sorter: sorter
          });
        }
      )
    })
  };

  render() {

    let { data, pagination, loading, sorter, filters } = this.state;
    // sorter = sorter || {};
    // filters = filters || {};

    const columns = [
        {
          title: '平台',
          dataIndex: 'Platform',
          editable: false,
          key: 'Platform',
          //   width: "8%",
          dataField: 'platform',
        },
        {
          title: 'userid',
          dataIndex: 'UserId',
          editable: false,
          key: 'UserId',
          dataField: 'user_id',
          //   width: "7%",
        },
        {
          title: '名称',
          dataIndex: 'UserName',
          editable: false,
          key: 'UserName',
          dataField: 'user_name',
          // width: "7%",
        },
        {
            title: '观众数',
            dataIndex: 'Views',
            editable: false,
            key: 'Views',
            dataField: 'views',
            sorter: (a, b) => a.Views - b.Views,
              sortDirections: ['descend', 'ascend'],
              ellipsis: false,
            // width: "7%",
        },
        {
          title: '标签',
          dataIndex: 'Tags',
          editable: false,
          dataField: 'tags',
          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%",
          dataField: 'followers',
          sorter: (a, b) => a.Followers - b.Followers,
          //   sortOrder: sorter.columnKey === 'Gratuity' && sorter.order,
        sortDirections: ['descend', 'ascend'],
        ellipsis: false,
        },
        {
          title: '礼物数(币|钱)',
          dataIndex: 'Gratuity',
          key: 'Gratuity',
          width: "8%",
          dataField: 'gratuity',
          // defaultSortOrder: 'ascend',
         //  filterMultiple: false,
          // onFilter: (value, record)=>{ console.log(record, value) ;return record.Gratuity >= value;},
          sorter: (a, b) => a.Gratuity - b.Gratuity,
        //   sortOrder: sorter.columnKey === 'Gratuity' && sorter.order,
          sortDirections: ['descend', 'ascend'],
          ellipsis: false,
        },
        {
          title: '数据更新时间',
          dataIndex: 'UpdateTime',
          key: 'UpdateTime',
          dataField: 'update_time',
          // width: "7%",
        },
      ];

    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;
//