团队设置

2021-02-01 16:43:25 +08:00 · 2021-02-01 16:43:25 +08:00 · fcf03f2631
parent a2406bbf4b
commit fcf03f2631
9 changed files with 98 additions and 29 deletions
--- a/src/forge/Component/Cards.jsx
+++ b/src/forge/Component/Cards.jsx
@ -1,5 +1,6 @@
 import React from 'react';
 import { getImageUrl } from 'educoder';
+import { Link } from 'react-router-dom';
 import './Component.scss';

 function Cards({img , title, desc , rightBtn}){
@ -8,7 +9,7 @@ function Cards({img , title, desc , rightBtn}){
      <div className="img"><img src={getImageUrl(`images/${img}`)} alt=""/></div>
      <div className="content">
        <p className="titles">
-          <span>{title}</span>
+          <Link to={`/organize/${title}`}>{title}</Link>
          {rightBtn}
        </p>
        <div className="desc">
--- a/src/forge/Component/Component.scss
+++ b/src/forge/Component/Component.scss
@ -42,7 +42,7 @@ li.ant-menu-item{
      align-items: center;
      height: 22px;
      line-height: 22px;;
-      &>span{
+      &>a{
        font-size:18px ;
        color: #333;
      }
--- a/src/forge/Component/layout.jsx
+++ b/src/forge/Component/layout.jsx
@ -158,7 +158,7 @@ export const Content = styled.div`{
 }`
 export const GroupProjectBackgroup = styled.div`{
  background:#fafafa;
-  padding: 30px;
+  padding:20px 30px;
  width:100%;
 }`

--- a/src/forge/Team/Group/Setting/GroupMemberSetting.jsx
+++ b/src/forge/Team/Group/Setting/GroupMemberSetting.jsx
@ -276,9 +276,9 @@ export default ((props) => {

  return (
    <Spin spinning={isSpin}>
-      <WhiteBack>
+      <WhiteBack style={{minHeight:"400px"}}>
        <Title>
-          <span>组织成员管理</span>
+          <span>团队成员管理</span>
          <AlignCenter>
            <SearchUser getUser={getUser} />
            <Blueline className="ml30" onClick={addUser}>+&nbsp;添加用户</Blueline>
--- a/src/forge/Team/Group/Setting/GroupProjectSetting.jsx
+++ b/src/forge/Team/Group/Setting/GroupProjectSetting.jsx
@ -138,7 +138,7 @@ function GroupProjectSetting(props) {
            </FlexAJ>
          </GroupProjectBackgroup>
        </FlexAJ>
-        <div className="padding20-30">
+        <div className="padding20-30"style={{paddingTop:"0px"}}>
          <List
            itemLayout="horizontal"
            dataSource={projects}
--- a/src/forge/Team/Index.jsx
+++ b/src/forge/Team/Index.jsx
@ -30,7 +30,7 @@ export default withRouter(CNotificationHOC()(SnackbarHOC()(TPMIndexHOC(
        <Switch>
          {/* 组织团队 */}
          <Route
-            path="/organize/:OIdentifier/group"
+            path="/organize/:OIdentifier/group/:groupId"
            render={(p) => {
              return <SubDetail {...props}  {...p}/>
            }}
--- a/src/forge/Team/Setting/TeamSettingGroup.jsx
+++ b/src/forge/Team/Setting/TeamSettingGroup.jsx
@ -2,6 +2,7 @@ import React , { useEffect , useState } from 'react';
 import { WhiteBack , Banner , Blueline } from '../../Component/layout';
 import styled from 'styled-components';
 import Axios from 'axios';
+import { Pagination , Popconfirm } from 'antd';
 import { getImageUrl } from 'educoder';

 const SpanName = styled.span`{
@ -28,7 +29,7 @@ const ImgContent = styled.img`{
  margin:5px 20px 5px 0px;
 }`
 const limit = 8;
-function TeamSettingGroup({organizeDetail}){
+function TeamSettingGroup({organizeDetail,history}){
  const [ list ,setList ] = useState(undefined);
  const [ page ,setPage ] = useState(1);
  const [ total ,setTotal ] = useState(0);
@ -54,6 +55,21 @@ function TeamSettingGroup({organizeDetail}){
    }).catch(error=>{})
  }

+  // 当前用户离开团队
+  function removeMember(teamid){
+    const url = `/organizations/${organizeDetail.id}/teams/${teamid}/team_users/quit.json`;
+    Axios.delete(url).then(result=>{
+      if(result && result.data){
+        getData();
+      }
+    }).catch(error=>{})
+  }
+
+  // 团队设置
+  function toGroupSetting(id){
+    history.push(`/organize/${organizeDetail && organizeDetail.name}/group/${id}/setting`);
+  }
+
  return(
    <WhiteBack>
      <Banner>组织团队管理</Banner>
@ -67,15 +83,17 @@ function TeamSettingGroup({organizeDetail}){
                  <p className="g-head">
                    <SpanName>{item.name}</SpanName>
                    <span className="df">
-                      { item.is_member && <ALink>离开团队</ALink> }
-                      { item.isAdmin && <Blueline className="ml15">团队设置</Blueline> }
+                      { item.is_member && !item.is_admin && 
+                        <Popconfirm title="确定离开团队？" okText="是" cancelText="否" onConfirm={()=>removeMember(item.id)}><ALink>离开团队</ALink></Popconfirm>
+                      }
+                      { item.is_admin && <Blueline className="ml15" onClick={()=>toGroupSetting(item.id)}>团队设置</Blueline> }
                    </span>
                  </p>
                  <div className="g-body">
                    {
-                      item.user && item.user.map((i,k)=>{
+                      item.users && item.users.map((i,k)=>{
                        return(
-                          <ImgContent src={getImageUrl(`images/${item.image_url}`)}/>
+                          <ImgContent key={k} src={getImageUrl(`images/${i.image_url}`)}/>
                        )
                      })
                    }
@ -91,6 +109,12 @@ function TeamSettingGroup({organizeDetail}){
        </div>
        :""
      }
+      {
+        total > limit && 
+        <div className="mt20 pb20 edu-txt-center">
+          <Pagination current={page} total={total} simple onChange={(page)=>setPage(page)} />
+        </div>
+      }
      </WhiteBack>
  )
 }
--- a/src/forge/Team/Sub/Detail.jsx
+++ b/src/forge/Team/Sub/Detail.jsx
@ -27,6 +27,8 @@ function Detail(props){
    if(pathname){
      if(pathname.indexOf("/setting") && pathname.indexOf("/organize")){
        setFlag(false);
+      }else{
+        setFlag(true);
      }
    }
  },[pathname])
@ -47,12 +49,15 @@ function Detail(props){
  }
  return(
    <div className="teamDetail">
-      <Cards
-        title={detail && detail.name}
-        desc={detail && detail.description}
-        img={detail && detail.avatar_url}
-        rightBtn={flag && <AlignCenter className="color-blue"><Link to={`/organize/${OIdentifier}/setting`} className="color-blue">设置</Link><i className="iconfont icon-shezhi2 ml3"></i></AlignCenter>}
-      />
+      {
+        detail &&
+        <Cards
+          title={detail.name}
+          desc={detail.description}
+          img={detail.avatar_url}
+          rightBtn={flag && <AlignCenter className="color-blue"><Link to={`/organize/${OIdentifier}/setting`} className="color-blue">设置</Link><i className="iconfont icon-shezhi2 ml3"></i></AlignCenter>}
+        />
+      }
      <Switch {...props}>
        <Route
          path="/organize/:OIdentifier/setting"
--- a/src/forge/Team/Sub/SubDetail.jsx
+++ b/src/forge/Team/Sub/SubDetail.jsx
@ -1,8 +1,10 @@
-import React from 'react';
+import React , {useEffect , useState} from 'react';
 import { Route, Switch , Link } from "react-router-dom";
 import Loadable from "react-loadable";
 import Loading from "../../../Loading";
 import '../Index.scss';
+import axios from 'axios';
+import { getImageUrl } from 'educoder';

 import Cards from '../../Component/Cards';

@ -28,18 +30,55 @@ const GroupSetting = Loadable({
 });

 export default ((props)=>{
+  const OIdentifier = props.match.params.OIdentifier;
+  const groupId = props.match.params.groupId;
+  const pathname = props.location.pathname;
+
+  const [ detail , setDetail ] = useState(undefined);
+  const [ flag , setFlag ] = useState(false);
+
+
+  // 设置页面：顶部不需要设置按钮了
+  useEffect(()=>{
+    if(pathname){
+      if(pathname.indexOf(`/organize/${OIdentifier}/group/${groupId}/setting`)>-1){
+        setFlag(false);
+      }else{
+        setFlag(true);
+      }
+    }
+  },[pathname])
+
+  useEffect(()=>{
+    if(OIdentifier){
+      getDetail(OIdentifier);
+    }
+  },[OIdentifier]);
+
+  function getDetail(id) {
+    const url = `/organizations/${id}.json`;
+    axios.get(url).then(result=>{
+      if(result && result.data){
+        setDetail(result.data);
+      }
+    }).catch(error=>{})
+  }
  return(
    <div className="teamDetail">
-      <Cards
-        title="组织名称"
-        rightBtn={
-          <span className="subNavs">
-            <Link to={``} className="active"><span>组织成员</span><lable>13</lable></Link>
-            <Link to={``}><span>组织团队</span><lable>13</lable></Link>
-          </span>
-        }
-        img={`https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4193840146,2109186388&fm=26&gp=0.jpg`}
-      />
+      {
+        detail && 
+        <Cards
+          title={detail.name}
+          rightBtn={
+            flag && <span className="subNavs">
+              <Link to={``} className="active"><span>组织成员</span>{detail.num_users && <lable>{detail.num_users}</lable>}</Link>
+              <Link to={``}><span>组织团队</span>{detail.num_teams &&<lable>{detail.num_teams}</lable>}</Link>
+            </span>
+          }
+          img={detail.avatar_url}
+          desc={!flag && detail.description}
+        />
+      }
      <Switch {...props}>
        {/* 组织团队-设置 */}
        <Route