safety-eval-service-frontend/src/pages/Container/Supervision/EvalProjectDatabase/ArchiveModal.js

import React, { useEffect, useState } from "react";
import { Button, Input, Modal, Table, Tag } from "antd";
import TableAction from "@cqsjjb/jjb-react-admin-component/TableAction";
import PreviewUrlButton from "~/components/PreviewUrlButton";
import {
    ARCHIVE_TYPE_MAP,
    ARCHIVE_RECORD_SOURCE_MAP,
} from "~/enumerate/constant";

/** 解析文件地址：相对路径拼接 window.fileUrl（与 PreviewUrlButton 保持一致） */
const resolveFileUrl = (raw) => {
    if (!raw) return "";
    const u = String(raw);
    return /^https?:\/\//i.test(u) ? u : `${window.fileUrl || ""}${u}`;
};

/** 项目档案查看弹窗（原型 modal-reg-project-archive） */
function ArchiveModal({ record, loading, fetchFiles, onClose }) {
    const [query, setQuery] = useState({ pageIndex: 1, pageSize: 10, fileName: "" });
    const [list, setList] = useState([]);
    const [total, setTotal] = useState(0);



    useEffect(() => {
        if (!record?.id) return;
        fetchFiles({ projectId: record.id, ...query }).then((res) => {
            if (res?.success !== false) {
                setList(res?.data || []);
                setTotal(res?.totalCount || 0);
            }
        });
    }, [record?.id, query]);

    const handleDownload = (file) => {
        const url = resolveFileUrl(file.fileUrl);
        if (!url) return;
        const a = document.createElement("a");
        a.href = url;
        a.download = file.fileName || "";
        a.target = "_blank";
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    };

    const columns = [
        {
            title: "序号",
            width: 60,
            render: (_, __, index) =>
                (query.pageIndex - 1) * query.pageSize + index + 1,
        },
        {
            title: "文件名称",
            dataIndex: "fileName",
            ellipsis: true,
            render: (v, r) => (
                <div>
                    <div>{v || "-"}</div>
                    <div className="epd-archive__file-source">
                        {r.recordSource === "upload_additional_files"
                            ? "评价机构补充上传"
                            : "业务节点自动归集"}
                    </div>
                </div>
            ),
        },
        {
            title: "档案类型",
            dataIndex: "archiveType",
            width: 130,

        },
        {
            title: "来源",
            dataIndex: "recordSource",
            width: 120,
            render: (v) =>
                v ? (
                    <Tag color={v === "upload_additional_files" ? "warning" : "processing"}>
                        {ARCHIVE_RECORD_SOURCE_MAP[v]}
                    </Tag>
                ) : (
                    "-"
                ),
        },
        {
            title: "业务节点",
            dataIndex: "businessNode",
            width: 130,
            render: (v) => v || "-",
        },
        {
            title: "操作",
            width: 120,
            render: (_, r) => (
                <TableAction>
                    <PreviewUrlButton url={r.fileUrl}>查看</PreviewUrlButton>
                    <Button
                        type="link"
                        size="small"
                        disabled={!r.fileUrl}
                        onClick={() => handleDownload(r)}
                    >
                        下载
                    </Button>
                </TableAction>
            ),
        },
    ];

    const processCount = record?.processFileCount ?? 0;
    const additionalCount = record?.additionalFileCount ?? 0;

    return (
        <Modal
            open={!!record}
            title={
                <div>
                    <div>项目档案查看</div>
                    <div className="epd-archive__subtitle">
                        查看项目执行过程中由系统形成及机构补充上传的档案资料
                    </div>
                </div>
            }
            width={1000}
            footer={<Button onClick={onClose}>关闭</Button>}
            destroyOnHidden
            onCancel={onClose}
            className="epd-archive"
        >
            <div className="epd-archive__meta">
                <div>
                    <span>项目名称</span>
                    <strong>{record?.projectName || "-"}</strong>
                    <small>{record?.projectNo}</small>
                </div>
                <div>
                    <span>评价机构</span>
                    <strong>{record?.orgName || "-"}</strong>
                </div>
                <div>
                    <span>评价类型</span>
                    <strong>{record?.evalTypeName || "-"}</strong>
                </div>
                <div>
                    <span>档案数量</span>
                    <strong>{processCount + additionalCount} 份</strong>
                    <small>
                        流程文档 {processCount} / 补充文件 {additionalCount}
                    </small>
                </div>
            </div>

            <Input.Search
                placeholder="输入文件名称"
                allowClear
                onSearch={(v) => setQuery((q) => ({ ...q, fileName: v, pageIndex: 1 }))}
                className="epd-archive__search"
            />

            <Table
                rowKey="id"
                size="small"
                columns={columns}
                dataSource={list}
                loading={loading}
                scroll={{ x: 800, y: 400 }}
                pagination={{
                    total,
                    current: query.pageIndex,
                    pageSize: query.pageSize,
                    showSizeChanger: true,
                    showQuickJumper: true,
                    showTotal: (t) => `共 ${t} 条`,
                    onChange: (page, pageSize) =>
                        setQuery((q) => ({ ...q, pageIndex: page, pageSize })),
                }}
            />
        </Modal>
    );
}

export default ArchiveModal;