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

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

function List({ list, permission , projectsId , owner , showModal , deleteFunc }){

  const columns = [
    {
      title:"流水线名称",
      dataIndex:"pipeline_name",
      key:1,
      width:"20%",
      ellipsis:true,
      render:(txt,item)=>{
        return(
          <span onDoubleClick={()=>showModal(txt,item.id)} style={{display:"block",cursor:"pointer"}}>{txt}</span>
        )
      }
    },
    {
      title:"文件名称",
      dataIndex:"file_name",
      key:1,
      width:"17%",
      className:"color-blue",
      ellipsis:true
    },
    {
      title:"时间",
      dataIndex:"created_at",
      key:1,
      width:"18%",
      ellipsis:true
    },
    {
      title:"操作",
      dataIndex:"operation",
      key:1,
      width:"30%",
      render:(txt,item)=>{
        return(
          <span>
            { permission !=="Reporter" && <Link to={`/projects/${owner}/${projectsId}/devops/dispose/${item.id}`} className="color-grey-6"><i className="iconfont iconzaibianji font-13 mr3"></i>编辑</Link> }
            { permission !=="Reporter" && 
              <Popconfirm title={"确定要删除此流水线？"} onConfirm={()=>deleteFunc(item.id)} okText="确定" cancelText={"取消"}>
                <a className="ml10 color-grey-6"><i className="iconfont iconlajitong font-13 mr3"></i>删除</a>
              </Popconfirm>
            }
            <Link to={`/projects/${owner}/${projectsId}/devops/list`} className="ml10 color-grey-6"><i className="iconfont iconyunhang font-13 mr3"></i>查看运行记录</Link>
          </span>
        )
      }
    }
  ]
  return(
    <Table size="small" columns={columns} dataSource={list} rowKey={(row)=>row.id} pagination={false}></Table>
  )
}
export default List;