68 lines
1.8 KiB
JavaScript
68 lines
1.8 KiB
JavaScript
|
import { Form, Image, Upload } from "antd";
|
||
|
|
import { useState } from "react";
|
||
|
|
|
||
|
|
const isImage = (url) => /\.(png|jpe?g|gif|bmp|webp|svg)(\?.*)?$/i.test(url || "");
|
||
|
|
|
||
|
|
export default function AttachmentUpload({ name, label, disabled }) {
|
||
|
|
const [previewImage, setPreviewImage] = useState("");
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Form.Item
|
||
|
|
name={name}
|
||
|
|
label={label}
|
||
|
|
valuePropName="fileList"
|
||
|
|
getValueProps={(value) => {
|
||
|
|
if (Array.isArray(value)) {
|
||
|
|
return { fileList: value };
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
fileList: value
|
||
|
|
? value.split(",").map((item) => ({
|
||
|
|
url: item,
|
||
|
|
uid: item,
|
||
|
|
status: "done",
|
||
|
|
name: "附件",
|
||
|
|
}))
|
||
|
|
: [],
|
||
|
|
};
|
||
|
|
}}
|
||
|
|
getValueFromEvent={({ fileList }) => {
|
||
|
|
return (
|
||
|
|
fileList?.map((file) => ({
|
||
|
|
url: file.response?.data?.url || file.url,
|
||
|
|
uid: file.uid,
|
||
|
|
status: "done",
|
||
|
|
name: file.name,
|
||
|
|
})) || []
|
||
|
|
);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Upload
|
||
|
|
disabled={disabled}
|
||
|
|
listType="picture-card"
|
||
|
|
action={`${window.process.env.app.API_HOST}/safety-eval/file/upload`}
|
||
|
|
onPreview={(file) => {
|
||
|
|
if (isImage(file.url || file.thumbUrl)) {
|
||
|
|
setPreviewImage(file.url || file.thumbUrl);
|
||
|
|
} else {
|
||
|
|
window.open(file.url || file.thumbUrl);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
上传附件
|
||
|
|
</Upload>
|
||
|
|
</Form.Item>
|
||
|
|
<Image
|
||
|
|
style={{ display: "none" }}
|
||
|
|
preview={{
|
||
|
|
visible: !!previewImage,
|
||
|
|
src: previewImage,
|
||
|
|
onVisibleChange: (visible) => {
|
||
|
|
if (!visible) setPreviewImage("");
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|