。。

liyj

2020-04-09 9ef2aa77067fc3861534f10045bae7dabdb74fd9

 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: 'author',
        key: 'author',
      },
    ];
  }

  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>
    )
  }