diff --git a/src/forge/Component/Component.scss b/src/forge/Component/Component.scss index 5c461c941..92c973d24 100644 --- a/src/forge/Component/Component.scss +++ b/src/forge/Component/Component.scss @@ -23,7 +23,7 @@ li.ant-menu-item{ border:1px solid #eee; .img{ margin-right: 20px; - width: 190px; + max-width: 190px; height: 90px; border:1px solid rgba(238,238,238,1); display: flex; diff --git a/src/forge/Team/Index.scss b/src/forge/Team/Index.scss index 5b21e05d7..4e1f5f672 100644 --- a/src/forge/Team/Index.scss +++ b/src/forge/Team/Index.scss @@ -561,4 +561,19 @@ align-items: center; justify-content: center; } +} + +.plusCard{ + display: flex; + flex-direction: column; + justify-content: center; + width: 104px; + height: 104px; + margin-bottom: 8px; + text-align: center; + vertical-align: top; + background-color: #fafafa; + border: 1px dashed #d9d9d9; + border-radius: 4px; + cursor: pointer; } \ No newline at end of file diff --git a/src/forge/Team/New.jsx b/src/forge/Team/New.jsx index c2b5775c4..5ec95b5e8 100644 --- a/src/forge/Team/New.jsx +++ b/src/forge/Team/New.jsx @@ -1,22 +1,26 @@ import React,{ forwardRef , useCallback , useEffect, useState } from 'react'; import './Index.scss'; -import { Form , Input , Radio , Checkbox , Button } from "antd"; -import UploadImage from './Component/UploadImage'; +import { Form , Input , Icon , Checkbox , Button } from "antd"; +// import UploadImage from './Component/UploadImage'; +import AvatarModal from '../users/Avatar/Index'; import axios from 'axios'; + + const port = window.location.port; const hostname = window.location.hostname; export default Form.create()( forwardRef(({ form , showNotification , history, showNpsModal })=>{ const [ image , setImage ] = useState(undefined); const [ imageFlag , setImageFlag] = useState(false); + const [ imageVisible , setIamgeVisible ] = useState(false); const [ descNum ,setDescNum ] = useState(0); const { getFieldDecorator, validateFields , setFieldsValue } = form; - const radioStyle = { - display: 'block', - height: '30px', - lineHeight: '30px', - } + // const radioStyle = { + // display: 'block', + // height: '30px', + // lineHeight: '30px', + // } const helper = useCallback( (label, name, rules, widget, isRequired = true) => ( @@ -78,8 +82,17 @@ export default Form.create()( callback(); } + function saveImgFunc(imgUrl){ + setImage(imgUrl); + setIamgeVisible(false); + } + return(
+ { + imageVisible && + {setIamgeVisible(false)}} saveFunc={saveImgFunc}/> + }

新建组织

@@ -135,11 +148,23 @@ export default Form.create()( 私有（仅对组织成员可见） )} */} - -

选择头像

- - {imageFlag &&

请上传头像

} - +
+

选择头像

+ {/* */} +
{setIamgeVisible(true)}}> + { + image ? + avatar + : + + +
点击上传
+ + } +
+ {/* */} + {imageFlag &&

请上传头像

} +
{helper( '权限', "repo_admin_change_team_access", diff --git a/src/forge/Team/Setting/TeamSettingCommon.jsx b/src/forge/Team/Setting/TeamSettingCommon.jsx index d1ff67c0f..975dbe161 100644 --- a/src/forge/Team/Setting/TeamSettingCommon.jsx +++ b/src/forge/Team/Setting/TeamSettingCommon.jsx @@ -1,11 +1,12 @@ import React, { forwardRef , useCallback , useEffect, useState } from 'react'; -import { Form , Input , Radio ,Checkbox , Divider , Button , InputNumber } from 'antd'; +import { Form , Input , Icon ,Checkbox , Divider , Button , InputNumber } from 'antd'; import { WhiteBack , FlexAJ } from '../../Component/layout'; import Title from '../../Component/Title'; import styled from 'styled-components'; -import UploadImage from '../Component/UploadImage'; +// import UploadImage from '../Component/UploadImage'; import axios from 'axios'; import Modals from '../Component/Modals'; +import AvatarModal from '../../users/Avatar/Index'; import { getImageUrl } from 'educoder'; const TextArea = Input.TextArea; @@ -27,6 +28,7 @@ export default Form.create()( const [ visible , setVisible ] = useState(false); const [ privacyVisible , setPrivacyVisible ] = useState(false); const [ descNum , setDescNum ] = useState(0); + const [ imageVisible , setIamgeVisible ] = useState(false); const { getFieldDecorator , validateFields , setFieldsValue , getFieldsValue} = form; useEffect(()=>{ @@ -75,7 +77,7 @@ export default Form.create()( function getImage(image){ setImageFlag(true); setImage(image); - console.log(image); + setIamgeVisible(false); } // 删除组织 @@ -123,6 +125,10 @@ export default Form.create()( } return(
+ { + imageVisible && + {setIamgeVisible(false)}} saveFunc={getImage}/> + } 基本设置 setPrivacyVisible(false)}> @@ -196,8 +202,19 @@ export default Form.create()( ,false,false, "当输入栏为空时，默认数量无限制" )} -

