|
|
|
|
@ -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="downloadLoading">
|
|
|
|
|
<a-progress :percent="downPercent" type="circle" />
|
|
|
|
|
<div v-if="!downloadZipLoading">
|
|
|
|
|
选择下载的文件/文件夹，压缩下载成一个压缩包文件
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="downloadZipLoading">
|
|
|
|
|
<a-progress
|
|
|
|
|
type="circle"
|
|
|
|
|
:percent="downloadZipPercent"
|
|
|
|
|
:format="(downloadZipPercent) => `下载中\n${downloadZipPercent}%`"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<a-button
|
|
|
|
|
:icon="h(DownloadOutlined)"
|
|
|
|
|
:loading="downloadLoading"
|
|
|
|
|
@click="downloadOpenMoadl"
|
|
|
|
|
:loading="downloadZipLoading"
|
|
|
|
|
@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 downloadLoading = ref(false);
|
|
|
|
|
const downPercent = ref(0);
|
|
|
|
|
const downloadZipOpen = ref(false);
|
|
|
|
|
const downloadZipLoading = ref(false);
|
|
|
|
|
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() {
|
|
|
|
|
downloadOpen.value = false;
|
|
|
|
|
downloadLoading.value = true;
|
|
|
|
|
async function downloadZipFile() {
|
|
|
|
|
if (!zipFileName.value) {
|
|
|
|
|
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>
|
|
|
|
|
|
