forgeplus-react/src/forge/Information/Pages/main.jsx

import React , { useState , useEffect } from 'react';
import { Menu , Spin , Skeleton, Button, Dropdown } from 'antd';
import Hot from '../Component/hot';
import { Box , FlexAJ, LongWidth } from '../../Component/layout';
import { Link } from 'react-router-dom';
import Lists from './newsList';
import guideArrow from '../img/guideArrow.png';
import axios from 'axios';
import shijian from '../img/shijian.png';
import liulan from '../img/liulan.png';
import emptydata from '../../Images/nodata.png';
import DefaultImg from '../Component/defaultImg';
import { getNewsAllList , getNewsHotList } from '../api';
import { tempConfig, tempEnum } from '../tempInfo';
import { httpUrl } from '../fetch';


function Main(props){
  const [ key , setKey ] = useState("1");
  const [ mainList , setMainList ] = useState(undefined);
  const [ name , setName] = useState(undefined);
  const [ menuH , setMenuH ] = useState(true);
  const [ hotList , setHotList ] = useState(undefined);
  const [ isSpin , setIsSpin ] = useState(true);
  const [ newCateId , setNewCateId ] = useState(undefined);
  const { deptId , cateId } = props.match.params;
  const { id, temp, role, history } = props;

  const menu = (
    <Menu>
      <Menu.Item>
        <a onClick={()=>{history.push(`/zone/${deptId}/news/add?type=richEditor`)}}>富文本编辑器</a>
      </Menu.Item>
      <Menu.Item>
      <a onClick={()=>{history.push(`/zone/${deptId}/news/add?type=mdEditor`)}}>MD编辑器</a>
      </Menu.Item>
    </Menu>
  );


  useEffect(()=>{
    if(id) {
      setIsSpin(true);
      if (temp === tempEnum.zone) {
        getMainList();
      } else {
        getCateList();
      }
      getHotList();
    }
  },[id])

  useEffect(() => {
    if (newCateId) {
      getSubHotList()
    }
  }, [newCateId])

  function getMainList(){
    getNewsAllList(id).then(result=>{
      if(result){
        let rows = result.data.rows;
        setMainList(rows);
        if (temp !== tempEnum.zone) {
          selectCate(rows[0].id)
        }
        setTimeout(() => {
          let ele = document.getElementById("menus");
          if(ele){
            let h = ele.clientHeight;
            setMenuH(h>56);
          }
          setIsSpin(false);
        }, 100);
      }
    }).catch(error=>{})
  }

  function getCateList() {
    const url = `${httpUrl}/cms/doc/open/zone/${id}/dirList`;
    axios.get(url).then(result=>{
      if(result){
        let rows = result.data.rows;
        setMainList(rows);
        if (temp !== tempEnum.zone) {
          selectCate(rows[0].id)
        }
        setIsSpin(false);
      }
    }).catch(error=>{})
  }

  function getHotList(){
    getNewsHotList(id,{
      pageSize:15,pageNum:1
    }).then(result=>{
      if(result){
        setHotList(result.data.rows);
      }
    }).catch(error=>{})
  }

  function getSubHotList() {
    const url = `${httpUrl}/cms/doc/open/dir/${newCateId}/hotDocList`;
    axios.get(url,{
      params:{pageSize:15,pageNum:1}
    }).then(result=>{
      if(result){
        setHotList(result.data.rows);
      }
    }).catch(error=>{})
  }

  function selectCate(id) {
    setNewCateId(id)
    props.history.push(`/zone/${deptId}/news/${id}`)
  }

  return(
    <div>
      <div className="main_content">
        <div className="boxmain">
          <div className='titleButBox'>
            <p className="in_title">{tempConfig[temp].mainTitle}</p>
            {role && role.role !== "None" && <div className='createButs'>
              {role.role === "Member" && <Button type="primary" ghost className='mr20'>
                <Link to={`/zone/${deptId}/news/self`}>我的文章</Link>
              </Button>}
              {role.role === "Member" ? <Dropdown overlay={menu}>
                <Button icon='plus' type="primary" ghost>新建</Button>
              </Dropdown> : <Button type="primary" ghost href={role.docManageUrl} target={'_blank'}>管理资讯</Button>}
            </div>}
          </div>
          {
            mainList && mainList.length>0 && 
            (
              temp === tempEnum.zone ?
              <Menu mode={"horizontal"} id="menus" selectedKeys={[cateId||"0"]} style={{justifyContent:menuH?"flex-start":"center"}}>
                <Menu.Item key={"0"}><Link to={`/zone/${deptId}/news`}>全部</Link></Menu.Item>
                {
                  mainList.map((i,k)=>{
                    return(
                      <Menu.Item key={`${i.id}`}><Link to={`/zone/${deptId}/news/${i.id}`}>{i.name}</Link></Menu.Item>
                    )
                  })
                }
              </Menu>
              :
              <div className="main_tag">
                {
                  mainList.map((i,k)=>{
                    if (k <= 4) {
                      return(
                        <div className={`main_tag_item task-hide ${newCateId === i.id ? 'main_tag_selected' : ''}`} key={`${i.id}`} onClick={() => selectCate(i.id)} >{i.name}</div>
                      )
                    }
                  })
                }
              </div>
            )
          }
          {
            !mainList && <div style={{height:105}}><Skeleton /></div>
          }
        </div>
        <div style={{width:'1200px',margin:"0px auto"}}>
          <Box>
            <LongWidth>
              <Spin spinning={isSpin}>
                {
                  cateId ? 
                  <Lists {...props}/>
                  :
                  <div style={{minHeight:"400px"}}>
                  {
                    mainList && mainList.length>0 &&
                    mainList.map((i,k)=>{
                      return(
                        <div className="main_card radius4" style={{paddingTop:"25px"}}>
                          <div className="guide">
                            <span className="task-hide">{i.name}</span>
                            { i.cmsDocList && i.cmsDocList.length> 0 && <Link className="flexCenter" to={`/zone/${deptId}/news/${i.id}`} onClick={()=>{window.scrollTo(0,400)}}>更多<img src={guideArrow} alt="" width="14px"/></Link> }
                          </div>
                          <div>
                            {
                              i.cmsDocList && i.cmsDocList.length>0 ?
                              i.cmsDocList.map((j,e)=>{
                                return(
                                  <div className="main_card_item" onClick={()=>{props.history.push(`/zone/${deptId}/newdetail/${j.id}`)}}>
                                    {e===0 && 
                                      (
                                        j.headImg ?
                                        <img src={j.headImg} alt=""/>
                                        :
                                        <DefaultImg name="GitLink" title={i.name} />
                                      )
                                    }
                                    <div style={{flex:1,width:0}}>
                                      <Link to={`/zone/${deptId}/newdetail/${j.id}`} className={`sub_name task-hide ${e===0? "":"sub_i"}`}>{j.name}</Link>
                                      <p className={`sub_desc ${e===0? "task-hide-2":"task-hide"}`}>
                                      {j.summary}
                                      </p>
                                      <div className="sub_info">
                                        <span><img src={shijian} alt="" />{j.publishTime}</span>
                                        <span><img src={liulan} alt="" />{j.visits}</span>
                                      </div>
                                    </div>
                                  </div>
                                )
                              })
                              :
                              <div style={{display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column",height:300}}>
                                <img src={emptydata} alt="" width="230"/>
                                <p className="font-15 color-grey-6 mt20">暂无数据~</p>
                              </div>
                            }
                          </div>
                        </div>
                      )
                    })
                  }
                  </div>
                }
              </Spin>
            </LongWidth>
            {
              hotList && hotList.length>0 &&
              <div className="short_width radius4">
                <Hot temp={ temp } title={ tempConfig[temp].hotTitle } list={hotList} deptId={deptId}/>
              </div>
            }
          </Box>
        </div>
      </div>
    </div>
  )
}
export default Main;