forgeplus-react/src/forge/Server/detectionModal.jsx

import React, { useState , forwardRef, useEffect } from 'react';
import { Modal , Form , Select } from 'antd';
import axios from 'axios';

function DetectionModal({form , visible , onCancel , onOk , projectsId, owner , relayCount , repeatId , repeatBranch }){
  const { getFieldDecorator, validateFields , setFieldsValue } = form;
  const [ check , setCheck ] =  useState(false);
  const [ branch , setBranch ] = useState("");
  const [ branchList , setBranchList ] = useState([]);

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

  useEffect(()=>{
    if(visible && owner && projectsId){
      const url = `/${owner}/${projectsId}/branches.json`;
      axios.get(url).then(result=>{
        if(result){
          setBranchList(result.data);
        }
      }).catch(error=>{})
    }
  },[owner,projectsId,visible])

  // 取消检测
  function onCancelFunc(){
    if(check) {
      setCheck(false);
    } else{
      onCancel();
    } 
  }

  // 开始检测
  function onOkFunc(){
    validateFields((error,values)=>{
      if(!error){
        setCheck(true);
        setBranch(values.branch);
        if(repeatId){
          // 重新扫描
          const url = `/traces/${owner}/${projectsId}/reload_task.json`;
          axios.get(url,{
            params:{
              project_id:repeatId,
              branch_name:repeatBranch
            }
          }).then(result=>{
            if(result){
              onOk();
            }
            setCheck(false);
          }).catch(error=>{})
        }else{
          // 新建分析
          const url = `/traces/${owner}/${projectsId}/tasks.json`;
          axios.post(url,{
            branch_name:values.branch
          }).then(result=>{
            if(result){
              onOk();
            }
            setCheck(false);
          }).catch(error=>{})
        }
      }
    })
  }
  return(
    <Modal
      visible={visible}
      title=""
      onCancel={onCancel}
      className="agreementModal"
      width="635px"
      footer={
        <div className="agreeBtn">
          <a onClick={onCancelFunc}>取消</a>
          { !check && relayCount !== 0 && <a className={"agree btnhover"} onClick={onOkFunc}>开始检测</a> }
        </div>
      }
    >
      <div>
        <div className="detectionAnimation">
          <ul className={check ? "animationUl action" : "animationUl" }>
            <li><img src={require('./img/1.png')} width="166px" alt=""/></li>
            <li><img src={require('./img/2.png')} width="136px" alt=""/></li>
            <li><img src={require('./img/3.png')} width="96px" alt=""/></li>
            <li><img src={require('./img/4.png')} width="96px" alt=""/></li>
            <li><img src={require('./img/5.png')} width="15px" alt=""/></li>
            <li><img src={require('./img/6.png')} width="25px" alt=""/></li>
            <li><img src={require('./img/7.png')} width="1px" alt=""/></li>
          </ul>
          {
            check ? 
            <p className="lastTimes">正在开启检测，请等待...</p>
            :
            <p className="lastTimes">剩余扫描次数<span>{relayCount}</span></p>
          }
        </div>
        <div className="formDiv">
          <Form {...layout}>
            {
              !check && !repeatBranch && 
              <Form.Item label="检测分支" colon={false} labelAlign={"left"}>
                {getFieldDecorator("branch",{
                  rules:[{required:true,message:"请选择要检测的分支"}]
                })(
                  <Select placeholder="请选择仓库分支" showSearch style={{width:"360px"}}>
                    {
                      branchList && branchList.length >0 ?
                      branchList.map((i,k)=>{
                        return(
                          <Select.Option value={i.name}>{i.name}</Select.Option>
                        )
                      })
                      :
                      <Select.Option value={""}>暂无分支</Select.Option>
                    }
                  </Select>
                )}
              </Form.Item>
            }
            <div className="checkInfos">
              {
                (check && branch) || repeatBranch && 
                <div>
                  <span>检测分支</span>
                  <p>{branch || repeatBranch}</p>
                </div>
              }
              <div>
                <span>检测类型</span>
                <p>快速-组件级</p>
              </div>
              <div>
                <span>检测参数</span>
                <div style={{flex:1}}>
                  <p>解析层级：2</p>
                  <p>最小解析文件行数：10</p>
                  <p>许可证检测类型：开源软件</p>
                  <span className="color-grey-6">文件相似阈值</span>
                  <ul>
                    <li>行数：20</li>
                    <li>相似比例：50%</li>
                  </ul>
                </div>
              </div>
            </div>
          </Form>
        </div>
      </div>
    </Modal>
  )
}
export default Form.create()(forwardRef(DetectionModal));