feat: 生产线详情-预览功能：pdt(单个与批量)+回退自定义方法

史婷婷
1 parent f40a6f53
Showing 9 changed files with 74 additions and 41 deletions
package.json
src/components/nav-bar/index.tsx
src/components/pdf-preview/index.less
src/components/pdf-preview/index.tsx
src/components/videoPlay.tsx → src/components/video-play.tsx
src/index.less
src/pages/production/detail/index.tsx
src/pages/production/list/index.tsx
src/pages/production/management/index.tsx
--- a/package.json
View file @bda2293
+++ b/package.json
View file @bda2293
@@ -15,8 +15,8 @@
     "axios": "^1.7.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-pdf": "^9.2.1",
-    "react-router-dom": "^7.1.1"
+    "react-router-dom": "^7.1.1",
+    "lodash": "^4.17.11"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
@@ -33,6 +33,7 @@
     "postcss-px-to-viewport": "^1.1.1",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.18.2",
-    "vite": "^5.3.4"
+    "vite": "^5.3.4",
+    "@types/lodash": "^4.17.7"
   }
 }
--- a/src/components/nav-bar/index.tsx
View file @bda2293
+++ b/src/components/nav-bar/index.tsx
View file @bda2293
@@ -12,8 +12,8 @@ interface NavBarProps {
   backContent?: any;
   hiddenHead?: boolean;
   customBack?: {
-    icon: any;
-    onClick: () => void;
+    icon?: any;
+    onClick?: () => void;
   };
 }
