import styles from './style.scss'; // 自定义样式，文件名称不可修改
import { Button, Upload, Modal, Alert } from 'antd';
import React, { Children, cloneElement, isValidElement, useState, useEffect, useRef } from 'react';
import axios from 'axios'
const Previewer = ({ url, onClose, isEditing, onEditSave }) => {
return (
<Modal className={styles.modalshow} title={isEditing ? "文档编辑" : "文档预览"} visible width={1200} onCancel={onClose} footer={
isEditing ? [
<Button key="back" onClick={onClose}>
返回
</Button>,
<Button key="submit" type="primary" onClick={onEditSave}>
提交
</Button >
] : null} >
<iframe src={url} title='wps' width='100%' height='592' />
</Modal >
)
}
const mapDOMTree = (children, matchChild) => {
if (typeof children === 'function') return null
return Children.map(children, (child) => {
if (!child) return null;
if (matchChild(child)) return matchChild(child);
return isValidElement(child) ? cloneElement(child, child.props, mapDOMTree(child.props.children, matchChild)) : child;
});
};
const baseUrl2 = getUrl('/contract/api/xft-contract-procode/object/v1/attachments/service/create-uri-by-id');
function CUpload({ onPreview, onEdit, onEditSave, children, showDownloadIcon = true, showRemoveIcon = true, showEditButton = true, showPreviewIcon = true, ...rest }) {
const [visible, setVisible] = useState(false)
const [url, setUrl] = useState()
const [editing, setEditing] = useState(false)
const toggle = () => {
setVisible(prevVisible => !prevVisible)
}
const onPreviewFile = async (file) => {
const previerUrl = await onPreview?.(file)
setUrl(previerUrl)
toggle()
}
const onEditFile = async (file) => {
const previerUrl = await onEdit?.(file)
setUrl(previerUrl)
setEditing(true)
toggle()
}
const handleUpload = files => {
return {
fileName: files.name,
fileType: files.type
}
}
const onClose = () => {
setEditing(false)
toggle()
}
const downloadd = (file) => {
axios.post(`${baseUrl2}?id=${file.id} `)
.then(res => {
let data = res.data.data;
download(data.tempUri, data.fileName)
}
).catch((error) => {
Modal.showServeError(error);
})
}
const download = (url, fileName) => {
// for IE
// if (window.navigator.msSaveOrOpenBlob) {
// window.navigator.msSaveOrOpenBlob(url, fileName);
// } else {
const link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.download = fileName;
// document.body.appendChild(link);
link.click();
// window.URL.revokeObjectURL(link.href);
link.remove();
// }
};
const editClose = async () => {
await onEditSave()
onClose()
}
const baseUrl = getUrl('contract/api/xft-contract-procode/object/v1/attachments')
return (
<>
<Upload
{...rest}
maxCount={1}
data={handleUpload}
accept='application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/msword'
action={baseUrl}
showUploadList={{
showDownloadIcon,
showRemoveIcon,
}}
onDownload={downloadd}
itemRender={(originNode, file) => {
if (originNode.type !== 'div' || !showPreviewIcon) return originNode;
return mapDOMTree(originNode, (children) => {
if (children.key === 'download-delete') {
return cloneElement(
children,
children.props,
<>
<Button
type="text"
size="small"
onClick={() => onPreviewFile(file)}
className="ant-upload-list-item-card-actions-btn"
icon={<EyeOutlined />}
title="Preview File"
/>
{showEditButton && <Button
type="text"
size="small"
onClick={() => onEditFile(file)}
className="ant-upload-list-item-card-actions-btn"
icon={<EditOutlined />}
title="Edit File"
/>}
{children.props.children}
</>,
);
}
return false;
});
}}
>{children}</Upload>
{visible && <Previewer url={url} onClose={onClose} isEditing={editing} onEditSave={editClose} />}
</>
);
};
export default function UploadButton(props) {
const { setValue, id, mingzi, formItemValue, setPrinstineValue, isEdit } = props;
const [list, setList] = useState([]);
const editingRef = useRef(false);
console.log('props--', props)
useEffect(() => {
if (formItemValue?.fileId) {
setList([{ ...formItemValue, name: formItemValue?.fileName, id: formItemValue?.fileId, status: 'done' }])
}
}, [formItemValue])
const onChange = (info) => {
console.log('info---', info);
if (info.file.status === 'done') {
setValue({ [id]: info.file.response.data.data, [mingzi]: info.fileList[0].name });
}
if (info.file.status === 'removed') {
setPrinstineValue(undefined);
setValue(undefined)
}
setList(info.fileList)
}
const onPreview = (e) => {
editingRef.current = false
return Http.get('/contract/api/xft-contract-procode/common/v1/preview?attachId=' + e.fileId).then(res => res.data.data.data).catch((error) => {
Modal.showServeError(error);
})
}
const onEdit = (e) => {
editingRef.current = true
return Http.get(`/contract/api/xft-contract-procode/contract/v1/institution/file/onlineEdit?attachId=${props.formItemValue?.fileId}&id=${props.data.__super.id}`).then(
res => res.data.data.data).catch((error) => {
Modal.showServeError(error);
})
}
const onEditSave = () => {
if (editingRef.current) {
editingRef.current = false
return Http.get(`/contract/api/xft-contract-procode/common/v1/complete/fileEdit/${props.formItemValue?.fileId}`)
}
}
const uploadButton = <Button>上传</Button>
return (
<CUpload
onPreview={onPreview}
onEdit={onEdit}
onEditSave={onEditSave}
onChange={onChange}
fileList={list}
showRemoveIcon={isEdit}
showEditButton={isEdit}
>
{list.length >= 1 ? null : uploadButton}
</CUpload>
)
}
