forgeplus-react/src/exchange/MyExchange/MyTopicItem.js

import React, { Component } from 'react';
import { Dropdown , Menu , Icon , DatePicker , Pagination , Spin } from 'antd';
import { Link } from 'react-router-dom'

import moment from 'moment'
import Empty from '../Empty'

import ExchangeItems from '../ExchangeItem';
import './myExchange.css'
import '../exchange.css'

import axios from 'axios';
const { SubMenu } = Menu;

const dateFormat = 'YYYY-MM-DD';

class MyTopicItem extends Component {
  constructor(props){
    super(props);
    this.state={
      // 筛选条件
      memo_type:undefined,
      forum_section_id:undefined,
      is_hidden:undefined,
      is_hidden_name:undefined,
      start_time:undefined,
      end_time:undefined,
      page:1,
      plateName:undefined,
      // 分页
      pageSize:15,
      // 数据
      data:undefined,
      isSpin:true
    }
  }

  // 搜索
  searchEvent=()=>{} 
  
  // 清除
  clearEvent=()=>{}

  componentDidMount=()=>{
    this.refresh();
  }

  // 我的话题和我的收藏公用当前组件，但接口不同，根据url判断调用哪个接口
  getMytopicInfo = (forum_section_id,is_hidden,start_time,end_time,page) =>{
    this.setState({
      isSpin:true
    })
    const { subActiveKey , urlName } = this.props;

    const url = `/${urlName}`;
    axios.get(url,{params:{
      memo_type:subActiveKey,
      forum_section_id,
      is_hidden,
      start_time,
      end_time,
      page
    }}).then(result=>{
      if(result){
        this.setState({
          data:result.data,
          isSpin:false
        })
      }
    }).catch(error=>{

    })
  }

  // 刷新时需要用到
  refresh=()=>{
    const {forum_section_id,is_hidden,start_time,end_time } = this.state;
    this.getMytopicInfo(forum_section_id,is_hidden,start_time,end_time,1);
  }

  // 切换分页
  changePageEvent = (page) =>{
    this.setState({
      page
    })
    const {forum_section_id,is_hidden,start_time,end_time } = this.state;
    this.getMytopicInfo(forum_section_id,is_hidden,start_time,end_time,page);
  }

  // 选择板块
  changeForumId=(plateId,name)=>{
    this.setState({
      forum_section_id:plateId,
      plateName:name
    })
    const {is_hidden,start_time,end_time , page } = this.state;
    this.getMytopicInfo(plateId,is_hidden,start_time,end_time,page);
  }

  // 选择帖子状态
  forumType=(type)=>{
    this.setState({
      is_hidden:type,
      is_hidden_name:type === "show" ? "已发布的话题":"待审查的话题"
    })
    const {forum_section_id,start_time,end_time , page } = this.state;
    this.getMytopicInfo(forum_section_id,type,start_time,end_time,page);
  }

  // 清除搜索条件
  clearEvent=()=>{
    this.setState({
      forum_section_id:undefined,
      plateName:undefined,
      is_hidden:undefined,
      is_hidden_name:undefined,
      start_time:undefined,
      end_time:undefined
    })
    this.getMytopicInfo(undefined,undefined,undefined,undefined,1);
  }

  // 选择开始时间
  changeBeginEvent=(e,dateString)=>{
    this.setState({
      start_time:dateString
    })
  }

  // 选择结束时间
  changeEndEvent=(e,dateString)=>{
    this.setState({
      end_time:dateString
    })
  }

  // 搜索
  searchEvent=()=>{
    this.setState({
      page:1
    })
    const {forum_section_id,is_hidden,start_time,end_time } = this.state;
    this.getMytopicInfo(forum_section_id , is_hidden , start_time , end_time , 1);
  }

  render(){
    const { data , pageSize , page , plateName , is_hidden_name , start_time , end_time , isSpin } = this.state;

    // 选择板块
    const menuList =(
      <div className="platePanel">
        {
          data && data.forum_sections && data.forum_sections.map(item => {
            return(
              <div className="plateItem">
                <span className="plateItem_h"><a onClick={()=>this.changeForumId(item.id,item.name)}>{item.name}</a></span>
                <ul className="plateUl">
                  {
                    item.children_tags && item.children_tags.map(i=>{
                      return(<li><a onClick={()=>this.changeForumId(i.id,i.title)}>{i.title}</a></li>)
                    })
                  }
                </ul>
              </div>
            )
          })
        }
      </div>
    )
    
    // 全部帖子
    const forumList = (
      <Menu>
        <Menu.Item onClick={()=>this.forumType('hidden')}>待审查的话题</Menu.Item>
        <Menu.Item onClick={()=>this.forumType('show')}>已发布的话题</Menu.Item>
      </Menu>
    )


    const pagination = (
      data && data.memos && data.memos_count > pageSize &&
      <div className="edu-txt-center pt30 pb50">
        <Pagination current={page} pageSize={pageSize} total={data.memos_count} showQuickJumper onChange={this.changePageEvent}></Pagination>
      </div>
    )

    const dataList = (
      <Spin spinning={isSpin}>
        <div className="MyTopicSearch">
          <Dropdown overlay={menuList}>
            <a className="ant-dropdown-link">
            {plateName || "选择板块"} <Icon type="down" />
            </a>
          </Dropdown>
          <Dropdown overlay={forumList}>
            <a className="ant-dropdown-link">
            { is_hidden_name || '全部帖子' } <Icon type="down" />
            </a>
          </Dropdown>
          <div>
            <span className="mr10">开始日期</span>
            <DatePicker style={{width:"145px"}} 
              placeholder={'请选择开始时间'} 
              format={dateFormat} 
              value={start_time && moment(start_time,dateFormat)} 
              onChange={this.changeBeginEvent}
            />
            <span className="ml15 mr10">结束日期</span>
            <DatePicker style={{width:"145px"}} 
              placeholder={'请选择结束时间'} 
              format={dateFormat} 
              value={end_time && moment(end_time,dateFormat)} 
              onChange={this.changeEndEvent}
            />
          </div>
          <span className="df">
            <a onClick={this.searchEvent} className="small-default-btn small-blue-btn mr15">搜索</a>
            <a onClick={this.clearEvent} className="small-default-btn">清除</a>
          </span>
          <span className="color-grey9 font-12">共<span className="color-blue">{ data && data.memos_count }</span>个结果</span>
        </div>
        {
          data && data.memos && data.memos.length>0 ?
          <div>
            <ExchangeItems memos = { data && data.memos } {...this.props} {...this.state} refresh={this.refresh}></ExchangeItems>
            { pagination }
          </div>
          :
          <div className="pt50 pb50 edu-back-white">
            <Empty/>
          </div>
        }
      </Spin>
    )
    return( dataList )
  }
}

export default MyTopicItem;