WorkloadWeb/src/pages/ReportDaily/components/ReportTable.js

import React, { useMemo, useState } from 'react';
import { Button, Modal, Table, Tooltip } from 'antd';
import * as XLSX from 'xlsx';

const ReportTable = ({ data, month }) => {
  const [visible, setVisible] = useState(false);
  const [item, setItem] = useState({});
  // 将 data 对象解析为表格的 dataSource
  const dataSource = useMemo(() => {
    if (!data) return [];
    // return data
    return data.filter(
      item => item.unsubmittedReports.length > 0 || item.lateSubmissions.length > 0
    );
  }, [data]);

  const exportToExcel = () => {
    const worksData1 = dataSource
      .filter(item => item.unsubmittedReports.length > 0 || item.lateSubmissions.length > 0)
      .map(item => ({
        工号: item.userId,
        姓名: item.name,
        迟交次数: item.lateSubmissions.length,
        漏交次数: item.unsubmittedReports.length,
        请假次数: item.takingLeaveReports.length,
      }));
    const worksheet1 = XLSX.utils.json_to_sheet(worksData1);

    const worksData2 = dataSource.map(item => ({
      工号: item.userId,
      姓名: item.name,
      迟交: item.lateSubmissions.join(','),
      漏交: item.unsubmittedReports.join(','),
      请假: item.takingLeaveReports.join(','),
      离职时间: item.resignationDate,
      入职时间: item.hiredDate,
    }));
    const worksheet2 = XLSX.utils.json_to_sheet(worksData2);

    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet1, '总览');
    XLSX.utils.book_append_sheet(workbook, worksheet2, '详情');

    const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
    const data = new Blob([excelBuffer], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    });
    const url = URL.createObjectURL(data);
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', `${month}月考勤数据.xlsx`);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  // 表格列配置
  const columns = [
    {
      title: '工号',
      dataIndex: 'userId',
      key: 'userId',
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '漏交',
      dataIndex: 'unsubmittedReports',
      key: 'unsubmittedReports',
      render: unsubmittedReports => (
        <Tooltip title={unsubmittedReports.join(',')}>
          <a>{unsubmittedReports.length}</a>
        </Tooltip>
      ),
    },
    {
      title: '迟交',
      dataIndex: 'lateSubmissions',
      key: 'lateSubmissions',
      render: lateSubmissions => (
        <Tooltip title={lateSubmissions.join(',')}>
          <a>{lateSubmissions.length}</a>
        </Tooltip>
      ),
    },
    {
      title: '请假',
      dataIndex: 'takingLeaveReports',
      key: 'takingLeaveReports',
      render: takingLeaveReports => (
        <Tooltip title={takingLeaveReports.join(',')}>
          <a>{takingLeaveReports.length}</a>
        </Tooltip>
      ),
    },
    {
      title: '离职日期',
      dataIndex: 'resignationDate',
      key: 'resignationDate',
    },
    {
      title: '入职日期',
      dataIndex: 'hiredDate',
      key: 'hiredDate',
    },

    {
      title: '操作',
      render: item => <a onClick={() => showModal(item)}>日志提交时间</a>,
    },
  ];

  const showModal = item => {
    setItem(item);
    setVisible(true);
  };

  return (
    <>
      <Table
        dataSource={dataSource}
        footer={() => (
          <Button onClick={exportToExcel} type="primary">
            导出报表
          </Button>
        )}
        columns={columns}
      />
      <Modal
        title="日志提交记录"
        visible={visible}
        onCancel={() => setVisible(false)}
        footer={null}
      >
        {item.dates?.map((item, index) => (
          <div style={{ margin: '5px 0' }} key={index}>
            {item.format('YYYY-MM-DD HH:mm:ss')}
          </div>
        ))}
      </Modal>
    </>
  );
};

export default ReportTable;