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

import React , { useState , useEffect } from 'react';
import { Spin } from 'antd';
import { Blueback } from '../Component/layout';
import Editor from "react-monaco-editor";
import Modals from './DisposeModal';
import FileLanguage from '../Component/OpsFileLanguage';
import List from './Dispose/List';
import axios from 'axios';

function Dispose(props){
  const [ spining , setSpining ] = useState(true);
  const [ info , setInfo ] = useState('.trustie-pipeline.yml');
  const [ visible , setVisible ] = useState(false);
  const [ ymlValue , setYmlValue ] = useState("");
  const [ sha , setSha ] = useState(undefined);
  const [ fileLanguage , setFileLanguage ] = useState(undefined);
  const [ first , setFirst ] = useState(false);

  const [ list , setList ] = useState(undefined);

  useEffect(()=>{
    let l = [
      {name:"流水线名字",fileName:"filename.jpg",time:"2021-01-06",status:"运行中"}
    ]
    setList(l);
  },[])
  

  let projectsId = props.match.params.projectsId; 
  let owner = props.match.params.owner; 
  useEffect(()=>{
    if(projectsId){
      const url = `/${owner}/${projectsId}/get_trustie_pipeline.json`;
      axios.get(url,{
        params:{
          project_id:projectsId
        }
      }).then(result=>{
        if(result && result.data.content){
          setInfo(result.data.name);
          setYmlValue(result.data.content);
          setFirst(true);
          setSha(result.data.sha);
        }else{
          setFirst(false);
        }
        setSpining(false);
      }).catch(error=>{
        console.log(error);
      })
    }
  },[projectsId])

  // 修改文件内容
  function changeEditor(value){
    setYmlValue(value);
  }

  // 切换语言
  function select_language(value,array){
    setFileLanguage(value);
    setYmlValue( array && array.content);
  }

  // 确定提交
  function submit(){
    let url = '';
    const { defaultBranch } = props;
    let params = {
      branch: defaultBranch,
      content:ymlValue,
      filepath:info,
      message:''
    }
    if(first){
      // 为true，则是编辑否则是新建
      url = `/${owner}/${projectsId}/update_trustie_pipeline.json`;
      axios.put(url,{
        ...params,
        sha
      }).then(result=>{
        if(result){
          setVisible(true);
        }
      }).catch(error=>{
        console.log(error);
      })
    }else{
      url = `/${owner}/${projectsId}/create_file.json`;
      axios.post(url,params).then(result=>{
        if(result){
          setVisible(true);
        }
      }).catch(error=>{
        console.log(error);
      })
    }
  }
  function suresubmit(){
    setVisible(false);
    props.history.push(`/projects/${owner}/${projectsId}/devops/list`);
  }

  
  return(
    <Spin spinning={spining}>
      <Modals visible={visible} closeFunc={(flag)=>setVisible(flag)} sureFunc={suresubmit}></Modals>
      <p>编程语言：</p>
      
      <div className="mt20 mb20">
        <FileLanguage language={fileLanguage} select_language={select_language}/>
      </div>
      <p>配置脚本：</p>
      <div className="editorBody">
        <p className="editorHead">{info}</p>
        <Editor
          height="300px"
          language={"yml"}
          theme={"vs-grey"}
          defaultValue="请输入内容"
          value={ymlValue}
          options={"editor_options"}
          onChange={changeEditor}
        ></Editor>
      </div>
      <Blueback onClick={submit}>确定提交</Blueback>
      <List list={list}/>
    </Spin>
  )
}
export default Dispose;