/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-10 14:41:45
|
* @LastEditTime: 2022-10-31 14:08:53
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 案件材料展示Table
|
* 附件类型对照
|
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, { useState } from 'react';
|
import PropTypes from 'prop-types';
|
import { Popconfirm, Image, Space, Typography, Tooltip } from 'antd';
|
import { PaperClipOutlined, DownloadOutlined, DeleteOutlined } from '@ant-design/icons';
|
import TableView from '../TableView';
|
import * as $$ from '../../utils/utility';
|
import './index.less';
|
|
const { Link } = Typography;
|
|
function deleteFile(fileId) {
|
return $$.ax.request({ url: `fileInfo/deleteById?id=${fileId}`, type: 'get', service: 'sys' });
|
}
|
|
/**
|
* isCheck, // 是否是查看模式
|
* isList, // 单个案件类型模式
|
* data, // 附件数据[{fileList:[]}]
|
* handleSuccessDelFile, // 删除文件成功后回调
|
* columnsContral: bool // 判断是否展示出所有的文件，包括未上传文件展示为0
|
* description, // 空的说明文字
|
*/
|
const FilesTable = ({ isCheck = false, isList = false, data = [], handleSuccessDelFile, columnsContral, rowKey, description = '无数据' }) => {
|
let appUrl = $$.appUrl;
|
|
// 单个预览图片控制
|
const [imgVisible, setImgVisible] = useState({ visible: false, src: '' });
|
|
// 正常展示已存在的文件
|
const columns = () => {
|
let rows = {};
|
let index = 0;
|
data?.forEach((x) => {
|
rows[index] = x.fileList.length;
|
index = index + x.fileList.length;
|
});
|
let columnsArr = [
|
{
|
title: '序号',
|
dataIndex: 'serialNumber',
|
width: 50,
|
onCell: (_, index) => ({ rowSpan: rows[index] || 0 }),
|
},
|
{
|
title: '材料类型',
|
dataIndex: 'ownerTypeName',
|
onCell: (_, index) => ({ rowSpan: rows[index] || 0 }),
|
},
|
{
|
title: '材料数量',
|
dataIndex: 'num',
|
width: 100,
|
render: (_, __, index) => `${rows[index]}份`,
|
onCell: (_, index) => ({ rowSpan: rows[index] || 0 }),
|
},
|
{
|
title: '材料名称',
|
dataIndex: 'name',
|
render: (text, record) => <Link onClick={() => handleOpenFiles(record)}>{text}</Link>,
|
},
|
{
|
title: '上传时间',
|
dataIndex: 'createTime',
|
render: (text) => $$.timeFormat(text),
|
},
|
{
|
title: '操作',
|
dataIndex: 'action',
|
width: 150,
|
render: (_, record, index) => {
|
return (
|
<Space size="middle">
|
<Link onClick={() => window.open(`/#/mediate/case/filesCheck?caseId=${record.ownerId}&fileId=${record.id}`)}>查看</Link>
|
<Link onClick={() => handleDownloadFiles(record)}>下载</Link>
|
{!isCheck && (
|
<Popconfirm title="确认删除该材料吗？" onConfirm={() => handleDeleteFile(record, index)}>
|
<Link>删除</Link>
|
</Popconfirm>
|
)}
|
</Space>
|
);
|
},
|
},
|
];
|
return columnsArr;
|
};
|
|
// 展示固定的文件包含未上传文件
|
const columnsSec = () => {
|
let rows = {};
|
let index = 0;
|
data?.forEach((x) => {
|
rows[index] = x.fileList.length || 1;
|
index = index + (x.fileList.length || 1);
|
});
|
let columnsArr = [
|
{ title: '序号', dataIndex: 'serialNumber', width: 50, onCell: (_, index) => ({ rowSpan: rows[index] || 0 }) },
|
{
|
title: '材料类型',
|
dataIndex: 'ownerTypeName',
|
render: (text, record) => {
|
return (
|
<>
|
{record.ownerType === '22_00018-302' ? (
|
<Tooltip title="已自动帮您上传调解协议书">
|
<div>
|
{text}
|
<span className="leftRequired">*</span>
|
</div>
|
</Tooltip>
|
) : record.ownerType === '22_00018-402' ? (
|
<div>
|
{text}
|
<span className="leftRequired">*</span>
|
</div>
|
) : (
|
<span>{text}</span>
|
)}
|
</>
|
);
|
},
|
onCell: (_, index) => ({ rowSpan: rows[index] || 0 }),
|
},
|
{
|
title: '材料数量',
|
dataIndex: 'num',
|
width: 80,
|
render: (text, _, index) => (parseInt(text) !== 0 ? `${rows[index]}份` : '0份'),
|
onCell: (_, index) => ({ rowSpan: rows[index] || 0 }),
|
},
|
{
|
title: '状态',
|
dataIndex: 'status',
|
width: 80,
|
render: (text) => (parseInt(text) === 0 ? '未上传' : '已上传'),
|
},
|
{
|
title: '材料名称',
|
dataIndex: 'name',
|
render: (text, record) => <Link onClick={() => handleOpenFiles(record)}>{text}</Link>,
|
},
|
{
|
title: '上传时间',
|
dataIndex: 'createTime',
|
render: (text) => $$.timeFormat(text),
|
},
|
{
|
title: '操作',
|
dataIndex: 'action',
|
width: 150,
|
render: (_, record, index) => {
|
return (
|
<Space size="middle">
|
{parseInt(record?.num) !== 0 && (
|
<>
|
<Link onClick={() => window.open(`${$$.isDebug ? '' : 'hgdyh/pc'}/bydyh/pc/index.html#/mediate/case/filesCheck?caseId=${record.ownerId}`)}>查看</Link>
|
<Link onClick={() => handleDownloadFiles(record)}>下载</Link>
|
{!isCheck && (
|
<Popconfirm title="确认删除该材料吗？" onConfirm={() => handleDeleteFile(record, index)}>
|
<Link>删除</Link>
|
</Popconfirm>
|
)}
|
</>
|
)}
|
</Space>
|
);
|
},
|
},
|
];
|
|
return columnsArr;
|
};
|
|
// table数据处理便于展示
|
const files = () => {
|
let arr = [];
|
data?.forEach((x, t) => {
|
let fileList = x.fileList || [];
|
if (fileList.length > 0) {
|
fileList[0].serialNumber = t + 1;
|
} else if (columnsContral) {
|
fileList = {
|
serialNumber: t + 1,
|
ownerTypeName: x.ownerTypeName,
|
ownerType: x.ownerType,
|
name: '-',
|
num: 0,
|
};
|
}
|
arr = arr.concat(fileList || []);
|
});
|
return arr;
|
};
|
|
// 删除文件
|
async function handleDeleteFile(record, index) {
|
global.setSpinning(true);
|
const res = await deleteFile(record.id);
|
global.setSpinning(false);
|
if (res.type) {
|
$$.infoSuccess({ content: '删除成功' });
|
handleSuccessDelFile(record, index);
|
}
|
}
|
|
// 查看单个文件
|
function handleOpenFiles(record) {
|
let file = record;
|
const { response } = record;
|
if (response) {
|
file = response.data[0];
|
}
|
if (file.cat === '22_00017-3') {
|
setImgVisible({ visible: true, src: `${appUrl.fileUrl}${appUrl.fileShowUrl}${file.id}` });
|
} else if (file.cat === '22_00017-6' || file.cat === '22_00017-1' || file.cat === '22_00017-2') {
|
window.open(`${appUrl.fileUrl}${appUrl.fileShowUrl}${file.id}`);
|
} else {
|
$$.info({ type: 'warning', content: '抱歉，暂不支持在线查看，已下载请查看' });
|
window.open(`${appUrl.fileUrl}${appUrl.fileDownUrl}${file.id}`);
|
}
|
}
|
|
// 下载单个文件
|
function handleDownloadFiles(record) {
|
let file = record;
|
const { response } = record;
|
if (response) {
|
file = response.data[0];
|
}
|
window.open(`${appUrl.fileUrl}${appUrl.fileDownUrl}${file.id}`);
|
}
|
|
return (
|
<>
|
{isList ? (
|
// 列表模式
|
<div>
|
{data?.map((x, t) => {
|
return (
|
<div className="filesTable-fileLi" key={t}>
|
<PaperClipOutlined className="filesTable-fileLi-icon" />
|
<div className="filesTable-fileLi-name" onClick={() => handleOpenFiles(x)}>
|
{x.name}
|
</div>
|
<Space size="middle">
|
{!isCheck && (
|
<span className="filesTable-fileLi-iconDelete" onClick={() => handleDeleteFile(x, t)}>
|
<DeleteOutlined />
|
</span>
|
)}
|
<span className="filesTable-fileLi-iconA" onClick={() => handleDownloadFiles(x)}>
|
<DownloadOutlined />
|
</span>
|
</Space>
|
</div>
|
);
|
})}
|
{(!data || data.length === 0) && $$.MyEmpty({ description })}
|
</div>
|
) : (
|
// table模式
|
<TableView
|
columns={columnsContral ? columnsSec() : columns()}
|
dataSource={files()}
|
rowKey={rowKey || 'id'}
|
pagination={false}
|
scroll={{ y: 300 }}
|
/>
|
)}
|
<div style={{ display: 'none' }}>
|
<Image
|
src={imgVisible.src}
|
preview={{
|
visible: imgVisible.visible,
|
src: imgVisible.src,
|
onVisibleChange: () => setImgVisible({ visible: false }),
|
}}
|
/>
|
</div>
|
</>
|
);
|
};
|
|
FilesTable.propTypes = {
|
isCheck: PropTypes.bool,
|
isList: PropTypes.bool,
|
data: PropTypes.array,
|
handleSuccessDelFile: PropTypes.func,
|
columnsContral: PropTypes.bool,
|
description: PropTypes.string,
|
};
|
|
export default FilesTable;
|
