forgeplus-react/src/forge/Settings/Audit.js

import React, { useEffect, useState } from 'react';
import { WhiteBack, FlexAJ } from '../Component/layout';
import { Table, Pagination, Popconfirm, Button, Modal, message, Input } from 'antd';
import Title from '../Component/Title';
import Search from '../Component/Search';
import styled from 'styled-components';
import { getImageUrl } from 'educoder';
import axios from 'axios';
import { Link } from 'react-router-dom';

const Img = styled.img`{
  width:30px;
  height:30px;
  border-radius:50%;
}`

const demoData = [
  {
    img: "images/avatars/User/g",
    name: "蔡世",
    email: "1149225589@qq.com",
    team: "caicaizi",
    role: "管理者",
    operation: "移除成员",
  }
]
export default ((props) => {
  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(15);
  const [total, setTotal] = useState(0);
  const [search, setSearch] = useState(undefined);
  const [data, setData] = useState(demoData);
  const [status, setStatus] = useState(1);

  useEffect(() => {
    getData();
  }, [])

  function getData(status, search, page) {
    const url = `/api/applied_projects.json`;
    axios.get(url, {
      params: {
        page, limit,
        keyword: search,
        status
      }
    }).then(result => {
      if (result && result.data) {
        setData(result.data.list);
        setTotal(result.data.count);
      }
    }).catch(error => { })
  }

  // 切换分页
  function ChangePage(page) {
    setPage(page);
    getData(status, search, page);
  }

  function verify(id, verifyStatus, reason) {
    const url = `/api/applied_projects/${id}/verify.json?status=${status}`;
    axios.post(url, {
      body: {
        verify_status: verifyStatus,
        status,
        reason
      }
    }).then(result => {
      if (result && result.data) {
        message.success("操作成功！");
      }
    }).catch(error => { })
  }

  const columns = [
    {
      title: '用户名',
      dataIndex: 'user_name',
      width: "15%",
      render: (item, record) => <span>{item}</span>
    },
    {
      title: '申请角色',
      dataIndex: 'applied_project',
      width: "10%",
      render: (value, item) => {
        return value
      }
    },
    {
      title: '学号',
      dataIndex: 'student_id',
      width: "10%",
      align: "left",
      render: (value) => {
        return value
      }
    },
    {
      title: '邮箱',
      dataIndex: 'mail',
      width: "10%",
      render: (value) => value
    },
    {
      title: '个人情况',
      dataIndex: 'remarks',
      width: "15%",
      render: (value) => value
    },
    {
      title: '上传附件',
      dataIndex: 'attachment_info',
      width: "10%",
      render: (value, record) => {
        if (record.attachment_info.id) {
          return <Button type='link' onClick={() => {
            // 构建下载链接
            const downloadUrl = `${record.attachment_info.url}`;
            // 创建一个 a 元素
            const a = document.createElement('a');
            // 设置 a 元素的 href 属性为下载链接
            a.href = downloadUrl;
            // 设置 a 元素的 download 属性，可根据实际情况设置文件名
            a.download = record.attachment_info.title || 'attachment';
            // 模拟点击 a 元素
            a.click();
            // 移除 a 元素
            document.body.removeChild(a);
          }}>下载</Button>
        } else {
          return '--'
        }
      }
    },
    {
      title: '拒绝原因',
      dataIndex: 'reason',
      width: "15%",
      render: (value) => value
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: "15%",
      render: (value, item) => {
        return (
          <div>
            <Button type='link' onClick={() => {
              Modal.confirm({
                title: '是否确认同意TA的加入？',
                okText: '确认',
                cancelText: '取消',
                onOk: () => {
                  verify(item.id, 'agree', '')
                },
              });
            }}>同意</Button>
            <Button type='link' className='ml10' onClick={() => {
              let rejectReason = '';
              Modal.confirm({
                title: '拒绝申请',
                icon: null,
                okText: '确认',
                width: 500,
                content: <div>
                  <div><span style={{ color: "#ff4d4f" }}>*</span><span>拒绝原因:</span></div>
                  <div><Input.TextArea placeholder='请输入拒绝原因' rows={3} maxLength={200} onChange={(event) => {
                    rejectReason = event.target.value;
                  }} /></div>
                </div>,
                cancelText: '取消',
                onOk: () => {
                  verify(item.id, 'reject', rejectReason)
                },
              })
            }}>拒绝</Button>
          </div>
        )
      }
    }
  ]

  return (
    <WhiteBack>
      <Title>
        <span>审核管理</span>
      </Title>
      <FlexAJ className="padding20-30">
        <Button size='large' type={status == 1 ? 'primary' : 'default'} onClick={() => {
          setStatus(1);
          getData(1, search)
        }}>待审核</Button>
        <Button size='large' type={status == 2 ? 'primary' : 'default'} className='ml10' onClick={() => {
          setStatus(2);
          getData(2, search)
        }}>已审核</Button>
        <div style={{ width: "580px" }}>
          <Search placeholder="搜索用户信息" onSearch={(value) => {
            setSearch(value)
            getData(status, value)
          }} />
        </div>
      </FlexAJ>
      <div className="pl30 pr30 pb30" style={{ minHeight: "400px" }}>
        <Table
          size="small"
          columns={columns}
          dataSource={data}
          pagination={false}
          className="teamMemberTable"
        ></Table>
        {
          total > limit ?
            <div className="edu-txt-center mt30 mb20">
              <Pagination simple current={page} total={total} pageSize={limit} onChange={ChangePage}></Pagination>
            </div>
            : ""
        }
      </div>
    </WhiteBack>
  )
})