/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2022-08-16 17:53:50
|
* @LastEditTime: 2023-06-15 10:30:40
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description:
|
*/
|
import React, { useState, useEffect } from 'react';
|
import dd from 'gdt-jsapi';
|
import { showToast, ax, confirmModal, appUrl } from '../../utils/utility';
|
import UploadFile from './..//UploadFile';
|
import { DeleteOutlined } from 'dd-icons';
|
import { camera } from '../../assets/img';
|
|
function delFileApi(id) {
|
return ax.request({ url: `fileInfo/deleteById?id=${id}`, type: 'get', service: 'sys' });
|
}
|
|
const FileShow = ({ formData, data, ownerId, ownerType, callback }) => {
|
const [imgdataShow, setImgdataShow] = useState({});
|
const [imgurlShow, setImgurlShow] = useState({});
|
|
function onSuccessCallback(params) {
|
const url = params.find((item) => Number(item.ownerType) == Number(ownerType))
|
? `${appUrl.fileUrl}${params.find((item) => Number(item.ownerType) == Number(ownerType)).showUrl}`
|
: '';
|
setImgurlShow(url);
|
callback && callback(params, 'add');
|
}
|
|
// 删除附件
|
async function delOnClick(params) {
|
confirmModal({
|
title: '附件删除确认',
|
subtitle: (
|
<span>
|
确定删除 <span className="public-color">{data.title}</span>吗？
|
</span>
|
),
|
okText: '确定删除',
|
onOk: async () => {
|
global.setSpinning(true);
|
const res = await delFileApi(params.id);
|
global.setSpinning(false);
|
if (res.type) {
|
showToast({ type: 'success', content: '删除成功' });
|
setImgurlShow('');
|
setImgdataShow(params);
|
callback && callback(params, 'del');
|
}
|
},
|
});
|
}
|
|
function handleShowImg() {
|
dd.previewImage({
|
current: imgurlShow,
|
urls: [imgurlShow],
|
}).catch((res) => {
|
showToast({ type: 'fail', content: '查看失败' });
|
});
|
}
|
|
// 初始化
|
useEffect(() => {
|
const fileList = formData.fileList || [];
|
const url = fileList.find((item) => Number(item.ownerType) == Number(ownerType))
|
? `${appUrl.fileUrl}${fileList.find((item) => Number(item.ownerType) == Number(ownerType)).showUrl}`
|
: '';
|
setImgdataShow(fileList.find((item) => Number(item.ownerType) == Number(ownerType)) || {})
|
setImgurlShow(url)
|
}, [formData]);
|
|
return (
|
<div style={{ height: '128px' }}>
|
{imgurlShow && (
|
<div className="file-show-main">
|
<div className="file-show-main-del" onClick={() => delOnClick(imgdataShow)}>
|
<DeleteOutlined style={{ color: '#fff', margin: '0px 0 0 10px' }} />
|
</div>
|
<img onClick={handleShowImg} src={imgurlShow} className="file-show-main-showImg" />
|
<div className="file-show-main-title">{data.title}</div>
|
</div>
|
)}
|
{!imgurlShow && (
|
<UploadFile ownerId={ownerId || ''} ownerType={data.ownerType || ''} onSuccessCallback={onSuccessCallback} maxCount={1}>
|
{
|
data.bgImgHeight ?
|
<div className="file-show-main" style={{ width: '118px', display: 'flex', justifyContent: 'center' }}>
|
<img className="file-show-main-img" src={data.bgImg} style={{ height: data.bgImgHeight ? data.bgImgHeight : '100%' }} />
|
<img src={camera} className="file-show-main-img-camera" />
|
<div className="file-show-main-title">{data.title}</div>
|
</div> :
|
<div className="file-show-main">
|
<img className="file-show-main-img" src={data.bgImg} />
|
<img src={camera} className="file-show-main-img-camera" />
|
<div className="file-show-main-title">{data.title}</div>
|
</div>
|
}
|
</UploadFile>
|
)}
|
</div>
|
);
|
};
|
|
export default FileShow;
|
