媒体库-单独下载、批量下载bug修正

src/views/demo/system/mediaLibrary/LeftTree.vue

@@ -27,10 +27,10 @@
         id: 'meitiku',
         name: '媒体库',
         children: [
-          {
+          // {
-            id: '',
+          //   id: '',
-            name: '全部资源',
+          //   name: '全部资源',
-          },
+          // },
           {
             id: '1',
             name: '可见光',

src/views/demo/system/mediaLibrary/index.vue

@@ -20,17 +20,30 @@
             <a-button :icon="h(PlusOutlined)" @click="addFolder"> 新建文件夹 </a-button>
             <a-button :icon="h(ColumnHeightOutlined)" @click="moveFolderOrFile">移动</a-button>
             <a-button :icon="h(DeleteOutlined)" @click="deleteFolderOrFile">删除 </a-button>
+            <a-button
+              :icon="h(DownloadOutlined)"
+              :loading="downloadAloneLoading"
+              @click="downloadAloneFile"
+            >
+              单独下载
+            </a-button>
             <a-popover trigger="hover">
               <template #content>
-                <div v-if="!downloadLoading"> 选择下载的文件/文件夹，压缩下载成一个压缩包文件</div>
+                <div v-if="!downloadZipLoading">
-                <div v-if="downloadLoading">
+                  选择下载的文件/文件夹，压缩下载成一个压缩包文件
-                  <a-progress :percent="downPercent" type="circle" />
+                </div>
+                <div v-if="downloadZipLoading">
+                  <a-progress
+                    type="circle"
+                    :percent="downloadZipPercent"
+                    :format="(downloadZipPercent) => `下载中\n${downloadZipPercent}%`"
+                  />
                 </div>
               </template>
               <a-button
                 :icon="h(DownloadOutlined)"
-                :loading="downloadLoading"
+                :loading="downloadZipLoading"
-                @click="downloadOpenMoadl"
+                @click="downloadZipOpenMoadl"
               >
                 批量下载
               </a-button>
@@ -306,7 +319,7 @@
 
     <!-- 下载文件命名窗口 -->
     <a-modal
-      v-model:open="downloadOpen"
+      v-model:open="downloadZipOpen"
       title="压缩"
       width="30%"
       :centered="true"
@@ -315,13 +328,13 @@
       :keyboard="false"
       :mask="false"
       :maskClosable="false"
-      @ok="downloadFile"
+      @ok="downloadZipFile"
       @cancel="((zipFileName = null), (downloadRows = []))"
     >
       <div style="width: 100%; margin: 10px; padding: 10px">
         <a-row>
           <a-col :span="24">
-            <div style="width: 100%; height: 40px">批量下载会先进行压缩成一个文件，后续再下载</div>
+            <div style="width: 100%; height: 40px">批量下载会先进行压缩成一个文件，然后再下载</div>
           </a-col>
           <a-col :span="4">
             <div style="width: 100%"> 压缩包名称: </div>
@@ -484,7 +497,7 @@
         const paginations = document.querySelectorAll('.ant-pagination');
         if (paginations) {
           paginations.forEach((pagination) => {
-            pagination.style.display = 'block';
+            pagination.style.display = 'flex';
           });
         }
         // 选中：格子→表格
@@ -647,6 +660,19 @@
           arr.graffitiJson = [];
         }
       });
+      showTableData.value = result;
+      setTimeout(() => {
+        // 格子
+        if (tableType.value === 'store') {
+          // 分页-隐藏
+          const paginations = document.querySelectorAll('.ant-pagination');
+          if (paginations) {
+            paginations.forEach((pagination) => {
+              pagination.style.display = 'none';
+            });
+          }
+        }
+      }, 100);
       return result;
     },
   });
@@ -683,8 +709,9 @@
     // 表格
     if (tableType.value == 'table') {
       reload();
-    } else {
+    }
-      // 格子
+    // 格子
+    if (tableType.value === 'store') {
       getShowTableData();
     }
   }
