/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-08-09 11:44:57
|
* @LastEditTime: 2024-12-01 17:01:39
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 附件展示组件
|
*/
|
import React, { useState, useEffect, useMemo, useRef } from 'react';
|
import { appUrl, ax, openFiles, showToast, confirmModal } from '../../utils/utility';
|
import { pdf, word, excel, file, delEliminate } from '../../assets/img';
|
import MyModal from '../../components/MyModal';
|
import { img_none } from '../../assets/icon';
|
import './index.less';
|
|
// 删除附件
|
function delFileApi(id) {
|
return ax.request({ url: `sys/attachment/removeById?id=${id}`, type: 'get', service: 'ninex' });
|
}
|
|
/**
|
* fileType: string, // 附件类型，不传则默认是图片
|
* fileId: string, // 附件id
|
* img: string, // 当前展示图片(附件)接口格式链接一般是showUrl
|
* imageUrl: string, // 完整的图片(附件)链接
|
* allImg: array, [''], // 全部展示图片，便于图片查看
|
* title: string, // 标题
|
* noTitle: bool, // 是否有标题
|
* width: number, // 图片的宽度,高度
|
* isShowBig: bool, // 是否可以放大查看
|
* isDelete: bool, // 是否可以删除
|
* defaultImg:string //默认展示图片
|
* onDelCallback: func // 删除文件反馈函数
|
* noEllipsis：图片名称展示不折叠
|
*/
|
const ImgShow = ({
|
fileType = '22_00017-3',
|
fileId,
|
img,
|
imageUrl,
|
allImg = [],
|
title,
|
noTitle = false,
|
width = 54,
|
isShowBig = true,
|
isDelete = false,
|
defaultImg = img_none,
|
onDelCallback,
|
noEllipsis = false
|
}) => {
|
const imgRef = useRef();
|
|
const [modalImg, setModalImg] = useState({ visible: false, url: '' });
|
|
// 判断附件链接
|
const imgUrl = imageUrl ? imageUrl : img ? `${appUrl.fileUrl}${img}` : null;
|
|
// 点击查看附件
|
function handleShowFile() {
|
console.log('11111');
|
|
if (!imgUrl || !isShowBig) return;
|
console.log(imgUrl);
|
// openFiles({ type: fileType, url: imgUrl, urls: allImg });
|
setModalImg({ visible: true, url: imgUrl })
|
}
|
|
// 点击删除附件
|
async function handleDelFile(value) {
|
confirmModal({
|
title: '删除附件确认',
|
subtitle: (
|
<span>
|
确认删除该附件吗？
|
</span>
|
),
|
okText: '确定删除',
|
onOk: async () => {
|
global.setSpinning(true);
|
const res = await delFileApi(fileId);
|
global.setSpinning(false);
|
if (res.type) {
|
showToast({ type: 'success', content: '删除成功' });
|
// console.log('删除成功onDelCallback');
|
onDelCallback && onDelCallback(fileId);
|
}
|
},
|
});
|
|
}
|
|
// 图片初始化
|
useEffect(() => {
|
if (imgUrl && fileType === '22_00017-3') {
|
let temp = new Image();
|
temp.src = imgUrl;
|
temp.onload = () => {
|
imgRef.current.src = imgUrl;
|
};
|
}
|
}, [imgUrl, fileType]);
|
|
|
|
// 判断除图片外的附件
|
const fileImg = useMemo(() => {
|
let img = '';
|
switch (fileType) {
|
case '22_00017-4':
|
img = word;
|
break;
|
case '22_00017-5':
|
img = excel;
|
break;
|
case '22_00017-6':
|
img = pdf;
|
break;
|
default:
|
img = file;
|
}
|
return img;
|
}, [fileType]);
|
|
return (
|
<div className="fileShow" style={{ width: `${width}px`, height: `${width}px` }}>
|
{fileType !== '22_00017-3' ? (
|
// 非图片
|
<div className="fileShow-elseFile">
|
<img src={fileImg} alt="" className="fileShow-img" />
|
</div>
|
) : (
|
// 图片
|
<div className="fileShow-imgBox">
|
{!img && !imageUrl ? (
|
<img src={defaultImg} alt="" className="fileShow-img" />
|
) : (
|
<img ref={imgRef} onClick={handleShowFile} src={defaultImg} alt="加载中..." className="fileShow-img" />
|
)}
|
</div>
|
)}
|
{/* 右上角删除icon */}
|
{isDelete && fileId && (
|
<div onClick={handleDelFile} className="fileShow-del">
|
{/* <EliminateFilled /> */}
|
<img style={{ width: '18px', height: '18px' }} src={delEliminate} alt="" />
|
</div>
|
)}
|
{/* 名称展示 */}
|
{!noTitle && (
|
<div className="fileShow-title">
|
<div className={'fileShow-title-text'}>{title || '未上传'}</div>
|
</div>
|
)}
|
<MyModal visible={modalImg.visible} center title="查看图片" onClose={() => setModalImg({ visible: false, url: '' })}>
|
<div style={{ height: '1px', width: '100%', backgroundColor: 'rgba(126, 134, 142, 0.16)' }}></div>
|
<div style={{ height: '300px' }}>
|
<img src={modalImg.url} alt="" style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
|
</div>
|
</MyModal>
|
</div>
|
);
|
};
|
|
export default ImgShow;
|
