媒体库-左侧文件类型功能实装
parent
61fc2fac5a
commit
c3bda54f50
|
|
@ -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: '其他文件',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
</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)" @click="compressFolderOrFile">压缩</a-button> -->
|
||||
<!-- <a-button :icon="h(DownloadOutlined)" @click="downloadFile">批量下载</a-button> -->
|
||||
<a-radio-group v-model:value="tableType">
|
||||
<a-radio-button value="table"><BarsOutlined /></a-radio-button>
|
||||
<a-radio-button value="store"><AppstoreOutlined /></a-radio-button>
|
||||
|
|
@ -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<any>();
|
||||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<span class="infotitle">照片类型</span>
|
||||
</a-col>
|
||||
<a-col :span="17">
|
||||
<span class="infovalue">{{ props.nowPreviewRecord.imgtype || '--' }} </span>
|
||||
<span class="infovalue">{{ getImageType(props.nowPreviewRecord.type) || '--' }} </span>
|
||||
</a-col>
|
||||
<a-col :span="7">
|
||||
<span class="infotitle">任务名称</span>
|
||||
|
|
@ -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('');
|
||||
|
|
|
|||
Loading…
Reference in New Issue