选择头像:

- +

选择头像:

+ {/* */} +
{setIamgeVisible(true)}}> + { + image ? + avatar + : + + +
点击上传
+ + } +
diff --git a/src/forge/Team/images/white.jpg b/src/forge/Team/images/white.jpg new file mode 100644 index 000000000..a4396ef74 Binary files /dev/null and b/src/forge/Team/images/white.jpg differ diff --git a/src/forge/users/Avatar/Index.jsx b/src/forge/users/Avatar/Index.jsx index fd1389371..687f74dc3 100644 --- a/src/forge/users/Avatar/Index.jsx +++ b/src/forge/users/Avatar/Index.jsx @@ -5,9 +5,7 @@ import Cropper from 'react-cropper'; import 'cropperjs/dist/cropper.css'; import axios from 'axios'; -function Index({onCancel,avatarImg,login}){ - console.log('avatarImg,login', avatarImg,login); - +function Index({onCancel,avatarImg,login,saveFunc}){ const [ avatarPhoto , setAvatarPhoto ] = useState(avatarImg); useEffect(()=>{ @@ -23,15 +21,19 @@ function Index({onCancel,avatarImg,login}){ if (!imgUrl) { message.info('请先上传图片'); } - const url = `/users/${login}/update_image.json`; - axios.put(url,{ - image:imgUrl - }).then(result=>{ - if(result){ - message.success("头像修改成功!"); - onCancel(true); - } - }).catch(error=>{}) + if(login){ + const url = `/users/${login}/update_image.json`; + axios.put(url,{ + image:imgUrl + }).then(result=>{ + if(result){ + message.success("头像修改成功!"); + onCancel(true); + } + }).catch(error=>{}) + }else{ + saveFunc && saveFunc(imgUrl); + } } function onChange(e){ @@ -73,30 +75,35 @@ function Index({onCancel,avatarImg,login}){ footer={null} centered maskClosable={false} - title="修改头像" + title={`${login ? "修改": "上传组织" }头像`} onCancel={()=>onCancel(false)} className="avatarBox" >
-
- - {/* 仅支持JPG、GIF、PNG，且文件小于2M */} -
+ { + avatarPhoto ? +
+ + {/* 仅支持JPG、GIF、PNG，且文件小于2M */} +
+ : +
选择本地照片，上传编辑{!login && "组织"}头像
+ }
diff --git a/src/forge/users/Avatar/Index.scss b/src/forge/users/Avatar/Index.scss index 8b7c1b17c..8836e0674 100644 --- a/src/forge/users/Avatar/Index.scss +++ b/src/forge/users/Avatar/Index.scss @@ -12,12 +12,22 @@ } .avatarDiv{ display: flex; + position: relative; + min-height: 320px; + .tipsPosi{ + position: absolute; + width: 100%; + text-align: center; + top:40%; + height: 30px; + margin-top: -15px; + } .previewBox{ display: flex; flex-direction: column; align-items: center; justify-content: space-between; - margin-left: 30px; + margin-left: auto; .uploadBtn{ margin-bottom: 30px; display: flex; @@ -57,10 +67,12 @@ .previewImg{ overflow: hidden; background-color: #fff; - border-radius: 50%; text-align: center; width: 100px!important; height: 100px!important; + &.ring{ + border-radius: 50%; + } } } } \ No newline at end of file