Merge branch 'master' of http://120.79.193.119:9090/r/gzzfw/frontEnd/gzDyh

zhangyongtian

2024-09-07 172053309302ca857aae36d6769157dc7bb43472

 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-07 11:55:54
 * @LastEditTime: 2024-09-07 16:11:58
 * @LastEditors: dminyi 1301963064@qq.com
 * @Version: 1.0.0
 * @Description: 大厅来访材料附件查看
@@ -19,377 +19,383 @@
   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', });
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)`;
   }
	
   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;
      }
	
      // 监听图片滚动事件放大，缩小
      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;
         }
         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;
            }
         if (e.wheelDelta < 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 />;
      } else if (e.detail) {
         //Firefox滑轮事件
         if (e.detail > 0) {
            //当滑轮向上滚动时
            num = num + 1;
         }
         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);
         if (e.detail < 0) {
            //当滑轮向下滚动时
            num = num - 1;
         }
      }
	
      // 获取附件数据
      async function getFileListData() {
         global.setSpinning(true);
         const res = await getFileListDataApi(caseId || searchParams.get('caseId'));
      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 (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);
         if (index < 0) {
            setFileIndex(files.length - 1);
            return;
         }
         setFileIndex(0);
      }
	
      useEffect(() => {
         getFileListData();
      }, []);
	
      // 监听鼠标滚动事件
      useEffect(() => {
         if (imgRef.current) {
            imgRef.current.onload = () => {
               imgBgRef.current.onmousewheel = imgScrollFunc;
            };
   }

   // 获取附件数据
   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;
            }
         }
      }, [files]);
	
      // 切换文件加载
      useEffect(() => {
         if (imgRef.current) {
            imgRef.current.src = `${appUrl.fileUrl}${appUrl.fileShowUrl}${files[fileIndex]?.id}`;
            imgRef.current.onload = () => {
               global.setSpinning(false, 'only');
            };
         } else {
         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');
         }
      }, [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}
                                 >
                                    {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="图片加载中..."
         };
      } 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%' }}
                        />
                     </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>
                     </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>
                              </>
                           )}
                           <a href={`${appUrl.fileUrl}${appUrl.fileDownUrl}${files[fileIndex]?.id}`}>
                              <Button type="primary">下载</Button>
                           </a>
                           <div className="filesCheck-main-action-item">
                              <Tooltip title="下载">
                                 <a href={`${appUrl.fileUrl}${appUrl.fileDownUrl}${files[fileIndex]?.id}`}>
                                    <DownloadOutlined />
                                 </a>
                              </Tooltip>
                           </div>
                        </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 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;
	
               </div>
            </div>
         </nav>
         {/*图片查看*/}
      </>
   );
};

export default NewFileCheck;