藏品总账导出增加下载所有缩略图功能

src/pages/ObjectSon/Object2/index.module.scss

@@ -25,7 +25,7 @@
 
         .active {
           pointer-events: none;
-          color: #D3B453;
+          color: #d3b453;
           background-color: var(--themeColor);
         }
       }
@@ -38,7 +38,7 @@
       overflow-y: auto;
       display: flex;
       flex-wrap: wrap;
-      .imgListNone{
+      .imgListNone {
         color: var(--themeColor);
         font-size: 20px;
         margin: 0 auto;
@@ -47,7 +47,7 @@
 
       .imgListRow {
         cursor: pointer;
-        transition: all .3s;
+        transition: all 0.3s;
         width: 238px;
         height: 240px;
         border: 1px solid #ccc;
@@ -57,7 +57,7 @@
           margin: 0 0 20px 0;
         }
 
-        &>p {
+        & > p {
           border-top: 1px solid #ccc;
           width: 100%;
           height: 40px;
@@ -68,7 +68,7 @@
           text-overflow: ellipsis;
           white-space: nowrap;
         }
-        &:hover{
+        &:hover {
           box-shadow: 1px 1px 5px 1px #ccc;
         }
       }
@@ -77,7 +77,6 @@
     .tableBox {
       padding: 0 30px;
       height: calc(100% - 176px);
-
     }
 
     .pageBox {
@@ -87,5 +86,21 @@
       align-items: center;
       justify-content: center;
     }
+    .downImgBox {
+      position: fixed;
+      z-index: 9999;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.6);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 20px;
+      letter-spacing: 3px;
+      color: #fff;
+      padding-bottom: 100px;
+    }
   }
-}
+}

src/pages/ObjectSon/Object2/index.tsx

@@ -178,7 +178,6 @@ export default function Object2() {
         )
       }
     ]
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   // 点击导出
@@ -214,6 +213,7 @@ export default function Object2() {
       v.storageAncestorName = v.storageAncestor ? obj3InStorage(v.storageAncestor) : '-'
       v.outLocation = v.outLocation ? v.outLocation : '-'
       v.display = v.display ? '是' : '否'
+      v.imgName = v.id + '_' + v.name
     })
     const option = {
       fileName: name,
@@ -223,6 +223,7 @@ export default function Object2() {
           sheetName: name,
           sheetFilter: [
             'name',
+            'imgName',
             'namePrimitive',
             'dictNum',
             'num',
@@ -251,6 +252,7 @@ export default function Object2() {
           ],
           sheetHeader: [
             '藏品名称',
+            '图片名字',
             '原名',
             '藏品编号名称',
             '藏品编号',
@@ -279,7 +281,7 @@ export default function Object2() {
           ],
           columnWidths: [
             10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10,
-            10, 10, 10
+            10, 10, 10, 10
           ]
         }
       ]
@@ -287,8 +289,32 @@ export default function Object2() {
 
     const toExcel = new ExportJsonExcel(option) //new
     toExcel.saveExcel() //保存
+
+    if (window.confirm('是否下载所有封面图?')) {
+      setDownShow(true)
+
+      try {
+        const res: any = await http.get('cms/ledger/download', { timeout: 0 })
+
+        if (res.code === 0) {
+          const downloadLink = document.createElement('a')
+          downloadLink.href = res.data // 压缩包地址
+          downloadLink.download = '藏品总账图片.zip' // 设置下载文件名
+          document.body.appendChild(downloadLink)
+          downloadLink.click()
+          document.body.removeChild(downloadLink)
+
+          setDownShow(false)
+        }
+      } catch (error) {
+        setDownShow(false)
+      }
+    } else {
+    }
   }, [results.list, tableSelect, value])
 
+  const [downShow, setDownShow] = useState(false)
+
   return (
     <div className={styles.Object2}>
       <div className='breadTit'>
@@ -400,6 +426,11 @@ export default function Object2() {
           &emsp;共 {results.total} 条数据
         </div>
       </div>
+
+      {/* 下载所有图片的遮罩 */}
+      <div className='downImgBox' hidden={!downShow}>
+        压缩文件中,请稍等
+      </div>
     </div>
   )
 }

src/utils/http.ts

@@ -1,8 +1,8 @@
-import axios from "axios";
-import history from "./history";
-import { getTokenInfo, removeTokenInfo } from "./storage";
-import store from "@/store";
-import { MessageFu } from "./message";
+import axios from 'axios'
+import history from './history'
+import { getTokenInfo, removeTokenInfo } from './storage'
+import store from '@/store'
+import { MessageFu } from './message'
 // 请求基地址
 export const baseURL =
   // 线下的图片地址需要加上/api/
@@ -11,7 +11,7 @@ export const baseURL =
   // : "";
   // process.env.NODE_ENV === "development" ? "https://lsbwg.4dage.com" : "";
   // @ts-ignore
-  process.env.NODE_ENV === "development" ? baseUrlHttp : '';
+  process.env.NODE_ENV === 'development' ? baseUrlHttp : ''
 
 // 创建 axios 实例
 const http = axios.create({
@@ -19,73 +19,72 @@ const http = axios.create({
   // baseURL: baseURL,
 
   // --------打包或线上环境接口需要加上api/
-  baseURL: baseURL + "/api/",
-  timeout: 5000,
-});
+  baseURL: baseURL + '/api/',
+  timeout: 5000
+})
 
-let axajInd = 0;
+let axajInd = 0
 
 // 请求拦截器
 http.interceptors.request.use(
   function (config: any) {
     // 发请求前打开加载提示
-    store.dispatch({ type: "login/asyncLoding", payload: true });
+    store.dispatch({ type: 'login/asyncLoding', payload: true })
 
-    axajInd++;
+    axajInd++
 
-    const { token } = getTokenInfo();
-    if (token) config.headers.token = token;
-    return config;
+    const { token } = getTokenInfo()
+    if (token) config.headers.token = token
+    return config
   },
   function (err) {
-    return Promise.reject(err);
+    return Promise.reject(err)
   }
-);
+)
 
