From 80e40362a760c5c53c51e8a1e79c9a11c6a0f5fe Mon Sep 17 00:00:00 2001
From: dminyi <1301963064@qq.com>
Date: Sat, 07 Sep 2024 14:24:37 +0800
Subject: [PATCH] 事件材料查看+ai页面
---
gz-customerSystem/src/views/filesCheck/newFileCheck.jsx | 719 ++++++++++++++++++++++++++++++-----------------------------
1 files changed, 360 insertions(+), 359 deletions(-)
diff --git a/gz-customerSystem/src/views/filesCheck/newFileCheck.jsx b/gz-customerSystem/src/views/filesCheck/newFileCheck.jsx
index 5d85122..ee5cf4e 100644
--- a/gz-customerSystem/src/views/filesCheck/newFileCheck.jsx
+++ b/gz-customerSystem/src/views/filesCheck/newFileCheck.jsx
@@ -2,7 +2,7 @@
* @Company: hugeInfo
* @Author: ldh
* @Date: 2022-03-11 11:03:44
- * @LastEditTime: 2024-09-05 20:46:47
+ * @LastEditTime: 2024-09-07 11:55:54
* @LastEditors: dminyi 1301963064@qq.com
* @Version: 1.0.0
* @Description: 大厅来访材料附件查看
@@ -19,376 +19,377 @@
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;
-
-// http://localhost:9002/dyh-sys/api/web/fileInfo/listFileByCat?mainId=10001&ownerCat=&createStart=&createEnd=&uploaderType=
-// 获取附件
-function getFileListDataApi(submitData) {
- return $$.ax.request({ url: `fileInfo/listFileByCat?mainId=${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();
- 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)`;
+ 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', });
}
-
- // 监听图片滚动事件放大，缩小
- 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;
+
+ 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;
}
- if (e.wheelDelta < 0) {
- //当滑轮向下滚动时
- num = num - 1;
+ 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;
}
- } else if (e.detail) {
- //Firefox滑轮事件
- if (e.detail > 0) {
- //当滑轮向上滚动时
- num = num + 1;
+ imgRef.current.style.transform = `${arr[0]}rotate(${num}deg)`;
+ }
+
+ // 监听图片滚动事件放大，缩小
+ function imgScrollFunc(e) {
+ if (!imgRef || !imgRef.current) {
+ return false;
}
- 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;
+ 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;
}
}
- setData({ data: resData, caseNo: res.data?.caseNo });
- setFileIndex(index);
- setFiles(filesArr);
- setOpenKeys(arr);
+ let res = `scale3d(${num < 1 ? 1 : num},${num < 1 ? 1 : num},1) rotate${transform.match(reg)[1]}`;
+ imgRef.current.style.transform = res;
}
- }
-
- useEffect(() => {
- getFileListData();
- }, []);
-
- // 监听鼠标滚动事件
- useEffect(() => {
- if (imgRef.current) {
- imgRef.current.onload = () => {
- imgBgRef.current.onmousewheel = imgScrollFunc;
- };
+
+ // 判断文件的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;
}
- }, [files]);
-
- // 切换文件加载
- useEffect(() => {
- if (imgRef.current) {
- imgRef.current.src = `${appUrl.fileUrl}${appUrl.fileShowUrl}${files[fileIndex]?.id}`;
- imgRef.current.onload = () => {
+
+ // 切换下一个，上一个
+ 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);
+ }
+ }
+
+ 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');
- };
- } 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>
-
- <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}
- expandIcon={openKeys.includes(x.ownerTypeName) ? <CaretRightOutlined /> : <CaretDownOutlined />}
- 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;
+ }
+ }, [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>
+
+ <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}
+ }}
+ 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}`)}
>
- {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>
+ 跳转查看
+ </Button>
+ )}
+ <a href={`${appUrl.fileUrl}${appUrl.fileDownUrl}${files[fileIndex]?.id}`}>
+ <Button type="primary">下载</Button>
+ </a>
</div>
- <div className="filesCheck-main-action-item">
- <Tooltip title="右转">
- <RotateRightOutlined onClick={() => handleRotateImg('right')} />
- </Tooltip>
- </div>
- </>
+ </div>
)}
- <div className="filesCheck-main-action-item">
- <Tooltip title="下载">
- <a href={`${appUrl.fileUrl}${appUrl.fileDownUrl}${files[fileIndex]?.id}`}>
- <DownloadOutlined />
- </a>
- </Tooltip>
+ <div className="filesCheck-imgLeft" onClick={() => handleNext('back')}>
+ <LeftOutlined />
</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 className="filesCheck-imgRight" onClick={() => handleNext('next')}>
+ <RightOutlined />
</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;
+ </main>
+ ) : (
+ <div style={{ width: '100%', paddingTop: '20%' }}>{$$.MyEmpty()}</div>
+ )}
+ </>
+ );
+ };
+
+ export default NewFileCheck;
+
\ No newline at end of file
--
Gitblit v1.8.0