BomWeb/src/pages/Detail/FilesModal.js

import React, { useEffect, useState, useRef, useMemo } from 'react';
import { UploadOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Button, Modal, message, Table, Spin, Tabs, Upload, Select, Space } from 'antd';
const { TabPane } = Tabs;
const { confirm } = Modal;
import moment from 'moment/moment';
import PreviewFile from '@/components/PreviewFile';
import { getToken, GetTokenFromUrl } from '@/utils/utils';
import FileViewerModal from '@/components/FileViewer';
// 历史清单
function FilesModal(props) {
  const {
    projectId,
    visible,
    onClose,
    onUpload,
    data,
    // uploadProps,
    queryFiles,
    DeleteFile,
    downloadFile,
    loading,
    typeOptions,
  } = props;
  const [value, setValue] = useState();
  const [showData, setShowData] = useState();
  const [exportUrl, setExportUrl] = useState();
  const [fileVisible, setFileVisible] = useState(false);

  useEffect(() => {
    if (!value) {
      setShowData(data);
      return;
    }
    const newData = data.filter(item => item.classify_id == value);
    setShowData(newData);
  }, [data, value]);

  const uploadProps = useMemo(() => {
    const token = getToken() || GetTokenFromUrl();
    const uploadProps = {
      name: 'file',
      showUploadList: false,
      action: `/api/v1/purchase/attachment/${projectId}`,
      headers: {
        'JWT-TOKEN': token,
      },
      data: {
        classify_id: value,
      },
      beforeUpload(file) {
        if (!value) {
          message.error('请先选择附件分类');
          return false;
        }
      },
      onChange(info) {
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          message.success(`${info.file.name} 文件上传成功`);
          queryFiles();
        } else if (info.file.status === 'error') {
          message.error(`${info.file.name} 文件上传失败`);
        }
      },
    };
    return uploadProps;
  }, [value, projectId]);

  const columns = [
    {
      title: '预览',
      dataIndex: 'name',
      render: (text, item) => {
        return <PreviewFile name={item.name} src={item.url} />;
      },
    },
    {
      title: '上传时间',
      dataIndex: 'c_time',
      render: text => {
        return text ? moment(text).format('YYYY年MM月DD日  HH:mm:ss') : null;
      },
    },
    {
      title: '上传人',
      dataIndex: 'CreatorUser',
      render: record => record.CName || '',
    },
    {
      title: '分类',
      dataIndex: 'classify_id',
      render: id => typeOptions.find(item => item.id == id)?.name,
    },
    {
      title: '操作',
      render: record => (
        <>
          <a
            onClick={() => {
              downloadFile(record);
            }}
          >
            下载
          </a>
          <a
            style={{ marginLeft: 10 }}
            onClick={() => {
              setExportUrl(record.url);
              setFileVisible(true);
            }}
          >
            预览
          </a>
          <a
            onClick={() => {
              confirm({
                title: '提醒',
                content: '确认删除该文件，删除后无法复原',
                okText: '确认',
                cancelText: '取消',
                onOk() {
                  DeleteFile(record.id);
                },
              });
            }}
            style={{ marginLeft: 10 }}
          >
            删除
          </a>
        </>
      ),
    },
  ];
  return (
    <>
      <Modal title="附件列表" width="70%" onCancel={onClose} visible={visible} footer={false}>
        <Space style={{ display: 'flex', marginBottom: '20px' }}>
          <div>附件类型:</div>
          <Select
            style={{ width: 400 }}
            value={value}
            allowClear
            options={typeOptions}
            onChange={value => setValue(value)}
          />
          <Upload {...uploadProps}>
            <Button type="primary" loading={loading}>
              <UploadOutlined /> 上传文件
            </Button>
          </Upload>
        </Space>
        <Table rowKey="id" columns={columns} dataSource={showData} loading={loading} />
      </Modal>

      <FileViewerModal
        url={exportUrl}
        visible={fileVisible}
        onCancel={() => {
          setFileVisible(false);
        }}
      />
    </>
  );
}
export default FilesModal;