From 98f0dc29378413be45739f8fdf2f6251c4dc9e7d Mon Sep 17 00:00:00 2001
From: dminyi <1301963064@qq.com>
Date: Sat, 17 Aug 2024 17:43:26 +0800
Subject: [PATCH] 查看材料弹窗组件
---
gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx | 15 -
gz-customerSystem/src/views/filesCheck/newFileCheck.jsx | 324 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 328 insertions(+), 11 deletions(-)
diff --git a/gz-customerSystem/src/views/filesCheck/newFileCheck.jsx b/gz-customerSystem/src/views/filesCheck/newFileCheck.jsx
new file mode 100644
index 0000000..d83cb84
--- /dev/null
+++ b/gz-customerSystem/src/views/filesCheck/newFileCheck.jsx
@@ -0,0 +1,324 @@
+/*
+ * @Company: hugeInfo
+ * @Author: ldh
+ * @Date: 2022-03-11 11:03:44
+ * @LastEditTime: 2024-08-17 17:42:03
+ * @LastEditors: dminyi 1301963064@qq.com
+ * @Version: 1.0.0
+ * @Description: 大厅来访材料附件查看
+ * 附件类型对照
+ NULL("22_00017-0","未分类"),
+ AUDIO("22_00017-1", "音频"),
+ VIDEO("22_00017-2", "视频"),
+ IMAGE("22_00017-3", "图片"),
+ WORD("22_00017-4", "Word文档"),
+ EXCEL("22_00017-5", "Excel表格"),
+ PDF("22_00017-6", "PDF"),
+ TXT("22_00017-7", "txt文本"),
+ ZIP("22_00017--8", "压缩文件"),
+ POWERPOINT("22_00017-9", "PowerPoint"),
+ UNKNOWN("22_00017-99", "其它文件");
+ */
+import React, { useState, useEffect, useRef } from 'react';
+import { Button, Menu, Tooltip } from 'antd';
+import { useSearchParams } from 'react-router-dom';
+import {
+ FolderOpenOutlined,
+ FolderOutlined,
+ FileOutlined,
+ FileImageOutlined,
+ FilePdfOutlined,
+ FileWordOutlined,
+ FileExcelOutlined,
+ RotateRightOutlined,
+ RotateLeftOutlined,
+ DownloadOutlined,
+ LeftOutlined,
+ RightOutlined,
+} from '@ant-design/icons';
+import * as $$ from '../../utils/utility';
+
+const { SubMenu } = Menu;
+
+// 获取附件
+function getFileListDataApi(submitData) {
+ return $$.ax.request({ url: `caseInfo/listCaseFile?caseId=${submitData}`, type: 'get', service: 'mediate' });
+}
+
+const NewFileCheck = ({ caseId }) => {
+ let appUrl = $$.appUrl;
+
+ const [searchParams] = useSearchParams();
+
+ const fileId = searchParams.get('fileId');
+
+ const [data, setData] = useState([]);
+
+ const [openKeys, setOpenKeys] = useState([]);
+
+ // files数组
+ const [files, setFiles] = useState([{}]);
+
+ // 当前点击的file的index
+ const [fileIndex, setFileIndex] = useState(0);
+
+ const imgBgRef = useRef();
+
+ const imgRef = useRef();
+
+ // 图片旋转
+ function handleRotateImg(type) {
+ if (!imgRef || !imgRef.current) {
+ return false;
+ }
+ let transform = imgRef.current.style.transform,
+ reg = /(-)?[0-9][0-9]*/g,
+ arr = transform.split('rotate'),
+ rotate = Number(transform.match(reg)[4] || 0),
+ num = 0;
+ if (type === 'right') {
+ num = rotate + 90;
+ } else {
+ num = rotate + -90;
+ }
+ imgRef.current.style.transform = `${arr[0]}rotate(${num}deg)`;
+ }
+
+ // 监听图片滚动事件放大，缩小
+ function imgScrollFunc(e) {
+ if (!imgRef || !imgRef.current) {
+ return false;
+ }
+ let transform = imgRef.current.style.transform,
+ reg = /\((.+?)\)/g,
+ scale3d = transform.match(reg)[0],
+ scale3dNum = scale3d.substring(1, 2);
+ let num = Number(scale3dNum);
+ if (e.wheelDelta) {
+ //判断浏览器IE，谷歌滑轮事件
+ if (e.wheelDelta > 0) {
+ //当滑轮向上滚动时
+ num = num + 1;
+ }
+ if (e.wheelDelta < 0) {
+ //当滑轮向下滚动时
+ num = num - 1;
+ }
+ } else if (e.detail) {
+ //Firefox滑轮事件
+ if (e.detail > 0) {
+ //当滑轮向上滚动时
+ num = num + 1;
+ }
+ if (e.detail < 0) {
+ //当滑轮向下滚动时
+ num = num - 1;
+ }
+ }
+ let res = `scale3d(${num < 1 ? 1 : num},${num < 1 ? 1 : num},1) rotate${transform.match(reg)[1]}`;
+ imgRef.current.style.transform = res;
+ }
+
+ // 判断文件的icon
+ function iconType(fileType) {
+ let result = <FileOutlined />;
+ if (fileType === '22_00017-3') {
+ result = <FileImageOutlined />;
+ }
+ if (fileType === '22_00017-5') {
+ result = <FileExcelOutlined />;
+ }
+ if (fileType === '22_00017-4') {
+ result = <FileWordOutlined />;
+ }
+ if (fileType === '22_00017-6') {
+ result = <FilePdfOutlined />;
+ }
+ return result;
+ }
+
+ // 切换下一个，上一个
+ async function handleNext(type) {
+ global.setSpinning(true);
+ let index = fileIndex + (type === 'next' ? 1 : -1);
+ if (files[index]) {
+ setFileIndex(index);
+ } else {
+ global.setSpinning(false);
+ if (index < 0) {
+ setFileIndex(files.length - 1);
+ return;
+ }
+ setFileIndex(0);
+ }
+ }
+
+ // 获取附件数据
+ async function getFileListData() {
+ global.setSpinning(true);
+ const res = await getFileListDataApi(caseId || searchParams.get('caseId'));
+ global.setSpinning(false);
+ if (res.type) {
+ let resData = res.data?.dataList || [];
+ let arr = [];
+ let filesArr = [];
+ let index = 0;
+ resData.forEach((x, t) => {
+ arr.push(x.ownerTypeName);
+ filesArr = filesArr.concat(x.fileList || []);
+ });
+ forEach: for (let i = 0; i < filesArr.length - 1; i++) {
+ if (filesArr[i].id === fileId) {
+ index = i;
+ break forEach;
+ }
+ }
+ setData({ data: resData, caseNo: res.data?.caseNo });
+ setFileIndex(index);
+ setFiles(filesArr);
+ setOpenKeys(arr);
+ }
+ }
+
+ useEffect(() => {
+ getFileListData();
+ }, []);
+
+ // 监听鼠标滚动事件
+ useEffect(() => {
+ if (imgRef.current) {
+ imgRef.current.onload = () => {
+ imgBgRef.current.onmousewheel = imgScrollFunc;
+ };
+ }
+ }, [files]);
+
+ // 切换文件加载
+ useEffect(() => {
+ if (imgRef.current) {
+ imgRef.current.src = `${appUrl.fileUrl}${appUrl.fileShowUrl}${files[fileIndex]?.id}`;
+ imgRef.current.onload = () => {
+ global.setSpinning(false, 'only');
+ };
+ } else {
+ global.setSpinning(false, 'only');
+ }
+ }, [appUrl.fileShowUrl, fileIndex, appUrl.baseUrl, files]);
+
+ return (
+ <>
+ <nav className="filesCheck-nav">
+ <Menu
+ className="filesCheck-nav-menu"
+ style={{ width: '200px' }}
+ onOpenChange={(openKeys) => setOpenKeys(openKeys)}
+ mode="inline"
+ selectedKeys={[files[fileIndex]?.id]}
+ openKeys={openKeys}
+ >
+ {data.data?.map((x, t) => {
+ return (
+ <SubMenu
+ key={x.ownerTypeName}
+ icon={openKeys.includes(x.ownerTypeName) ? <FolderOpenOutlined /> : <FolderOutlined />}
+ title={x.ownerTypeName}
+ >
+ {x.fileList?.map((y, z) => {
+ return (
+ <Menu.Item
+ onClick={async () => {
+ global.setSpinning(true);
+ for (let i = 0; i < files.length; i++) {
+ if (files[i].id === y.id) {
+ setFileIndex(i);
+ break;
+ }
+ }
+ }}
+ icon={iconType(y.cat)}
+ key={y.id}
+ >
+ {y.name}
+ </Menu.Item>
+ );
+ })}
+ </SubMenu>
+ );
+ })}
+ </Menu>
+ </nav>
+ {files[fileIndex] ? (
+ <main className="filesCheck-main">
+ {/* 头部操作区 */}
+ <div className="filesCheck-main-action">
+ <div className="filesCheck-main-action-title">
+ <h3>{files[fileIndex]?.name}</h3>
+ </div>
+ {files[fileIndex]?.cat === '22_00017-3' && (
+ <>
+ <div className="filesCheck-main-action-item">
+ <Tooltip title="左转">
+ <RotateLeftOutlined onClick={() => handleRotateImg('left')} />
+ </Tooltip>
+ </div>
+ <div className="filesCheck-main-action-item">
+ <Tooltip title="右转">
+ <RotateRightOutlined onClick={() => handleRotateImg('right')} />
+ </Tooltip>
+ </div>
+ </>
+ )}
+ <div className="filesCheck-main-action-item">
+ <Tooltip title="下载">
+ <a href={`${appUrl.fileUrl}${appUrl.fileDownUrl}${files[fileIndex]?.id}`}>
+ <DownloadOutlined />
+ </a>
+ </Tooltip>
+ </div>
+ </div>
+ {files[fileIndex]?.cat === '22_00017-3' ? (
+ <div className="filesCheck-main-imgBg" ref={imgBgRef}>
+ <img
+ ref={imgRef}
+ style={{ transform: 'scale3d(1,1,1) rotate(0deg)' }}
+ className="filesCheck-main-img"
+ src={`${appUrl.fileUrl}${appUrl.fileShowUrl}${files[fileIndex]?.id}`}
+ alt="图片加载中..."
+ />
+ </div>
+ ) : (
+ <div className="filesCheck-main-other">
+ <div className="filesCheck-main-other-icon">{iconType(files[fileIndex]?.cat)}</div>
+ <div className="filesCheck-main-other-text">
+ 您所查看的附件不支持预览，请下载查看{files[fileIndex]?.cat === '22_00017-6' ? '或跳转预览' : ''}。
+ </div>
+ <div>
+ {files[fileIndex]?.cat === '22_00017-6' && (
+ <Button
+ className="public-buttonMargin"
+ onClick={() => window.open(`${appUrl.fileUrl}${appUrl.fileShowUrl}${files[fileIndex]?.id}`)}
+ >
+ 跳转查看
+ </Button>
+ )}
+ <a href={`${appUrl.fileUrl}${appUrl.fileDownUrl}${files[fileIndex]?.id}`}>
+ <Button type="primary">下载</Button>
+ </a>
+ </div>
+ </div>
+ )}
+ <div className="filesCheck-imgLeft" onClick={() => handleNext('back')}>
+ <LeftOutlined />
+ </div>
+ <div className="filesCheck-imgRight" onClick={() => handleNext('next')}>
+ <RightOutlined />
+ </div>
+ </main>
+ ) : (
+ <div style={{ width: '100%', paddingTop: '20%' }}>{$$.MyEmpty()}</div>
+ )}
+ </>
+ );
+};
+
+export default NewFileCheck;
diff --git a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx
index 6d50eca..0f25f91 100644
--- a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx
+++ b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx
@@ -2,11 +2,10 @@
import { Row, Col, Space, Tooltip, Button } from 'antd';
import { Form, Input, Radio, Select, DatePicker, Cascader, Modal, Upload, InputNumber } from '@arco-design/web-react';
import "@arco-design/web-react/dist/css/arco.css";
-import MyModal from '../../../../components/MyModal';
import PersonCard from '../../../../components/personCard';
import * as $$ from '../../../../utils/utility';
import {
- question1, image, link,
+ question1,
applyMaterials,
applyMaterials_active,
evidenceMaterials,
@@ -19,14 +18,8 @@
import '../../index.less';
import ApplyDialog from "./applyDialog";
import AgentDialog from "./agentDialog";
-import FilesCheck from '../../../filesCheck';
-import {
- IconFileAudio,
- IconClose,
- IconFaceFrownFill,
- IconUpload,
- IconLink,
-} from '@arco-design/web-react/icon';
+import NewFileCheck from '../../../filesCheck/newFileCheck';
+import {IconLink} from '@arco-design/web-react/icon';
import MapView from './map'
const RadioGroup = Radio.Group;// 根据调解案号获取纠纷登记信息
@@ -751,7 +744,7 @@
</Modal>
<Modal style={{ width: '1200px' }} visible={filesCheck} onCancel={() => setFilesCheck(false)} footer={null} title='查看事件材料' centered>
<div className="mediationWindow-modal-main" style={{ display: 'flex' }}>
- <FilesCheck />
+ <NewFileCheck />
</div>
</Modal>
<Modal
--
Gitblit v1.8.0