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,29 +2,30 @@
 * @Company: hugeInfo
 * @Author: ldh
 * @Date: 2022-03-11 11:03:44
 * @LastEditTime: 2024-08-17 17:42:03
 * @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", "其它文件");
   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 { Button, Menu, Tooltip, Row, Col, Form, Space } from 'antd';
import { Select, DatePicker } from '@arco-design/web-react';
import { useSearchParams } from 'react-router-dom';
import {
   FolderOpenOutlined,
   FolderOutlined,
   CaretRightOutlined,
   CaretDownOutlined,
   FileOutlined,
   FileImageOutlined,
   FilePdfOutlined,
@@ -38,11 +39,14 @@
} from '@ant-design/icons';
import * as $$ from '../../utils/utility';


const { SubMenu } = Menu;
const FormItem = Form.Item;
const Option = Select.Option;

// 获取附件
function getFileListDataApi(submitData) {
   return $$.ax.request({ url: `caseInfo/listCaseFile?caseId=${submitData}`, type: 'get', service: 'mediate' });
function getFileListDataApi() {
   return $$.ax.request({ url: `fileInfo/listFileByCat?mainId=${'10001'}&ownerCat=&createStart=&createEnd=&uploaderType=`, type: 'get', service: 'sys', });
}

const NewFileCheck = ({ caseId }) => {
@@ -65,6 +69,8 @@
   const imgBgRef = useRef();

   const imgRef = useRef();
   const formRef = useRef();


   // 图片旋转
   function handleRotateImg(type) {
@@ -159,12 +165,12 @@
      const res = await getFileListDataApi(caseId || searchParams.get('caseId'));
      global.setSpinning(false);
      if (res.type) {
         let resData = res.data?.dataList || [];
         let resData = res.data || [];
         let arr = [];
         let filesArr = [];
         let index = 0;
         resData.forEach((x, t) => {
            arr.push(x.ownerTypeName);
            arr.push(x.ownerCatName);
            filesArr = filesArr.concat(x.fileList || []);
         });
         forEach: for (let i = 0; i < filesArr.length - 1; i++) {
@@ -179,6 +185,7 @@
         setOpenKeys(arr);
      }
   }
   console.log(files,'filesfiles')

   useEffect(() => {
      getFileListData();
@@ -207,116 +214,186 @@

   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}
         <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: '否',
               }}//默认值
            >
               {data.data?.map((x, t) => {
                  return (
                     <SubMenu
                        key={x.ownerTypeName}
                        icon={openKeys.includes(x.ownerTypeName) ? <FolderOpenOutlined /> : <FolderOutlined />}
                        title={x.ownerTypeName}
               <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')}
                     >
                        {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}`)}
                        <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}
                           >
                              跳转查看
                           </Button>
                              {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>
                        )}
                        <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 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 className="filesCheck-imgRight" onClick={() => handleNext('next')}>
                  <RightOutlined />
               </div>
            </main>
         ) : (
            <div style={{ width: '100%', paddingTop: '20%' }}>{$$.MyEmpty()}</div>
         )}
            </div>
         </nav>
         {/*图片查看*/}
      </>
   );
};