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

import React , { useEffect , useState , useRef } from 'react';
import { Banner , Blueback , FlexAJ } from '../Component/layout';
import { Input , Table ,Pagination , Select , Popconfirm } from 'antd';
import { Link } from 'react-router-dom'
import styled from 'styled-components';
import axios from 'axios';
import New from './MouldNew';

const { Option } = Select;

const Div = styled.div`{
  padding:24px 30px;
  min-height:420px;
}`;
const STAGE = [
  {stage_name:"所有",stage_type:"all"},
  {stage_name:"初始化",stage_type:"init"},
  {stage_name:"编译构建",stage_type:"build"},
  {stage_name:"部署",stage_type:"deploy"},
  {stage_name:"其他",stage_type:"customize"}
]
const limit = 15;
function Mould(props){
  const [ visible ,setVisible ] = useState(false);
  const [ list ,setList ] = useState(undefined);
  const [ page ,setPage ] = useState(1);
  const [ totalCount ,setTotalCount ] = useState(0);
  const [ stageType ,setStageType ] = useState("all");
  const [ search ,setSearch ] = useState(undefined);
  const childRef = useRef();
  let projectsId = props.match.params.projectsId; 
  let owner = props.match.params.owner; 
  useEffect(()=>{
    Init(page,stageType);
  },[page,stageType])

  function Init(page,stageType,searchvalue){
    const url = `/ci/templates/list.json`;
    axios.get(url,{
      params:{
        page,limit,stage_type:stageType,name:searchvalue
      }
    }).then(result=>{
      if(result && result.data){
        setList(result.data.templates);
        setTotalCount(result.data.total_count);
      }
    }).catch(error=>{})
  }

  const columns=[
    {
      title:"名称",
      dataIndex:"template_name",
      key:1,
      ellipsis:true
    },
    {
      title:"所属阶段",
      dataIndex:"stage_type",
      key:2,
      ellipsis:true,
      render:(txt,item)=>{
        let i = STAGE.filter(item=>item.stage_type === txt);
        return i && i.length>0 && i[0].stage_name
      }
    },
    {
      title:"模板类型",
      dataIndex:"category",
      key:3,
      ellipsis:true
    },
    {
      title:"操作",
      dataIndex:"operation",
      key:4,
      ellipsis:true,
      render:(txt,item)=>{
        return(
          <span>
            <a className="mr10 color-grey-6" onClick={()=>editMouldFunc(item)}><i className="iconfont icon-zaibianji font-13 mr3"></i>编辑</a>
            <Popconfirm title={"确定要删除此模板？"} onConfirm={()=>deleteMouldFunc(item.id)} okText="确定" cancelText={"取消"}>
              <a className="mr10 color-grey-6"><i className="iconfont icon-lajitong font-13 mr3"></i>删除</a>
            </Popconfirm>
          </span>
        )
      }
    }
  ]

  // 编辑模板
  function editMouldFunc(item){
    if (childRef.current) {
      childRef.current.setEditInfo(item);
    }
    setVisible(true);
  }

  // 删除模板
  function deleteMouldFunc(id){
    const url = `/ci/templates/${id}.json`;
    axios.delete(url).then(result=>{
      if(result && result.data){
        props.showNotification("模板删除成功！");
        Init(page,stageType,search);
      }
    })
  }

  function searchValue(){
    Init(page,stageType,search);
  }

  function newMouldFunc(){
    if (childRef.current) {
      childRef.current.setEditInfo(undefined);
    }
    setVisible(true);
  }

  function onOk(){
    Init(page,stageType);
  }
  return(
    <div>
      <New wrappedComponentRef={(f) => childRef.current = f} ref={childRef} visible={visible} onCancel={()=>setVisible(false)} onOk={onOk}></New>
      <Banner>
        <FlexAJ><span>工作流 - 模板管理</span><Link to={`/${owner}/${projectsId}/devops`} className="font-14 color-grey-9">返回</Link></FlexAJ>
      </Banner>
      <Div className="disposeList">
        <FlexAJ>
          <Blueback onClick={newMouldFunc}>新建模板</Blueback>
          <FlexAJ>
            <span className="mr10">阶段：</span>
            <Select onChange={e=>setStageType(e)} value={stageType} style={{width:"180px"}}>
              {
                STAGE.map((item,key)=>{
                  return(
                    <Option value={item.stage_type}>{item.stage_name}</Option>
                  )
                })
              }
            </Select>
            <Input placeholder="请输入模板名称" value={search} onChange={(e)=>setSearch(e.target.value)} allowClear style={{width:"160px",marginLeft:"15px"}}/>
            <Blueback className="ml15" onClick={searchValue}>搜索</Blueback>
          </FlexAJ>
        </FlexAJ>
        <Table className="mt20" size="small" columns={columns} dataSource={list} rowKey={(row)=>row.id} pagination={false}></Table>
        {
          totalCount > limit &&
          <div className="mt20 pb20" style={{textAlign:'center'}}>
            <Pagination simple current={page} pageSize={limit} total={totalCount} onChange={(page)=>setPage(page)}/>
          </div>
        }
      </Div>
    </div>
  )
}
export default Mould;