forked from Gitlink/forgeplus-react
123 lines
4.3 KiB
JavaScript
123 lines
4.3 KiB
JavaScript
import React,{ forwardRef , useCallback , useState } from 'react';
|
||
import './Index.scss';
|
||
import { Form , Input , Radio , Checkbox , Button, InputNumber } from "antd";
|
||
import UploadImage from './Component/UploadImage';
|
||
import axios from 'axios';
|
||
|
||
export default Form.create()(
|
||
forwardRef(({ form , showNotification , history })=>{
|
||
const [ image , setImage ] = useState(undefined);
|
||
const [ imageFlag , setImageFlag] = useState(false);
|
||
const { getFieldDecorator, validateFields } = form;
|
||
|
||
const radioStyle = {
|
||
display: 'block',
|
||
height: '30px',
|
||
lineHeight: '30px',
|
||
}
|
||
const helper = useCallback(
|
||
(label, name, rules, widget, isRequired = true) => (
|
||
<React.Fragment>
|
||
<span className={isRequired ? "lables must ": "lables"}>{label}</span>
|
||
<Form.Item>
|
||
{getFieldDecorator(name, { rules, validateFirst: true })(widget)}
|
||
</Form.Item>
|
||
</React.Fragment>
|
||
),
|
||
[]
|
||
);
|
||
|
||
// 获取上传的图片
|
||
function getImage(image){
|
||
setImage(image);
|
||
setImageFlag(false);
|
||
}
|
||
|
||
// 创建组织
|
||
function createOrganize(){
|
||
validateFields((error,values)=>{
|
||
if(!error){
|
||
if(!image){
|
||
setImageFlag(true);
|
||
return;
|
||
}
|
||
const url = `/organizations.json`;
|
||
axios.post(url,{
|
||
...values,image
|
||
}).then(result=>{
|
||
if(result && result.data){
|
||
showNotification("组织创建成功！");
|
||
history.push(`/organize/${result.data.name}`);
|
||
}
|
||
}).catch(error=>{})
|
||
}
|
||
})
|
||
}
|
||
|
||
return(
|
||
<div className="main">
|
||
<div className="teamBox">
|
||
<p className="teamBox-title">新建组织</p>
|
||
<Form className="teamBox-form">
|
||
{helper(
|
||
<span>组织名称：<span className="color-grey-8">(组织名称应该简单明了)</span></span>,
|
||
"name",
|
||
[{ required: true, message: "请输入组织名称" }],
|
||
<Input
|
||
placeholder="请输入组织名称"
|
||
/>
|
||
)}
|
||
{helper(
|
||
'组织描述',
|
||
"description",
|
||
[{ required: true, message: "请输入组织描述" }],
|
||
<Input.TextArea
|
||
autoSize={{ minRows: 3, maxRows: 5 }}
|
||
placeholder="请输入组织描述"
|
||
/>
|
||
)}
|
||
{helper(
|
||
'所在地区',
|
||
"location",
|
||
[],
|
||
<Input placeholder="请输入地址"/>,false
|
||
)}
|
||
{helper(
|
||
'可见性',
|
||
"visibility",
|
||
[{ required: true, message: "请选择可见性" }],
|
||
<Radio.Group name="exposure">
|
||
<Radio style={radioStyle} value="common" key={1}>公开</Radio>
|
||
<Radio style={radioStyle} value="limited" key={2}>受限<span className="color-grey-8">（仅对登录用户可见）</span></Radio>
|
||
<Radio style={radioStyle} value="privacy" key={3}>私有<span className="color-grey-8">（仅对组织成员可见）</span></Radio>
|
||
</Radio.Group>
|
||
)}
|
||
|
||
<p className="font-16 lables must">选择头像</p>
|
||
<UploadImage getImage={getImage}/>
|
||
{imageFlag && <p className="color-red" style={{marginTop:"-10px"}}>请上传头像</p> }
|
||
|
||
{helper(
|
||
'权限',
|
||
"repo_admin_change_team_access",
|
||
[],
|
||
<Checkbox value="1" key={1}>项目管理员可以添加或移除团队的访问权限</Checkbox>,false
|
||
)}
|
||
{helper(
|
||
<span>最大仓库数：<span className="color-grey-8">（设置为-1表示使用全局默认值）</span></span>,
|
||
"max_repo_creation",
|
||
[],
|
||
<InputNumber
|
||
placeholder="最大仓库数" style={{width:"100px"}}
|
||
/>,false
|
||
)}
|
||
</Form>
|
||
</div>
|
||
<p className="mt20">
|
||
<Button type="primary" className="mr30" onClick={createOrganize}>创建组织</Button>
|
||
<Button className="grey">取消</Button>
|
||
</p>
|
||
</div>
|
||
)
|
||
})
|
||
) |