forked from Gitlink/forgeplus-react
131 lines
3.4 KiB
JavaScript
131 lines
3.4 KiB
JavaScript
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; |