组织团队

2021-02-01 15:20:38 +08:00 · 2021-02-01 15:20:38 +08:00 · a2406bbf4b
parent 7eef81b91a
commit a2406bbf4b
4 changed files with 143 additions and 84 deletions
--- a/src/forge/Component/SearchUser.jsx
+++ b/src/forge/Component/SearchUser.jsx
@ -1,7 +1,8 @@
-import React , { useState , useEffect } from 'react';
+import React , { useState } from 'react';
 import { AutoComplete } from 'antd';
 import { getImageUrl } from "educoder";
 import axios from 'axios';
+
 const Option = AutoComplete.Option;

 export default ({ getUser })=>{
@ -31,18 +32,15 @@ export default ({ getUser })=>{
  }

  function selectInputUser(id, option){
-    setSearchKey(option.props.searchValue);
-    getUserList(option.props.searchValue);
+    console.log(id,option);
+    setSearchKey(option.props.value);
+    getUserList(option.props.value);
    getUser && getUser(id);
  }
  const source =
    userDataSource && userDataSource.map((item, key) => {
      return (
-        <Option
-          key={key}
-          value={`${item.login}`}
-          searchValue={`${item.username}`}
-        >
+        <Option key={key} value={`${item.login}`}>
          <img
            className="user_img radius"
            width="28"
--- a/src/forge/Team/Setting/TeamSettingGroup.jsx
+++ b/src/forge/Team/Setting/TeamSettingGroup.jsx
@ -1,6 +1,8 @@
-import React from 'react';
+import React , { useEffect , useState } from 'react';
 import { WhiteBack , Banner , Blueline } from '../../Component/layout';
 import styled from 'styled-components';
+import Axios from 'axios';
+import { getImageUrl } from 'educoder';

 const SpanName = styled.span`{
  font-size:16px;
@ -25,47 +27,71 @@ const ImgContent = styled.img`{
  border-radius:50%;
  margin:5px 20px 5px 0px;
 }`
+const limit = 8;
+function TeamSettingGroup({organizeDetail}){
+  const [ list ,setList ] = useState(undefined);
+  const [ page ,setPage ] = useState(1);
+  const [ total ,setTotal ] = useState(0);
+  const [ search ,setSearch ] = useState(undefined);
+
+  useEffect(()=>{
+    if(organizeDetail){
+      getData();
+    }
+  },[organizeDetail,page,search]);
+
+  function getData(){
+    const url = `/organizations/${organizeDetail.id}/teams.json`;
+    Axios.get(url,{
+      params:{
+        page,limit,search
+      }
+    }).then(result=>{
+      if(result && result.data){
+        setList(result.data.teams);
+        setTotal(result.data.total_count);
+      }
+    }).catch(error=>{})
+  }

-export default ()=>{
  return(
    <WhiteBack>
      <Banner>组织团队管理</Banner>
-      <div className="groupBox">
-        <div>
-          <p className="g-head">
-            <SpanName>oweners</SpanName>
-            <span className="df">
-              <ALink>离开团队</ALink>
-              <Blueline className="ml15">团队设置</Blueline>
-            </span>
-          </p>
-          <div className="g-body">
-            <ImgContent src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3331079987,1190181307&fm=111&gp=0.jpg"/>
-            <ImgContent src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3331079987,1190181307&fm=111&gp=0.jpg"/>
-          </div>
-          <p className="g-foot">
-            <SpanFoot>2&nbsp;名成员</SpanFoot>
-            <SpanFoot>1&nbsp;个项目</SpanFoot>
-          </p>
+      {
+        list && list.length > 0 ? 
+        <div className="groupBox">
+          {
+            list.map((item,key)=>{
+              return(
+                <div>
+                  <p className="g-head">
+                    <SpanName>{item.name}</SpanName>
+                    <span className="df">
+                      { item.is_member && <ALink>离开团队</ALink> }
+                      { item.isAdmin && <Blueline className="ml15">团队设置</Blueline> }
+                    </span>
+                  </p>
+                  <div className="g-body">
+                    {
+                      item.user && item.user.map((i,k)=>{
+                        return(
+                          <ImgContent src={getImageUrl(`images/${item.image_url}`)}/>
+                        )
+                      })
+                    }
+                  </div>
+                  <p className="g-foot">
+                    <SpanFoot>{item.num_users}&nbsp;名成员</SpanFoot>
+                    <SpanFoot>{item.num_projects}&nbsp;个项目</SpanFoot>
+                  </p>
+                </div>
+              )
+            })
+          }
        </div>
-        <div>
-          <p className="g-head">
-            <SpanName>oweners</SpanName>
-            <span className="df">
-              <ALink>离开团队</ALink>
-              <Blueline className="ml15">团队设置</Blueline>
-            </span>
-          </p>
-          <div className="g-body">
-            <ImgContent src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3331079987,1190181307&fm=111&gp=0.jpg"/>
-            <ImgContent src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3331079987,1190181307&fm=111&gp=0.jpg"/>
-          </div>
-          <p className="g-foot">
-            <SpanFoot>2&nbsp;名成员</SpanFoot>
-            <SpanFoot>1&nbsp;个项目</SpanFoot>
-          </p>
-        </div>
-      </div>
+        :""
+      }
      </WhiteBack>
  )
-}
+}
+export default TeamSettingGroup;
--- a/src/forge/Team/Setting/TeamSettingIndex.jsx
+++ b/src/forge/Team/Setting/TeamSettingIndex.jsx
@ -44,7 +44,7 @@ export default (( props )=>{
    {name:'基本设置',icon:"icon-base",href:`/organize/${OIdentifier}/setting`},
    {name:'组织成员管理',icon:"icon-zuzhichengyuan",href:`/organize/${OIdentifier}/setting/member`},
    {name:'组织团队管理',icon:"icon-zuzhixiangmu",href:`/organize/${OIdentifier}/setting/group`},
-    {name:'管理web钩子',icon:"icon-zhongqingdianxinicon10",href:`/organize/${OIdentifier}/setting/hooks`}
+    // {name:'管理web钩子',icon:"icon-zhongqingdianxinicon10",href:`/organize/${OIdentifier}/setting/hooks`}
  ],
    active
  }
--- a/src/forge/Team/Setting/TeamSettingMember.jsx
+++ b/src/forge/Team/Setting/TeamSettingMember.jsx
@ -1,12 +1,11 @@
-import React, { useState } from 'react';
-import { WhiteBack , Blueline , AlignCenter , FlexAJ } from '../../Component/layout';
-import { Menu , Table , Pagination , Icon , Tooltip } from 'antd';
-import Sort from '../../Component/Sort';
+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 SearchUser from '../../Component/SearchUser';
 import styled from 'styled-components';
 import { getImageUrl } from 'educoder';
+import axios from 'axios';

 const Img = styled.img`{
  width:30px;
@ -24,25 +23,37 @@ const demoData = [
    operation:"移除成员",
  }
 ]
-export default ((props)=>{
+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);

-  function getData(){
-    const url = `/organizations/:organization/organization_users.json`;
+  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(id){
-    console.log(id);
-    serChoiceId(id);
-  }
-  // 搜索
-  function onSearch(value){
-    console.log(value);
+  function getUser(login){
+    serChoiceId(login);
  }
  // 切换分页
  function ChangePage(page){
@ -75,67 +86,91 @@ export default ((props)=>{
  const columns = [
    {
      title: '头像',
-      dataIndex: 'Img',
-      width:"7%",
+      dataIndex: 'image_url',
+      width:"5%",
      render:(value,item)=>{
        return(
-          <Img src={getImageUrl(item.img)}></Img>
+          item.user && <Img src={getImageUrl('images/'+item.user.image_url)}></Img> 
        )
      }
    },
    {
      title: '用户名',
      dataIndex: 'name',
-      width:"13%",
-      align:"center"
+      width:"15%",
+      render:(value,item)=>{
+        return(
+          item.user && item.user.name
+        )
+      }
    },
    {
      title: '邮箱',
-      dataIndex: 'email',
+      dataIndex: 'mail',
      width:"25%",
+      align:"left",
+      render:(value,item)=>{
+        return(
+          item.user && item.user.mail
+        )
+      }
    },
    {
      title: '所属团队',
      dataIndex: 'team',
      width:"20%",
-    },
-    {
-      title: roleTitle,
-      dataIndex: 'role',
-      width:"20%",
      render:(value,item)=>{
-        return(
-          item.role
-        )
+        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 <a className="color-grey-8">移除成员</a>
+        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>
+        {/* <AlignCenter>
          <SearchUser getUser={getUser}/>
          <Blueline className="ml30">+&nbsp;添加用户</Blueline>
-        </AlignCenter>
+        </AlignCenter> */}
      </Title>
      <FlexAJ className="padding20-30">
        <div style={{width:"580px"}}>
-          <Search placeholder="输入用户名或邮箱、团队名搜索" onSearch={onSearch}/>
+          <Search placeholder="输入用户名或邮箱、团队名搜索" onSearch={(value)=>{setSearch(value)}}/>
        </div>
-        <Sort menu={menu}>
+        {/* <Sort menu={menu}>
          <a className="color-blue">角色筛选<i className="iconfont icon-sanjiaoxing-down ml3 font-14"></i></a>
-        </Sort>
+        </Sort> */}
      </FlexAJ>
-      <div className="pl30 pr30 pb30">
+      <div className="pl30 pr30 pb30" style={{minHeight:"400px"}}>
        <Table 
          size="small"
          columns={columns}
@ -146,7 +181,7 @@ export default ((props)=>{
        {
          total > limit ?
          <div className="edu-txt-center mt30 mb20">
-            <Pagination simple defaultCurrent={page} total={total} pageSize={limit} onChange={ChangePage}></Pagination>
+            <Pagination simple current={page} total={total} pageSize={limit} onChange={ChangePage}></Pagination>
          </div>
          :""
        }