forgeplus-react/src/forge/Team/List.jsx

import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import Search from '../Component/Search';
import Sort from '../Component/Sort';
import './Index.scss';
import Item from './ListItem';
import Right from './RightBox';
import NoData from '../Nodata';
import CheckProfile from '../Component/ProfileModal/Profile';
import { Menu , Pagination , Dropdown , Spin , Tooltip , Radio, Button } from 'antd';
import ConcentrateProject from '../users/GeneralView/ConcentrateProject';
import { getImageUrl } from 'educoder';
import RenderHtml from "../../components/render-html";
import EmptyImg from '../Images/nodata.png';
import axios from 'axios';
import { checkOpenedEnterprise } from '../Information/api';

const limit = 15;
function List(props){
  const [ list , setList ] = useState(undefined);
  const [ isSpin , setIsSpin ] = useState(false);
  const [ totalCount , setTotalCount ] = useState(undefined);
  const [ search , setSearch ] = useState(undefined);
  const [ page , setPage ] = useState(1);
  const [ sortBy , setSortBy ] = useState("updated_on");
  const [ mode , setMode ] = useState("overview");

  const OIdentifier = props.match.params.OIdentifier;
  const { current_user, organizeDetail, enterpriseOpenInfo } = props;


  useEffect(()=>{
    if(organizeDetail){
      // 更改网页标题
      const {nickname} = organizeDetail;
      document.title = `${nickname}(${OIdentifier}) ${organizeDetail.description}`
    }
  },[organizeDetail])

  useEffect(()=>{
    if(OIdentifier && mode==="subject"){
      setIsSpin(true);
      getProject();
    }
  },[OIdentifier,sortBy,page,search,mode])

  function getProject(){
    const url = `/organizations/${OIdentifier}/projects.json`;
    axios.get(url,{
      params:{
        search,page,limit,
        sort_by:sortBy,
        sort_direction:"desc"
      }
    }).then(result=>{
      if(result && result.data){
        setList(result.data.projects);
        setTotalCount(result.data.total_count);
      }
      setIsSpin(false);
    }).catch(error=>{setIsSpin(false);})
  }

  function onSearch(value){
    setSearch(value);
  }

  const menu=(
    <Menu onClick={(e)=>setSortBy(e.key)}>
      <Menu.Item key="updated_on">更新时间排序</Menu.Item>
      <Menu.Item key="created_on">创建时间排序</Menu.Item>
      <Menu.Item key="praises_count">点赞数排序</Menu.Item>
      <Menu.Item key="forked_count">fork数排序</Menu.Item>
    </Menu>
  )
  const menu_new=(
    <ul>
      <li >
        <CheckProfile {...props} sureFunc={()=>{props.history.push(`/projects/deposit/new/${OIdentifier}`)}}>新建项目</CheckProfile>
      </li>
      <li >
        <CheckProfile {...props} sureFunc={()=>{props.history.push(`/projects/mirror/new/${OIdentifier}`)}}>导入项目</CheckProfile>
      </li>
    </ul>
  )

  function changeRadio(e){
    setMode(e.target.value);
  }

  
  return(
    organizeDetail ? 
    <div className="content-orz">
      <div className="top-orz">
        <div className="box">
          <img src={getImageUrl(organizeDetail && organizeDetail.avatar_url)} alt="" />
          <div className="info-orz">
            <p className="orz-main">
            <span className="orz-name task-hide">{organizeDetail && organizeDetail.nickname}</span>
            {organizeDetail && (
              <div>
                {!enterpriseOpenInfo.isOpen && organizeDetail.is_admin && (
                  <Link to={`/${OIdentifier}/enterprise`}>
                    <Button type='primary'>开通工作台</Button>
                  </Link>
                )}
                {enterpriseOpenInfo.isOpen && enterpriseOpenInfo.url ? (
                  <Button type='primary' onClick={() => { window.open(enterpriseOpenInfo.url) }}>前往工作台</Button>
                ) : (
                  <Button type='primary'>正在开通工作台</Button>
                )}
              </div>
            )}
            </p>
            <div className="orz-desc task-hide-2">
              <Tooltip title={organizeDetail && organizeDetail.description} placement={"bottomLeft"}>
                <span style={{ display: "block" }}>{organizeDetail && organizeDetail.description}</span>
              </Tooltip>
            </div>
          </div>
        </div>
      </div>
      <div className="list">
        <div className="list-l">
          {
            organizeDetail.news_title &&
            <div className="teamnewstatus mb30">
              <p className="teamname"><i className="iconfont icon-dongtaiicon1" /><span>新闻动态</span></p>
              <p className="teamtitle">
              {organizeDetail.news_title}
              </p>
              <div className="teamdesc">
              {organizeDetail.news_content}
              </div>
            </div>
          }
          <div className="sepment" onChange={changeRadio} >
            <Radio.Group size="large" value={mode}>
              <Radio.Button value="overview" style={{width:"130px"}}>概览</Radio.Button>
              <Radio.Button value="subject" style={{width:"130px"}}>仓库</Radio.Button>
            </Radio.Group>
          </div>
          {
            mode === "overview" &&
            <div className="overviewcontent">
              <ConcentrateProject 
                {...props}
                title={
                  <p className="names">
                    <i className="iconfont icon-jingxuanxiangmu font-17 mr8"></i>
                    <span className="font-17">精选项目</span>
                  </p>
                }
                btn={
                  <span><i className="iconfont icon-zidingyi font-14 mr5"></i>自定义</span>
                }
                emptyContent={
                  <img src={EmptyImg} width="325px" alt=""/>
                }
                typeFlag={true}
                userLogin={OIdentifier} 
                type="organizations"
                current={organizeDetail.is_admin}
              />
              {
                organizeDetail.memo &&
                <div>
                  <p className="mt30 mb10">
                    <i className="iconfont icon-zuzhijieshao mr4"></i>
                    <span className="font-17">组织介绍</span>
                  </p>
                  <RenderHtml className="break_word_comments imageLayerParent" value={organizeDetail.memo} url={props.history.location}/>
                </div>
              }
            </div>
          }
          {
            mode === "subject" &&
            <div>
              <div>
                <div className="head">
                  <div style={{width:"370px"}}>
                    <Search placeholder="输入仓库名称进行搜索" onSearch={onSearch}/>
                  </div>
                  <p>
                    { organizeDetail && organizeDetail.can_create_project ?
                    <Sort menu={menu_new} overlayClassName={"newPopUl"}>
                      <a className="addBtn mr30">+&nbsp;新建项目</a>
                    </Sort>
                    :""}
                    <Dropdown overlay={menu}>
                      <a className="color-blue">排序<i className="iconfont icon-sanjiaoxing-down ml3 font-14"></i></a>
                    </Dropdown>
                  </p>
                </div>
                <Spin spinning={isSpin}>
                  <div className="team">
                    {
                      list && list.length>0 ? list.map((item,key)=>{
                        return(
                          <Item item={item} keu={key} OIdentifier={OIdentifier}/>
                        )
                      })
                      :
                      <NoData _html="暂无数据"/>
                    }
                  </div>
                </Spin>
              </div>
              {
                totalCount > limit &&
                <div className="mb20 mt20" style={{textAlign:"center"}}>
                  <Pagination simple current={page} total={totalCount} pageSize={limit} onChange={(page)=>setPage(page)}/>
                </div>
              }
            </div>
          }
          
        </div>
        <Right 
          admin={organizeDetail && organizeDetail.is_admin} 
          OIdentifier={OIdentifier} 
          showCompeleteDialog={props.showCompeleteDialog} 
          completeProfile={props.completeProfile}
          history={props.history}
          enterpriseOpened = {enterpriseOpenInfo.isOpen}
        />
      </div>
    </div>
    :""
  )
}
export default List;