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

import React from 'react';
import { Table , Popconfirm } from 'antd';
import { Link } from 'react-router-dom';

// const STATUS = {
//   running:"运行中",
//   failure:"未通过",
//   error:"未通过",
//   success:"已通过",
//   killed:"已撤销",
//   pending:"准备中"
// }
function turnbar(str){
  if(str && str.length>0 && str.indexOf("/")>-1){
    return str.replaceAll('/','%2F');
  }
  return str;
}
function renderTableStatus(status) {
  switch (status) {
    case "running":
      return (
        <span className="statusTag running">
          <i className="iconfont icon-yunhangzhong"></i>运行中
        </span>
      );
    case "failure": case 'error':
      return (
        <span className="statusTag failed">
          <i className="iconfont icon-weitongguo"></i>未通过
        </span>
      );
    case "success":
      return (
        <span className="statusTag pass">
          <i className="iconfont icon-yitongguo"></i>已通过
        </span>
      );
    case 'killed':
      return (
        <span className="statusTag killed">
          <i className="iconfont icon-weitongguo"></i>已撤销
        </span>
      );
    default :
      return (
        <span className="statusTag Preparing">
          <i className="iconfont icon-zhunbeizhong"></i>准备中
        </span>
      );
  }
}
function List({ list, operate , projectsId , owner , showModal , deleteFunc }){
  
  const columns = [
    {
      title:"流水线名称",
      dataIndex:"pipeline_name",
      key:1,
      ellipsis:true,
      render:(txt,item)=>{
        return(
          <span onDoubleClick={()=>showModal(txt,item.id,item.branch,item.event)} style={{display:"block",cursor:"pointer"}}>{txt}</span>
        )
      }
    },
    {
      title:"文件名称",
      dataIndex:"file_name",
      key:1,
      width:"15%",
      ellipsis:true,
      render:(value,item)=>{
        let v = turnbar(item.branch);
        return(
          <Link to={`/projects/${owner}/${projectsId}/tree/${v}/${value}`} className="color-blue">{value}</Link>
        )
      }
    },
    {
      title:"触发分支",
      dataIndex:"branch",
      key:1,
      width:"10%",
      ellipsis:true
    },
    {
      title:"触发事件",
      dataIndex:"event",
      key:1,
      width:"10%",
      ellipsis:true
    },
    {
      title:"最近构建时间",
      dataIndex:"last_build_time",
      key:1,
      width:"15%",
      ellipsis:true
    },
    {
      title:"最近构建状态",
      dataIndex:"pipeline_status",
      key:1,
      width:"12%",
      ellipsis:true,
      render:(txt)=>{
        return renderTableStatus(txt)
      }
    },
    {
      title:"操作",
      dataIndex:"operation",
      key:1,
      width:"21%",
      render:(txt,item)=>{
        return(
          <span>
            { operate ? 
              <Link to={`/projects/${owner}/${projectsId}/devops/dispose/${item.id}`} className="mr10 color-grey-6">
              <i className="iconfont icon-zaibianji font-13 mr3"></i>编辑</Link> :""
            }
            { operate ? 
              <Popconfirm title={"确定要删除此流水线？"} onConfirm={()=>deleteFunc(item.id)} okText="确定" cancelText={"取消"}>
                <a className="mr10 color-grey-6"><i className="iconfont icon-lajitong font-13 mr3"></i>删除</a>
              </Popconfirm>:""
            }
            <Link to={`/projects/${owner}/${projectsId}/devops/list/${item.branch}`} className="color-grey-6"><i className="iconfont icon-yunhang font-13 mr3"></i>查看运行记录</Link>
          </span>
        )
      }
    }
  ]
  return(
    <Table size="small" columns={columns} dataSource={list} rowKey={(row)=>row.id} pagination={false}></Table>
  )
}
export default List;