forgeplus-react/src/forge/Team/Setting/TeamSettingGroup.jsx

import React , { useEffect , useState } from 'react';
import { WhiteBack , Banner , Blueline } from '../../Component/layout';
import styled from 'styled-components';
import Axios from 'axios';
import { Pagination , Popconfirm } from 'antd';
import { getImageUrl } from 'educoder';

const SpanName = styled.span`{
  font-size:16px;
  color:#333;
}`
const SpanFoot = styled.span`{
  margin-right:5px;
  color:#333
}`
const ALink = styled.a`{
  border:1px solid #F73030;
  color:#F73030!important;
  height:32px;
  line-height:30px;
  display:block;
  padding:0px 15px;
  border-radius:2px;
}`
const ImgContent = styled.img`{
  height:44px;
  width:44px;
  border-radius:50%;
  margin:5px 20px 5px 0px;
}`
const limit = 8;
function TeamSettingGroup({organizeDetail,history}){
  const [ list ,setList ] = useState(undefined);
  const [ page ,setPage ] = useState(1);
  const [ total ,setTotal ] = useState(0);
  const [ search ,setSearch ] = useState(undefined);

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

  function getData(){
    const url = `/organizations/${organizeDetail.id}/teams.json`;
    Axios.get(url,{
      params:{
        page,limit,search
      }
    }).then(result=>{
      if(result && result.data){
        setList(result.data.teams);
        setTotal(result.data.total_count);
      }
    }).catch(error=>{})
  }

  // 当前用户离开团队
  function removeMember(teamid){
    const url = `/organizations/${organizeDetail.id}/teams/${teamid}/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`);
  }

  return(
    <WhiteBack>
      <Banner>组织团队管理</Banner>
      {
        list && list.length > 0 ? 
        <div className="groupBox">
          {
            list.map((item,key)=>{
              return(
                <div>
                  <p className="g-head">
                    <SpanName>{item.name}</SpanName>
                    <span className="df">
                      { item.is_member && !item.is_admin && 
                        <Popconfirm title="确定离开团队？" okText="是" cancelText="否" onConfirm={()=>removeMember(item.id)}><ALink>离开团队</ALink></Popconfirm>
                      }
                      { item.is_admin && <Blueline className="ml15" onClick={()=>toGroupSetting(item.id)}>团队设置</Blueline> }
                    </span>
                  </p>
                  <div className="g-body">
                    {
                      item.users && item.users.map((i,k)=>{
                        return(
                          <ImgContent key={k} src={getImageUrl(`images/${i.image_url}`)}/>
                        )
                      })
                    }
                  </div>
                  <p className="g-foot">
                    <SpanFoot>{item.num_users}&nbsp;名成员</SpanFoot>
                    <SpanFoot>{item.num_projects}&nbsp;个项目</SpanFoot>
                  </p>
                </div>
              )
            })
          }
        </div>
        :""
      }
      {
        total > limit && 
        <div className="mt20 pb20 edu-txt-center">
          <Pagination current={page} total={total} simple onChange={(page)=>setPage(page)} />
        </div>
      }
      </WhiteBack>
  )
}
export default TeamSettingGroup;