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

import React , { useEffect , useState } from 'react';
import { Input , Pagination, Spin, Tag } 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';
import { FlexAJ } from '../../Component/layout';

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,searchTypeId: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">
        {
          (zoneList && zoneList.length>0 ) ||  (typeList && typeList.length >0 ) ?
          <div className="source_left_ul">
            {
              zoneList && zoneList.length>0 &&
              <ul className="source_l_u">
                <p>资源领域</p>
                <div>
                  <li onClick={()=>{setChooseZoneId(undefined);window.scrollTo(0,450)}} className={!chooseZoneId ?"active":""}>全部</li>
                  {
                    zoneList.map((i,k)=>{
                      return(
                        <li key={k} onClick={()=>{setChooseZoneId(i.id);window.scrollTo(0,450)}} className={`${chooseZoneId && chooseZoneId === i.id ? "active":""} task-hide`}>{i.name}</li>
                      )
                    })
                  }
                </div>
              </ul>
            }
            {
              typeList && typeList.length>0 &&
              <ul className="source_l_u">
                <p className="borderRight">资源类别</p>
                <div>
                  <li onClick={()=>{setChooseTypeId(undefined);window.scrollTo(0,450)}} className={!chooseTypeId ?"active":""}>全部</li>
                  {
                    typeList.map((i,k)=>{
                      return(
                        <li key={k} onClick={()=>{setChooseTypeId(i.id);window.scrollTo(0,450)}} className={`${chooseTypeId && chooseTypeId === i.id ? "active":""} task-hide`}>{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">
                        <FlexAJ>
                          {temp === "zone" && <span className='domainNameBox task-hide'>{i.domainName}</span>}
                          <p className="load_count">
                            <img src={SourceIcon} alt="" width="18px" className="mr5" style={{marginTop: '-4px'}}/><span style={{color:"#5e6685"}}>{i.downloadCount}</span>
                          </p>
                        </FlexAJ>
                        {temp === "zone1" && <p className="load_source">
                          <span>{i.domainName}</span>
                          {i.zoneResourceTypeList && <span>
                            {i.zoneResourceTypeList.reduce((pre, cur)=>{
                              return pre ? `${pre}, ${cur.name}` : cur.name
                            }, '')}
                          </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;