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

import React , { useEffect , useState } from 'react';
import { Input , Pagination, Spin } from 'antd';
import SourceIcon from '../img/sourceIcon.png';
import { Link } from 'react-router-dom';
import axios from 'axios';
import { getSourceTypeList , getSourceList , getSourceZoneList } from '../api';
import Nodata from '../../Nodata';
import ImgGreen from '../img/green_nodata.png';
import '../indexZone1.scss';

const { Search } = Input;

function Source(props){
  const { deptId } = props.match.params;
  const [ sourceList , setSourceList ] = useState(undefined);
  const [ zoneList , setZoneList ] = useState(undefined);
  const [ typeList , setTypeList ] = useState(undefined);
  const [ chooseZoneId , setChooseZoneId ] = useState(undefined);
  const [ chooseTypeId , setChooseTypeId ] = useState(undefined);
  const [ page , setPage ] = useState(1);
  const [ total , setTotal ] = useState(0);
  const [ search , setSearch ] = useState(undefined);
  const [ isSpin , setIsSpin ] = useState(true);
  const limit = 20;
  const { id , temp } = props;


  useEffect(()=>{
    id && getLists();
  },[id,chooseTypeId,chooseZoneId,page,search])

  useEffect(()=>{
    id && getZoneList();
    id && getTypeList();
  },[id])

  function getZoneList(){
    getSourceZoneList(id).then(response=>{
      if(response && response.data){
        setZoneList(response.data.rows);
      }
    }).catch(error=>{})
  }

  function getTypeList(){
    getSourceTypeList(id).then(response=>{
      if(response && response.data){
        setTypeList(response.data.rows);
      }
    }).catch(error=>{})
  }

  function getLists(){
    setIsSpin(true);
    getSourceList({
      id,pageSize:limit,pageNum:page,typeId:chooseTypeId,domainId:chooseZoneId,name:search
    }).then(response=>{
      if(response){
        setSourceList(response.data.rows);
        setTotal(response.data.total);
        setIsSpin(false);
      }
    }).catch(error=>{})
  }


  function onSourceSearch(value){
    setSearch(value);
    setPage(1);
  }

  return(
    <div className={`${temp}_source_box`}>
      <div className="source_h">
        <p className="in_title">资源发布</p>
        <div style={{marginTop:"30px",textAlign:"center"}}>
          <Search 
            placeholder="请输入资源名称"
            onSearch={onSourceSearch}
            style={{width:'645px',borderColor:"#fff",boxShadow:"0px 0px 10px rgba(61, 85, 183, 0.1)"}}
            size="large"
            className="source_search_box"
            allowClear
            enterButton={temp === "zone" ? <span><i className="iconfont icon-sousuo5 font-15"/>搜索</span> :undefined}
          />
        </div>
      </div>
      <div className="sources" style={{alignItems:(sourceList && sourceList.length>0) ? "flex-start":"center"}}>
        <div className="source_left_ul">
          {
            zoneList && zoneList.length>0&&
            <ul className="source_l_u">
              <p>资源领域</p>
              <div>
                <li onClick={()=>setChooseZoneId(undefined)} className={!chooseZoneId ?"active":""}>全部</li>
                {
                  zoneList.map((i,k)=>{
                    return(
                      <li key={k} onClick={()=>{setChooseZoneId(i.id)}} className={chooseZoneId && chooseZoneId === i.id ? "active":"" }>{i.name}</li>
                    )
                  })
                }
              </div>
            </ul>
          }
          {
            typeList && typeList.length>0 &&
            <ul className="source_l_u">
              <p className="borderRight">资源类别</p>
              <div>
                <li onClick={()=>setChooseTypeId(undefined)} className={!chooseTypeId ?"active":""}>全部</li>
                {
                  typeList.map((i,k)=>{
                    return(
                      <li key={k} onClick={()=>{setChooseTypeId(i.id)}} className={chooseTypeId && chooseTypeId === i.id ? "active":"" }>{i.name}</li>
                    )
                  })
                }
              </div>
            </ul>
          }
        </div>
        <Spin spinning={isSpin}>
          <div className="s_m_list">
          {
            sourceList && sourceList.length > 0 &&
            <div className="source_lists">
              {sourceList.map((i,k)=>{
                return(
                    <div className="source_lists_card" key={k}>
                      <Link to={`/zone/${deptId}/source/${i.id}`} onClick={()=>{window.scrollTo(0,450)}} className="task-hide">{i.name}</Link>
                      <p className="task-hide-2 desc">
                      {i.summary}
                      </p>
                      <div className="s_infos">
                        <p className="load_count">
                          <img src={SourceIcon} alt="" width="18px" className="mr5"/><span style={{color:"#5e6685"}}>{i.downloadCount}</span>
                        </p>
                        {temp === "zone1" && <p className="load_source">
                          <span>{i.domainName}</span>
                          <span>{i.typeName}</span>
                        </p>
                        }
                      </div>
                    </div>
                  )
                })
            }
            </div>
          }
          {sourceList && sourceList.length === 0 && 
            <div style={{textAlign:'center'}}>
              <Nodata _html="暂无数据" img={temp === "zone1" ? ImgGreen : undefined}/>
            </div>
          }
          {
            total > limit &&
            <div style={{textAlign:'center',padding:"20px 0px"}}>
              <Pagination pageSize={limit} total={total} current={page} onChange={(p)=>{setPage(p);window.scrollTo(0,450);}} showQuickJumper/>
            </div>
          }
          </div>
        </Spin>
      </div>
    </div>
  )
}
export default Source;