设置页面增加修改功能

src/forge/Component/layout.jsx

@@ -7,6 +7,8 @@ export const Banner = styled.div`{
   border-bottom:1px solid #eee;
   background-color:#fff;
   border-radius:5px 5px 0px 0px;
+  justify-content: space-between;
+  display: flex;
 }`
 export const AlignCenterBetween = styled.div`{
   display:flex;

src/forge/SecuritySetting/Index.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 
 import { Route, Switch } from "react-router-dom";
 import { withRouter } from "react-router";
@@ -11,6 +11,7 @@ import Loading from "../../Loading";
 import { Box , Gap , LongWidth } from '../Component/layout';
 import { getImageUrl } from 'educoder';
 import { Link } from 'react-router-dom';
+import Avatar from '../users/Avatar/Index';
 
 import './Index.scss';
 import { useEffect } from "react";
@@ -52,18 +53,38 @@ function Index(props){
   const { pathname } = props.location;
   const notice_url = mygetHelmetapi && mygetHelmetapi.common && mygetHelmetapi.common.notice;
 
+  const [ avatarVisible , setAvatarVisible ] = useState(false);
+  
   useEffect(()=>{
     if(checkIfLogin() === false){
       props.history.push('/login');
     }
   },[])
+
+
+  function onCancelAvatar(){
+    setAvatarVisible(false);
+    const { resetUserInfo } = props;
+    resetUserInfo && resetUserInfo();
+  }
   return(
     <div className="newMain clearfix whiteBack">
+      {
+        avatarVisible && 
+        <Avatar 
+          onCancel={onCancelAvatar}
+          avatarImg={getImageUrl(`/${current_user && current_user.image_url}`)}
+          login={current_user && current_user.login}
+        />
+      }
       <div className="boies">
         <Box>
           <div className="shortW">
             <div className="userDetail">
-              <img src={getImageUrl(`/${current_user && current_user.image_url}`)} alt=""/>
+              <div className="userHeadPhoto">
+                <img src={getImageUrl(`/${current_user && current_user.image_url}`)} alt=""/>
+                <span className="userUpdateBox"onClick={()=>setAvatarVisible(true)}>修改头像</span>
+              </div>
               <span>{current_user && current_user.username}</span>
             </div>
             <ul className="securityUl ul-border-buttom">

src/forge/SecuritySetting/Index.scss

@@ -193,4 +193,31 @@
 }
 .blue-Purple{
   color: #466AFF !important;
+}
+
+.userHeadPhoto{
+  width: 48px;
+  position: relative;
+  margin:0px auto;
+  .userUpdateBox{
+    font-size: 11px!important;
+    width: 100%;
+    height: 100%;
+    line-height: 48px;
+    text-align: center;
+    position: absolute;
+    left: 0px;
+    top:0px;
+    background-color: rgba(0, 0, 0, 0.2);
+    display: none!important;
+    color: white!important;
+    transition: 1s;
+    border-radius: 50%;
+    cursor: pointer;
+  }
+  &:hover{
+    .userUpdateBox{
+      display: block!important;
+    }
+  }
 }

src/forge/Team/Component/AddMemberBox.jsx

@@ -0,0 +1,69 @@
+import React ,{ useState , useEffect } from 'react';
+import { Modal , Spin } from 'antd';
+import axios from 'axios';
+
+function AddMemberBox({className,orzId,history,OIdentifier}){
+  const [ visible , setVisible ] = useState(false);
+  const [ isSpin , setIsSpin ] = useState(true);
+  const [ list , setList ] = useState(undefined);
+
+  useEffect(()=>{
+    if(visible && orzId){
+      InitData();
+    }
+  },[orzId,visible])
+
+  function InitData(){
+    const url = `/organizations/${orzId}/teams.json`;
+    axios.get(url,{
+      params:{
+        is_full:true
+      }
+    }).then(result=>{
+      if(result){
+        setList(result.data.teams);
+        setIsSpin(false);
+      }
+    }).catch(error=>{})
+  }
+
+  function chooseGroup(id){
+    history.push(`/${OIdentifier}/teams/${id}/setting`);
+  }
+  return(
+    <div>
+      <Modal
+        visible={visible}
+        width="600px"
+        centered
+        title="添加成员"
+        onCancel={()=>setVisible(false)}
+        footer={null}
+        className="addMemberBody"
+      >
+        <div>
+          <p className="font-16 pt40 pb20 edu-txt-center">请选择想要添加成员的组织团队</p>
+          <Spin spinning={isSpin}>
+            <div className="addForGroupList">
+              {
+                list && list.length > 0 ? 
+                <ul>
+                  {
+                    list.map((i,k)=>{
+                      return(
+                        <li onClick={()=>chooseGroup(i.id)}>{i.nickname}</li>
+                      )
+                    })
+                  }
+                </ul>
+                :""
+              }
+            </div>
+          </Spin>
+        </div>
+      </Modal>
+      <a className={className} onClick={()=>setVisible(true)}>+ 添加成员</a>
+    </div>
+  )
+}
+export default AddMemberBox;

src/forge/Team/Index.scss

@@ -369,4 +369,48 @@
 }
 .hide{
   display: none;
+}
+
+.addMemberBtn{
+  display: flex;
+  height: 34px;
+  line-height: 32px;
+  padding:0px 14px;
+  border-radius: 3px;
+  border:1px solid #d0d0d0;
+  font-size: 14px;
+  &:hover{
+    border-color: #466AFF;
+  }
+}
+
+.addMemberBody{
+  .ant-modal-body{
+    padding:0px;
+  }
+  .addForGroupList{
+    padding:20px 40px;
+    max-height: 315px;
+    overflow-y: auto;
+    ul{
+      display: flex;
+      flex-wrap: wrap;
+      width: 450px;
+      margin:0px auto;
+    }
+    li{
+      cursor: pointer;
+      border:1px solid #d0d0d0;
+      border-radius:4px;
+      margin:0px 10px 15px 10px!important;
+      height: 40px;
+      line-height: 40px;
+      width: 130px;
+      text-align: center;
+      &.active,&:active{
+        color: #fff;
+        background-color: rgba(65, 84, 241, 1);
+      }
+    }
+  }
 }

src/forge/Team/Setting/TeamSettingMember.jsx

@@ -7,6 +7,7 @@ import styled from 'styled-components';
 import { getImageUrl } from 'educoder';
 import axios from 'axios';
 import { Link } from 'react-router-dom';
+import AddMemberBox from '../Component/AddMemberBox';
 
 const Img = styled.img`{
   width:30px;
@@ -14,7 +15,8 @@ const Img = styled.img`{
   border-radius:50%;
 }`
 const limit  = 15;
-export default (({organizeDetail})=>{
+export default (({organizeDetail,history,match})=>{
+  const OIdentifier = match.params.OIdentifier;
   const [ page , setPage ] = useState(1);
   const [ total , setTotal ] = useState(0);
   const [ search , setSearch ] = useState(undefined);
@@ -116,6 +118,12 @@ export default (({organizeDetail})=>{
           <SearchUser getUser={getUser}/>
           <Blueline className="ml30">+&nbsp;添加用户</Blueline>
         </AlignCenter> */}
+        <AddMemberBox 
+          className="addMemberBtn"
+          orzId={organizeDetail && organizeDetail.id}
+          history={history}
+          OIdentifier={OIdentifier}
+        />
       </Title>
       <FlexAJ className="padding20-30">
         <div style={{width:"580px"}}>

src/forge/Team/TeamMember.jsx

@@ -4,9 +4,11 @@ import Cards from '../Component/MemberCards';
 import axios from 'axios';
 import Nodata from '../Nodata';
 import { Pagination , Spin } from 'antd';
+import AddMemberBox from './Component/AddMemberBox';
 
 const limit = 15;
-function TeamMember({organizeDetail,current_user}){
+function TeamMember({organizeDetail,current_user,history,match}){
+  const OIdentifier = match.params.OIdentifier;
   const [ page , setPage ] = useState(1);
   const [ total , setTotal ] = useState(0);
   const [ isSpin , setIsSpin ] = useState(true);
@@ -34,7 +36,17 @@ function TeamMember({organizeDetail,current_user}){
 
   return(
     <WhiteBack style={{marginBottom:"30px",border:'1px solid #eee'}}>
-      <Banner>组织成员</Banner>
+      <Banner>组织成员
+        {
+          organizeDetail && organizeDetail.is_admin &&
+          <AddMemberBox 
+            className="addMemberBtn" 
+            orzId={organizeDetail && organizeDetail.id}
+            history={history}
+            OIdentifier={OIdentifier}
+          />
+        }
+      </Banner>
       <Spin spinning={isSpin}>
         <div style={{minHeight:"400px"}}>
           {