提升菜单栏体验，升级公共查询表单组件

Mr Ke

2020-04-29 c0c820559b46f3a5ede6fbd7f66e77d09981829f

 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,35 @@
    this.config = {
    };
    this.state = {
      topList: []
    };
  }

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

  componentDidMount() { }

  renderDom = () => {
  renderDom = ({ name, columns, dataSource }) => {
    return <div className="top-list-table-view-main-table">
      <div className="top-list-table-view-main-table-title">主题</div>
      <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'
        }]}
        dataSource={dataSource ? dataSource.map((a, idx) => ({ ...a, key: idx })) : []}
        columns={columns}
        size="small"
        bordered={false}
        pagination={false}
@@ -41,13 +56,14 @@
  }

  render() {

    let { topList } = this.state;
    console.log(topList)
    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 / 3} key={idx}>{this.renderDom(item)}</Col>;
            })
          }
        </Row>