-let timeId = -1;
+let timeId = -1
 
 // 响应拦截器
 http.interceptors.response.use(
   function (response) {
     // 请求回来的关闭加载提示
-    axajInd--;
+    axajInd--
     if (axajInd === 0) {
-      store.dispatch({ type: "login/asyncLoding", payload: false });
+      store.dispatch({ type: 'login/asyncLoding', payload: false })
     }
     if (response.data.code === 5001 || response.data.code === 5002) {
-      clearTimeout(timeId);
+      clearTimeout(timeId)
       timeId = window.setTimeout(() => {
-        removeTokenInfo();
-        MessageFu.warning("登录失效!");
-        history.push("/login");
-      }, 200);
+        removeTokenInfo()
+        MessageFu.warning('登录失效!')
+        history.push('/login')
+      }, 200)
     } else if (response.data.code === 0) {
       // MessageFu.success(response.data.msg);
-    } else if (response.data.code === 3014)
-      MessageFu.warning("用户名或密码不正确!");
-    else MessageFu.warning(response.data.msg);
-    return response.data;
+    } else if (response.data.code === 3014) MessageFu.warning('用户名或密码不正确!')
+    else MessageFu.warning(response.data.msg)
+    return response.data
   },
   async function (err) {
-    axajInd = 0;
-    store.dispatch({ type: "login/asyncLoding", payload: false });
+    axajInd = 0
+    store.dispatch({ type: 'login/asyncLoding', payload: false })
     // 上传附件的进度条
-    const UpAsyncLodingDom: any = document.querySelector("#UpAsyncLoding");
-    const progressDom: any = document.querySelector("#progress");
+    const UpAsyncLodingDom: any = document.querySelector('#UpAsyncLoding')
+    const progressDom: any = document.querySelector('#progress')
 
     // 如果因为网络原因，response没有，给提示消息
     if (!err.response) {
-      MessageFu.warning("网络繁忙，请稍后重试!");
+      MessageFu.warning('网络繁忙，请稍后重试!')
     } else {
-      MessageFu.warning("错误!");
+      MessageFu.warning('错误!')
     }
     // 响应错误也要取消 上传文件的进度条
-    UpAsyncLodingDom.style.opacity = 0;
-    progressDom.style.width = "0%";
+    UpAsyncLodingDom.style.opacity = 0
+    progressDom.style.width = '0%'
 
-    return Promise.reject(err);
+    return Promise.reject(err)
   }
-);
+)
 
 // 导出 axios 实例
-export default http;
+export default http