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

import React, { useEffect, useState } from 'react';
import { WhiteBack ,  FlexAJ } from '../../Component/layout';
import { Table , Pagination , Popconfirm } from 'antd';
import Title from '../../Component/Title';
import Search from '../../Component/Search';
import styled from 'styled-components';
import { getImageUrl } from 'educoder';
import axios from 'axios';
import { Link } from 'react-router-dom';

const Img = styled.img`{
  width:30px;
  height:30px;
  border-radius:50%;
}`

const demoData = [
  {
    img:"images/avatars/User/g",
    name:"蔡世",
    email:"1149225589@qq.com",
    team:"caicaizi",
    role:"管理者",
    operation:"移除成员",
  }
]
export default (({organizeDetail})=>{
  const [ choiceId , serChoiceId ] = useState(undefined);
  const [ page , setPage ] = useState(1);
  const [ limit , setLimit ] = useState(15);
  const [ total , setTotal ] = useState(0);
  const [ search , setSearch ] = useState(undefined);
  const [ data , setData ] = useState(demoData);

  useEffect(()=>{
    if(organizeDetail && organizeDetail.id){
      getData(search);
    }
  },[organizeDetail,search])

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

  // 切换分页
  function ChangePage(page){
    setPage(page);
  }

  const columns = [
    {
      title: '头像',
      dataIndex: 'user',
      width:"5%",
      render:(value)=>{
        return(
          value && <Link to={`/users/${value && value.login}`}><Img src={getImageUrl('images/'+value.image_url)}></Img> </Link>
        )
      }
    },
    {
      title: '用户名',
      dataIndex: 'user',
      width:"15%",
      render:(value,item)=>{
        return <Link to={`/users/${value && value.login}`}>{value && value.name}</Link>
      }
    },
    {
      title: '邮箱',
      dataIndex: 'user',
      width:"25%",
      align:"left",
      render:(value)=>{
        return value && value.mail
      }
    },
    {
      title: '所属团队',
      dataIndex: 'team_names',
      width:"20%",
      render:(value)=>{
        let array = value && value.length > 0 && value.map((i,k)=>{
          return (i+",")
        })
        console.log(array && array[0]);
        return array && array[0].substring(0,array[0].length-1);
      }
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width:"15%",
      render:(value,item)=>{
        let c_isAdmin = organizeDetail && organizeDetail.is_admin;
        let last = (data && data.length === 1) && (item.team_names && item.team_names.length === 1 && item.team_names[0]==="Owners");
        return (
          c_isAdmin && !last && <Popconfirm title="是否将此成员移出组织？" okText={"是"} cancelText={"否"} onConfirm={()=>deleteMember(item.user && item.user.login)}><a className="color-red">移除成员</a></Popconfirm>
        )
      }
    }
  ]

  function deleteMember(login){
    const url = `/organizations/${organizeDetail && organizeDetail.id}/organization_users/${login}.json`;
    axios.delete(url).then(result=>{
      if(result && result.data){
        getData();
      }
    }).catch(error=>{})
  }
  return(
    <WhiteBack>
      <Title>
        <span>组织成员管理</span>
        {/* <AlignCenter>
          <SearchUser getUser={getUser}/>
          <Blueline className="ml30">+&nbsp;添加用户</Blueline>
        </AlignCenter> */}
      </Title>
      <FlexAJ className="padding20-30">
        <div style={{width:"580px"}}>
          <Search placeholder="输入用户名或邮箱、团队名搜索" onSearch={(value)=>{setSearch(value)}}/>
        </div>
        {/* <Sort menu={menu}>
          <a className="color-blue">角色筛选<i className="iconfont icon-sanjiaoxing-down ml3 font-14"></i></a>
        </Sort> */}
      </FlexAJ>
      <div className="pl30 pr30 pb30" style={{minHeight:"400px"}}>
        <Table 
          size="small"
          columns={columns}
          dataSource={data}
          pagination={false}
          className="teamMemberTable"
        ></Table>
        {
          total > limit ?
          <div className="edu-txt-center mt30 mb20">
            <Pagination simple current={page} total={total} pageSize={limit} onChange={ChangePage}></Pagination>
          </div>
          :""
        }
      </div>
    </WhiteBack>
  )
})