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

import React, { useEffect, useState } from 'react';
import { WhiteBack ,  FlexAJ } from '../../Component/layout';
import { Table , Pagination , Popconfirm, Button, message, Tooltip, Select, Spin } 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';
import './teamSetting.scss';
import { createEnterpriseByGitlinkOrgId, getRoleList, getUserList, checkOpenedEnterprise } from '../../Information/api';

const Img = styled.img`{
  width:30px;
  height:30px;
  border-radius:50%;
}`
const limit  = 15;
export default (({organizeDetail,history,match, current_user})=>{
  const OIdentifier = match.params.OIdentifier;
  const {login} = current_user
  const [ page , setPage ] = useState(1);
  const [ total , setTotal ] = useState(0);
  const [ data , setData ] = useState(undefined);
  const [ roleList, setRoleList] = useState([]);
  const [loading, setLoading] = useState(false);
  // 定时器
  let intervalId = null;

  useEffect(()=>{
    getRoleList().then(res=>{
      const {code, rows} = res && res.data
      if(code === 200){
        setRoleList(rows);
      }
    })
  }, [])

  useEffect(()=>{
    if(organizeDetail){
      const {nickname} = organizeDetail;
      document.title = `开通组织工作台-${nickname}`;
      pollData()
    }
  }, [organizeDetail])

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

  // 轮询函数
  const pollData = () => {
    checkOpenedEnterprise(organizeDetail.id).then(res=>{
      if(res && res.data.code === 200){
        const {data} = res.data;
        if(data.isOpen && !data.url){
          setLoading(true)
        }else if(data.isOpen){
          clearInterval(intervalId);
          window.location = data.url
        }
      }
    })
  };

  function getData(id){
    getUserList(id).then(res=>{
      const {code, rows, total} = res && res.data
      if(code === 200){
        setData(rows);
        setTotal(total);
      }
    })
  }

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

  const columns = [
    {
      title: '头像',
      dataIndex: 'imageUrl',
      render:(value)=>{
        return(
          <Img src={value}></Img>
        )
      }
    },
    {
      title: '用户名',
      dataIndex: 'nickname',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
    },
    {
      title: '所属团队',
      dataIndex: ['role', 'roleKey'],
      width:"20%",
      render:(value,record)=>{
        return <Select value={value} onChange={(value)=>{
          const users = [...data];
          users.map(item=>item.username === record.username && (item.role.roleKey = value))
          setData(users);
        }}>
          {roleList && roleList.map(item=>{return <Select.Option key={item.roleKey}>{item.roleName}</Select.Option>})}
        </Select>
      }
    },
    {
      title: '操作',
      dataIndex: 'username',
      key: "action",
      render:(value)=>{
        return (
          <Button type='danger' size='small' disabled={value === login} onClick={()=>{
            const users = data.filter(item=>{return item.username !== value});
            setData(users);
          }}><i className='iconfont icon-fuzhi-shanchu font-14'></i></Button>
        )
      }
    }
  ]

  function createEnterprise(){
    const users = data.map(item=>{return {userId: item.userId, roleKey: item.role.roleKey}})
    createEnterpriseByGitlinkOrgId(organizeDetail.id, users).then(res=>{
      if(res && res.data.code === 200){
        message.success('开通成功');
        intervalId = setInterval(pollData, 1000);
      }else{
        message.error(res && res.data.msg)
      }
    })
  }
  return(
    <Spin spinning={loading}>
      <WhiteBack style={{border:"1px solid #eee"}} className='exterpriseBox'>
        <div className='padding30'>
          首次创建组织工作台时，系统将根据组织团队用户在组织工作台中根据不同团队初始化成不同角色。请您知悉以下角色权限，再次确认组织成员的角色分配。<br/>
          <span className='font-bd'>组织管理员：</span>原owner团队成员，对组织内所有代码库均具有管理员权限，在组织工作台中拥有最高管理权限<br/>
          <span className='font-bd'>项目管理员：</span>原管理员团队成员，对组织内所有代码库均具有管理员权限，在组织工作台中拥有项目管理权限<br/>
          <span className='font-bd'>普通成员：</span>原开发者及报告者团队成员，对组织内所有代码库均具有开发者权限，在组织工作台中拥有项目基础使用权限及查看权限
        </div>
        <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>
        <div className='edu-txt-right pl30 pr30 pb30'>
          <Button type='primary' ghost className='mr20' onClick={()=>{history.push(`/${OIdentifier}`)}}>暂不开通</Button>
          <Button type='primary' onClick={createEnterprise}>确认并开通工作台</Button>
        </div>
      </WhiteBack>
    </Spin>
  )
})