--- a/src/components/pdf-preview/index.less 0 → 100644
View file @bda2293
+++ b/src/components/pdf-preview/index.less 0 → 100644
View file @bda2293
+.pdfPreview {
+  width: 100%;
+  height: 100%;
+}
+
--- a/src/components/pdf-preview/index.tsx 0 → 100644
View file @bda2293
+++ b/src/components/pdf-preview/index.tsx 0 → 100644
View file @bda2293
+import { useEffect, useState } from 'react';
+import './index.less';
+
+interface pdfPreviewProps {
+  url: string
+}
+
+const pdfPreview = (props: pdfPreviewProps) => {
+  const [filePath, setFilePath] = useState<string>();
+
+  useEffect(()=>{
+    if (props.url) {
+      setFilePath(props.url);
+    }
+  },[props.url])
+
+ 
+  return (
+    <div className={'pdfPreview'}>
+      {/* pdf属性 page 跳转到指定页码，navpanes 控制左侧的缩略图预览导航是否默认打开。0-关闭，1-打开*/}
+      {/* navpanes=0&scrollbars=0&toolbar=0&statusbar=0 去除缩略图和工具栏 */}
+      {/* frameborder=0 和view=FitH,top 为全屏展示 */}
+      <iframe
+          title="pdf-preview"
+          style={{ width: '100%', height: '100%' }}
+          frameborder="0"
+          src={`${filePath}#page=1&navpanes=0&scrollbars=0&toolbar=0&statusbar=0&view=FitH,top`}
+          // src={`${filePath}`}
+      />
+      </div>
+  ); 
+};
+ 
+export default pdfPreview;
--- a/src/components/video-play.tsx renamed from src/components/videoPlay.tsx
View file @bda2293
+++ b/src/components/video-play.tsx renamed from src/components/videoPlay.tsx
View file @bda2293
--- a/src/index.less
View file @bda2293
+++ b/src/index.less
View file @bda2293
@@ -25,7 +25,6 @@ a:hover {
 body {
   margin: 0;
   min-height: 100vh;
-  background: pink;
 }
 h1 {
--- a/src/pages/production/detail/index.tsx
View file @bda2293
+++ b/src/pages/production/detail/index.tsx
View file @bda2293
 import React, {useEffect, useState} from 'react'
 import './style.less'
 import NavBar from '@/components/nav-bar'
-import VideoPlay from '@/components/videoPlay'
+import VideoPlay from '@/components/video-play'
+import PdfPreview from '@/components/pdf-preview'
 import {useSearchParams} from "react-router-dom";
-import { Document, Page, pdfjs } from "react-pdf";
-import 'react-pdf/dist/esm/Page/AnnotationLayer.css'
-import 'react-pdf/dist/esm/Page/TextLayer.css';
 import {getCarouselSettings} from "@/api/apiConfig";
-pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;
+import _ from 'lodash';
+import { useNavigate } from 'react-router-dom';
 const ProductionDetail: React.FC = () => {
+    let navigate = useNavigate();
     const [title, setTitle] = useState<string>('');
     const [filePathItem, setFilePathItem] = useState();
     // 自动预览 定时器
@@ -23,8 +23,6 @@ const ProductionDetail: React.FC = () => {
     const sxPreViewList = localStorage.getItem('sxPreViewListStorage') ? JSON.parse(localStorage.getItem('sxPreViewListStorage')) : [];
-    console.log('sxPreViewList', sxPreViewList)
-
     useEffect(() => {
         if (sxPreViewList?.length) {
             const _isLoop = sxPreViewList?.length > 1;
@@ -68,6 +66,9 @@ const ProductionDetail: React.FC = () => {
     useEffect(() => {
         console.log('filePathItem', filePathItem)
+        if (!_.isEmpty(filePathItem)) {
+            setTitle(filePathItem?.name)
+        }
     }, [filePathItem])
@@ -75,7 +76,11 @@ const ProductionDetail: React.FC = () => {
     return (
         <div className={'sxjx-content-main sxjx-layout-main-unfoot'}>
             <div className={'production-detail'}>
-                <NavBar showBack={true} title={title}/>
+                <NavBar showBack={true} title={title} customBack={{onClick: () => {
+                        const _url = localStorage.getItem('sxListPath');
+                        navigate(_url, { replace: true });
+                    }}}
+                />
                 {
                     filePathItem?.type === 'mp4' ? <div className={'production-detail-video-box'}>
                         <VideoPlay
@@ -83,8 +88,7 @@ const ProductionDetail: React.FC = () => {
                             url={filePathItem?.url || ''}
                             className={'production-detail-video'}
                         />
-                    </div> : <>
-                    </>
+                    </div> : filePathItem?.type === 'pdf' ? <PdfPreview url={filePathItem?.url}/> : ''
                 }
             </div>
         </div>
--- a/src/pages/production/list/index.tsx
View file @bda2293
+++ b/src/pages/production/list/index.tsx
View file @bda2293
@@ -8,8 +8,7 @@ import _preview from './preview.png';
 import {useSearchParams} from "react-router-dom";
 import {getFilePreview, getProductBook} from "@/api/apiConfig";
 import {SpinLoading, Checkbox, Toast} from 'antd-mobile'
-import { useNavigate } from "react-router-dom";
-import {a} from "vite/dist/node/types.d-aGj9QkWt";
+import { useNavigate, useLocation } from "react-router-dom";
 interface ListType {
     id: string;
@@ -26,21 +25,18 @@ const ProductionList: React.FC = () => {
     const [show, setShow] = useState<boolean>(false);
     const [showBatch, setShowBatch] = useState<boolean>(false);
     const navigate = useNavigate();
+    const location = useLocation();
+    console.log('location', location?.pathname, location?.search)
     const [checkItems, setCheckItems] = useState<CheckboxValue[]>([])
     const [checkValues, setCheckValues] = useState<CheckboxValue[]>([])
-    // const [sxPreViewList, setSxPreViewList] = useState<ListType[]>([])
     // 因是hook，必须写在组件的顶部执行，useSearchParams() 返回的是数组
     const [params] = useSearchParams();
-    console.log('ProductionList===params', params)
     // 通过 get 方法获取目标参数
     const name = params.get("name") || "";
     const id = params.get("id") || "";
-    useEffect(() => {
-        localStorage.setItem('sxPreViewListStorage', '');
-    }, [])
     useEffect(() => {
         if (name) {
@@ -55,7 +51,7 @@ const ProductionList: React.FC = () => {
                 setShow(true);
                 let _checkItems = [];
                 const _list = res?.product_book?.map((item: any) => {
-                    _checkItems.push(item?.guide_book_file_info_?.[0]?.fileId);
+                    _checkItems.push(item?.id);
                     const _arr = item?.guide_book_file_info_?.[0]?.name?.split('.') || [];
                     return {
                         id: item?.id || '',
@@ -83,7 +79,6 @@ const ProductionList: React.FC = () => {
     )
     const checkboxChange = (value: CheckboxValue[]) => {
-        console.log('checkboxChange-value', value)
         setCheckValues(value)
     }
@@ -96,10 +91,8 @@ const ProductionList: React.FC = () => {
     const toDetail = async (ids: CheckboxValue[]) => {
-        console.log('toDetail-ids', ids)
         if (ids?.length) {
             let _arr = list?.filter((item: ListType) => ids?.includes(item?.id || '')) || [];
-            console.log('_arr', _arr)
             // 创建一个promise数组，每个promise都是对API的一次调用
             const promises = _arr?.map((item: ListType) => fetchData(item));
             // 使用Promise.all来并行地解决这些promise
@@ -111,16 +104,17 @@ const ProductionList: React.FC = () => {
                             url: results?.[index]
                         }
                     })
-                    console.log('sxPreViewList', sxPreViewList)
                     localStorage.setItem('sxPreViewListStorage', JSON.stringify(sxPreViewList));
-                    navigate(`/production/detail?name=${sxPreViewList?.[0]?.name}`);
+                    localStorage.setItem('sxListPath', `${location?.pathname}${location?.search}`);
+                    navigate(`/production/detail?name=${sxPreViewList?.[0]?.name}`, { replace: true });
                 })
                 .catch(err => {
                     localStorage.setItem('sxPreViewListStorage', '');
-                    console.log('err', err)
+                    localStorage.setItem('sxListPath', '');
                 });
         } else {
             localStorage.setItem('sxPreViewListStorage', '');
+            localStorage.setItem('sxListPath', '');
             Toast.show({
                 content: '请先选择数据！',
                 maskClassName: 'to-detail-mask',
@@ -129,19 +123,15 @@ const ProductionList: React.FC = () => {
     }
-    // useEffect(() => {
-    //     console.log('sxPreViewList', sxPreViewList)
-    //     if (sxPreViewList?.length) {
-    //         const _name = sxPreViewList?.[0]?.name;
-    //         console.log('_name', _name)
-    //         navigate(`/production/detail?name=${_name}`);
-    //     }
-    // }, [sxPreViewList])
-
     return (
         <div className={'sxjx-content-main sxjx-layout-main-unfoot'}>
             <div className={`production-list ${showBatch ? 'production-list--batch' : ''}`}>
-                <NavBar title={title} showBack={true} rightInfo={ !showBatch ? rightInfo : ''}/>
+                <NavBar title={title} showBack={true} rightInfo={ !showBatch ? rightInfo : ''}
+                        customBack={{onClick: () => {
+                                const _url = '/production/management';
+                                navigate(_url, { replace: true });
+                       }}}
+                />
                 {
                     !show ? <SpinLoading color='primary'/> :
                         <div className={'production-list_list'}>
@@ -184,6 +174,7 @@ const ProductionList: React.FC = () => {
                                 indeterminate={checkValues.length > 0 && checkValues?.length < checkItems?.length}
                                 checked={checkValues?.length === checkItems?.length}
                                 onChange={checked => {
+                                    console.log('checked', checked)
                                     if (checked) {
                                         setCheckValues(checkItems)
                                     } else {
--- a/src/pages/production/management/index.tsx
View file @bda2293
+++ b/src/pages/production/management/index.tsx
View file @bda2293
@@ -36,7 +36,6 @@ const ProductionManagement: React.FC = () => {
     }, [])
     const toProductionList = (item: any) => {
-        console.log('toProductionList-item', item)
         navigate(`/production/list?id=${item?.id}&name=${item?.name}`);
     }