forgeplus-react/src/forge/Team/Group/Setting/GroupMemberSetting.jsx

import React, { useState, useEffect } from 'react';
import { WhiteBack , FlexAJ } from '../../../Component/layout';
import { Table, Pagination , Popconfirm , Spin } from 'antd';
import Title from '../../../Component/Title';
import Search from '../../../Component/Search';
import AddMember from '../../../Component/AddMember';
import './setting.scss';

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 limit = 15;
export default ((props) => {
  const [page, setPage] = useState(1);
  const [total, setTotal] = useState(0);
  const [data, setMembers] = useState(undefined);
  const [isSpin, setIsSpin] = useState(false);
  const [identify, setIdentify] = useState(undefined);
  const [search, setQuery] = useState(undefined);
  const { OIdentifier, groupId } = props.match.params;
  
  useEffect(() => {
    getMember()
  }, [page, search, identify])

  function getMember() {
    setIsSpin(true)
    const url = `/organizations/${OIdentifier}/teams/${groupId}/team_users.json`;
    axios.get(url, {
      params: {
        page,
        search,
        identify,
        limit
      },
    })
    .then((result) => {
      if (result && result.data) {
        setMembers(result.data.team_users)
        setTotal(result.data.total_count)
      }
    }).catch((error) => { });
    setIsSpin(false)
  };

  // 移除成员
  function removeUser(username) {
    setIsSpin(true);
    const url = `/organizations/${OIdentifier}/teams/${groupId}/team_users/${username}.json`;
    if (username) {
      axios.delete(url)
        .then((result) => {
          if (result && result.data) {
            setPage(1);
            setQuery(undefined);
            setIdentify(undefined);
            getMember();
          }
        })
        .catch((error) => { });
    }
    setIsSpin(false)
  }

  const columns = [
    {
      title: '头像',
      dataIndex: 'Img',
      width: "7%",
      render: (value, item) => {
        return (
          <Img src={getImageUrl(`/${item.user.image_url}`)}></Img>
        )
      }
    },
    {
      title: '用户名',
      dataIndex: 'name',
      width: "13%",
      align: "center",
      render: (value, item) => {
        return (
          <Link to={`/users/${item.user.login}`}>{item.user.name}</Link>
        )
      }
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      width: "25%",
      render: (value, item) => {
        return (
          item.user.mail
        )
      }
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: "15%",
      render: (value, item) => {
        return <Popconfirm
          title="确认移除成员吗？"
          onConfirm={() => removeUser(item.user.login)}
          okText="确认"
          cancelText="取消"
        >
          <a className="color-red">移除成员</a>
        </Popconfirm>
      }
    }
  ]

  function getID(id){
    addUser(id);
  }

  function addUser(l) {
    setIsSpin(true);
    const url = `/organizations/${OIdentifier}/teams/${groupId}/team_users.json`;
    if (l) {
      axios.post(url, {
        username: l
      }).then((result) => {
        if (result && result.data) {
          setPage(1)
          setQuery(undefined)
          setIdentify(undefined)
          getMember();
        }
      })
      .catch((error) => { });
    }
    setIsSpin(false)
  }

  return (
    <Spin spinning={isSpin}>
      <WhiteBack style={{minHeight:"400px"}}>
        <Title>
          <span>团队成员管理</span>
          <AddMember getID={getID} showNotification={props.showNotification}/>
        </Title>
        <FlexAJ className="padding20-30">
          <div style={{ width: "580px" }}>
            <Search placeholder="输入用户名或邮箱、团队名搜索" value={search} onSearch={(value)=>setQuery(value)} />
          </div>
        </FlexAJ>
        <div className="pl30 pr30 pb30">
          <Table
            size="small"
            columns={columns}
            dataSource={data}
            pagination={false}
            className="teamMemberTable"
          ></Table>
          {
            total > limit ?
              <div className="edu-txt-center mt30 mb20">
                <Pagination simple defaultCurrent={page} total={total} pageSize={limit} onChange={(page)=>setPage(page)}></Pagination>
              </div>
              : ""
          }
        </div>
      </WhiteBack>
    </Spin>

  )
})