BomWeb/src/components/AttachmentTable/index.js

import { connect } from 'dva';
import { Divider, Table, Modal } from 'antd';
import PreviewFile from '@/components/PreviewFile';
import FileViewerModal from '@/components/FileViewer';
import React, { useState, useMemo } from 'react';

function AttachmentTable(props) {
  const [excelFileVisible, setExcelFileVisible] = useState(false);
  const [exportData, setExportData] = useState({});
  const { loading, excelFileList, canDelete = true, dispatch, version } = props;
  const columns = [
    {
      title: '文件名',
      dataIndex: 'name',
    },
    {
      title: '操作',
      render: record => {
        return (
          <>
            {canDelete && (
              <a
                onClick={() => {
                  deleteFile(record.id);
                }}
                style={{ marginRight: 10 }}
              >
                删除
              </a>
            )}

            <a
              onClick={() => {
                setExcelFileVisible(true);
                setExportData(record);
              }}
            >
              预览
            </a>
          </>
        );
      },
    },
  ];
  const downloadFile = record => {
    window.location.href = `${record.url}`;
  };
  const deleteFile = id => {
    Modal.confirm({
      title: '提醒',
      content: '确认删除该文件，删除后无法复原',
      okText: '确认',
      cancelText: '取消',
      onOk() {
        dispatch({
          type: 'detail/deleteFiles',
          id: id,
          callback: () => {
            dispatch({
              type: 'detail/QueryExcelFiles',
              payload: {
                excel_id: version.attachment_id,
              },
            });
          },
        });
      },
    });
  };
  const excelFileData = useMemo(() => {
    return excelFileList?.map(item => {
      const list = item.url.split('/');
      const name = list[list.length - 1];
      return { name, url: item.url, id: item.id };
    });
  }, [excelFileList]);
  return (
    <>
      <Table
        title={() => '附件列表'}
        rowKey="id"
        loading={loading}
        columns={columns}
        dataSource={excelFileData}
      />
      <FileViewerModal
        data={exportData}
        visible={excelFileVisible}
        downloadFile={downloadFile}
        onCancel={() => {
          setExcelFileVisible(false);
        }}
      />
    </>
  );
}

const isImg = fileNmae => {
  const imgReg = /\.(png|jpg|gif|jpeg|webp)$/;
  return imgReg.test(fileNmae);
};

export default connect(({ detail, loading }) => ({
  excelFileList: detail.excelFileList,
  loading: loading.effects['detail/QueryExcelFiles'],
}))(AttachmentTable);