From fcf03f2631612e8a6cf35aa64d26cfa8836161ef Mon Sep 17 00:00:00 2001 From: caishi <1149225589@qq.com> Date: Mon, 1 Feb 2021 16:43:25 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9B=A2=E9=98=9F=E8=AE=BE=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/forge/Component/Cards.jsx | 3 +- src/forge/Component/Component.scss | 2 +- src/forge/Component/layout.jsx | 2 +- .../Team/Group/Setting/GroupMemberSetting.jsx | 4 +- .../Group/Setting/GroupProjectSetting.jsx | 2 +- src/forge/Team/Index.jsx | 2 +- src/forge/Team/Setting/TeamSettingGroup.jsx | 34 +++++++++-- src/forge/Team/Sub/Detail.jsx | 17 ++++-- src/forge/Team/Sub/SubDetail.jsx | 61 +++++++++++++++---- 9 files changed, 98 insertions(+), 29 deletions(-) diff --git a/src/forge/Component/Cards.jsx b/src/forge/Component/Cards.jsx index f98a834ef..7f080d035 100644 --- 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}){

- {title} + {title} {rightBtn}

diff --git a/src/forge/Component/Component.scss b/src/forge/Component/Component.scss index c846cf2c4..b8c6e02d1 100644 --- 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; } diff --git a/src/forge/Component/layout.jsx b/src/forge/Component/layout.jsx index 1630fc8b5..443e9b36a 100644 --- 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%; }` diff --git a/src/forge/Team/Group/Setting/GroupMemberSetting.jsx b/src/forge/Team/Group/Setting/GroupMemberSetting.jsx index e0f40b08d..f14b65755 100644 --- a/src/forge/Team/Group/Setting/GroupMemberSetting.jsx +++ b/src/forge/Team/Group/Setting/GroupMemberSetting.jsx @@ -276,9 +276,9 @@ export default ((props) => { return ( - + - <span>组织成员管理</span> + <span>团队成员管理</span> <AlignCenter> <SearchUser getUser={getUser} /> <Blueline className="ml30" onClick={addUser}>+ 添加用户</Blueline> diff --git a/src/forge/Team/Group/Setting/GroupProjectSetting.jsx b/src/forge/Team/Group/Setting/GroupProjectSetting.jsx index 3abc4b557..d2c1c539f 100644 --- 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} diff --git a/src/forge/Team/Index.jsx b/src/forge/Team/Index.jsx index 197dbc669..9b9969360 100644 --- 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}/> }} diff --git a/src/forge/Team/Setting/TeamSettingGroup.jsx b/src/forge/Team/Setting/TeamSettingGroup.jsx index 530eb1040..4fd31a503 100644 --- 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> ) } diff --git a/src/forge/Team/Sub/Detail.jsx b/src/forge/Team/Sub/Detail.jsx index 9168653af..28be9d58a 100644 --- 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" diff --git a/src/forge/Team/Sub/SubDetail.jsx b/src/forge/Team/Sub/SubDetail.jsx index 45911515d..ae886b642 100644 --- 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