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

import React , { useState } from 'react';
import { FlexAJ , Blueback } from '../Component/layout';
import { Table , Pagination } from 'antd';
import styled from 'styled-components';
const STATUS = [
  {name:"所有",value:"1"},
  {name:"准备中",value:"2"},
  {name:"运行中",value:"3"},
  {name:"已完成",value:"4"}
]
const LIMIT = 15;
const datasource = [
  {
    status:2,
    author:"caishi",
    message:{
      branch:"master",
      sha:"8b3476f5",
      image:"https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2034740944,4251903193&fm=26&gp=0.jpg",
      message:"将分支“ 221063-improve-buy-ci-minutes-link”"
    },
    begin:"2020-07-08",
    run:"20s"
  },
  {
    status:1,
    author:"caishi",
    message:{
      branch:"master",
      sha:"8b3476f5",
      image:"https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2034740944,4251903193&fm=26&gp=0.jpg",
      message:"将分支“ 221063-improve-buy-ci-minutes-link”"
    },
    begin:"2020-07-08",
    run:""
  }
];

const Img = styled.img`{
  border-radius:50%;
  margin-rigth:10px;
  width:25px;
  height:25px;
}`
export default (()=>{
  const [ status ,setStatus ] = useState("1");
  const [ page ,setPage ] = useState(1);
  const [ total ,setTotal ] = useState(10);


  function ChangeStatus(value){
    setStatus(value)
  }
  // 切换分页
  function ChangePage(page){
    setPage(page)
  }
  function renderStatus() {
    return(
      <ul className="listNav">
        {
          STATUS.map((item,key)=>{
            return <li onClick={()=>ChangeStatus(item.value)} className={ status === item.value ? "active":""}>{item.name}</li>            
          })
        }
      </ul>
    )
  }
  function renderStatusBtn(status){
    if(status >1 && status <=3){
      return(
        <a className="color-blue">重新构建</a>
      )
    }else{
      return(
        <a className="color-red">撤销构建</a>
      )
    }
  }
  function renderTableStatus (status){
    switch (status){
      case 1:
        return(
          <span className="statusTag running"><i className="iconfont icon-yunhangzhong"></i>运行中</span>
        );
      case 2:
        return (
          <span className="statusTag failed"><i className="iconfont icon-weitongguo"></i>未通过</span>
        );
      case 3:
        return (
          <span className="statusTag pass"><i className="iconfont icon-yitongguo"></i>已通过</span>
        );
      default:
        return (
          <span className="statusTag Preparing"><i className="iconfont icon-zhunbeizhong"></i>准备中</span>
        );
    }
  }
  const column = [
    {
      title:'序号',
      dataIndex:"No",
      key:"No",
      width:"8%",
      render:(item,value,key)=>{
        return(
          <span>#{key+1}</span>
        )
      }
    },
    {
      title:'状态',
      dataIndex:"status",
      key:"status",
      width:"12%",
      render:(value,item,key)=>{
        return(renderTableStatus(value))
      }
    },
    {
      title:'构建人',
      dataIndex:"author",
      key:"author",
      width:"12%",
      align:"center"
    },
    {
      title:'提交信息',
      dataIndex:"message",
      key:"message",
      width:"30%",
      render:(value,item,key)=>{
        let meg = item.message;
        return ( 
          <React.Fragment>
            <div>
              { meg.branch && <span className="mr10 color-grey-8"><i className="iconfont icon-fenzhi1 font-16 mr5"></i>分支{meg.branch}</span>}
              { meg.sha && <span className="color-orange">{meg.sha}</span>}
            </div>
            <FlexAJ>
              <Img src={meg.image} />
              <div className="task-hide" style={{maxWidth:"300px"}}>{meg.message}</div>
            </FlexAJ>
          </React.Fragment>
        )
      }
    },
    {
      title:'开始时间',
      dataIndex:"begin",
      key:"begin",
      width:"15%",
      render:(value,item,key)=>{
        return ( 
        <span>{value || "--"}</span>
        )
      }
    },
    {
      title:'运行时间',
      dataIndex:"run",
      key:"run",
      width:"15%",
      render:(value,item,key)=>{
        return ( 
        <span>{value || "--"}</span>
        )
      }
    },
    {
      title:'操作',
      dataIndex:"operation",
      key:"operation",
      render:(value,item,key)=>{
        return(renderStatusBtn(item.status));
      }
    }
  ]
  return(
    <div className="listPart">
      <FlexAJ>
        {renderStatus()}
        <span>
          <Blueback className="mr30">手动创建</Blueback>
          <span className="mr30"><i className="iconfont icon-fenzhi1 font-16 mr5 color-blue"></i>分支</span>
          <span><i className="iconfont icon-biaoqian3 font-16 mr5 color-blue"></i>标签</span>
        </span>
      </FlexAJ>
      <Table
        columns={column}
        className="normalTable"
        dataSource={datasource}
        pagination={false}
      ></Table>
      {
        total > LIMIT ?
        <div style={{textAlign:'center',margin:"30px 50px"}}>
          <Pagination showQuickJumper defaultCurrent={page} total={total} pageSize={LIMIT} onChange={ChangePage}></Pagination>
        </div>:""
      }
    </div>
  )
})