页面调整

liyj

2020-06-01 2d0e600900696bb309d09efd47fd7d4980eeb172

 src/components/common/TopListTableView/index.jsx

@@ -7,6 +7,9 @@
/** 榜单table列表 */
import React, { ReactNode, ReactEventHandler, Component } from 'react';
import { Table, Row, Col } from 'antd';
import { tagList, tag } from './tagList';
import fetch from '../../../api/request';

import './index.scss';


@@ -16,23 +19,38 @@
    this.config = {
    };
    this.state = {
      topList: []
    };
  }

  componentWillMount() { }
  componentWillMount() {
    fetch({
      url: `api/merits/queryMerits`
    }).then(res => {
      if( res) {
        this.setState({
          topList: [
            { ...tag['latenessRanking'], dataSource: res['latenessRanking'] },
            { ...tag['earlyRanking'], dataSource: res['earlyRanking'] },
            { ...tag['meritsRanking'], dataSource: res['meritsRanking'] },
            { ...tag['defectRanking'], dataSource: res['defectRanking'] },
          ]
        })
      }
    })
  }

  componentDidMount() { }

  renderDom = () => {
    return <div className="top-list-table-view-main-table">
      <div className="top-list-table-view-main-table-title">主题</div>
  renderDom = ({ name, columns, dataSource }) => {
    return <div className="top-list-table-view-main-table h-100">
      <div className="top-list-table-view-main-table-title">{name}
        {/* <span className="top-list-table-view-main-table-title-fuc">查看</span> */}
      </div>
      <Table
        dataSource={[{ age: 1 }]}
        columns={[{
          title: '年龄',
          dataIndex: 'age',
          key: 'age'
        }]}
        scroll={{ y: 130 }}
        dataSource={dataSource ? dataSource.map((a, idx) => ({ ...a, key: idx })) : []}
        columns={columns}
        size="small"
        bordered={false}
        pagination={false}
@@ -41,13 +59,13 @@
  }

  render() {

    let { topList } = this.state;
    return (
      <div className="top-list-table-view-main">
        <Row type="flex" gutter={12}>
          {
            [1, 2, 3].map((item, idx) => {
              return <Col span={24 / 3} key={idx}>{this.renderDom()}</Col>;
            topList.map((item, idx) => {
              return <Col span={24 / topList.length} key={idx} >{this.renderDom(item)}</Col>;
            })
          }
        </Row>