import React, { Fragment, useEffect, useState, useRef } from 'react';
|
import * as $$ from '@/utils/utility';
|
import ArcoUpload from '@/components/ArcoUpload';
|
import NewFileCheck from './NewFileCheck';
|
import { Row, Col, Button, Typography, Space } from 'antd';
|
import { Form, Modal } from '@arco-design/web-react';
|
import {
|
applyMaterials,
|
applyMaterials_active,
|
evidenceMaterials,
|
evidenceMaterials_active,
|
} from '@/assets/images';
|
import { CheckOutlined, } from '@ant-design/icons';
|
import TableView from '@/components/TableView';
|
import downloadFile from "@/utils/download"
|
|
const { Link, Text } = Typography;
|
const appUrl = $$.appUrl;
|
|
function delFile(id) {
|
return $$.ax.request({ url: `fileInfo/deleteFileById`, type: 'get', service: 'sys', data: { id } });
|
}
|
|
function deleteFileByIdApi(data) {
|
return $$.ax.request({ url: `fileInfo/deleteFileByIds`, type: 'get', service: 'sys', data });
|
}
|
|
//表格数据
|
const staticTableData = [
|
{
|
ownerType: "22_00018-101",
|
ownerTypeName: "申请材料",
|
size: 0,
|
fileNames: "-",
|
updateTime: '',
|
id: 1,
|
},
|
{
|
ownerType: "22_00018-102",
|
ownerTypeName: "证据材料",
|
size: 0,
|
fileNames: "-",
|
updateTime: '',
|
id: 2,
|
},
|
]
|
|
/**
|
* mainId*,//就是caseId，事件id
|
* fileInfoList*, //文件列表
|
* isReview,//是否查看，查看的话就不能删除上传，只能查看下载
|
*/
|
|
export default function FileTable(props) {
|
const formRef = useRef();
|
const [filesCheck, setFilesCheck] = useState(false);
|
const [uploadVisible, setUpLoadVisible] = useState(false);
|
const [tableData, setTableData] = useState(staticTableData);
|
// 当前弹窗的ownerType
|
const [sourceType, setSourceType] = useState();
|
// 当前弹窗的文件对象
|
const [fileMap, setFileMap] = useState({});
|
const [fileInfoList, setFileInfoList] = useState([]);
|
|
// 列配置
|
const fakeColumns = [
|
{
|
title: '序号',
|
dataIndex: 'caseNo',
|
key: 'caseNo',
|
width: 100,
|
render: (text, record, index) => <span>{index + 1}</span>,
|
},
|
{
|
title: '材料类型',
|
dataIndex: 'ownerTypeName',
|
key: 'ownerTypeName',
|
width: 100,
|
},
|
{
|
title: '材料数量',
|
dataIndex: 'size',
|
key: 'size',
|
width: 180,
|
render: (text) => <span>{text}份</span>,
|
|
},
|
{
|
title: '材料名称',
|
dataIndex: 'fileNames',
|
key: 'fileNames',
|
width: 180,
|
|
},
|
{
|
title: '最新上传时间',
|
dataIndex: 'updateTime',
|
key: 'updateTime',
|
width: 180,
|
},
|
{
|
title: '操作',
|
dataIndex: 'perClassName',
|
key: 'perClassName',
|
width: props.isReview ? 80 : 140,
|
fixed: 'right',
|
render: (text, record, index) => (
|
<Space size="middle">
|
{!props.isReview && <Link onClick={() => {
|
console.log(record);
|
setSourceType(record.ownerType)
|
setUpLoadVisible(true)
|
setFileInfoList(record.fileList)
|
setTimeout(() => {
|
formRef.current.setFieldValue('file', record.fileList)
|
}, 0)
|
}}>
|
上传
|
</Link>}
|
{record.fileList?.length > 0 && (
|
<Link onClick={() => {
|
setSourceType(record.ownerType)
|
setFilesCheck(true)
|
}}>
|
查看
|
</Link>
|
)}
|
{record.fileList?.length > 0 && !props.isReview && !props.isEdit && <Link onClick={() => {
|
if (record.fileList && record.fileList.length != 0) {
|
console.log('record.fileList', record.fileList);
|
|
let ids = record.fileList?.map(item => item.id).join(',')
|
handleDelete(ids, record, index)
|
} else {
|
$$.info({ type: 'warning', content: '还没上传关于该材料的文件！' });
|
}
|
}}>
|
删除
|
</Link>}
|
{record.fileList?.length > 0 && (<Link onClick={() => {
|
if (record.fileList && record.fileList.length != 0) {
|
let ids = record.fileList?.map(item => item.id).join(',')
|
handleDownlod(ids)
|
} else {
|
$$.info({ type: 'warning', content: '还没上传关于该材料的文件！' });
|
}
|
}}>
|
下载
|
</Link>)}
|
|
</Space>
|
)
|
},
|
// 更多列配置...
|
];
|
const fileType = [
|
{ value: '22_00018-101', label: '申请材料' },
|
{ value: '22_00018-102', label: '证据材料' },
|
]
|
|
useEffect(() => {
|
console.log(props.fileInfoList);
|
if (props.fileInfoList && props.fileInfoList.length != 0) {
|
//证明材料
|
const applyFile = props.fileInfoList.find(item => item.ownerType == "22_00018-101")
|
//证据材料
|
const evidenceFile = props.fileInfoList.find(item => item.ownerType == "22_00018-102")
|
setFileMap({
|
'22_00018-101': applyFile?.fileList || [],
|
'22_00018-102': evidenceFile?.fileList || []
|
})
|
const newList = tableData.map(item => {
|
if (item.ownerType == '22_00018-101' && applyFile && applyFile.fileList) {
|
return {
|
...item,
|
size: applyFile.fileList?.length || 0,
|
fileNames: applyFile.fileList?.map(item => item.name).join('，'),
|
updateTime: applyFile.fileList?.length > 0 ? $$.timeFormat(applyFile.fileList[applyFile.fileList.length - 1].updateTime) : '',
|
fileList: applyFile.fileList.map(item => {
|
return {
|
...item,
|
uid: item.id,
|
// name: item.trueName
|
}
|
})
|
}
|
}
|
if (item.ownerType == '22_00018-102' && evidenceFile && evidenceFile.fileList) {
|
return {
|
...item,
|
size: evidenceFile.fileList?.length || 0,
|
fileNames: evidenceFile.fileList?.map(item => item.name).join('，'),
|
updateTime: evidenceFile.fileList?.length > 0 ? $$.timeFormat(evidenceFile.fileList[evidenceFile.fileList.length - 1].updateTime) : '',
|
fileList: evidenceFile.fileList.map(item => {
|
return {
|
...item,
|
uid: item.id,
|
// name: item.trueName
|
}
|
})
|
}
|
}
|
return item
|
})
|
setTableData(newList)
|
}
|
}, [props.fileInfoList])
|
|
//上传弹窗判断用哪种种图标
|
const personIconType = (v) => {
|
switch (v) {
|
case '22_00018-101':
|
return [applyMaterials, applyMaterials_active,
|
];
|
case '22_00018-102':
|
return [evidenceMaterials, evidenceMaterials_active];
|
}
|
}
|
|
//删除文件
|
const handleDelFile = async (id) => {
|
const res = await delFile(id)
|
if (res.type) {
|
$$.infoSuccess({ content: '删除成功！' });
|
const data = fileMap[sourceType]?.filter(i => i.id !== id);
|
console.log('data', data);
|
const newList = tableData.map(item => {
|
if (item.ownerType == sourceType) {
|
return {
|
...item,
|
size: data.length,
|
fileNames: data?.map(item => item.name).join('，'),
|
updateTime: data.length > 0 && $$.timeFormat(data[data.length - 1].updateTime),
|
id: item.id,
|
fileList: data?.map(item => {
|
return {
|
...item,
|
// name: item.trueName,
|
uid: item.id,
|
}
|
}),
|
}
|
} else {
|
return item
|
}
|
})
|
console.log('newList1111', newList);
|
// console.log('fileMap', fileMap);
|
// console.log('sourceType', sourceType);
|
setTableData(newList)
|
// setFileMap({ ...fileMap, [item.ownerType]: [] })
|
}
|
}
|
|
//上传弹窗完成后的事件
|
const handleUpload = () => {
|
const newList = tableData.map(item => {
|
if (item.ownerType == '22_00018-101') {
|
const data = fileMap['22_00018-101'] || [];
|
return {
|
...item,
|
size: data.length,
|
fileNames: data.map(item => item.name).join('，'),
|
updateTime: data.length > 0 ? $$.timeFormat(data[data.length - 1].updateTime) : '',
|
id: item.id,
|
fileList: data.map(item => {
|
return {
|
...item,
|
// name: item.trueName,
|
uid: item.id,
|
}
|
}),
|
}
|
} else {
|
const data1 = fileMap['22_00018-102'] || [];
|
return {
|
...item,
|
size: data1.length,
|
fileNames: data1.map(item => item.name).join('，'),
|
updateTime: data1.length > 0 ? $$.timeFormat(data1[data1.length - 1].updateTime) : '',
|
id: item.id,
|
fileList: data1.map(item => {
|
return {
|
...item,
|
// name: item.trueName,
|
uid: item.id,
|
}
|
}),
|
}
|
}
|
})
|
//回传文件数据的时候使用
|
if (props.handleSaveList) {
|
props.handleSaveList(newList)
|
}
|
setTableData(newList)
|
setUpLoadVisible(false);
|
};
|
|
//根据sourceType生成组件
|
const formType = (type) => {
|
|
if (type === '22_00018-101') {
|
//申请材料
|
return (
|
<div className='uploadFile'>
|
<Col span={24} className='doubleFile'>
|
<ArcoUpload
|
params={{
|
action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.mainId}&&ownerId=${props.mainId}&ownerType=22_00018-101`,
|
}}
|
field='file'
|
label=''
|
editData={{
|
file: fileMap['22_00018-101'] || []
|
}}
|
handleDelFile={handleDelFile}
|
onFileListChange={(v) => {
|
let newList = v?.map(item => {
|
if (item.response) {
|
return item.response.data[0]
|
} else {
|
return item
|
}
|
})
|
setFileMap({
|
...fileMap,
|
'22_00018-101': newList.filter(i => i.ownerType === '22_00018-101')
|
});
|
|
}}
|
/>
|
{fileMap['22_00018-101']?.length > 0 && <div style={{ position: 'absolute', top: '86px', left: '16px', color: '#86909C' }}>申请材料累计上传：<span style={{ color: '#1A6FB8' }}>{fileMap['22_00018-101']?.length}</span></div>}
|
</Col>
|
</div>
|
)
|
}
|
if (type === '22_00018-102') {
|
//证据材料
|
return (
|
<div className='uploadFile'>
|
<Col span={24} className='doubleFile'>
|
<ArcoUpload
|
params={{
|
action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.mainId}&&ownerId=${props.mainId}&ownerType=22_00018-102`,
|
}}
|
field='file'
|
label=''
|
editData={{
|
file: fileMap['22_00018-102'] || []
|
}}
|
handleDelFile={handleDelFile}
|
onFileListChange={(v) => {
|
let newList = v?.map(item => {
|
if (item.response) {
|
return item.response.data[0]
|
} else {
|
return item
|
}
|
})
|
setFileMap({
|
...fileMap,
|
'22_00018-102': newList.filter(i => i.ownerType === '22_00018-102')
|
})
|
}}
|
/>
|
{fileMap[['22_00018-102']]?.length > 0 && <div style={{ position: 'absolute', top: '86px', left: '16px', color: '#86909C' }}>证据材料累计上传：<span style={{ color: '#1A6FB8' }}>{fileMap['22_00018-102']?.length}</span></div>}
|
</Col>
|
</div>
|
)
|
}
|
}
|
|
//删除
|
const handleDelete = (ids, record, index) => {
|
Modal.confirm({
|
title: '删除确认',
|
content: '确认全部删除该材料？',
|
onOk: async () => {
|
const res = await deleteFileByIdApi({ ids })
|
if (res.type) {
|
$$.infoSuccess({ content: '删除成功！' });
|
const newList = tableData.map((item, idx) => {
|
if (index === idx) {
|
return {
|
fileNames: "-",
|
id: record.id,
|
ownerType: record.ownerType,
|
ownerTypeName: record.ownerTypeName,
|
size: 0,
|
updateTime: ""
|
};
|
} else {
|
return item
|
}
|
})
|
console.log('newList1111', newList);
|
console.log('fileMap', fileMap);
|
console.log('sourceType', sourceType);
|
setTableData(newList)
|
setFileMap({ ...fileMap, [record.ownerType]: [] })
|
}
|
},
|
});
|
}
|
|
//下载
|
const handleDownlod = async (ids) => {
|
await downloadFile(`${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/down/batch`, { ids })
|
}
|
|
|
|
return (
|
<Fragment>
|
<TableView
|
key={tableData}
|
columns={fakeColumns}
|
dataSource={tableData}
|
size="small"
|
rowKey="ownerType"
|
bordered={true}
|
scroll={{ x: 1300 }}
|
tableHeight={137}
|
/>
|
<Modal
|
// style={{ width: '512px' }}
|
style={{ width: '1200px' }}
|
visible={uploadVisible}
|
onCancel={() => setUpLoadVisible(false)}
|
footer={null}
|
title='上传材料'
|
centered
|
mountOnEnter={false}
|
unmountOnExit={true}
|
maskClosable={false}
|
focusLock={false}
|
>
|
<div style={{ paddingTop: '8px' }}>
|
<Row gutter={[30, 24]}>
|
{fileType.map((x, t) => {
|
return (
|
<Col span={12} key={t}>
|
<div
|
onClick={() => {
|
if (x.value !== sourceType) {
|
setSourceType(x.value);
|
formRef.current.setFieldValue('file', fileMap[x.value] || [])
|
}
|
}}
|
className={`casePerfection-cardTab-tab ${x.value === sourceType && 'casePerfection-cardTab-tabActive'}`}
|
>
|
<img src={x.value === sourceType ? personIconType(x.value)?.[1] : personIconType(x.value)?.[0]} alt="" style={{ width: '40px', height: '40px' }} />
|
<div style={{ fontWeight: 400 }} className="casePerfection-cardTab-tab-name">{x.label}</div>
|
{x.value === sourceType && (
|
<>
|
<div className="casePerfection-cardTab-tab-triangle" />
|
<CheckOutlined className="casePerfection-cardTab-tab-check" />
|
</>
|
)}
|
</div>
|
</Col>
|
);
|
})}
|
<Col span={24}>
|
<Form
|
ref={formRef}
|
layout='vertical'
|
requiredSymbol={false}
|
initialValues={{
|
}}//默认值
|
style={{ position: 'relative' }}
|
>
|
<Row gutter={[32, 0]}>{formType(sourceType)}</Row>
|
</Form>
|
</Col>
|
<Button type="primary" style={{ marginLeft: '16px' }} onClick={() => handleUpload()}>上传完成</Button>
|
</Row>
|
</div>
|
|
</Modal>
|
<Modal
|
style={{ width: '1200px' }}
|
visible={filesCheck}
|
onCancel={() => setFilesCheck(false)}
|
footer={null}
|
title='查看事件材料'
|
centered
|
unmountOnExit={true}
|
maskClosable={false}
|
>
|
<div style={{ marginTop: '-16px' }}>
|
<NewFileCheck menuList={tableData} sourceType={sourceType} />
|
</div>
|
</Modal>
|
</Fragment >
|
)
|
}
|
