From ccbe1710b9c52b0ca23150b0a9ca763da6e1223c Mon Sep 17 00:00:00 2001
From: dminyi <1301963064@qq.com>
Date: Thu, 12 Sep 2024 15:43:22 +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 | 206 +++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 174 insertions(+), 32 deletions(-)
diff --git a/gz-customerSystem/src/views/register/matterDetail/FileTable.jsx b/gz-customerSystem/src/views/register/matterDetail/FileTable.jsx
index 84e9d1e..aea5435 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 });
+ return $$.ax.request({ url: `fileInfo/deleteFileById`, type: 'get', service: 'sys', data: { id } });
}
function deleteFileByIdApi(data) {
- return $$.ax.request({ url: `fileInfo/deleteFileById`, type: 'delete', service: 'sys', data });
+ return $$.ax.request({ url: `fileInfo/deleteFileByIds`, type: 'get', 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,48 @@
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.fileList && record.fileList.length != 0) {
+ let ids = record.fileList?.map(item => item.id).join(',')
+ handleDelete(ids)
+ } else {
+ $$.info({ type: 'warning', content: '还没上传关于该材料的文件！' });
+ }
+ }}>
+ 删除
+ </Link>}
+ <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>
+ {!props.isReview && <Link onClick={() => {
+ console.log(record);
+ setSourceType(record.ownerType)
+ setUpLoadVisible(true)
+ setFileInfoList(record.fileList)
+ setTimeout(() => {
+ formRef.current.setFieldValue('file', record.fileList)
+ }, 0)
+ }}>
+ 上传
+ </Link>}
+ </Space>
)
},
// 更多列配置...
@@ -115,8 +153,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),
+ fileList: 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),
+ 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':
@@ -135,6 +218,7 @@
}
}
+ //上传弹窗完成后的事件
const handleUpload = () => {
const newList = tableData.map(item => {
if (item.ownerType == sourceType) {
@@ -142,18 +226,31 @@
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),
+ fileList: data.map(item => {
+ return {
+ ...item,
+ name: item.trueName,
+ uid: item.id,
+ }
+ }),
}
} else {
return item
}
})
+ //回传文件数据的时候使用
+ if(props.handleSaveList) {
+ props.handleSaveList(newList)
+ }
setTableData(newList)
- setUpLoad(false);
+ setUpLoadVisible(false);
};
+ //根据sourceType生成组件
const formType = (type) => {
+
if (type === '22_00018-101') {
//申请材料
return (
@@ -165,11 +262,22 @@
}}
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.filter(i => i.ownerType === '22_00018-101')
})
}}
/>
@@ -187,22 +295,51 @@
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.filter(i => i.ownerType === '22_00018-102')
})
}}
-
/>
{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: '删除成功！' });
+ setTableData(tableData.filter(item => !ids.includes(item.ownerType)))
+ }
+ },
+ });
+ }
+
+ //下载
+ const handleDownlod = async (ids) => {
+ await downloadFile(`${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/down/batch`, { ids })
}
return (
@@ -213,15 +350,19 @@
size="small"
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]}>
@@ -229,6 +370,7 @@
return (
<Col span={12} key={t}>
<div
+ onClick={() => { x.value !== sourceType && setSourceType(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' }} />
@@ -271,9 +413,9 @@
maskClosable={false}
>
<div style={{ marginTop: '-16px' }}>
- <NewFileCheck />
+ <NewFileCheck menuList={tableData} sourceType={sourceType} />
</div>
</Modal>
- </Fragment>
+ </Fragment >
)
}
--
Gitblit v1.8.0