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