97 lines
2.9 KiB
JavaScript
97 lines
2.9 KiB
JavaScript
import { Button, Image, Space, Table, Tag, Upload } from "antd";
|
|
import { useState } from "react";
|
|
|
|
export default function MaterialStep({
|
|
materials = [],
|
|
disabled,
|
|
onUpload,
|
|
loading,
|
|
}) {
|
|
const [previewImage, setPreviewImage] = useState("");
|
|
|
|
const isImage = (url) => /\.(png|jpe?g|gif|bmp|webp|svg)(\?.*)?$/i.test(url || "");
|
|
|
|
return (
|
|
<>
|
|
<Table
|
|
size="small"
|
|
loading={loading}
|
|
rowKey="id"
|
|
pagination={false}
|
|
scroll={{ x: 900 }}
|
|
dataSource={materials}
|
|
columns={[
|
|
{ title: "序号", dataIndex: "sortOrder", width: 60 },
|
|
{ title: "内容", dataIndex: "materialContent", width: 200, ellipsis: true },
|
|
{ title: "上传附件", dataIndex: "attachmentDesc", width: 100 },
|
|
{
|
|
title: "格式",
|
|
dataIndex: "materialFormat",
|
|
width: 70,
|
|
render: (val) => (val ? <Tag>{val}</Tag> : "-"),
|
|
},
|
|
{
|
|
title: "状态",
|
|
dataIndex: "uploadStatusName",
|
|
width: 90,
|
|
render: (val, record) => (
|
|
<Tag color={record.uploadStatusCode === 2 ? "success" : "warning"}>{val || "待上传"}</Tag>
|
|
),
|
|
},
|
|
{
|
|
title: "操作",
|
|
width: 120,
|
|
render: (_, record) => (
|
|
<Space size="small">
|
|
{record.attachmentUrl ? (
|
|
<Button
|
|
type="link"
|
|
size="small"
|
|
onClick={() => {
|
|
if (isImage(record.attachmentUrl)) {
|
|
setPreviewImage(record.attachmentUrl);
|
|
} else {
|
|
window.open(record.attachmentUrl);
|
|
}
|
|
}}
|
|
>
|
|
预览
|
|
</Button>
|
|
) : (
|
|
!disabled && (
|
|
<Upload
|
|
showUploadList={false}
|
|
action={`${window.process.env.app.API_HOST}/safety-eval/file/upload`}
|
|
onChange={(info) => {
|
|
if (info.file.status === "done") {
|
|
const url = info.file.response?.data?.url;
|
|
if (url) {
|
|
onUpload?.(record, url);
|
|
}
|
|
}
|
|
}}
|
|
>
|
|
<Button type="link" size="small">上传</Button>
|
|
</Upload>
|
|
)
|
|
)}
|
|
</Space>
|
|
),
|
|
},
|
|
{ title: "注释", dataIndex: "materialRemark", ellipsis: true },
|
|
]}
|
|
/>
|
|
<Image
|
|
style={{ display: "none" }}
|
|
preview={{
|
|
visible: !!previewImage,
|
|
src: previewImage,
|
|
onVisibleChange: (visible) => {
|
|
if (!visible) setPreviewImage("");
|
|
},
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
}
|