forgeplus-react/src/forge/Divert/DivertModal.jsx

import React ,{ forwardRef, useEffect, useState } from 'react';
import { Modal , Form , Input , Radio , Select } from 'antd';
import SearchUser from '../Component/SearchUser';
import './Index.scss';
import Axios from 'axios';

const { Option } = Select;
function DivertModal({form , visible , onSuccess , onCancel,owner,repo}){
  const { getFieldDecorator, validateFields , setFieldsValue } = form;
  const [ cate , setCate ] = useState(0);
  const [ value , setValue ] = useState(undefined);
  
  const [ organizations , setOrganizations ] = useState(undefined);

  useEffect(()=>{
    setFieldsValue({goal:cate})
  },[])

  useEffect(()=>{
    if(owner && repo && visible===true){
      getTeam();
    }
    if(!visible){
      setFieldsValue({
        owner_name:undefined,
        identifier:undefined
      })
      setValue(undefined)
    }
  },[repo,owner,visible])

  function getTeam(){
    const url = `/${owner}/${repo}/applied_transfer_projects/organizations.json`;
    Axios.get(url).then(result=>{
      if(result){
        setOrganizations(result.data.organizations);
      }
    }).catch(error=>{})
  }

  // 确认转移
  function onOk(){
    validateFields((error,values)=>{
      if(!error){
        const url = `/${owner}/${repo}/applied_transfer_projects.json`;
        Axios.post(url,{
          ...values
        }).then(result=>{
          if(result){
            if(result.data.status === 0){
              onSuccess(result.data && result.data.owner);
            }else{
              onSuccess();
            }
          }

        }).catch(error=>{})
      }
    })
    
  }
  function changeType(e){
    setCate(e.target.value);
    setFieldsValue({
      owner_name:undefined
    })
  }

  function checkIdentifier(rule, value, callback){
    if(!value){
      callback();
    }
    if (repo && value !== repo) {
      callback("请输入当前项目的标识！");
    }
    callback();
  }

  const layout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 18 },
  };

  function getUser(id){
    setValue(id);
    setFieldsValue({
      owner_name:id
    })
  }
  return(
    <Modal 
      width="620px"
      visible={visible}
      title="转移仓库"
      onCancel={onCancel}
      onOk={onOk}
      okText="确认转移"
      cancelText={"取消"}
      centered
    >
      <div className="diverModal">
        {
          cate === 0 ?
          <ul className="descUl">
            <li>转移需对方确认接受，转移成功后你将被移出仓库，其他已有成员权限不变</li>
            <li>转移成功后，仓库的地址将变更至目标用户的命名空间下</li>
            <li>已有成员如需继续操作仓库，需更新本地仓库的remote，使之指向新的地址</li>
          </ul>
          :
          <ul className="descUl">
            <li>仓库仅可以转移到您具有管理权限的组织中</li>
            <li>涉及到仓库改名操作，请提前做好仓库备份并且在转移后对本地仓库的remote进行修改</li>
            <li>转移仓库到组织后，你和组织创建者/管理员同时拥有对该仓库的管理操作</li>
          </ul>
        }
        <Form {...layout} colon={false} layout={"horizontal"}>
          <Form.Item label="转移给:" style={{marginBottom:"0px"}}>
            {getFieldDecorator("goal",{
              rules:[]
            })(
              <Radio.Group onChange={changeType}>
                <Radio value={0}>个人</Radio>
                <Radio value={1}>组织</Radio>
              </Radio.Group>
            )}
          </Form.Item>
          {
            cate === 0 && 
            <Form.Item label=" ">
              {getFieldDecorator("owner_name",{
                rules:[{required:true,message:"请输入目标用户名"}]
              })(
                // <Input placeholder="请输入目标用户" autoComplete={"off"}/>
                <SearchUser getUser={getUser} width={"100%"} placeholder="请输入目标用户" value={value}/>
              )}
            </Form.Item>
          }
          {
            cate === 1 &&
            <Form.Item label=" ">
              {getFieldDecorator("owner_name",
                {rules:[{required:true,message:"请选择目标组织"}]}
              )(
                <Select placeholder="请选择目标组织" getPopupContainer={trigger => trigger.parentNode}>
                  {
                    organizations && organizations.length > 0 ?
                      organizations.map((i,k)=>{
                        return(
                          <Option value={i.name}>{i.nickname}</Option>
                        )
                      })
                    :""
                  }
                </Select>
              )}
            </Form.Item>
          }
          
          <Form.Item label="仓库标识:" style={{marginBottom:"0px"}}>
            {getFieldDecorator("identifier",
              {
                rules:[
                  {required:true,message:"请输入仓库标识！"},
                  {
                    validator:checkIdentifier
                  }
                ]
              }
            )(
              <Input placeholder="请输入仓库标识" autoComplete={"off"}/>
            )}
          </Form.Item>
          <span className="color-grey-9" style={{marginLeft:"120px"}}>请输入当前项目的标识：<span className="ml5 mr5 color-grey-3">{repo}</span>进行确认！</span>
        </Form>
      </div>
    </Modal>
  )
}
export default Form.create()(forwardRef(DivertModal));