forgeplus-react/src/forge/Team/Setting/TeamSettingCommon.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 })=>{
    const [ image , setImage ] = useState(undefined);
    const [ imageFlag , setImageFlag ] = useState(false);
    const [ password , setPassword ] = useState(undefined);
    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(){

    }
    return(
      <div>
        <WhiteBack>
          <Title>基本设置</Title>
          <Div>
            <Form>
              {helper(
                "组织名称：",
                "name",
                [{ required: true, message: "请输入组织名称" }],
                <Input placeholder="请输入组织名称" />,true
              )}
              {helper(
                "组织描述：",
                "description",
                [],
                <TextArea placeholder="请输入组织名称" />
              )}
              {helper(
                "官方网站：",
                "website",
                [],
                <Input placeholder="请输入官方网站" />
              )}
              {helper(
                '所在地区：',
                "location",
                [],
                <Input placeholder="请输入城市"/>
              )}
              {helper(
                '可见性：',
                "visibility",
                [],
                <Radio.Group>
                  <Radio value="common" style={radioStyle}>公开</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",
                [],
                <Checkbox style={radioStyle}>仓库管理员可以添加或移除团队的访问权限</Checkbox>,false,true
              )}
              <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>
        <WhiteBack className="padding20 mt20">
          <div className="warningBox">
            <div className="warningTitle">删除当前组织</div>
            <div className="warningContent">
              <p className="font-16 mb15">删除操作会永久清除该组织的信息，并且不可恢复！</p>
              <FlexAJ>
                <div>
                  <span className="required">密码：</span>
                  <Input type="password" style={{width:"350px"}} value={password} onChange={(e)=>setPassword(e.target.value)}/>
                </div>
                <a className="warningDelete" onClick={deleteOrganize}>删除组织</a>
              </FlexAJ>
            </div>
          </div>
        </WhiteBack>
      </div>
    )
  })
)