/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2024-10-09 19:02:31
|
* @LastEditTime: 2024-10-09 20:21:30
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 基础上传图片组件
|
*/
|
|
import React, { useEffect, useState, useImperativeHandle } from 'react';
|
import PropTypes from 'prop-types';
|
import { Form, Input, Tabs, Typography, Button, Modal, Select, Upload, Message } from '@arco-design/web-react';
|
import { Tooltip } from 'antd';
|
import { PlusOutlined } from '@ant-design/icons';
|
import * as $$ from '../../utils/utility';
|
import { add } from '../../assets/images'
|
|
|
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 BasicUpload = ({ children, mainId, ownerId, ownerType, myUploadRef, fileList, handleChangeFile }) => {
|
let appUrl = $$.appUrl;
|
|
// 单个预览图片控制
|
const [imgVisible, setImgVisible] = useState({ visible: false, src: '' });
|
|
const [filesList, setFilesList] = useState([]);
|
|
const props = {
|
name: 'file',
|
multiple: true,
|
imagePreview: true,
|
listType: 'picture-card',
|
fileList: filesList,
|
action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${mainId}&ownerId=${ownerId}&ownerType=${ownerType}`,
|
headers: { Authorization: $$.getSessionStorage('customerSystemToken') },
|
onChange: (fileLists, info) => {
|
console.log('info', info, fileLists);
|
|
let { response, status, uid } = info;
|
let files = fileLists;
|
files.forEach((x) => {
|
let { response } = x;
|
if (response) x.name = response.data ? 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') {
|
// 返回附件成功上传的回调
|
if (fileLists.findIndex(x => x.uid === uid) > -1) {
|
$$.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 || !!uid)) {
|
// 成功删除已上传附件的回调,删除返回文件时会有两种情况；
|
// 一种是删除已经存在的文件则无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;
|
},
|
};
|
|
|
// 删除文件
|
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,
|
};
|
});
|
|
|
// 查看单个文件
|
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}`);
|
}
|
|
|
useEffect(() => {
|
setFilesList(fileList || []);
|
}, [fileList, fileList?.length]);
|
|
return (
|
<div>
|
<Upload {...props}></Upload>
|
</div>
|
);
|
};
|
|
BasicUpload.propsType = {
|
mainId: PropTypes.string,
|
ownerId: PropTypes.string,
|
ownerType: PropTypes.string,
|
fileList: PropTypes.array,
|
handleChangeFile: PropTypes.func,
|
};
|
|
export default BasicUpload;
|
