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

import React, { useEffect, useState } from 'react';
import { WhiteBack ,  FlexAJ } from '../../Component/layout';
import { Menu , Table , Pagination , Icon , Tooltip , 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';

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=>{})
  }

  // 获取搜索用户框里面选择的用户ID，方便添加组织成员
  function getUser(login){
    serChoiceId(login);
  }
  // 切换分页
  function ChangePage(page){
    setPage(page);
  }

  const menu=(
    <Menu>
      <Menu.Item key="all">全部</Menu.Item>
      <Menu.Item key="Manager">管理员</Menu.Item>
      <Menu.Item key="Developer">开发者</Menu.Item>
      <Menu.Item key="Reporter">报告者</Menu.Item>
    </Menu>
  )
  const roleTitle = (
    <div><span className="mr3">角色</span>
      <Tooltip placement='bottom' title=
        {
        <div>
          <div className="mb3">管理员：拥有仓库设置功能、代码库读、写操作</div>
          <div className="mb3">开发人员：只拥有代码库读、写操作</div>
          <div className="mb3">报告者：只拥有代码库读操作</div>
        </div>
        }
      >
      <Icon type="question-circle"></Icon>
  </Tooltip>
  </div>
  );
  const columns = [
    {
      title: '头像',
      dataIndex: 'image_url',
      width:"5%",
      render:(value,item)=>{
        return(
          item.user && <Img src={getImageUrl('images/'+item.user.image_url)}></Img> 
        )
      }
    },
    {
      title: '用户名',
      dataIndex: 'name',
      width:"15%",
      render:(value,item)=>{
        return(
          item.user && item.user.name
        )
      }
    },
    {
      title: '邮箱',
      dataIndex: 'mail',
      width:"25%",
      align:"left",
      render:(value,item)=>{
        return(
          item.user && item.user.mail
        )
      }
    },
    {
      title: '所属团队',
      dataIndex: 'team',
      width:"20%",
      render:(value,item)=>{
        return item.team_names && item.team_names.length > 0 && item.team_names[0]
      }
    },
    // {
    //   title: roleTitle,
    //   dataIndex: 'role',
    //   width:"20%",
    //   render:(value,item)=>{
    //     return(
    //       item.role
    //     )
    //   }
    // },
    {
      title: '操作',
      dataIndex: 'operation',
      width:"15%",
      render:(value,item)=>{
        return (organizeDetail && organizeDetail.is_admin ? "" : 
        <Popconfirm title="是否将此成员移出组织？" okText={"是"} cancelText={"否"} onConfirm={()=>deleteMember(item.login)}><a className="color-grey-8">移除成员</a></Popconfirm>
        )
      }
    }
  ]

  function deleteMember(login){
    const url = `/organizations/${organizeDetail && organizeDetail.id}/organization_users/${login}.json`;
    axios.delete(url).then(result=>{
      if(result && result.data){

      }
    }).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>
  )
})