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

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { AutoComplete, Pagination, List, Popconfirm, Dropdown, Spin } from 'antd';
import { WhiteBack, Blueline, FlexAJ, GroupProjectBackgroup, Greenline, Redline } from '../../../Component/layout';
import Title from '../../../Component/Title';
const faker_projects = [
  {
    id: 2,
    project: {
      owner_name: "ceshi_org_1",
      name: "jajaj0",
      identifier: "ssjsksjsk"
    }
  },
  {
    id: 3,
    project: {
      owner_name: "sylor_test",
      name: "sylor_test",
      identifier: "sylor_test"
    }
  }
]
// 使用了faker数据，后续需要修改
function GroupProjectSetting(props) {
  const [isSpin, setIsSpin] = useState(false);
  const [projects, setProjects] = useState(undefined);
  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(15);
  const [total, setTotal] = useState(0);
  const [search, setQuery] = useState(undefined);
  const [repo_name, setRepoName] = useState(undefined);
  const { OIdentifier, groupId } = props.match.params;

  useEffect(() => {
    get_project()
  }, [page, search])

  function get_project() {
    setIsSpin(true)
    const url = `/organizations/${OIdentifier}/teams/${groupId}/team_projects.json`;
    axios
      .get(url, {
        params: {
          page,
          search,
          limit
        },
      })
      .then((result) => {
        if (result && result.data && result.data.team_projects.length > 0) {
          setProjects(result.data.team_projects)
          setTotal(result.data.total_count)
        } else {
          setProjects(faker_projects)
        }
      }).catch((error) => { });
    setIsSpin(false)
  }

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

  function removeProject(identifier) {
    setIsSpin(true)
    const url = `/organizations/${OIdentifier}/teams/${groupId}/team_projects/${identifier}.json`;
    axios.delete(url)
      .then((result) => {
        if (result && result.data.status > -1) {
          setPage(1)
          setQuery(undefined)
          get_project()
        }
      }).catch((error) => { });
    setIsSpin(false)
  }

  function removeALLProject() {
// 移除所有项目
  }

  function addALLProject() {
// 添加所有项目
  }

  // 添加单个项目
  function addSingleProject(){
    setIsSpin(true)
    const url = `/organizations/${OIdentifier}/teams/${groupId}/team_projects.json`;
    axios.post(url, {repo_name: repo_name})
      .then((result) => {
        if (result && result.data.id) {
          setPage(1)
          setQuery(undefined)
          get_project()
        }
      }).catch((error) => { });
    setIsSpin(false)
  }

  return (
    <Spin spinning={isSpin}>
      <WhiteBack className="mb30">
        <Title>
          <span>团队项目管理</span>
        </Title>
        <FlexAJ className="padding20-30">
          <GroupProjectBackgroup>
            <FlexAJ>
              <div>
                <AutoComplete
                  style={{ width: 300 }}
                  placeholder="搜索项目..."
                />
                <Blueline className="ml30" onClick={()=>addSingleProject()}>+&nbsp;添加项目</Blueline>
              </div>
              <div>
                <Popconfirm
                  title="确认添加所有成员的项目吗？"
                  onConfirm={() => addALLProject()}
                  okText="确认"
                  cancelText="取消"
                >
                  <Greenline bold>添加所有</Greenline>
                </Popconfirm>

                <Popconfirm
                  title="确认移除所有项目吗？"
                  onConfirm={() => removeALLProject()}
                  okText="确认"
                  cancelText="取消"
                >
                  <Redline bold className="ml30">移除所有</Redline>
                </Popconfirm>
              </div>
            </FlexAJ>
          </GroupProjectBackgroup>
        </FlexAJ>
        <div className="padding20-30"style={{paddingTop:"0px"}}>
          <List
            itemLayout="horizontal"
            dataSource={projects}
            renderItem={item => (
              <List.Item
                extra={
                  <Popconfirm
                    title="确认移除项目吗？"
                    onConfirm={() => removeProject(item.project.identifier)}
                    okText="确认"
                    cancelText="取消"
                  >
                    <a className="color-red" href="#">移除</a>
                  </Popconfirm>
                }
              >
                <List.Item.Meta
                  title={<a href={`/projects/${item.project.owner_name}/${item.project.name}`}>{item.project.owner_name}/{item.project.name}</a>}
                />
              </List.Item>
            )}
          />
        </div>

        {
          total > limit ?
            <div className="edu-txt-center mt30 mb20">
              <Pagination simple defaultCurrent={page} total={total} pageSize={limit} onChange={ChangePage}></Pagination>
            </div>
            : ""
        }
      </WhiteBack>
    </Spin>
  )
}
export default GroupProjectSetting;