forgeplus-react/src/forge/Settings/SpecialProject.jsx

import React , { useEffect , useState} from 'react';
import { Input , Table , Pagination, Button , Dropdown , Menu } from 'antd';
import { Banner , WhiteBack , AlignCenterBetween } from '../Component/layout';
import axios from 'axios';

const { Search } = Input;

const LIMIT = 15;
function SpecialProject(props){
  const [ page , setPage] = useState(1);
  const [ searchValue , SetSearchValue ] = useState(undefined);
  const [ total , setTotal ] = useState(0);
  const [ list , setList ] = useState(undefined);
  const [ status , setStatus ] = useState(undefined);
  const [ loading ,setLoading ] = useState(true);

  const { owner , projectsId} = props.match.params;
  const { project_id } = props;

  useEffect(()=>{
    if(project_id){
      setLoading(true);
      Init(searchValue, status);
    }
  },[page,project_id]);

  function Init(search,status){
    const url = `/apply_signatures.json`;
    axios.get(url,{
      params:{
        project_id,
        page,limit:LIMIT,search,status
      }
    }).then(result=>{
      setLoading(false);
      if(result){
        setList(result.data.apply_signatures);
        setTotal(result.data.total_count);
      }
    }).catch(error=>{})
  }

  function changePage(page){
    setLoading(true);
    setPage(page);
  }
  
  const column = [
    {
      dataIndex:"column",
      key:1,
      width:"12%",
      title:"序号",
      render:(txt,item,index)=>{
        return `${index+1}`
      }
    },
    {
      dataIndex:"name",
      key:2,
      title:"申请人",
      render:(text,item,m)=>{
        return item.user && <span className="task-hide" style={{maxWidth:"139px",display:"block"}}>{item.user.name}</span>
      }
    },
    {
      dataIndex:"email",
      key:2,
      title:"邮箱",
      width:"22%",
      render:(text,item,m)=>{
        return item.user && <span>{item.user.email}</span>
      }
    },
    {
      dataIndex:"attachment",
      key:3,
      title:"附件",
      width:"28%",
      render:(text,item,m)=>{
        return item.attachment && <a className="task-hide" style={{maxWidth:"173px",display:"block"}} href={`${item.attachment.path}`}>{item.attachment.filename}</a>
      }
    },
    {
      dataIndex:"operation",
      key:4,
      width:"18%",
      title:"操作",
      render:(text, item) =>{
        return(
          <React.Fragment>
          {
            item.status === "waiting" &&
            <span>
              <Button size="small" onClick={()=>operation(item.id,"unpassed")}>拒绝</Button>
              <Button size="small" onClick={()=>operation(item.id,"passed")} type={"primary"} className="ml20">同意</Button>
            </span>
          }
          {
            item.status === "unpassed" &&
            <span style={{color:"#ff041c"}}>已拒绝</span>
          }
          {
            item.status === "passed" &&
            <span style={{color:"#13b4f1"}}>已同意</span>
          }
          </React.Fragment>
        )
      }
    }
  ]
  // 拒绝&同意
  function operation(ids,s){
    setLoading(true);
    const url = `/apply_signatures/${ids}.json`;
    axios.put(url,{
      project_id:project_id,
      status:s
    }).then(result=>{
      setLoading(false);
      if(result){
        props.showNotification(`${s==="passed"?"同意":"拒绝"}此申请已操作成功!`);
        Init(searchValue,status);
      }
    }).catch(error=>{setLoading(false)})
  }

  function searchList(){
    setLoading(true);
    Init(searchValue,status);
  }

  const menu=(
    <Menu onClick={chooseStatus}>
      <Menu.Item key="all">全部</Menu.Item>
      <Menu.Item key="waiting">审核中</Menu.Item>
      <Menu.Item key="unpassed">已拒绝</Menu.Item>
      <Menu.Item key="passed">已同意</Menu.Item>
    </Menu>
  )

  function chooseStatus(e){
    setStatus(e.key);
    Init(searchValue, e.key);
  }

  
  return(
    <WhiteBack style={{minHeight:"500px"}}>
      <Banner>项目管理</Banner>
      <AlignCenterBetween style={{padding:"10px 20px",textAlign:"right"}}>
        <Search
          placeholder="请输入用户姓名或者邮箱搜索"
          allowClear
          enterButton="搜索"
          style={{width:400}}
          size="middle"
          value={searchValue}
          onChange={(e)=>SetSearchValue(e.target.value)}
          onSearch={searchList}
        />
        <Dropdown overlay={menu} placement="bottomRight">
          <span>
            <span style={{color:status ? "color-blue" : "color-grey-3"}}>{status ==="waiting"?"审核中":status==="unpassed"?"已拒绝":status==="passed"?"已同意":"全部"}</span>
            <i className="iconfont icon-xiajiantou color-grey-9 font-14 ml8"></i>
          </span>
        </Dropdown>
      </AlignCenterBetween>
      <Table 
      columns={column} 
      rowKey={(record) => record.id}
      pagination={false}
      dataSource={list}
      loading={loading}
      ></Table>
      {
        total > LIMIT &&
        <div className="center mt20 mb20">
          <Pagination simple current={page} total={total} pageSize={LIMIT} onChange={changePage}></Pagination>
        </div>  
      }
     
    </WhiteBack>
  )
}
export default SpecialProject;