事件材料查看+ai页面

dminyi

2024-09-07 80e40362a760c5c53c51e8a1e79c9a11c6a0f5fe

 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;