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

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

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

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

  function getData(){
    setIsSpin(true);
    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);
        setIsSpin(false);
      }
    })
  }
  // 离开团队
  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=>{})
  }
  // 团队设置
  function toGroupSetting(id){
    history.push(`/organize/${organizeDetail && organizeDetail.name}/group/${id}/setting`);
  }
  // 解散团队
  function disMissGroup(id){
    const url = `/organizations/${organizeDetail.id}/teams/${id}.json`;
    axios.delete(url).then(result=>{
      if(result && result.data){
        getData();
      }
    }).catch(error=>{})
  }
  return(
    <Spin spinning={isSpin}>
      <div style={{minHeight:"400px"}}>
        {
          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.nickname}</Link>
                    <span>
                      { item.is_admin && item.authorize!=="owner" && <Popconfirm title={`确定解散团队${item.name}?`} okText="是" cancelText="否" onConfirm={()=>disMissGroup(item.id)}><a className="color-red">解散团队</a></Popconfirm>}
                      { item.is_member && <LeaveTeam className="ml15" teamID={item.id} onOk={outTeam}/>}
                      { item.is_admin && <a className="ml15 color-blue" onClick={()=>toGroupSetting(item.id)}>团队设置</a> }
                    </span>
                  </p>
                  <div className="g-body">
                    {
                      item.users && item.users.map((i,k)=>{
                        return( 
                          k < count ? <Link to={`/users/${i.login}`}><ImgContent title={i.name} key={k} src={getImageUrl(`images/${i.image_url}`)}/></Link> 
                          : 
                          k === count ? 
                          <Link to={`/organize/${organizeDetail && organizeDetail.name}/group/${item.id}`} className="moreMember" title="查看更多" ><i className="iconfont icon-zhunbeizhong"></i></Link>
                          :""
                        )
                      })
                    }
                  </div>
                  <p className="g-foot">
                    <SpanFoot>{item.num_users}&nbsp;名成员</SpanFoot>
                    <SpanFoot>{item.num_projects}&nbsp;个项目</SpanFoot>
                  </p>
                </div>
                )
              })
            }
          </div>
        }
        { list && list.length > 0 && <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>
    </Spin>
  )
}
export default TeamGroupItems;