/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-05 17:14:00
|
* @LastEditTime: 2024-10-27 16:29:19
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 公共上传组件
|
* 附件类型对照
|
NULL("22_00017-0","未分类"),
|
AUDIO("22_00017-1", "音频"),
|
VIDEO("22_00017-2", "视频"),
|
IMAGE("22_00017-3", "图片"),
|
WORD("22_00017-4", "Word文档"),
|
EXCEL("22_00017-5", "Excel表格"),
|
PDF("22_00017-6", "PDF"),
|
TXT("22_00017-7", "txt文本"),
|
ZIP("22_00017--8", "压缩文件"),
|
POWERPOINT("22_00017-9", "PowerPoint"),
|
UNKNOWN("22_00017-99", "其它文件");
|
*/
|
import React, { useEffect, useState, useImperativeHandle } from 'react';
|
import PropTypes from 'prop-types';
|
import { Upload, Image } from 'antd';
|
import { CloudUploadOutlined, PlusOutlined } from '@ant-design/icons';
|
import * as $$ from '../../utils/utility';
|
import { add } from '../../assets/images'
|
|
const { Dragger } = Upload;
|
|
function deleteFile(submitData) {
|
return $$.ax.request({ url: `fileInfo/deleteFileById`, type: 'get', service: 'sys', data: submitData });
|
}
|
|
/**
|
* ledgerType: true一本账单独处理name ，false不处理
|
* type, // "diy":自定义样式
|
* fileId *, // 案件id，业务id
|
* fileType *, // 附件类型
|
* showFileList, // 是否展示文件列表
|
* fileList, // 附件数组， 用于更新附件列表展示
|
* handleChangeFile, // 附件成功新增和成功删除触发事件，用于更新附件列表
|
* formatType, // 附件格式类型，用于限制上传文件格式
|
*/
|
const MyUpload = ({ ledgerType = false, type, accept, styleHeight, fileId, fileType, mainId, ownerId, ownerType, showFileList = true, fileList, handleChangeFile, fileIcon, myUploadRef, children, formatType = '格式支持PNG、JPG、PDF、DOC、DOCX、XLS、XLSX' }) => {
|
let appUrl = $$.appUrl;
|
|
// 单个预览图片控制
|
const [imgVisible, setImgVisible] = useState({ visible: false, src: '' });
|
|
const [filesList, setFilesList] = useState([]);
|
|
const props = {
|
name: 'file',
|
multiple: true,
|
accept: accept ? accept : '.doc,.docx,.xls,.xlsx,.png,.jpg,.jpeg,.pdf',
|
fileList: filesList,
|
// http://localhost:9002/dyh-sys/api/web/fileInfo/upload?mainId=10001&ownerId=10001&ownerType=22_00018-504
|
// action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload/${fileId}/${fileType}`,
|
action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${mainId}&ownerId=${ownerId}&ownerType=${ownerType}`,
|
headers: {
|
Authorization: $$.getSessionStorage('customerSystemToken'),
|
},
|
showUploadList: showFileList
|
? {
|
showDownloadIcon: true,
|
showPreviewIcon: true,
|
}
|
: false,
|
onChange: (info) => {
|
let { response, status, id } = info.file;
|
let files = info.fileList;
|
files.forEach((x) => {
|
let { response } = x;
|
if (response) x.name = response.data ? (ledgerType ? response.data[0].trueName : response.data[0].name) : null;
|
});
|
if (status === 'error') {
|
files.forEach((_, t) => files.splice(t, 1));
|
$$.info({ type: 'error', content: '抱歉，网络错误附件上传失败，请稍后重试' });
|
}
|
if (status === 'done') {
|
if (response.code === 0 || response.code === '0') {
|
// 返回附件成功上传的回调
|
$$.infoSuccess({ content: '附件上传成功' });
|
if (handleChangeFile) {
|
handleChangeFile('success', info, response.data[0]);
|
}
|
} else {
|
files.forEach((_, t) => files.splice(t, 1));
|
$$.info({ type: 'error', content: response.msg });
|
}
|
}
|
if (status === 'removed' && (response?.code === 0 || !!id)) {
|
// 成功删除已上传附件的回调,删除返回文件时会有两种情况；
|
// 一种是删除已经存在的文件则无response直接是info.file就是api返回的结果；另一种是上传之后删除则是返回antd的文件格式，api返回的结果在response中;
|
// 如不知如何使用请搜索此组件查看其余文件使用。
|
if (handleChangeFile) handleChangeFile('delete', info, response ? response.data[0] : info.file);
|
}
|
if (status === 'uploading') global.setSpinning(true);
|
if (status !== 'uploading') global.setSpinning(false, 'only');
|
setFilesList([...files]);
|
},
|
onDownload: (file) => handleDownloadFiles(file.response ? file.response.data[0] : file),
|
onPreview: (file) => handleOpenFiles(file.response ? file.response.data[0] : file),
|
onRemove: async (file) => {
|
if (file.status === 'done') {
|
let fileId = file.response ? file.response.data[0].id : file.id;
|
handleDeleteFiles(fileId).then((res) => {
|
if (res) {
|
return true;
|
} else {
|
return false;
|
}
|
});
|
}
|
if (file.status === 'error') return;
|
},
|
};
|
|
// 查看单个文件
|
function handleOpenFiles(record) {
|
if (record.cat === '22_00017-3') {
|
setImgVisible({ visible: true, src: `${appUrl.fileUrl}${appUrl.fileShowUrl}${record.id}` });
|
} else if (record.cat === '22_00017-6' || record.cat === '22_00017-1' || record.cat === '22_00017-2') {
|
window.open(`${appUrl.fileUrl}${appUrl.fileShowUrl}${record.id}`);
|
} else {
|
$$.info({ type: 'warning', content: '抱歉，暂不支持在线查看，已下载请查看' });
|
window.open(`${appUrl.fileUrl}${appUrl.fileDownUrl}${record.id}`);
|
}
|
}
|
|
// 下载单个文件
|
function handleDownloadFiles(record) {
|
window.open(`${appUrl.fileUrl}${appUrl.fileDownUrl}${record.id}`);
|
}
|
|
// 删除文件
|
async function handleDeleteFiles(fileId, ownerType) {
|
global.setSpinning(true);
|
const res = await deleteFile({ id: fileId, ownerType: ownerType });
|
global.setSpinning(false);
|
if (res.type) {
|
$$.infoSuccess({ content: '删除成功' });
|
return true;
|
}
|
return false;
|
}
|
|
useImperativeHandle(myUploadRef, () => {
|
return {
|
fileList: fileList,
|
handleOpenFiles: handleOpenFiles,
|
handleDownloadFiles: handleDownloadFiles,
|
handleDeleteFiles: handleDeleteFiles,
|
};
|
});
|
|
useEffect(() => {
|
setFilesList(fileList || []);
|
}, [fileList, fileList?.length]);
|
|
return (
|
<div style={type === 'diy' ? {} : { width: '100%', height: styleHeight || 'auto' }}>
|
{type === 'diy' ? (
|
<Upload {...props}>{children}</Upload>
|
) : (
|
<Dragger {...props}>
|
<p className="ant-upload-drag-icon">
|
{fileIcon ? <PlusOutlined style={{ color: 'rgba(0, 0, 0, 0.65)', fontSize: '18px' }} /> :
|
<CloudUploadOutlined />}
|
</p>
|
<p style={{ fontSize: '14px' }}>点击上传图标或拖拽文件至此区域上传</p>
|
<p className="ant-upload-hint">{formatType}</p>
|
</Dragger>
|
)}
|
<div style={{ display: 'none' }}>
|
<Image
|
src={imgVisible.src}
|
preview={{
|
visible: imgVisible.visible,
|
src: imgVisible.src,
|
onVisibleChange: (value) => setImgVisible({ visible: false }),
|
}}
|
/>
|
</div>
|
</div>
|
);
|
};
|
|
MyUpload.propsType = {
|
type: PropTypes.string,
|
fileId: PropTypes.string,
|
fileType: PropTypes.string,
|
showFileList: PropTypes.bool,
|
fileList: PropTypes.array,
|
myUploadRef: PropTypes.any,
|
handleChangeFile: PropTypes.func,
|
};
|
|
export default MyUpload;
|
