新建文档

liuwh

2020-04-06 0bd9e1222d867893b66044b04754d9cc967d472e

 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: false
    };
  }

  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>
        {
          loading ? <div style={{ padding: 10 }}>
            <Skeleton />
          </div>
            :
            <React.Fragment>
              <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>
                <TableView {...tableParams} />
              </div>
            </React.Fragment>
        }
      </div>
    )
  }