查看材料弹窗组件

dminyi

2024-08-17 98f0dc29378413be45739f8fdf2f6251c4dc9e7d

查看材料弹窗组件

 gz-customerSystem/src/views/filesCheck/newFileCheck.jsx

New file
@@ -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;

 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