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

import React , { useEffect , useState } from 'react';
import Banner from '../Component/publicBanner';
import { Box , LongWidth  } from '../../Component/layout';
import { Input , Menu , Pagination , Spin } from 'antd';
import { Link } from 'react-router-dom';
import Nodata from '../../Nodata';
import axios from 'axios';
import { getProjectsLists , getProjectsTypeLists } from '../api';
import nodata from '../img/nodata.png';
import { tempEnum } from '../tempInfo';

const { Search } = Input;

function ProjectSource(props){ 
  const { deptId } = props.match.params;
  const [ typeId , setTypeId ] = useState(0);
  const [ typeList , setTypeList ] = useState(undefined);
  const [ lists , setLists ] = useState(undefined);
  const [ page, setPage ] = useState(1);
  const [ total , setTotal ] = useState(0);
  const pageSize = 20;
  const [ searchName , setSearchName ] = useState(undefined);
  const [ value , setValue ] = useState(undefined);
  const [ loading , setLoading ]  = useState(false);
  const { id, temp } = props;

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

  useEffect(()=>{
    if(id){
      setLoading(true);
      getLists();
    }
  },[id,typeId,page,searchName])

  function getLists(){
    getProjectsLists(id,{
      pageNum:page,
      name:searchName,
      pageSize,
      projectTypeId:typeId===0?undefined:typeId
    }).then(result=>{
      if(result){
        setLists(result.data.rows);
        setTotal(result.data.total);
        setLoading(false);
      }
    }).catch(error=>{})
  }


  function getTypeList(){
    getProjectsTypeLists(id).then(result=>{
      if(result){
        setTypeList(result.data.rows);
      }
    }).catch(error=>{})
  }
  const menu = (
    <Menu>
      <Menu.Item>更新时间排序</Menu.Item>
      <Menu.Item>创建时间排序</Menu.Item>
      <Menu.Item>fork数量排序</Menu.Item>
      <Menu.Item>点赞数量排序</Menu.Item>
    </Menu>
  )

  function changeValue(e){
    if(!e.target.value && e.target.value !==value){
      setSearchName(e.target.value);
    }
    setValue(e.target.value);
  }
  return(
    <div className="in_pro">
      {/* <Banner {...props}/> */}
      <div className="boxmain" style={{paddingTop:"56px"}}>
        <p className="in_title">开源项目</p>
        { temp === tempEnum.zone1 && <p className="project_sub_title">聚合开源特色项目，搭建硬件开源服务桥梁</p> }
        <Box>
          <ul className="in_pro_menu">
            <li className="u_t"><i className="iconfont icon-muluicon font-15 mr10 mt2" style={{color:"#1f2329"}} />项目分类</li>
            <li className={0 === typeId ? "active":""} onClick={()=>{setTypeId(0)}}>全部分类</li>
            {
              typeList && typeList.length>0 &&
              typeList.map((i,k)=>{
                return(
                  <li className={i.id === typeId ? "active":""} onClick={()=>{setTypeId(i.id);window.scrollTo(0,400)}}>{i.name}</li>
                )
              })
            }
          </ul>
          <LongWidth>
            <div className="in_list">
              <div className="in_list_menu">
                <Search 
                  value={value}
                  onChange={changeValue}
                  onSearch={()=>{setSearchName(value)}}
                  allowClear={true}
                  size={'large'} 
                  placeholder="请输入项目名称" 
                  style={{width:645}}
                  enterButton={<span><i className="iconfont icon-sousuo5 font-15"/>搜索</span>}
                />
                {/* <Dropdown overlay={menu} placement={"bottomRight"}>
                  <a className="color-blue" style={{display:'flex',alignItems:'center'}}>排序<i className="iconfont icon-sanjiaoxing-down ml5"></i></a>
                </Dropdown> */}
              </div>
              <Spin spinning={loading}>
                <div className={`in_list_box ${total>pageSize ?"in_box_line":""}`}>
                  {
                    lists && lists.length>0 ?
                      lists.map((i,k)=>{
                        return(
                          <div>
                            {i.projectProperties && <img src={i.projectProperties.authorImageUrl} alt="" className="author_img"/> }
                            <div style={{flex:"1"}}>
                              <p className="in_b_main">
                                <a onClick={()=>window.open(i.projectURL)}>{i.projectProperties && i.projectProperties.name}</a>
                                {
                                  i.projectProperties && 
                                  <ul>
                                    {/* <li><i className="iconfont icon-guanzhuicon mr4"></i>333</li> */}
                                    { i.projectProperties.praisesCount > 0 && <li><i className="iconfont icon-xingzhuang font-15 mr4"></i>{i.projectProperties.praisesCount}</li> }
                                    { i.projectProperties.forkedCount > 0 && <li><i className="iconfont icon-morenfuke_icon1 font-16 mr4"></i>{i.projectProperties.forkedCount}</li> }
                                  </ul>
                                }
                              </p>
                              {
                                i.projectProperties && i.projectProperties.description &&
                                <div className="in_b_desc task-hide-2">
                                  {i.projectProperties.description}
                                </div>
                              }
                              {
                                i.projectProperties && i.projectProperties.topics &&
                                <ul className="in_b_tag">
                                  {
                                    i.projectProperties.topics.split(",").map(t=>{
                                      return(
                                        <li>{t}</li>
                                      )
                                    })
                                  }
                                </ul>
                              }
                              <ul className="in_b_infos">
                                {/* { i.deptName && <li className="infos_cate">{i.deptName}</li> } */}
                                { i.projectType && <li className={`infos_cate ${ i.projectProperties && i.projectProperties.language && 'show_after' }`}>{i.projectType}</li> }
                                { i.projectProperties && i.projectProperties.language  && <li className=" infos_language">{i.projectProperties.language}</li> }
                                { i.projectProperties && i.projectProperties.timeAgo && <li><i className="iconfont icon-a-31shijian font-13 mr3"></i> 更新于{i.projectProperties.timeAgo}</li>}
                              </ul>
                            </div>
                          </div>
                        )
                      })
                    :""
                  }
                  {
                    lists && lists.length === 0 && (temp === tempEnum.zone1 ? <Nodata _html="暂无数据" img={ nodata }/> :  <Nodata _html="暂无数据" />)
                  }
                </div>
              </Spin>
              {
                total > pageSize &&
                <div style={{padding:"30px 0px",textAlign:"right"}}>
                  <Pagination pageSize={pageSize} current={page} onChange={(page)=>{setPage(page);window.scrollTo(0,0)}} total={total} showQuickJumper/>
                </div>
              }
            </div>
          </LongWidth>
        </Box>
      </div>
    </div>
  )
}
export default ProjectSource;