forgeplus-react/src/forge/Team/Group/SettingCommon.jsx

import React, { forwardRef , useCallback , useEffect, useState } from 'react';
import { Form , Input , Radio ,Checkbox , Divider , Button } from 'antd';
import { WhiteBack , FlexAJ } from '../../Component/layout';
import Title from '../../Component/Title';
import styled from 'styled-components';
import UploadImage from '../Component/UploadImage';
import axios from 'axios';
import { getImageUrl } from 'educoder';
const TextArea = Input.TextArea;

const Div = styled.div`{
  padding:20px 30px;
}`
const radioStyle = {
  display: 'block',
  height: '30px',
  lineHeight: '30px',
};
export default Form.create()(
  forwardRef(({ form , organizeDetail , showNotification , history , current_user })=>{
    const [ image , setImage ] = useState(undefined);
    const [ imageFlag , setImageFlag ] = useState(false);
    const [ password , setPassword ] = useState(undefined);
    const [ passwordFlag , setPasswordFlag ] = useState(false);
    const { getFieldDecorator , validateFields , setFieldsValue } = form;

    useEffect(()=>{
      if(organizeDetail){
        setFieldsValue({
          ...organizeDetail
        })
        setImage(organizeDetail.avatar_url);
      }
    },[organizeDetail])

    const helper = useCallback(
      (label, name, rules, widget , isRequired , flag ) => (
        <div>
          <span className={isRequired?"required":""}>{label}</span>
          <Form.Item>
            {getFieldDecorator(name, { rules, validateFirst: true , valuePropName:flag ? "checked":"value"  })(widget)}
          </Form.Item>
        </div>
      ),
      []
    );

    // 更新
    function updateDetail(){
      validateFields((error,values)=>{
        if(!error){
          const url = `/organizations/${organizeDetail.id}.json`;
          axios.patch(url,{
            ...values,image:imageFlag ? image : undefined
          }).then(result=>{
            if(result && result.data){
              showNotification("组织信息更新成功！");
              history.push(`/organize/${values.name}/setting`);
            }
          }).catch(error=>{})
        }
      })
    }
    function getImage(image){
      setImageFlag(true);
      setImage(image);
    }

    // 删除组织
    function deleteOrganize(){
      if(!password){
        setPasswordFlag(true);
        return
      }else{
        setPasswordFlag(false);
        const url = `/organizations/${organizeDetail.id}.json`;
        axios.delete(url,{
          params:{ password }
        }).then(result=>{
          if(result && result.data){
            // 删除后跳转到个人中心的组织页面
            history.push(`/users/${current_user && current_user.login}/organizes`);
          }
        })
      }
    }
    return(
      <div>
        <WhiteBack>
          <Title primary>基本设置</Title>
          <Div>
            <Form>
              {helper(
                "团队名称：",
                "name",
                [{ required: true, message: "请输入团队名称：" }],
                <Input placeholder="请输入团队名称：" />,true
              )}
              {helper(
                "团队描述：",
                "description",
                [],
                <TextArea placeholder="请输入团队描述团队的目的或作用" />
              )}
              {helper(
                '项目权限：',
                "visibility",
                [],
                <Radio.Group>
                  <Radio value="common" style={radioStyle}>指定项目 <span className="">(团队成员将只能访问添加到团队的项目。 选择此项 将不会 自动删除已经添加的项目)</span></Radio>
                  <Radio value="limited" style={radioStyle}>所有项目<span>(团队可以访问所有项目。选择此选项将 添加所有现有的 项目到指定团队)</span></Radio>
                  <Radio value="privacy" style={radioStyle}>新建项目<span>(成员可以在组织中新建项目。创建者将自动获得新建的项目的管理员权限。)</span></Radio>
                </Radio.Group>
              )}
              {helper(
                '权限：',
                "repo_admin_change_team_access",
                [],
                <Radio.Group>
                  <Radio value="common" style={radioStyle}>读取权限 <span className="">(成员可以查看和克隆团队项目)</span></Radio>
                  <Radio value="limited" style={radioStyle}>写入权限<span>(成员可以查看和推送提交到团队项目)</span></Radio>
                  <Radio value="privacy" style={radioStyle}>管理员权限<span>(成员可以拉取和推送到团队项目同时可以添加协作者)</span></Radio>
                </Radio.Group>
              )}
              <Divider/>
              {helper(
                '允许访问项目单元：',
                "max_repo_creation",
                [],
                <Input value="-1" style={{width:"350px"}}/>
              )}
              <p>选择头像:</p>
              <UploadImage url={getImageUrl(`images/${image}`)} getImage={getImage}/>
              <Button type={"primary"} onClick={updateDetail}>更新仓库设置</Button>
            </Form>
          </Div>
        </WhiteBack>
      </div>
    )
  })
)