diff --git a/src/views/demo/system/mediaLibrary/LeftTree.vue b/src/views/demo/system/mediaLibrary/LeftTree.vue
index ae663a2..b6dff1c 100644
--- a/src/views/demo/system/mediaLibrary/LeftTree.vue
+++ b/src/views/demo/system/mediaLibrary/LeftTree.vue
@@ -28,29 +28,33 @@
name: '媒体库',
children: [
{
- id: 'allResource',
+ id: '',
name: '全部资源',
},
{
- id: 'wideAngle',
- name: '广角照片',
+ id: '1',
+ name: '可见光',
},
{
- id: 'zoom',
+ id: '2',
+ name: '红外照片',
+ },
+ {
+ id: '3',
name: '变焦照片',
},
{
- id: 'infrared',
- name: '红外照片',
+ id: '4',
+ name: '广角照片',
},
- // {
- // id: 'alone',
- // name: '单拍照片',
- // },
{
- id: 'video',
+ id: '5',
name: '视频资源',
},
+ {
+ id: '0',
+ name: '其他文件',
+ },
],
},
];
diff --git a/src/views/demo/system/mediaLibrary/index.vue b/src/views/demo/system/mediaLibrary/index.vue
index 7b94723..a23a809 100644
--- a/src/views/demo/system/mediaLibrary/index.vue
+++ b/src/views/demo/system/mediaLibrary/index.vue
@@ -22,7 +22,7 @@
移动
删除
-
+
@@ -335,6 +335,8 @@
import { columns, searchFormSchema } from './modal.data';
import dayjs from 'dayjs';
import { cloneDeep } from 'lodash-es';
+ import JSZip from 'jszip';
+ import { saveAs } from 'file-saver';
const { VITE_GLOB_MEDIALIBRARY_IMAGE_URL } = getAppEnvConfig();
const { createConfirm, createMessage } = useMessage();
@@ -348,88 +350,98 @@
const tableHeight: any = ref(0);
watch(
() => tableType.value,
- (newval) => {
- // 格子
- if (newval === 'store') {
- // 数据
- let query = { ...searchParams.value, page: 1, limit: 1000 };
- if (routeFlag.value) {
- query = {
- ...query,
- taskId: route.query.flightId,
- objectKeyExist: 1,
- };
- } else {
- query = {
- ...query,
- parentKey: nowParentKey.value,
- };
- }
- GetMediaFile(query).then((res) => {
- showTableData.value = res.items;
- tableTypeAfterShow.value = newval;
- // 表格-隐藏
- const containers = document.querySelectorAll('.ant-table-container');
- tableHeight.value = containers[0] ? containers[0]?.scrollHeight : 0;
- if (containers) {
- containers.forEach((container) => {
- container.style.display = 'none';
- });
- }
- // 分页-隐藏
- const paginations = document.querySelectorAll('.ant-pagination');
- if (paginations) {
- paginations.forEach((pagination) => {
- pagination.style.display = 'none';
- });
- }
- // 选中：表格→格子
- let selectRowsIdArray = getSelectRows().map((item) => item.id);
- showTableData.value.forEach((item) => {
- if (selectRowsIdArray.includes(item.id)) {
- item.checked = true;
- changeStore(
- {
- target: {
- checked: true,
- },
- },
- item,
- );
- }
- });
- });
- }
- // 表格
- if (newval === 'table') {
- reload().then((res) => {
- tableTypeAfterShow.value = newval;
- // 表格-显示
- const containers = document.querySelectorAll('.ant-table-container');
- tableHeight.value = containers[0] ? containers[0]?.scrollHeight : 0;
- if (containers) {
- containers.forEach((container) => {
- container.style.display = 'block';
- });
- }
- // 分页-显示
- const paginations = document.querySelectorAll('.ant-pagination');
- if (paginations) {
- paginations.forEach((pagination) => {
- pagination.style.display = 'block';
- });
- }
- // 选中：格子→表格
- let selectRowsIdArray = showTableData.value.filter((item) => item.checked);
- setSelectedRows(selectRowsIdArray);
- });
- }
+ () => {
+ // 表格还是文件夹变化
+ getShowTableData();
},
);
+ function getShowTableData() {
+ // 格子
+ if (tableType.value === 'store') {
+ // 数据
+ let query = { ...searchParams.value, page: 1, limit: 1000 };
+ if (routeFlag.value) {
+ query = {
+ ...query,
+ taskId: route.query.flightId,
+ objectKeyExist: 1,
+ };
+ } else {
+ query = {
+ ...query,
+ // 总目录下展示全部的所选文件类型的文件、单个目录下只显示本文件下的所选文件类型的文件
+ parentKey: searchInfo.type
+ ? nowParentKey.value == '0'
+ ? ''
+ : nowParentKey.value
+ : nowParentKey.value,
+ type: searchInfo.type,
+ };
+ }
+ GetMediaFile(query).then((res) => {
+ showTableData.value = res.items;
+ tableTypeAfterShow.value = tableType.value;
+ // 表格-隐藏
+ const containers = document.querySelectorAll('.ant-table-container');
+ tableHeight.value = containers[0] ? containers[0]?.scrollHeight : 0;
+ if (containers) {
+ containers.forEach((container) => {
+ container.style.display = 'none';
+ });
+ }
+ // 分页-隐藏
+ const paginations = document.querySelectorAll('.ant-pagination');
+ if (paginations) {
+ paginations.forEach((pagination) => {
+ pagination.style.display = 'none';
+ });
+ }
+ // 选中：表格→格子
+ let selectRowsIdArray = getSelectRows().map((item) => item.id);
+ showTableData.value.forEach((item) => {
+ if (selectRowsIdArray.includes(item.id)) {
+ item.checked = true;
+ changeStore(
+ {
+ target: {
+ checked: true,
+ },
+ },
+ item,
+ );
+ }
+ });
+ });
+ }
+ // 表格
+ if (tableType.value === 'table') {
+ reload().then((res) => {
+ tableTypeAfterShow.value = tableType.value;
+ // 表格-显示
+ const containers = document.querySelectorAll('.ant-table-container');
+ tableHeight.value = containers[0] ? containers[0]?.scrollHeight : 0;
+ if (containers) {
+ containers.forEach((container) => {
+ container.style.display = 'block';
+ });
+ }
+ // 分页-显示
+ const paginations = document.querySelectorAll('.ant-pagination');
+ if (paginations) {
+ paginations.forEach((pagination) => {
+ pagination.style.display = 'block';
+ });
+ }
+ // 选中：格子→表格
+ let selectRowsIdArray = showTableData.value.filter((item) => item.checked);
+ setSelectedRows(selectRowsIdArray);
+ });
+ }
+ }
// 单选框选择
const checkNameChecked = ref(false);
- // 表格or文件夹切换
+ // 表格or文件夹切换-选择框
function changeStore(e, record) {
if (typeof record == 'string') {
if (e.target.checked) {
@@ -545,7 +557,12 @@
...data,
page: tableTypeAfterShow.value == 'table' ? data.page : 1,
limit: tableTypeAfterShow.value == 'table' ? data.limit : 1000,
- parentKey: nowParentKey.value,
+ // 总目录下展示全部的所选文件类型的文件、单个目录下只显示本文件下的所选文件类型的文件
+ parentKey: searchInfo.type
+ ? nowParentKey.value == '0'
+ ? ''
+ : nowParentKey.value
+ : nowParentKey.value,
};
return temp;
}
@@ -606,9 +623,15 @@
// 弹窗----------------------------------------------------------------------
// 左侧目录选择
- function handleSelect(orgId = '') {
- searchInfo.orgId = orgId;
- reload();
+ function handleSelect(type = '') {
+ searchInfo.type = type;
+ // 表格
+ if (tableType.value == 'table') {
+ reload();
+ } else {
+ // 格子
+ getShowTableData();
+ }
}
// 刷新表格
const childRef = ref();
@@ -641,7 +664,13 @@
} else {
query = {
...query,
- parentKey: nowParentKey.value,
+ // 总目录下展示全部的所选文件类型的文件、单个目录下只显示本文件下的所选文件类型的文件
+ parentKey: searchInfo.type
+ ? nowParentKey.value == '0'
+ ? ''
+ : nowParentKey.value
+ : nowParentKey.value,
+ type: searchInfo.type,
};
}
GetMediaFile(query).then((res) => {
@@ -725,6 +754,86 @@
});
}
+ // 批量下载
+ async function downloadFile() {
+ // 获得所选
+ let rows = getSelectRows();
+ if (tableType.value == 'store') {
+ rows = showTableData.value.filter((item) => item.checked);
+ }
+ getFileList(rows).then(async (res) => {
+ let filelist: any = res;
+ console.log(res);
+
+ const token = localStorage.getItem('X-Token');
+ const zip = new JSZip();
+ // 添加文件到ZIP
+ for (const file of filelist) {
+ try {
+ const response = await fetch(file.url + '?t=' + Date.now(), {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ },
+ mode: 'cors',
+ });
+ if (!response.ok) {
+ throw new Error(`HTTP 错误: ${response.status} - ${response.statusText}`);
+ }
+ const blob = await response.blob();
+ zip.file(`${file.path}/${file.name}`, blob, { binary: true });
+ } catch (error) {
+ console.error('请求失败:', error);
+ }
+ }
+ // 生成ZIP文件并触发下载
+ let zipFileName = '压缩文件';
+ try {
+ const blob = await zip.generateAsync({ type: 'blob' });
+ saveAs(blob, zipFileName + '.zip'); // 下载的ZIP文件名
+ } catch (error) {
+ console.error('生成ZIP文件时出错:', error);
+ }
+ });
+ }
+
+ async function getFileList(rows) {
+ let fileList: any = [];
+ let num = 0;
+ rows.forEach(async (item) => {
+ if (item.objectKey) {
+ fileList.push({
+ name: item.name,
+ url: VITE_GLOB_MEDIALIBRARY_IMAGE_URL + item.objectKey,
+ path: '',
+ });
+ num++;
+ if (rows.length == num) {
+ console.log(fileList);
+ return fileList;
+ }
+ } else {
+ await GetMediaFile({
+ parentKey: item.id,
+ page: 1,
+ limit: 1000,
+ }).then((res) => {
+ res.items.forEach(async (r) => {
+ fileList.push({
+ name: r.name,
+ url: VITE_GLOB_MEDIALIBRARY_IMAGE_URL + r.objectKey,
+ path: item.name,
+ });
+ });
+ num++;
+ if (rows.length == num) {
+ console.log(fileList);
+ return fileList;
+ }
+ });
+ }
+ });
+ }
+
// 查看弹窗----------------------------------------------------------------------------
const openPreview = ref(false);
// 目前展示图片
@@ -746,7 +855,13 @@
} else {
query = {
...query,
- parentKey: nowParentKey.value,
+ // 总目录下展示全部的所选文件类型的文件、单个目录下只显示本文件下的所选文件类型的文件
+ parentKey: searchInfo.type
+ ? nowParentKey.value == '0'
+ ? ''
+ : nowParentKey.value
+ : nowParentKey.value,
+ type: searchInfo.type,
};
}
GetMediaFile(query).then((res) => {
@@ -773,6 +888,9 @@
showTableData.value = res;
});
}
+ setTimeout(() => {
+ clearSelectedRowKeys();
+ }, 500);
}
function uniqueByKey(arrlist, record) {
let resultList: any = [];
@@ -851,7 +969,13 @@
} else {
query = {
...query,
- parentKey: nowParentKey.value,
+ // 总目录下展示全部的所选文件类型的文件、单个目录下只显示本文件下的所选文件类型的文件
+ parentKey: searchInfo.type
+ ? nowParentKey.value == '0'
+ ? ''
+ : nowParentKey.value
+ : nowParentKey.value,
+ type: searchInfo.type,
};
}
GetMediaFile(query).then((res) => {
diff --git a/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue b/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue
index cc7ea6a..4cc3dc1 100644
--- a/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue
+++ b/src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue
@@ -192,24 +192,20 @@
const imageTypeSelect = ref([]);
const imageOptions: any = ref([
{
- value: '广角照片',
- label: '广角照片',
+ value: 1,
+ label: '可见光照片',
},
{
- value: '变焦照片',
- label: '变焦照片',
- },
- {
- value: '红外照片',
+ value: 2,
label: '红外照片',
},
{
- value: '全景图',
- label: '全景图',
+ value: 3,
+ label: '变焦照片',
},
{
- value: '码流截图',
- label: '码流截图',
+ value: 4,
+ label: '广角照片',
},
]);
// 按照媒体名称搜索
@@ -223,11 +219,9 @@
});
}
// 图片类型
- // if (tagSelect.value.length > 0) {
- // imageTypeSelect.value.forEach((imagetype) => {
- // filterImageData = filterImageData.filter((item) => item.fileTags.includes(imagetype));
- // });
- // }
+ if (imageTypeSelect.value.length > 0) {
+ filterImageData = filterImageData.filter((item) => imageTypeSelect.value.includes(item.type));
+ }
// 按照媒体名称搜索
if (searchValue.value) {
filterImageData = filterImageData.filter((item) => item.name.includes(searchValue.value));
diff --git a/src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue b/src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue
index a926eee..4942bdd 100644
--- a/src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue
+++ b/src/views/demo/system/mediaLibrary/preview/previewImageInformation.vue
@@ -21,7 +21,7 @@
照片类型
- {{ props.nowPreviewRecord.imgtype || '--' }}
+ {{ getImageType(props.nowPreviewRecord.type) || '--' }}
任务名称
@@ -266,6 +266,26 @@
editName.value = props.nowPreviewRecord.name.split('.').slice(0, -1).join('.');
}
+ // 图片类型
+ function getImageType(type) {
+ let imageType = '';
+ switch (type) {
+ case 1:
+ imageType = '可见光照片';
+ break;
+ case 2:
+ imageType = '红外照片';
+ break;
+ case 3:
+ imageType = '变焦照片';
+ break;
+ case 4:
+ imageType = '广角照片';
+ break;
+ }
+ return imageType;
+ }
+
// 标签--------------------------------
const addFileTagsFlag = ref(false);
const newFileTagsName = ref('');