forgeplus-react/src/forge/Settings/CollaboratorGroup.jsx

import React, { useEffect, useState } from "react";
import { Table, Button, Popconfirm, Pagination } from "antd";
import { Link } from "react-router-dom";
import axios from "axios";

const roles = {
  owner: "所有者",
  admin: "管理者",
  write: "开发者",
  read: "报告者",
};
const limit = 15;
function CollaboratorGroup({ newGroupId, owner, projectsId , setAddOperation }) {
  const [list, setList] = useState(undefined);
  const [isSpin, setIsSpin] = useState(true);
  const [page, setPage] = useState(1);
  const [total, setTotal] = useState(0);

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

  function getData() {
    const url = `/${owner}/${projectsId}/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);
          setAddOperation(result.data.can_add);
        }
      })
      .catch((error) => {});
  }

  useEffect(() => {
    if (newGroupId) {
      addGroup(newGroupId);
    }
  }, [newGroupId]);
  // 添加团队
  function addGroup(id) {
    const url = `/${owner}/${projectsId}/teams.json`;
    axios.post(url, {
      team_id: id,
    })
    .then((result) => {
      if (result && result.data) {
        getData();
      }
    })
    .catch((error) => {});
  }

  // 删除团队
  function deleteGroup(id) {
    const url = `/${owner}/${projectsId}/teams/${id}.json`;
    axios
      .delete(url)
      .then((result) => {
        if (result && result.data) {
          getData();
        }
      })
      .catch((error) => {});
  }

  const columns = [
    {
      title: "团队名",
      dataIndex: "name",
      render: (value, item) => {
        return <Link to={`/organize/${owner}/group/${item.id}`}>{value}</Link>;
      },
    },
    {
      title: "权限",
      dataIndex: "authorize",
      width: "20%",
      render: (value, item) => {
        return roles[value];
      },
    },
    {
      title: "操作",
      dataIndex: "operation",
      width: "25%",
      render: (value, item) => {
        return (
          item.can_remove && (
            <Popconfirm
              title={`确定要删除‘${item.name}’团队？`}
              okText="是"
              cancelText="否"
              onConfirm={() => {
                deleteGroup(item.id);
              }}
            >
              <Button type="danger">删除</Button>
            </Popconfirm>
          )
        );
      },
    },
  ];
  return (
    <div className="padding20-30" style={{ minHeight: "400px" }}>
      <Table
        dataSource={list}
        columns={columns}
        pagination={false}
        loading={isSpin}
      ></Table>
      {total > limit ? (
        <div className="pb20 mt20 edu-txt-center">
          <Pagination
            simple
            current={page}
            total={total}
            pageSize={limit}
            onChange={(page) => {
              setPage(page);
            }}
          />
        </div>
      ) : (
        ""
      )}
    </div>
  );
}
export default CollaboratorGroup;