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

import React , { useEffect , useState } from 'react';
import { Banner } from '../Component/layout';
import styled from 'styled-components';
import axios from 'axios';
import { getImageUrl } from 'educoder';
import Nodata from '../Nodata';
import { Pagination } from 'antd';
import { Link } from 'react-router-dom';
import LeaveTeam from './Component/LeaveTeam';

const SpanFoot = styled.span`{
  margin-right:5px;
  color:#333
}`
const ImgContent = styled.img`{
  height:44px;
  width:44px;
  border-radius:50%;
  margin:5px 20px 5px 0px;
}`
const limit = 14;
function TeamGroup({organizeDetail,current_user}){
  const [ page , setPage ] = useState(1);
  const [ total , setTotal ] = useState(0);
  const [ list , setList ] = useState(undefined);

  useEffect(()=>{
    if(organizeDetail){
      getData();
    }
  },[organizeDetail]);

  function getData(){
    const url = `/organizations/${organizeDetail.id}/teams.json`;
    axios.get(url,{
      params:{ page ,limit}
    }).then(result=>{
      if(result && result.data){
        setList(result.data.teams);
        setTotal(result.data.total_count);
      }
    })
  }
  // 离开团队
  function outTeam(id){
    const url = `/organizations/${organizeDetail.id}/teams/${id}/team_users/quit.json`;
    axios.delete(url).then(result =>{
      if(result && result.data){
        getData();
      }
    }).catch(error=>{})
  }
  return(
    <div style={{background:"#fff",marginBottom:"30px"}}>
      <Banner>组织团队</Banner>
      {
        list && list.length > 0 ?
        <div className="groupBox">
          {
            list.map((item,key)=>{
              return(
              <div key={key}>
                <p className="g-head">
                  <Link to={`/organize/${organizeDetail.name}/group/${item.id}`} className="color-grey-3 font-16">{item.name}</Link>
                  {item.is_member && <LeaveTeam teamID={item.id} onOk={outTeam}/>}
                </p>
                <div className="g-body">
                  {
                    item.users && item.users.map((i,k)=>{
                      return( 
                        <Link to={`/users/${i.login}`}><ImgContent src={getImageUrl(`images/${i.image_url}`)} title={i.name}/></Link>
                      )
                    })
                  }
                </div>
                <p className="g-foot">
                  <SpanFoot>{item.num_users}&nbsp;名成员</SpanFoot>
                  <SpanFoot>{item.num_projects}&nbsp;个项目</SpanFoot>
                </p>
              </div>
              )
            })
          }
        </div>:<Nodata _html="暂无数据"/>
      }
      {
        total > limit && 
        <div className="mt20 pb20 edu-txt-center">
          <Pagination simple current={page} total={total} pageSize={limit} onChange={(page)=>setPage(page)}/>
        </div>
      }
    </div>
  )
}
export default TeamGroup;