From 71e242b85800588e66645aa0df1ed24469dfad45 Mon Sep 17 00:00:00 2001 From: liuwh <964324856@qq.com> Date: Tue, 10 Sep 2024 10:14:41 +0800 Subject: [PATCH] Merge branch 'master' of http://120.79.193.119:9090/r/gzzfw/frontEnd/gzDyh into master --- gz-customerSystem/src/views/register/matterDetail/FileTable.jsx | 194 +++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 164 insertions(+), 30 deletions(-) diff --git a/gz-customerSystem/src/views/register/matterDetail/FileTable.jsx b/gz-customerSystem/src/views/register/matterDetail/FileTable.jsx index 84e9d1e..f1cc458 100644 --- a/gz-customerSystem/src/views/register/matterDetail/FileTable.jsx +++ b/gz-customerSystem/src/views/register/matterDetail/FileTable.jsx @@ -2,7 +2,7 @@ import * as $$ from '@/utils/utility'; import ArcoUpload from '@/components/ArcoUpload'; import NewFileCheck from './NewFileCheck'; -import { Row, Col, Button } from 'antd'; +import { Row, Col, Button, Typography, Space } from 'antd'; import { Form, Modal } from '@arco-design/web-react'; import { applyMaterials, @@ -12,19 +12,17 @@ } 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: '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 }); + return $$.ax.request({ url: `fileInfo/deleteFileByIds`, type: 'delete', service: 'sys', data }); } //表格数据 @@ -35,6 +33,7 @@ size: 0, fileNames: "-", updateTime: '', + id: 1, }, { ownerType: "22_00018-102", @@ -42,16 +41,24 @@ size: 0, fileNames: "-", updateTime: '', + id: 2, }, ] + +/** + * mainId*,//就是caseId,事件id + * fileInfoList*, //文件列表 + * isReview,//是否查看,查看的话就不能删除上传,只能查看下载 + */ export default function FileTable(props) { const formRef = useRef(); const [sourceType, setSourceType] = useState(); const [filesCheck, setFilesCheck] = useState(false); - const [upload, setUpLoad] = useState(false); + const [uploadVisible, setUpLoadVisible] = useState(false); const [tableData, setTableData] = useState(staticTableData); const [fileMap, setFileMap] = useState({}); + const [fileInfoList, setFileInfoList] = useState([]); // 列配置 const fakeColumns = [ @@ -93,17 +100,47 @@ title: '操作', dataIndex: 'perClassName', key: 'perClassName', - width: 200, + width: props.isReview ? 60 : 125, + fixed: 'right', render: (text, record) => ( - <div style={{ display: 'flex', color: '#1A6FB8', gap: '16px' }}> - <div onClick={() => setFilesCheck(true)}>查看</div> - <div>删除</div> - <div>下载</div> - <div onClick={() => { + <Space size="middle"> + <Link onClick={() => { setSourceType(record.ownerType) - setUpLoad(true) - }}>上传</div> - </div> + setFilesCheck(true) + }}> + 查看 + </Link> + {!props.isReview && <Link onClick={() => { + if (record.fileInfoList && record.fileInfoList.length != 0) { + let ids = record.fileInfoList?.map(item => item.id).join(',') + handleDelete(ids) + } else { + $$.info({ type: 'warning', content: '还没上传关于该材料的文件!' }); + } + }}> + 删除 + </Link>} + <Link onClick={() => { + if (record.fileInfoList && record.fileInfoList.length != 0) { + let ids = record.fileInfoList?.map(item => item.id).join(',') + handleDownlod(ids) + } else { + $$.info({ type: 'warning', content: '还没上传关于该材料的文件!' }); + } + }}> + 下载 + </Link> + {!props.isReview && <Link onClick={() => { + setSourceType(record.ownerType) + setUpLoadVisible(true) + setFileInfoList(record.fileInfoList) + setTimeout(() => { + formRef.current.setFieldValue('file', record.fileInfoList) + }, 0) + }}> + 上传 + </Link>} + </Space> ) }, // 更多列配置... @@ -114,9 +151,53 @@ ] useEffect(() => { - console.log(props.fileInfoList); - },[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) { + return { + ...item, + size: applyFile.fileList.length, + fileNames: applyFile.fileList?.map(item => item.trueName).join(','), + updateTime: $$.timeFormat(applyFile.fileList[applyFile.fileList.length - 1].updateTime), + fileInfoList: applyFile.fileList.map(item => { + return { + ...item, + uid: item.id, + name: item.trueName + } + }) + } + } + if (item.ownerType == '22_00018-102' && evidenceFile) { + return { + ...item, + size: evidenceFile.fileList.length, + fileNames: evidenceFile.fileList?.map(item => item.trueName).join(','), + updateTime: $$.timeFormat(evidenceFile.fileList[evidenceFile.fileList.length - 1].updateTime), + fileInfoList: 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': @@ -135,24 +216,34 @@ } } + //上传弹窗完成后的事件 const handleUpload = () => { const newList = tableData.map(item => { if (item.ownerType == sourceType) { const data = fileMap[sourceType] + console.log(data); return { ...item, size: data.length, - fileNames: data.map(item => item.name).join(','), - updateTime: $$.timeFormat(data[data.length - 1].response.data[0].updateTime) + fileNames: data.map(item => item.trueName).join(','), + updateTime: $$.timeFormat(data[data.length - 1].updateTime), + fileInfoList: data.map(item => { + return { + ...item, + name: item.trueName, + uid: item.id, + } + }), } } else { return item } }) setTableData(newList) - setUpLoad(false); + setUpLoadVisible(false); }; + //根据sourceType生成组件 const formType = (type) => { if (type === '22_00018-101') { //申请材料 @@ -165,11 +256,21 @@ }} field='file' label='' - // editData={props.editData} + editData={{ + file: fileInfoList + }} handleDelFile={handleDelFile} onFileListChange={(v) => { + let newList = v?.map(item => { + if (item.response) { + return item.response.data[0] + } else { + return item + } + }) setFileMap({ - '22_00018-101': v + ...fileMap, + '22_00018-101': newList }) }} /> @@ -187,22 +288,50 @@ params={{ action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.mainId}&&ownerId=${props.mainId}&ownerType=22_00018-102`, }} - field='file1' + field='file' label='' - // editData={props.editData} + editData={{ + file: fileInfoList + }} handleDelFile={handleDelFile} onFileListChange={(v) => { + let newList = v?.map(item => { + if (item.response) { + return item.response.data[0] + } else { + return item + } + }) setFileMap({ - '22_00018-102': v + ...fileMap, + '22_00018-102': newList }) }} - /> {fileMap[sourceType]?.length > 0 && <div style={{ position: 'absolute', top: '198px', left: '16px', color: '#86909C' }}>证据材料累计上传:<span style={{ color: '#1A6FB8' }}>{fileMap[sourceType]?.length}</span></div>} </Col> </> ) } + } + + //删除 + const handleDelete = (ids) => { + Modal.confirm({ + title: '删除确认', + content: '确认全部删除该材料?', + onOk: async () => { + const res = await deleteFileByIdApi({ ids }) + if (res.type) { + $$.infoSuccess({ content: '删除成功!' }); + } + }, + }); + } + + //下载 + const handleDownlod = async (ids) => { + await downloadFile(`${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/down/batch`, { ids }) } return ( @@ -214,14 +343,19 @@ rowKey="ownerType" bordered={true} style={{ marginBottom: '65px' }} + scroll={{ x: 1300 }} /> <Modal style={{ width: '512px' }} - visible={upload} - onCancel={() => setUpLoad(false)} + 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]}> @@ -271,7 +405,7 @@ maskClosable={false} > <div style={{ marginTop: '-16px' }}> - <NewFileCheck /> + <NewFileCheck menuList={tableData} sourceType={sourceType} /> </div> </Modal> </Fragment> -- Gitblit v1.8.0