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

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


function Dispose(props){
  const [ info , setInfo ] = useState(undefined);
  const [ visible , setVisible ] = useState(false);
  const [ ymlValue , setYmlValue ] = useState("");
  const [ six , setSix ] = useState(undefined);
  const [ fileLanguage , setFileLanguage ] = useState(undefined);
  const [ first , setFirst ] = useState(false);

  let projectsId = props.match.params.projectsId; 

  useEffect(()=>{
    if(projectsId){
      const url = '/dev_ops/builds/get_trustie_pipeline.json';
      axios.get(url,{
        params:{
          project_id:projectsId
        }
      }).then(result=>{
        if(result && result.data.content){
          setInfo(result.data);
          setYmlValue(result.data.content);
          setFirst(true);
        }else{
          setFirst(false);
        }
      }).catch(error=>{
        console.log(error);
      })
    }
  },[])

  useEffect(()=>{
    const url = '/dev_ops/languages/common.json';
    axios.get(url).then(result=>{
      if(result){
        setSix(result.data);
      }
    }).catch(error=>{
      console.log(error);
    })
  },[])

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

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

  // 确定提交
  function submit(){
    let url = '';
    let params = {
      branch: "master",
      content:ymlValue,
      filepath:info && info.name,
      message:''
    }
    if(first){
      // 为true，则是编辑否则是新建
      url = `/repositories/${projectsId}/update_file.json`;
      axios.put(url,{
        ...params,
        sha:info && info.sha
      }).then(result=>{
        if(result){
          setVisible(true);
        }
      }).catch(error=>{
        console.log(error);
      })
    }else{
      url = `/repositories/${projectsId}/create_file.json`;
      axios.post(url,params).then(result=>{
        if(result){
          setVisible(true);
        }
      }).catch(error=>{
        console.log(error);
      })
    }
  }
  function suresubmit(){
    props.history.push(`/projects/${projectsId}/ops/list`);
  }
  
  return(
    <React.Fragment>
      <Modals visible={visible} closeFunc={(flag)=>setVisible(flag)} sureFunc={suresubmit}></Modals>
      <p>编程语言：</p>
      {
        six &&
        <ul className="language">
          {
            six && six.map((item,key)=>{
              return(
                key < 6 ? <li><img alt="" src={item.cover_url} /></li> : ""
              )
            })
          }
        </ul>
      }
      <div className="mt20 mb20">
        <FileLanguage language={fileLanguage} select_language={select_language}/>
      </div>
      <p>配置脚本：</p>
      <div className="editorBody">
        <p className="editorHead">
          <span>{info && info.name}</span>
          <a><i className="iconfont icon-bianji6 font-14"></i></a>
        </p>
        <Editor
          height="300px"
          language={"java"}
          theme={"vs-grey"}
          defaultValue="请输入内容"
          value={ymlValue}
          options={"editor_options"}
          onChange={changeEditor}
        ></Editor>
      </div>
      <Blueback onClick={submit}>确定提交</Blueback>
    </React.Fragment>
  )
}
export default Dispose;