From 646cb57be5d997f4308a169a025a762356a6bd94 Mon Sep 17 00:00:00 2001
From: zhangyongtian <1181606322@qq.com>
Date: Mon, 09 Sep 2024 17:17:16 +0800
Subject: [PATCH] feat: 事件材料完善
---
gz-customerSystem/src/views/register/visit/component/previewTable.jsx | 8
gz-customerSystem/src/styles/public.less | 4
gz-customerSystem/src/views/register/matterDetail/FileTable.jsx | 184 ++++++++++++++++++++++++++----
gz-customerSystem/src/api/appUrl.js | 4
gz-customerSystem/src/views/register/matterDetail/NewFileCheck.jsx | 76 +++++++++++-
gz-customerSystem/src/utils/download.js | 41 ++++++
6 files changed, 276 insertions(+), 41 deletions(-)
diff --git a/gz-customerSystem/src/api/appUrl.js b/gz-customerSystem/src/api/appUrl.js
index 7e3192e..cb77419 100644
--- a/gz-customerSystem/src/api/appUrl.js
+++ b/gz-customerSystem/src/api/appUrl.js
@@ -10,11 +10,11 @@
export const debug = {
// web服务
// baseUrl: 'http://gz.hugeinfo.com.cn',
- baseUrl: "http://fydddb.natappfree.cc",
+ baseUrl: "http://w88bsz.natappfree.cc",
// baseUrl: 'http://mdqgnh.natappfree.cc',
// 附件服务
- fileUrl: "http://fydddb.natappfree.cc",
+ fileUrl: "http://w88bsz.natappfree.cc",
// fileUrl: 'http://gz.hugeinfo.com.cn',
// 文件查看url 后面接附件编号
diff --git a/gz-customerSystem/src/styles/public.less b/gz-customerSystem/src/styles/public.less
index e824b98..7381840 100644
--- a/gz-customerSystem/src/styles/public.less
+++ b/gz-customerSystem/src/styles/public.less
@@ -800,10 +800,12 @@
.arco-modal-header {
padding: 0;
+ margin-bottom: 0;
}
- .arco-modal-header {
+ .arco-modal-footer {
text-align: right;
+ margin-top: 0;
}
}
diff --git a/gz-customerSystem/src/utils/download.js b/gz-customerSystem/src/utils/download.js
new file mode 100644
index 0000000..5ce3b11
--- /dev/null
+++ b/gz-customerSystem/src/utils/download.js
@@ -0,0 +1,41 @@
+import axios from 'axios'
+import qs from 'qs'
+import * as $$ from '@/utils/utility';
+
+export default function downloadFile(url, params) {
+ const link = document.createElement('a')
+ return axios({
+ url,
+ params,
+ method: 'GET',
+ headers: {
+ Authorization: $$.getSessionStorage('customerSystemToken')
+ },
+ responseType: 'blob',
+ paramsSerializer: (v) => qs.stringify(v, {
+ arrayFormat: 'repeat'
+ }),
+ })
+ .then((res) => {
+ // 切割文件名
+ const fileNameEncode = res.headers['content-disposition'].split('filename=')[1]
+ // 解码
+ const fileName = decodeURIComponent(fileNameEncode)
+ // 设置type类型
+ const blob = new Blob([res.data], {
+ type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet; application/octet-stream',
+ })
+ const fileUrl = window.URL.createObjectURL(blob)
+ link.href = fileUrl
+ link.setAttribute('download', fileName)
+ link.style.display = 'none'
+ link.click()
+ link.remove()
+ })
+ .catch(() => {
+ $$.info({
+ type: 'error',
+ content: '文件下载请求失败'
+ });
+ })
+}
\ No newline at end of file
diff --git a/gz-customerSystem/src/views/register/matterDetail/FileTable.jsx b/gz-customerSystem/src/views/register/matterDetail/FileTable.jsx
index 84e9d1e..f309b7e 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,7 +12,9 @@
} 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) {
@@ -24,7 +26,7 @@
}
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 +37,7 @@
size: 0,
fileNames: "-",
updateTime: '',
+ id: 1,
},
{
ownerType: "22_00018-102",
@@ -42,6 +45,7 @@
size: 0,
fileNames: "-",
updateTime: '',
+ id: 2,
},
]
@@ -49,9 +53,10 @@
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 +98,47 @@
title: '操作',
dataIndex: 'perClassName',
key: 'perClassName',
- width: 200,
+ width: 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>
+ <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>
+ <Link onClick={() => {
+ setSourceType(record.ownerType)
+ setUpLoadVisible(true)
+ setFileInfoList(record.fileInfoList)
+ setTimeout(() => {
+ formRef.current.setFieldValue('file', record.fileInfoList)
+ }, 0)
+ }}>
+ 上传
+ </Link>
+ </Space>
)
},
// 更多列配置...
@@ -114,9 +149,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 +214,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 +254,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 +286,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 +341,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 +403,7 @@
maskClosable={false}
>
<div style={{ marginTop: '-16px' }}>
- <NewFileCheck />
+ <NewFileCheck menuList={tableData} sourceType={sourceType}/>
</div>
</Modal>
</Fragment>
diff --git a/gz-customerSystem/src/views/register/matterDetail/NewFileCheck.jsx b/gz-customerSystem/src/views/register/matterDetail/NewFileCheck.jsx
index a65d6a0..e1a9b8e 100644
--- a/gz-customerSystem/src/views/register/matterDetail/NewFileCheck.jsx
+++ b/gz-customerSystem/src/views/register/matterDetail/NewFileCheck.jsx
@@ -1,14 +1,42 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, Fragment } from 'react';
import { Row, Col, Space } from 'antd';
-import { Select, DatePicker, Form, Button } from '@arco-design/web-react';
+import { Select, DatePicker, Form, Button, Menu } from '@arco-design/web-react';
import * as $$ from '@/utils/utility';
const FormItem = Form.Item;
+const MenuItem = Menu.Item;
+const SubMenu = Menu.SubMenu;
const appUrl = $$.appUrl;
+const formItemLayout = {
+ labelCol: {
+ span: 8,
+ },
+ wrapperCol: {
+ span: 16,
+ },
+};
const NewFileCheck = (props) => {
- const formRef = useRef()
+ const formRef = useRef();
+ const [fileUrl, setFileUrl] = useState('')
+ const [itemData, setItemData] = useState(null)
+
+ const peopleTypeMap = {
+ 1: '工作人员',
+ 2: '当事人'
+ }
+
+ useEffect(() => {
+ console.log(props.menuList, props.sourceType);
+ }, [])
+
+ //点击菜单
+ const clickItem = (data) => {
+ console.log(data);
+ setItemData(data)
+ setFileUrl(`${appUrl.fileUrl}/${appUrl.sys}${data.showUrl}`)
+ }
return (
<nav className="filesCheck-nav" style={{ borderRight: '1px solid transparent' }}>
@@ -17,8 +45,7 @@
layout='horizontal'
style={{ marginTop: '24px', marginBottom: '20px' }}
scrollToFirstError={true}
- initialValues={{
- }}//默认值
+ {...formItemLayout}
>
<Row gutter={24} style={{ marginRight: '0px' }}>
<Col span={7}>
@@ -79,17 +106,50 @@
<Col span={3}>
<Space>
<Button size="middle " type='primary'>查询</Button>
- <Button size="middle ">查询</Button>
+ <Button size="middle ">重置</Button>
</Space>
</Col>
</Row>
</Form>
- <div style={{ display: 'flex' }}>
- <div style={{ width: '200px' }}>
+ <div style={{ display: 'flex', height: '550px' }}>
+ <div style={{ width: '256px' }}>
+ <Menu
+ style={{ width: '100%', height: '100%' }}
+ >
+ {props.menuList?.map(item => {
+ return <SubMenu
+ key={item.id}
+ title={item.ownerTypeName + `（${item.fileInfoList && item.fileInfoList.length || 0}）`}
+ >
+ {item.fileInfoList?.map(res => {
+ return <MenuItem key={res.id} onClick={() => { clickItem(res) }}>{res.trueName}</MenuItem>
+ })}
+ </SubMenu>
+ })}
+ </Menu>
</div>
<div style={{ flex: 1 }}>
+ {
+ itemData ? <Fragment>
+ <div style={{ background: '#e8f3ff', color: '#1A6FB8', padding: '5px 10px', marginBottom: '16px' }}>
+ <span>材料名称：{itemData.trueName}</span> |
+ <span>上传时间：{itemData.updateTime}</span> |
+ <span>上传人：{itemData.uploaderName} {itemData.uploaderType && <span>（{peopleTypeMap[itemData.uploaderType]}）</span>}</span>
+ </div>
+ <div style={{ width: '100%', height: '470px' }}>
+ {
+ itemData.suffix === 'pdf' ?
+ <embed src="fileUrl" type="application/pdf" width="100%" height="100%"></embed>
+ :
+ <img src={fileUrl} alt="" style={{ width: '100%', height: '100%' }} />
+ }
+ </div>
+ </Fragment> : <Fragment>
+ <div style={{ padding: '100px 0' }}>{$$.MyEmpty()}</div>
+ </Fragment>
+ }
</div>
</div>
</nav>
diff --git a/gz-customerSystem/src/views/register/visit/component/previewTable.jsx b/gz-customerSystem/src/views/register/visit/component/previewTable.jsx
index b4a700a..6ab1329 100644
--- a/gz-customerSystem/src/views/register/visit/component/previewTable.jsx
+++ b/gz-customerSystem/src/views/register/visit/component/previewTable.jsx
@@ -7,7 +7,7 @@
<>
{
applyDialog?.map((item, index) => (
- <table border="1" align="center" cellpadding="6" className="table">
+ <table border="1" align="center" cellpadding="6" className="table" key={item.id}>
<tr>
<th bgcolor="#F7F8FA" className="table-title" width="120">姓名</th>
<td width='380'><div style={{ display: 'flex' }}><div>{item.trueName || '-'}</div><div className="title-personRemark">自然人</div></div></td>
@@ -65,7 +65,7 @@
return (
<>
{agentDialog?.map((item, index) => (
- <table border="1" align="center" cellpadding="6" className="table" style={{ marginTop: '20px', marginBottom: '20px' }}>
+ <table border="1" align="center" cellpadding="6" className="table" style={{ marginTop: '20px', marginBottom: '20px' }} key={item.id}>
<tr>
<th bgcolor="#F7F8FA" className="table-title" width="120">姓名</th>
<td width='380'><div style={{ display: 'flex' }}><div>{item.trueName || '-'}</div><div className="title-personRemark">代理人</div></div></td>
@@ -129,7 +129,7 @@
return (
<>
{respondent?.map((item, index) => (
- <table border="1" align="center" cellpadding="6" className="table" style={{ marginTop: '20px', marginBottom: '20px' }}>
+ <table border="1" align="center" cellpadding="6" className="table" style={{ marginTop: '20px', marginBottom: '20px' }} key={item.id}>
<tr>
<th bgcolor="#F7F8FA" className="table-title" width="120">企业名称</th>
<td width='380'><div style={{ display: 'flex' }}><div>{item.trueName}</div><div className="title-personRemark">{item.perClassName}</div></div></td>
@@ -175,7 +175,7 @@
return (
<>
{company?.map((item, index) => (
- <table border="1" align="center" cellpadding="6" className="table" style={{ marginTop: '20px', marginBottom: '20px' }}>
+ <table border="1" align="center" cellpadding="6" className="table" style={{ marginTop: '20px', marginBottom: '20px' }} key={item.id}>
<tr>
<th bgcolor="#F7F8FA" className="table-title" width="120">机构名称</th>
<td width='380'><div style={{ display: 'flex' }}><div>{item.trueName}</div><div className="title-personRemark">{item.perClassName}</div></div></td>
--
Gitblit v1.8.0