From c0c820559b46f3a5ede6fbd7f66e77d09981829f Mon Sep 17 00:00:00 2001 From: Mr Ke <kelq@hugeinfo.com.cn> Date: Wed, 29 Apr 2020 11:56:31 +0800 Subject: [PATCH] 提升菜单栏体验,升级公共查询表单组件 --- src/components/common/TopListTableView/index.jsx | 40 ++++++++++++++++++++++++++++------------ 1 files changed, 28 insertions(+), 12 deletions(-) diff --git a/src/components/common/TopListTableView/index.jsx b/src/components/common/TopListTableView/index.jsx index 6adcb29..595b4a9 100644 --- a/src/components/common/TopListTableView/index.jsx +++ b/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> -- Gitblit v1.8.0