import React, { Fragment, useEffect, useState, useRef } from 'react';
|
import * as $$ from '@/utils/utility';
|
import ArcoUpload from '@/components/ArcoUpload';
|
import NewFileCheck from '../../filesCheck/newFileCheck';
|
import { IconLink } from '@arco-design/web-react/icon';
|
import { Row, Col, Button } 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';
|
|
const appUrl = $$.appUrl;
|
|
function delFile(id) {
|
return $$.ax.request({ url: `fileInfo/deleteFileById`, type: 'delete', service: 'sys', data: { id } });
|
}
|
|
function listIdTypeInfoApi(data) {
|
return $$.ax.request({ url: `fileInfo/listIdTypeInfo`, type: 'post', service: 'sys', data });
|
}
|
|
function deleteFileByIdApi(data) {
|
return $$.ax.request({ url: `fileInfo/deleteFileById`, type: 'delete', service: 'sys', data });
|
}
|
|
//表格数据
|
const staticTableData = [
|
{
|
ownerType: "22_00018-101",
|
ownerTypeName: "申请材料",
|
size: 0,
|
fileNames: "-",
|
updateTime: '',
|
},
|
{
|
ownerType: "22_00018-102",
|
ownerTypeName: "证据材料",
|
size: 0,
|
fileNames: "-",
|
updateTime: '',
|
},
|
]
|
|
export default function FileTable(props) {
|
const formRef = useRef();
|
const [sourceType, setSourceType] = useState();
|
const [filesCheck, setFilesCheck] = useState(false);
|
const [upload, setUpLoad] = useState(false);
|
const [tableData, setTableData] = useState(staticTableData);
|
const [fileMap, setFileMap] = 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: 200,
|
render: (text, record) => (
|
<div style={{ display: 'flex', color: '#1A6FB8', gap: '16px' }}>
|
<div onClick={() => setFilesCheck(true)}>查看</div>
|
<div>删除</div>
|
<div>下载</div>
|
<div onClick={() => {
|
setSourceType(record.ownerType)
|
setUpLoad(true)
|
}}>上传</div>
|
</div>
|
)
|
},
|
// 更多列配置...
|
];
|
const fileType = [
|
{ value: '22_00018-101', label: '申请材料' },
|
{ value: '22_00018-102', label: '证据材料' },
|
]
|
|
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 handleUpload = () => {
|
const newList = tableData.map(item => {
|
if(item.ownerType == sourceType) {
|
const data = fileMap[sourceType]
|
return {
|
...item,
|
size: data.length,
|
fileNames: data.map(item => item.name).join('，'),
|
updateTime: $$.timeFormat(data[data.length - 1].response.data[0].updateTime)
|
}
|
} else {
|
return item
|
}
|
})
|
setTableData(newList)
|
setUpLoad(false);
|
};
|
|
const formType = (type) => {
|
if (type === '22_00018-101') {
|
//申请材料
|
return (
|
<>
|
<Col span={24}>
|
<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={props.editData}
|
handleDelFile={handleDelFile}
|
onFileListChange={(v) => {
|
setFileMap({
|
'22_00018-101': v
|
})
|
}}
|
/>
|
{fileMap[sourceType]?.length > 0 && <div style={{ position: 'absolute', top: '198px', left: '16px', color: '#86909C' }}>申请材料累计上传：<span style={{ color: '#1A6FB8' }}>{fileMap[sourceType]?.length}</span></div>}
|
</Col>
|
</>
|
)
|
}
|
if (type === '22_00018-102') {
|
//证据材料
|
return (
|
<>
|
<Col span={24}>
|
<ArcoUpload
|
params={{
|
action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.mainId}&&ownerId=${props.mainId}&ownerType=22_00018-102`,
|
}}
|
field='file1'
|
label=''
|
// editData={props.editData}
|
handleDelFile={handleDelFile}
|
onFileListChange={(v) => {
|
setFileMap({
|
'22_00018-102': v
|
})
|
}}
|
|
/>
|
{fileMap[sourceType]?.length > 0 && <div style={{ position: 'absolute', top: '198px', left: '16px', color: '#86909C' }}>证据材料累计上传：<span style={{ color: '#1A6FB8' }}>{fileMap[sourceType]?.length}</span></div>}
|
</Col>
|
</>
|
)
|
}
|
}
|
|
return (
|
<Fragment>
|
<TableView
|
columns={fakeColumns}
|
dataSource={tableData}
|
size="small"
|
rowKey="ownerType"
|
bordered={true}
|
style={{ marginBottom: '65px' }}
|
/>
|
<Modal
|
style={{ width: '512px' }}
|
visible={upload}
|
onCancel={() => setUpLoad(false)}
|
footer={null}
|
title='上传材料'
|
centered
|
>
|
<div style={{ paddingTop: '8px' }}>
|
<Row gutter={[30, 24]}>
|
{fileType.map((x, t) => {
|
return (
|
<Col span={12} key={t}>
|
<div
|
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 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={{ marginTop: '-20px', marginLeft: '16px' }} onClick={() => handleUpload()}>上传完成</Button>
|
</Row>
|
</div>
|
|
</Modal >
|
<Modal style={{ width: '1200px' }} visible={filesCheck} onCancel={() => setFilesCheck(false)} footer={null} title='查看事件材料' centered>
|
<div style={{ marginTop: '-16px' }}>
|
<NewFileCheck />
|
</div>
|
</Modal>
|
</Fragment>
|
)
|
}
|
