forgeplus-react/src/forge/DevOps/MouldNew.jsx

import React , { useImperativeHandle , useState , forwardRef , useCallback } from 'react';
import { Form , Modal , Input , Select , Spin } from 'antd';
import Editor from './Dispose/Editors';
import axios from 'axios';

const { Option } = Select;
const TYPE = ["Java","C","C++","Python","Go","Ruby","R","PHP",
      "Perl","Node","Docker","Rust","Swift","Erlang","Other"]

function MouldNew({ form , visible , onCancel , onOk  }, ref){
  const [value , setValue ] = useState(undefined);
  const [isSpin , setIsSpin ] = useState(false);
  const [valueFlag , setValueFlag ] = useState(false);
  const [ id , setId ] = useState(false);
  const [ buildFlag , setBuildFlag ] = useState(false);

  const { getFieldDecorator, validateFields , setFieldsValue } = form;
  
  useImperativeHandle(ref, () => ({
    setEditInfo: (info) => {
      if(info){
        if(info.stage_type === "build"){
          setBuildFlag(true);
        }else{
          removeCate();
        }
        setFieldsValue({
          ...info
        })
        setValue(info.content);
        setId(info.id);
      }else{
        removeCate();
        clear();
        setId(undefined);
      }
    }
  }))

  const helper = useCallback(
    (label, name, rules, widget, className, isRequired,flag) => (
      <Form.Item label={label} className={className}>
        {getFieldDecorator(name,  { rules, validateFirst: true , valuePropName:flag ? "checked":"value" })(widget)}
      </Form.Item>
    ),
    []
  );
  function changeContent(v){
    if(v){
      setValue(v);
      setValueFlag(false);
    }
  }
  function cancel(){
    clear();
    onCancel();
  }
  function sure(){
    if(!value){
      setValueFlag(true);
      return;
    }
    validateFields((error,values)=>{
      if(!error){
        setIsSpin(true);
        const url = `/ci/templates.json`;
        axios.post(url,{
          ...values,id,content:value
        }).then(result=>{
          if(result && result.data){
            setIsSpin(false);
            cancel();
            onOk();
          }
        }).catch(error=>{})
      }
    })
  }
  function clear(){
    setFieldsValue({
      stage_type:"init",
      template_name:undefined,
      category:"Java",
    })
    setValue("");
    setValueFlag(false);
  }

  function changeStage(e){
    if(e === "build"){
      setBuildFlag(true);
    }else{
      removeCate();
    }
  }

  function removeCate(){
    setBuildFlag(false);
    setFieldsValue({
      category:""
    })
  }
  return(
    <Modal 
      visible={visible} 
      width="500px"
      title={"新建/编辑模板"}
      onCancel={cancel}
      onOk={sure}
      centered={true}
    >
      <Spin spinning={isSpin}>
        <Form layout={"inline"}>
          {helper(
            "所属阶段",
            "stage_type",
            [{required:true,message:"请选择所属阶段"}],
            <Select placeholder="请选择所属阶段" style={{width:"350px"}} onChange={(e)=>{changeStage(e)}}>
              <Option value="init">初始化</Option>
              <Option value="build">编译构建</Option>
              <Option value="deploy">部署</Option>
              <Option value="customize">其他</Option>
            </Select>
          )}
          {helper(
            "模板名称",
            "template_name",
            [{required:true,message:"请输入模板名称"}],
            <Input placeholder="请输入模板名称" style={{width:"350px"}}/>
          )}
          {helper(
            "模板分类",
            "category",
            [{required:buildFlag,message:"请选择模板分类"}],
            <Select placeholder="请选择模板分类" style={{width:"350px"}}>
              {
                TYPE.map((item,key)=>{
                  return(
                    <Option value={item}>{item}</Option>
                  )
                })
              }
            </Select>,buildFlag===true ? "" :"hide"
          )}
          <div style={{display:'flex',justifyContent:"flex-start"}}>
            <span><span className="color-red">* </span>模板内容：</span>
            <div>
              <div className="editorPanel">
                <Editor Numbers={"off"} width={"350px"} value={value} height="200px" theme="vs-grey" onChange={changeContent}/>
              </div>
              { valueFlag && <span className="color-red">请输入模板内容</span>}
            </div>
          </div>
        </Form>
      </Spin>
    </Modal>
  )
}
export default Form.create()(forwardRef(MouldNew));