/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2025-04-10 17:30:00
|
* @LastEditTime: 2025-04-30 15:18:25
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 通用附件上传查看组件
|
*/
|
import React, { useState, useEffect } from 'react';
|
import { Upload, Modal } from 'dingtalk-design-mobile';
|
import * as $$ from '../../utils/utility';
|
import './index.less';
|
|
const appUrl = $$.appUrl;
|
|
/**
|
* 通用附件上传查看组件
|
* @param {Object} props 组件属性
|
* @param {Array} props.fileList 文件列表
|
* @param {Function} props.onChange 文件列表变化回调
|
* @param {String} props.mainId 主ID，用于上传接口
|
* @param {String} props.ownerId 文件所属ID，用于上传接口
|
* @param {String} props.ownerType 文件所属类型，用于上传接口
|
* @param {String} props.title 标题
|
* @param {Boolean} props.disabled 是否禁用上传功能
|
* @param {Boolean} props.viewOnly 是否只查看模式（不显示上传和删除）
|
* @param {String} props.subtitle 副标题
|
* @param {String} props.accept 接受的文件类型
|
* @param {String} props.tipText 提示文本
|
* @param {String} props.btnText 按钮文本
|
* @returns {JSX.Element}
|
*/
|
const DingUpload = ({
|
fileList = [],
|
onChange,
|
mainId = '',
|
ownerId = '',
|
ownerType = '',
|
title = '附件材料',
|
disabled = false,
|
viewOnly = false,
|
subtitle = '',
|
accept = '*',
|
tipText = '支持扩展名：.rar .zip .doc .docx .pdf .jpg，30M以内',
|
btnText = '上传文件',
|
}) => {
|
const [files, setFiles] = useState([]);
|
const [imageVisible, setImageVisible] = useState(false);
|
const [previewImage, setPreviewImage] = useState('');
|
|
useEffect(() => {
|
setFiles(fileList);
|
}, [fileList]);
|
|
// 处理文件列表变化
|
const handleChange = (info) => {
|
setFiles(info.fileList);
|
if (onChange) {
|
onChange(info);
|
}
|
|
// 处理上传状态变化
|
if (info?.file?.status === 'done') {
|
$$.showToast({ content: '上传成功' });
|
} else if (info?.file?.status === 'error') {
|
$$.showToast({ content: '抱歉! 网络错误' });
|
}
|
};
|
|
// 预览文件
|
const handlePreview = async (file) => {
|
console.log('file', file);
|
// 如果是图片类型，则打开图片预览
|
if (file.type && file.type.startsWith('image/')) {
|
let src = '';
|
if (file.url) {
|
src = file.url;
|
} else if (file.response && file.response.data && file.response.data[0] && file.response.data[0].showUrl) {
|
src = `${appUrl.fileUrl}/${appUrl.sys}/${file.response.data[0].showUrl}`;
|
} else if (file.showUrl) {
|
src = `${appUrl.fileUrl}/${appUrl.sys}/${file.showUrl}`;
|
}
|
window.open(src);
|
// setPreviewImage(src);
|
// setImageVisible(true);
|
} else {
|
// 其他类型文件，通过URL打开
|
let src = '';
|
if (file.url) {
|
src = file.url;
|
} else if (file.response && file.response.data && file.response.data && file.response.data[0] && file.response.data[0].showUrl) {
|
src = `${appUrl.fileUrl}/${appUrl.sys}/${file.response.data[0].showUrl}`;
|
} else if (file.showUrl) {
|
src = `${appUrl.fileUrl}/${appUrl.sys}/${file.showUrl}`;
|
}
|
|
window.open(src);
|
}
|
};
|
|
// 删除文件
|
const handleRemove = async (file) => {
|
// 需要调用删除接口
|
try {
|
if (file.id || (file.response && file.response.data && file.response.data[0] && file.response.data[0].id)) {
|
const fileId = file.id || file.response.data[0].id;
|
const res = await $$.ax.request({
|
url: `fileInfo/deleteFileById`,
|
type: 'get',
|
data: { id: fileId },
|
service: 'sys',
|
});
|
|
if (res.type) {
|
$$.showToast({ content: '删除成功' });
|
} else {
|
$$.showToast({ content: '删除失败' });
|
return false; // 阻止删除操作
|
}
|
}
|
return true;
|
} catch (error) {
|
$$.showToast({ content: '删除失败' });
|
return false; // 阻止删除操作
|
}
|
};
|
|
return (
|
<div className="ding-upload-container">
|
{viewOnly && (
|
<div className="ding-upload-label">
|
<div className="ding-upload-title">{title}</div>
|
<div className="ding-upload-subtitle">{subtitle}</div>
|
</div>
|
)}
|
<Upload
|
label={
|
<div className="ding-upload-label">
|
<div className="ding-upload-title">{title}</div>
|
<div className="ding-upload-subtitle">{subtitle}</div>
|
</div>
|
}
|
onPreview={handlePreview}
|
fileList={files}
|
type="form-upload"
|
accept={accept}
|
previewContent="预览"
|
action={`${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${mainId}&ownerId=${ownerId}&ownerType=${ownerType}`}
|
headers={{ Authorization: $$.getSessionStorage('customerSystemToken') }}
|
onChange={handleChange}
|
disabled={disabled || viewOnly}
|
onRemove={viewOnly ? null : handleRemove}
|
showUploadList={{
|
showRemoveIcon: !viewOnly,
|
showUploadBtn: !viewOnly,
|
}}
|
uploadLabel={tipText}
|
uploadBtnLabel={btnText}
|
className={viewOnly ? 'ding-upload-preview-only' : ''}
|
/>
|
|
<Modal visible={imageVisible} onClose={() => setImageVisible(false)} className="ding-upload-image-preview">
|
<div className="ding-upload-image-wrapper">
|
<img src={previewImage} alt="预览图片" />
|
</div>
|
</Modal>
|
</div>
|
);
|
};
|
|
export default DingUpload;
|
