feat: 完成多图片预览

one_stop_public/filePreview/ImgViewer.jsx

+import { useMemo } from 'react';
+import Viewer from 'react-viewer';
+import { checkIsImage } from '@/webPublic/one_stop_public/libs/UploadCom';
+export const ImgViewer = (props) => {
+	const { onClose, path } = props;
+	
+  const images = useMemo(
+		() => {
+			return props?.images?.filter(i => checkIsImage(i?.src));
+		},
+		[props.images]
+	);
+  const activeIndex = useMemo(
+		() => {
+      if(path) {
+        return images?.findIndex((item) => item?.src === path);
+      }
+      return 0
+		},
+		[path]
+	);
+	return (
+		<Viewer visible={true} onClose={onClose} activeIndex={activeIndex} images={images} />
+	);
+};

one_stop_public/filePreview/PreviewWordExtend.jsx

@@ -7,7 +7,7 @@
 import React, { useMemo, Fragment, useState, useRef } from "react";
 import { fileUrlToFilePath } from '@/webPublic/one_stop_public/utils/queryConfig';
 import { requestOrigin } from '@/webPublic/one_stop_public/utils/request';
-import { message, Modal } from 'antd';
+import { message, Modal, Tooltip } from 'antd';
 import { getPdfFile } from "@/webPublic/one_stop_public/filePreview/utils";
 
 export default function PreviewWordExtend({ src, fileName }) {
@@ -70,9 +70,21 @@ export default function PreviewWordExtend({ src, fileName }) {
 		);
 	} else {
 		return (
-			<a src={src} target={'_blank'}>
-				{fileName}
-			</a>
+      <>
+        {
+          fileName?.length > 13 ? 
+          <Tooltip title={fileName}>
+            <a src={src} target={'_blank'}>
+              {fileName.substring(0, 10)}...
+            </a>
+          </Tooltip>
+           : 
+          <a src={src} target={'_blank'}>
+            {fileName}
+          </a>
+        }
+      </>
+			
 		);
 	}
 }

one_stop_public/filePreview/index.jsx

@@ -4,12 +4,10 @@
 import React, { Component } from 'react';
 import { checkIsImage } from '@/webPublic/one_stop_public/libs/UploadCom';
 import { getModal, getPopconfirm, isFromIframe } from '@/webPublic/one_stop_public/utils/utils';
-import Viewer from 'react-viewer';
 import styles from './styles.less';
 import PreviewWordExtend from "@/webPublic/one_stop_public/filePreview/PreviewWordExtend";
+import { ImgViewer } from './ImgViewer';
 
-// const FileViewer = CLIENT_TYPE === 'mobile' ? null : require('react-file-viewer');
-const FileViewer = null;
 const Modal = getModal();
 const Popconfirm = getPopconfirm();
 
@@ -55,7 +53,7 @@ export default class index extends Component {
     /***
      * pathName 必须是个字符串 否则容易崩溃
      * */
-    let { path, pathName = '', width, height } = this.props;
+    let { path, pathName = '', width, height, activeIndex, images } = this.props;
     const { visible } = this.state;
     let isShow = false;
     let type;
@@ -80,7 +78,6 @@ export default class index extends Component {
     }
 
     // return null;
-
     return (
       <>
         {isShow ? (
@@ -138,15 +135,10 @@ export default class index extends Component {
                 {!checkIsImage(path) && <a onClick={this.download}>下载文件</a>}
 
                 {!!checkIsImage(path) && (
-                  <Viewer
-                    visible={true}
+                  <ImgViewer
                     onClose={this.handleCancel}
-                    images={[
-                      {
-                        src: path,
-                        alt: '预览',
-                      },
-                    ]}
+                    images={images}
+                    path={path}
                   />
                 )}
               </div>

one_stop_public/libs/Split/UploadComReadOnly.js

@@ -39,6 +39,13 @@ export default function UploadComReadOnly(props) {
                                type={'UploadCom'}
                                width={otherProps.readOnlyWebFileWidth || '100px'}
                                height={otherProps.readOnlyWebFileHeight || '100px'}
+															 images={files?.map((item) => {
+																return {
+																	src: queryFileUrl(item.path),
+                        					alt: '预览',
+																};
+															 })}
+															 activeIndex={index2}
                   />
 								</li>
 							);

one_stop_public/libs/formList/TreeList.js

@@ -434,7 +434,17 @@ class TreeList extends React.Component {
 											{files.map((f, index2) => {
 												return (
 													<li key={index2}>
-														<FilePreview path={queryFileUrl(f.path)} pathName={f.name} />
+														<FilePreview 
+														path={queryFileUrl(f.path)} 
+														pathName={f.name} 
+														images={files?.map((item) => {
+															return {
+																src: queryFileUrl(item.path),
+																alt: '预览',
+															};
+														 })}
+														 activeIndex={index2}
+														/>
 													</li>
 												);
 											})}

one_stop_public/libs/formList/index.js

@@ -511,7 +511,17 @@ class FormList extends React.Component {
                       {files.map((f, index2) => {
                         return (
                           <li key={index2}>
-                            <FilePreview path={queryFileUrl(f.path)} pathName={f.name}/>
+                            <FilePreview 
+                            path={queryFileUrl(f.path)} 
+                            pathName={f.name}
+                            images={files?.map((item) => {
+                              return {
+                                src: queryFileUrl(item.path),
+                                alt: '预览',
+                              };
+                             })}
+                             activeIndex={index2}
+                            />
                           </li>
                         );
                       })}