From b449aca90c49fe8ee96f1c040c5953fcdd2ca15d Mon Sep 17 00:00:00 2001
From: liuwh <hugeinfo123>
Date: Mon, 06 Apr 2020 17:49:41 +0800
Subject: [PATCH] 新建文档
---
src/components/common/HotListTableView/index.jsx | 135 +++++++++++++++++++++++++++++++++++++++-----
1 files changed, 119 insertions(+), 16 deletions(-)
diff --git a/src/components/common/HotListTableView/index.jsx b/src/components/common/HotListTableView/index.jsx
index 0e30d9d..e0157dc 100644
--- a/src/components/common/HotListTableView/index.jsx
+++ b/src/components/common/HotListTableView/index.jsx
@@ -8,8 +8,10 @@
import React, { ReactNode, ReactEventHandler, Component } from 'react';
import BreadcrumbView from '../BreadcrumbView';
import TableView from '../TableView';
+import fetch from '../../../api/request';
+import moment from 'moment';
-import { Tabs } from 'antd';
+import { Tabs, Skeleton } from 'antd';
const { TabPane } = Tabs;
@@ -21,30 +23,131 @@
this.config = {
};
this.state = {
+ keywordlist: ['全部'],
+ formData: {
+ __key: Date.now(),
+ keyword: '',
+ page: 1,
+ size: 10,
+ },
+ loading: true
};
}
componentWillMount() { }
- componentDidMount() { }
+ componentDidMount() {
+ let { keywordlist } = this.state;
+ // 设置骨架屏
+ this.setState({
+ loading: true
+ })
+ fetch({
+ url: `api/news/keywordlist`
+ }).then(res => {
+ console.log('res', res);
+ this.setState({
+ loading: false
+ })
+ if (res) {
+ this.setState({
+ keywordlist: keywordlist.concat(res)
+ })
+ }
+ })
+ }
+
+ setFormData = data => {
+ console.log('form', data);
+ this.setState({
+ formData: data,
+ });
+ }
+
+ renderColumns = () => {
+ return [
+ {
+ title: '标题',
+ dataIndex: 'title',
+ key: 'title',
+ render: (cur, item) => {
+ return <a dangerouslySetInnerHTML={{ __html: cur }} onClick={() => {
+ window.open(item.url)
+ }}>
+ </a>
+ }
+ },
+ {
+ title: '发布时间',
+ key: 'create_time',
+ dataIndex: 'create_time',
+
+ render: (cur) => {
+ return (
+ <React.Fragment>
+ {cur && moment(cur).format("YYYY-MM-DD HH:mm")}
+ </React.Fragment>
+ );
+ },
+ },
+ {
+ title: '来源',
+ dataIndex: 'keyword',
+ key: 'keyword',
+ },
+ ];
+ }
+
+ tabChange = (tab) => {
+ console.log('tab', tab);
+ let { formData } = this.state
+ if (tab == '全部') {
+ tab = '';
+ }
+ this.setState({
+ formData: {
+ __key: Date.now(),
+ keyword: tab,
+ page: 1,
+ size: 10,
+ }
+ })
+ }
render() {
+ let { keywordlist, formData, loading } = this.state;
+
+ let tableParams = {
+ url: `api/news/newslist`,
+ formData,
+ key: formData.__key,
+ columns: this.renderColumns(),
+ extraFromData: {
+ },
+ setFormData: this.setFormData
+ };
return (
<div className="hot-list-table-view-main">
- <BreadcrumbView data={[{ name: '行业热点知识库' }]} />
- <div className="hot-list-table-view-main-content">
- <Tabs defaultActiveKey="1" >
- <TabPane tab="Tab 1" key="1">
- Content of Tab Pane 1
- </TabPane>
- <TabPane tab="Tab 2" key="2">
- Content of Tab Pane 2
- </TabPane>
- <TabPane tab="Tab 3" key="3">
- Content of Tab Pane 3
- </TabPane>
- </Tabs>
- </div>
+ <Skeleton loading={loading}>
+ <BreadcrumbView data={[{ name: '行业热点知识库' }]} />
+ <div className="hot-list-table-view-main-content">
+ <Tabs defaultActiveKey={'全部'} onChange={this.tabChange}>
+ {
+ keywordlist.length &&
+ keywordlist.map((key) => (
+ <TabPane tab={key} key={key}>
+ </TabPane>
+ ))
+ }
+ </Tabs>
+ {/* 避免请求两遍 */}
+ {
+ !loading &&
+ <TableView {...tableParams} />
+
+ }
+ </div>
+ </Skeleton>
</div>
)
}
--
Gitblit v1.8.0