WorkloadWeb/src/pages/PurchaseAdmin/PurchaseList/Detail/FilesModal.js

import React, { useEffect, useState, useRef } 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 } from 'antd';
const { TabPane } = Tabs;
const { confirm } = Modal;
import moment from 'moment/moment';
import PreviewFile from '@/components/PreviewFile';
// 历史清单
function FilesModal(props) {
  const {
    visible,
    onClose,
    onUpload,
    data,
    uploadProps,
    DeleteFile,
    downloadFile,
    loading,
  } = props;
  const handleSelect = item => {
    // onSelect(item);
    // onClose();
  };
  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: '操作',
      render: record => (
        <>
          <a
            onClick={() => {
              downloadFile(record);
            }}
          >
            查看
          </a>
          <a
            onClick={() => {
              confirm({
                title: '提醒',
                content: '确认删除该文件，删除后无法复原',
                okText: '确认',
                cancelText: '取消',
                onOk() {
                  DeleteFile(record.id);
                },
              });
            }}
            style={{ marginLeft: 10 }}
          >
            删除
          </a>
        </>
      ),
    },
  ];

  const onClick = item => {
    // onClose();
    // onSelect(item);
  };
  return (
    <Modal title="附件列表" width="60%" onCancel={onClose} visible={visible} footer={false}>
      <div>
        <Upload {...uploadProps}>
          <Button type="primary" style={{ marginBottom: 20 }} loading={loading}>
            <UploadOutlined /> 上传文件
          </Button>
        </Upload>
      </div>
      <Table rowKey="id" columns={columns} dataSource={data} loading={loading} />
    </Modal>
  );
}
export default FilesModal;