@@ -809,22 +836,61 @@
     });
   }
 
+  // 单独下载
+  const downloadAloneLoading = ref(false);
+  async function downloadAloneFile() {
+    // 获得所选
+    let rows = getSelectRows();
+    if (tableType.value == 'store') {
+      rows = showTableData.value.filter((item) => item.checked);
+    }
+    if (rows.length != 1) {
+      return createMessage.warn('请选择一个文件进行下载');
+    }
+    if (!rows[0].objectKey) {
+      return createMessage.warn('单独下载只能下载非文件夹的文件');
+    }
+    try {
+      downloadAloneLoading.value = true;
+      const response = await fetch(VITE_GLOB_MEDIALIBRARY_IMAGE_URL + rows[0].objectKey, {
+        mode: 'cors',
+      });
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const blob = await response.blob();
+      const urlObject = window.URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = urlObject;
+      link.download = rows[0].name || 'download';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(urlObject);
+    } catch (error) {
+      console.error('Error downloading image:', error);
+    } finally {
+      downloadAloneLoading.value = false;
+    }
+  }
+
   // 压缩窗口
-  const downloadOpen = ref(false);
+  const downloadZipOpen = ref(false);
-  const downloadLoading = ref(false);
+  const downloadZipLoading = ref(false);
-  const downPercent = ref(0);
+  const downloadZipPercent = ref(0);
+
   // 压缩文件名
   let downloadRows: any = [];
   const zipFileName = ref('');
   // 批量下载-窗口
-  function downloadOpenMoadl() {
+  function downloadZipOpenMoadl() {
     // 获得所选
     let rows = getSelectRows();
     if (tableType.value == 'store') {
       rows = showTableData.value.filter((item) => item.checked);
     }
     if (rows.length == 0) {
-      return createMessage.warn('请选择一个或者多个文件/文件夹进行删除');
+      return createMessage.warn('请选择一个或者多个文件/文件夹进行下载');
     }
     zipFileName.value = '压缩文件' + dayjs().format('YYYY-MM-DD HH:mm:ss');
     if (floders.value.length > 1) {
@@ -834,12 +900,15 @@
       zipFileName.value = rows[0].name;
     }
     downloadRows = rows;
-    downloadOpen.value = true;
+    downloadZipOpen.value = true;
   }
   // 批量下载-下载
-  async function downloadFile() {
+  async function downloadZipFile() {
-    downloadOpen.value = false;
+    if (!zipFileName.value) {
-    downloadLoading.value = true;
+      return createMessage.warn('压缩包名称不能为空');
+    }
+    downloadZipOpen.value = false;
+    downloadZipLoading.value = true;
     getFileList(downloadRows).then(async (res) => {
       let filelist: any = res;
       const token = localStorage.getItem('X-Token');
@@ -863,7 +932,7 @@
           console.error('请求失败:', error);
         } finally {
           index++;
-          downPercent.value = parseFloat(((index / filelist.length) * 100).toFixed(2));
+          downloadZipPercent.value = parseFloat(((index / filelist.length) * 100).toFixed(2));
         }
       }
       // 生成ZIP文件并触发下载
@@ -873,7 +942,7 @@
       } catch (error) {
         console.error('生成ZIP文件时出错:', error);
       } finally {
-        downloadLoading.value = false;
+        downloadZipLoading.value = false;
       }
     });
   }
@@ -1111,7 +1180,7 @@
     flex-wrap: wrap;
   }
   .flodersname {
-    max-width: 120px;
+    max-width: 240px;
     white-space: nowrap; /* 禁止换行 */
     overflow: hidden; /* 超出部分隐藏 */
     text-overflow: ellipsis; /* 超出显示省略号 */
@@ -1199,4 +1268,8 @@
   ::v-deep .ant-modal-body {
     height: 100% !important;
   }
+
+  ::v-deep .ant-pagination {
+    justify-content: flex-end !important;
+  }
 </style>