/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-11 11:03:44
|
* @LastEditTime: 2024-09-07 16:11:58
|
* @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, Row, Col, Form, Space } from 'antd';
|
import { Select, DatePicker } from '@arco-design/web-react';
|
import { useSearchParams } from 'react-router-dom';
|
import {
|
CaretRightOutlined,
|
CaretDownOutlined,
|
FileOutlined,
|
FileImageOutlined,
|
FilePdfOutlined,
|
FileWordOutlined,
|
FileExcelOutlined,
|
RotateRightOutlined,
|
RotateLeftOutlined,
|
DownloadOutlined,
|
LeftOutlined,
|
RightOutlined,
|
} from '@ant-design/icons';
|
import * as $$ from '../../utils/utility';
|
|
|
const { SubMenu } = Menu;
|
const FormItem = Form.Item;
|
const Option = Select.Option;
|
|
// 获取附件
|
function getFileListDataApi() {
|
return $$.ax.request({ url: `fileInfo/listFileByCat?mainId=${'10001'}&ownerCat=&createStart=&createEnd=&uploaderType=`, type: 'get', service: 'sys', });
|
}
|
|
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();
|
const formRef = 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 || [];
|
let arr = [];
|
let filesArr = [];
|
let index = 0;
|
resData.forEach((x, t) => {
|
arr.push(x.ownerCatName);
|
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);
|
}
|
}
|
console.log(files,'filesfiles')
|
|
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" style={{ borderRight: '1px solid transparent' }}>
|
<Form
|
ref={formRef}
|
layout='horizontal'
|
style={{ marginTop: '24px', marginBottom: '20px' }}
|
requiredSymbol={false}
|
scrollToFirstError={true}
|
initialValues={{
|
level: '三级',
|
isSerious: '否',
|
}}//默认值
|
>
|
<Row gutter={24} style={{ marginRight: '0px' }}>
|
<Col span={7}>
|
<FormItem label='材料类型：' field='level'>
|
<Select placeholder='Select city' allowClear>
|
{['一级', '二级', '三级', '四级'].map((option, index) => (
|
<Option key={option} value={option}>
|
{option}
|
</Option>
|
))}
|
</Select>
|
</FormItem>
|
</Col>
|
<Col span={7}>
|
<FormItem
|
label='上传时间：'
|
field='name'
|
onChange={(e) => console.log(e.target.value, 'vvv')}
|
>
|
<DatePicker.RangePicker
|
defaultValue={['2020-08-08', '2020-08-18']}
|
separator='~'
|
style={{ width: '100%' }}
|
/>
|
</FormItem>
|
</Col>
|
<Col span={7}>
|
<FormItem
|
label='上传人类型：'
|
field='name'
|
onChange={(e) => console.log(e.target.value, 'vvv')}
|
>
|
<Select placeholder='Select city' allowClear style={{ width: '100%' }}>
|
{['一级', '二级', '三级', '四级'].map((option, index) => (
|
<Option key={option} value={option}>
|
{option}
|
</Option>
|
))}
|
</Select>
|
</FormItem>
|
|
</Col>
|
<Col span={3}>
|
<Space>
|
<Button size="middle " type='primary'>查询</Button>
|
<Button size="middle ">查询</Button>
|
</Space>
|
</Col>
|
|
</Row>
|
|
</Form>
|
<div style={{ display: 'flex' }}>
|
<div style={{ width: '200px' }}>
|
<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.ownerCatName}
|
expandIcon={openKeys.includes(x.ownerCatName) ? <CaretRightOutlined /> : <CaretDownOutlined />}
|
title={x.ownerCatName}
|
>
|
{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>
|
|
</div>
|
<div style={{ flex: 1 }}>
|
{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]?.ownerCat === '22_00014_1' ? (
|
<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>
|
)}
|
</div>
|
</div>
|
</nav>
|
{/*图片查看*/}
|
</>
|
);
|
};
|
|
export default NewFileCheck;
|
