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

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

const ReportTable = ({ data, month }) => {
  // 将 data 对象解析为表格的 dataSource
  const dataSource = useMemo(() => {
    if (!data) return [];
    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: () => <a></a>,
    },
  ];

  return (
    <Table
      dataSource={dataSource}
      footer={() => (
        <Button onClick={exportToExcel} type="primary">
          导出报表
        </Button>
      )}
      columns={columns}
    />
  );
};

export default ReportTable;