forgeplus-react/src/forge/DevOps/cardList/newModal.jsx

import React , { useState , useEffect } from 'react';
import { getProjectBranch, addPipelines, getTemplateList } from './api';
import './index.scss';
import { Modal , Form , Input, Select , Button, Divider } from 'antd';

const modalList = [
  {
    name: '空白模板',
    id: -1,
    nodes: [{ name: '请自定义您的流水线模板' }]
  },
]

const pipType = {
  all: 0,
  code: 1,
  image: 2
}

const { Option } = Select;


const New =({
  open,onCancel,form,match, onOk
}) => {

  const { getFieldDecorator } = form;
  const {owner, projectsId} = match.params;  
  // const [ loading, setLoading ] = useState(false);
  const [ pipelineType, setPipelineType ] = useState(pipType.code);
  const [ branchList, setBranchList] = useState([]);
  const [ templateList, setTemplateList ] = useState([]);
  const [ templateSelected, setTemplateSelected ] = useState(-1);
  
  let settings = JSON.parse(localStorage.chromesetting);
  let pipelineUrl = settings && settings.common.pipeline;

  useEffect(() => {
    if(open){      
      getTemplates();
      getBranchList()
    }
  }, [open]);

  function getTemplates(){
    // 获取流水线模板列表
    getTemplateList().then(res=>{
      
      if(res.templates){
        res.templates.map((item)=>{
          return item.nodes = JSON.parse(item.json).nodes
        })                
        setTemplateList(modalList.concat(res.templates));
      }
    })
  }

  function getBranchList () {
    getProjectBranch(owner, projectsId).then(res => {
      setBranchList(res)
    })
  }

  async function onSubmit() {
    await form.validateFields();    
    const { branch , pipeline_name, pipeline_type } = form.getFieldsValue();
    const params = {
      branch,pipeline_name, pipeline_type
    }    
    if (pipelineType === pipType.image) params.pipelineTemplateJson = templateSelected !== -1 ? getTemplateJson(templateSelected) : {nodes: [], edges: [], combos: []}
    addPipelines(owner, projectsId, params).then(res=>{
      if(res.id){
        form.resetFields();
        onOk()
        window.open(`${ pipelineUrl }/devops/${owner}/${projectsId}/${res.id}/edit`)
      }
    })
  }

  const getTemplateJson = (id) => {
    let json = {}
    for (let i = 0; i < templateList.length; i++) {
      const element = templateList[i];
      if (element.id === id) json = JSON.parse(element.json)
    }
    return json
  }

  function close() {
    form.resetFields();
    onCancel();
  }

  return(
    <Modal
      visible={open}
      width={"686px"}
      className="format-style"
      title={"新建流水线"}
      onCancel={close}
      footer={
        <div style={{textAlign:"center"}}>
          <Button style={{width:"90px"}} onClick={close}>取消</Button>
          <Button type={"primary"} className="ml25" onClick={onSubmit} style={{width:"90px"}}>保存</Button>
        </div>
      }
    >
      <Form layout={"vertical"}>
        
        <Form.Item label="流水线名称">
          {getFieldDecorator("pipeline_name",{
            rules:[{ required: true, message: '请输入流水线名称' }]
          })(
            <Input placeholder={"请输入流水线名称"} maxLength={50}/>
          )}
        </Form.Item>
        <Form.Item label="代码库分支">
          {getFieldDecorator("branch",{
            rules: [{ required: true, message: '请选择代码库分支' }]
          })(
            <Select 
              placeholder={"请选择代码库分支"}
              filterOption={(input, option) =>
                option.title.indexOf(input.toLowerCase()) >= 0
              }
              showSearch
              getPopupContainer={trigger => trigger.parentNode}
            >
              {
                branchList.map((item)=>{
                  return <Select.Option key={item.name} value={item.name} title={item.name}>
                    <span><i className="iconfont icon-a-fenzhi1 font14 mr5"/>{item.name}</span>
                  </Select.Option>
                })
              }
            </Select>
          )}
        </Form.Item>
        <Form.Item label="流水线类型">
          {getFieldDecorator("pipeline_type",{
            rules: [{ required: true, message: '请选择流水线类型' }]
          })(
            <Select 
              placeholder={"请选择流水线类型"}
              onChange={e => { setPipelineType(e) }}
            >
              <Option value={ pipType.code }>声明式流水线</Option>
              <Option value={ pipType.image }>图形化流水线</Option>
            </Select>
          )}
        </Form.Item>
        {
          pipelineType === pipType.image &&
          <Form.Item label="请选择流水线模板" >
            <div className='templateContainer'>
              {
                templateList.map(e => {
                  console.log('e.nodes', e.nodes);
                  
                  return <div className={`template ${ e.id === templateSelected ? 'templateSelected' : '' }`} onClick={()=>{
                    setTemplateSelected(e.id)
                  }}>
                    <span className='col0d0Text font16'><i className="iconfont icon-moban mr10 themeColorSpan font14"/>{e.name}</span>
                    <div className='mt15 nodes'>
                      {e.nodes && e.nodes.map((item, index)=>{
                        const nextItem = e.nodes[index+1]
                        return <React.Fragment>
                          <span className={`node mb10`}>{item.name}</span>
                          {nextItem && <Divider className='mb10' style={{marginTop: '0', minWidth: '45px', width: '45px', borderTop: '1px solid #B8C1CF', display: 'inline-flex'}}/>}
                        </React.Fragment>
                      })}
                    </div>
                  </div>
                })
              }
            </div>
          </Form.Item>
        }
      </Form>
    </Modal>
  )
}
export default Form.create()(New)