forgeplus-react/src/forge/Information/Pages/apply.jsx

import React, { useEffect } from 'react';
import { Form , Input , Row , Col, Button } from 'antd';
import '../index.scss';
import { postCreateZone } from '../api';
import axios from 'axios';
 
const { TextArea } = Input;

const phonereg = /^([1][3456789])\d{9}$/
function Apply(props){
  const { form , current_user } = props;
  const { getFieldDecorator , validateFields } = form;
  useEffect(()=>{
    document.title = '申请创建专区';
  },[])

  useEffect(()=>{
    if(!(current_user && current_user.login)){
      props.history.push("/403");
    }
  },[current_user])

  function submitFunc(){
    validateFields((error,values)=>{
      if(!error){
        const zoneApplication = {...values};
        postCreateZone(zoneApplication).then(response=>{
          if(response && response.data && response.data.code===200){
            props.showNotification("您的专区申请已提交，请耐心等待管理员与您联系!");
            setTimeout(() => {
              window.location.href="/";
            }, 1000);
          }
        }).catch(error=>{})
      }
    })
    
  }

  function checkPhone(rule, value, callback){
    if(!value){
      callback();
    }
    if(!phonereg.test(value)){
      callback("请输入正确的手机号码");
    }
    callback();
  }

  function checkId(rule,value,callback){
    value ? axios.post(`/accounts/check_keywords`, {
      text:value
    }).then(response => {
      if(response && response.data.data===false){
        callback("与系统标识重复，请更改标识");
      }
      callback();
    }):callback();
  }
  


  return(
    <div className="applyBox">
      <div className="applyContent">
        <p className="apply-t">申请创建专区</p>
        <div className="apply-tips">
          <h5>申请说明：</h5>
          <p>1、如果您想要创建自己的专区，请填写下方页面中的信息来提交专区申请。</p>
          <p>2、管理员在收到您的专区申请后，将会通过您提供的联系方式与您进行沟通，请您留意查收信息。</p>
          <p>3、如果您的专区建设情况出色，希望在官方专区列表中展示，请发送邮件至官方邮箱 gitlink@ccf.org.cn，并在邮件中注明”推荐专区+您的专区链接”。经官方审核后，您的专区将会被推荐展示。</p>
        </div>
        <Form className="applyForm">
          <Form.Item
            label="专区名称"
          >
            {getFieldDecorator("name",{
              rules:[{required:true,message:"请输入专区名称"}]
            })(
              <Input placeholder="请输入专区名称" maxLength={50} style={{height:"36px"}}/>
            )}
          </Form.Item>
          <Form.Item
            label="专区介绍"
          >
            {getFieldDecorator("introduction",{
              rules:[{required:true,message:"请输入专区介绍"}]
            })(
              <TextArea placeholder="请输入专区介绍内容" maxLength={200} rows={5}/>
            )}
          </Form.Item>
          <Form.Item
            label="专区用途"
          >
            {getFieldDecorator("purpose",{
              rules:[]
            })(
              <TextArea placeholder="请输入专区用途内容" maxLength={200} rows={5}/>
            )}
          </Form.Item>

          <Row type="flex" justify="space-between">
            <Col span={11}>
              <Form.Item
              label="专区英文标识"
              >
                {getFieldDecorator("key",{
                  rules:[
                    // { required: true,message:"请输入专区域名英文标识" },
                    { pattern: /^[a-zA-Z][a-zA-Z0-9_-]{0,18}[a-zA-Z]$/, message: "长度2-20，只能包含数字、字母、下划线、中划线，必须以字母开头结尾"},
                    { validator:checkId }
                ],
                validateTrigger:"onBlur",
                validateFirst: true,
                })(
                  <Input placeholder="请输入专区域名标识，若未填写系统将根据专区名称自动生成" maxLength={20} style={{height:"36px"}}/>
                )}
              </Form.Item>
            </Col>
            <Col span={11}>
              <Form.Item
              label="联系人"
              >
                {getFieldDecorator("contactPerson",{
                  rules:[{required:true,message:"请输入联系人"}]
                })(
                  <Input placeholder="请输入联系人" maxLength={50} style={{height:"36px"}}/>
                )}
              </Form.Item>
            </Col>
          </Row>
          <Row type="flex" justify="space-between">
            <Col span={11}>
              <Form.Item
                label="联系人电话"
                >
                  {getFieldDecorator("contactPhone",{
                    rules:[
                      {required:true,message:"请输入联系人电话"},
                      {
                        validator: (rule, value, callback) => { checkPhone(rule, value, callback) }
                      }
                    ],
                    validateTrigger:"onBlur",
                    validateFirst: true,
                  })(
                    <Input placeholder="请输入联系人电话" maxLength={50} style={{height:"36px"}}/>
                  )}
              </Form.Item>
            </Col>
            <Col span={11}>
              <Form.Item
              label="联系人微信号"
              >
                {getFieldDecorator("contactWechat",{
                  rules:[]
                })(
                  <Input placeholder="请输入联系人微信号" maxLength={50} style={{height:"36px"}}/>
                )}
              </Form.Item>
            </Col>
          </Row>
          
          <Form.Item
            label="希望平台提供的服务"
          >
            {getFieldDecorator("servicesProvided",{
              rules:[]
            })(
              <TextArea placeholder="请输入您希望平台提供的服务" maxLength={200} rows={5}/>
            )}
          </Form.Item>
          <div className="mt20">
            <Button style={{height:"36px",width:"100px"}} type="primary" onClick={submitFunc}>提交</Button>
            <Button style={{marginLeft:"30px",height:"36px",width:"100px"}} onClick={()=>{window.location.href="/"}}>取消</Button>
          </div>
        </Form>
      </div>
    </div>
  )
}
export default Form.create({ name: 'ApplyNew' })(Apply);