From a2406bbf4b59247ea87fdc0966933089dcfd485d Mon Sep 17 00:00:00 2001
From: caishi <1149225589@qq.com>
Date: Mon, 1 Feb 2021 15:20:38 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E7=BB=87=E5=9B=A2=E9=98=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/forge/Component/SearchUser.jsx           |  14 +--
 src/forge/Team/Setting/TeamSettingGroup.jsx  | 102 ++++++++++-------
 src/forge/Team/Setting/TeamSettingIndex.jsx  |   2 +-
 src/forge/Team/Setting/TeamSettingMember.jsx | 109 ++++++++++++-------
 4 files changed, 143 insertions(+), 84 deletions(-)

diff --git a/src/forge/Component/SearchUser.jsx b/src/forge/Component/SearchUser.jsx
index bc103f70..d252c139 100644
--- 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"
diff --git a/src/forge/Team/Setting/TeamSettingGroup.jsx b/src/forge/Team/Setting/TeamSettingGroup.jsx
index 9c5b20e1..530eb104 100644
--- 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>
   )
-}
\ No newline at end of file
+}
+export default TeamSettingGroup;
\ No newline at end of file
diff --git a/src/forge/Team/Setting/TeamSettingIndex.jsx b/src/forge/Team/Setting/TeamSettingIndex.jsx
index 1fcac7d8..4717f2fe 100644
--- 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
   }
diff --git a/src/forge/Team/Setting/TeamSettingMember.jsx b/src/forge/Team/Setting/TeamSettingMember.jsx
index a8d7800b..4d1d332c 100644
--- 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>
           :""
         }