forge-工作流配置页改版-分支

src/forge/DevOps/Dispose.jsx

@@ -4,9 +4,9 @@ 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');
@@ -16,6 +16,16 @@ function Dispose(props){
   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(()=>{
@@ -90,6 +100,7 @@ function Dispose(props){
     setVisible(false);
     props.history.push(`/projects/${owner}/${projectsId}/devops/list`);
   }
+
   
   return(
     <Spin spinning={spining}>
@@ -113,6 +124,7 @@ function Dispose(props){
         ></Editor>
       </div>
       <Blueback onClick={submit}>确定提交</Blueback>
+      <List list={list}/>
     </Spin>
   )
 }

src/forge/DevOps/Dispose/List.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Table } from 'antd';
+
+function List({list}){
+
+  const columns = [
+    {
+      title:"流水线名称",
+      dataIndex:"name",
+      key:1,
+      width:"20%",
+      ellipsis:true
+    },
+    {
+      title:"文件名称",
+      dataIndex:"fileName",
+      key:1,
+      width:"17%",
+      ellipsis:true
+    },
+    {
+      title:"时间",
+      dataIndex:"time",
+      key:1,
+      width:"18%",
+      ellipsis:true
+    },
+    {
+      title:"状态",
+      dataIndex:"status",
+      key:1,
+      width:"15%",
+      ellipsis:true
+    },
+    {
+      title:"操作",
+      dataIndex:"operation",
+      key:1,
+      width:"30%",
+      render:(txt,item)=>{
+        return(
+          <span>
+            <a className="color-grey-6"><i className="iconfont iconzaibianji font-13 mr3"></i>编辑</a>
+            <a className="ml10 color-grey-6"><i className="iconfont iconlajitong font-13 mr3"></i>删除</a>
+            <a className="ml10 color-grey-6"><i className="iconfont iconyunhang font-13 mr3"></i>运行</a>
+            <a className="ml10 color-grey-6">查看运行记录</a>
+          </span>
+        )
+      }
+    }
+  ]
+  return(
+    <Table size="small" columns={columns} dataSource={list} rowKey={(row)=>row.id}></Table>
+  )
+}
+export default List;