888 lines
27 KiB
Vue
888 lines
27 KiB
Vue
<template>
|
|
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
|
|
<LeftTree v-if="!pathDivShow" ref="childRef" class="w-1/5 xl:w-1/6" @select="handleSelect" />
|
|
<div v-if="!pathDivShow" class="w-4/5 xl:w-5/6">
|
|
<BasicTable @register="registerTable" :searchInfo="searchInfo">
|
|
<template #toolbar>
|
|
<span v-for="(f, index) in floders" :key="f.id" class="floderTitle">
|
|
<span v-if="f.name != '全部文件'" style="margin-right: 10px"> / </span>
|
|
<a-tooltip placement="top">
|
|
<template #title>
|
|
<span>{{ f.name }}</span>
|
|
</template>
|
|
<span class="flodersname" @click="getChildrenByProp(f, index)"> {{ f.name }}</span>
|
|
</a-tooltip>
|
|
</span>
|
|
<div class="floderOtherButton">
|
|
<a-button :icon="h(BorderHorizontalOutlined)" @click="openComparisonModal">
|
|
变化检测
|
|
</a-button>
|
|
<a-button :icon="h(PlusOutlined)" type="primary" @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)" @click="compressFolderOrFile">压缩</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>
|
|
</a-radio-group>
|
|
</div>
|
|
</template>
|
|
<template #bodyCell="{ column, record }">
|
|
<div v-if="tableTypeAfterShow == 'table'">
|
|
<template v-if="column.key === 'name'">
|
|
<!-- 文件夹 -->
|
|
<FolderOpenOutlined v-if="!record.objectKey" style="font-size: 20px" />
|
|
<!-- 图片 -->
|
|
<img
|
|
v-if="record.objectKey && record.objectKey.includes('jpeg')"
|
|
:src="`${VITE_MEDIALIBRARY_IMAGE_URL + (record.minipic ? record.minipic : record.objectKey)}`"
|
|
:width="30"
|
|
:height="20"
|
|
/>
|
|
<!-- 视频 -->
|
|
<PlaySquareTwoTone
|
|
v-if="record.objectKey && record.objectKey.includes('mp4')"
|
|
style="font-size: 20px"
|
|
/>
|
|
<!-- 文件夹或者图片、视频 -->
|
|
<span
|
|
v-if="
|
|
!record.objectKey ||
|
|
(record.objectKey &&
|
|
(record.objectKey.includes('jpeg') || record.objectKey.includes('mp4')))
|
|
"
|
|
@click="lookRecord(record)"
|
|
@mouseover="record.isHovered = true"
|
|
@mouseout="record.isHovered = false"
|
|
:style="{
|
|
textDecoration: record.isHovered ? 'underline' : 'none',
|
|
cursor: record.isHovered ? 'pointer' : 'default',
|
|
marginLeft: '5px',
|
|
}"
|
|
>
|
|
{{ record.name }}
|
|
</span>
|
|
<!-- 其他文件 -->
|
|
<FileOutlined
|
|
v-if="
|
|
record.objectKey &&
|
|
!record.objectKey.includes('jpeg') &&
|
|
!record.objectKey.includes('mp4')
|
|
"
|
|
style="font-size: 20px"
|
|
/>
|
|
<span
|
|
v-if="
|
|
record.objectKey &&
|
|
!record.objectKey.includes('jpeg') &&
|
|
!record.objectKey.includes('mp4')
|
|
"
|
|
:style="{
|
|
marginLeft: '5px',
|
|
}"
|
|
>
|
|
{{ record.name }}
|
|
</span>
|
|
</template>
|
|
<template v-if="column.key === 'createTime'">
|
|
<span
|
|
style="width: 100%; display: flex; align-items: center; justify-content: center"
|
|
>
|
|
{{ record.createTime ? record.createTime : '-' }}
|
|
</span>
|
|
</template>
|
|
<template v-if="column.key === 'size'">
|
|
<span
|
|
style="width: 100%; display: flex; align-items: center; justify-content: center"
|
|
>
|
|
{{ record.size ? record.size : '-' }}
|
|
</span>
|
|
</template>
|
|
<template v-if="column.key === 'fileTags'">
|
|
<div v-if="record.fileTags && record.fileTags.length > 0">
|
|
<a-tag color="success" v-for="la in record.fileTags" :key="la">{{ la }}</a-tag>
|
|
</div>
|
|
</template>
|
|
<template v-if="column.key === 'action'">
|
|
<div class="svg-container">
|
|
<a-tooltip placement="top">
|
|
<template #title>
|
|
<span>重命名</span>
|
|
</template>
|
|
<a-button type="text">
|
|
<EditOutlined @click="renameRecord(record)" />
|
|
</a-button>
|
|
</a-tooltip>
|
|
<!-- <a-tooltip placement="top">
|
|
<template #title>
|
|
<span>
|
|
{{ record.showOnMap == 1 ? '在地图上取消加载' : '在地图上加载' }}
|
|
</span>
|
|
</template>
|
|
<a-button
|
|
type="text"
|
|
v-if="record.objectKey && record.objectKey.includes('.jpeg')"
|
|
@click="funShowOnMap(record)"
|
|
>
|
|
<div
|
|
v-if="record.showOnMap == 1"
|
|
class="svg-container"
|
|
v-html="svg_showOnMap_1"
|
|
/>
|
|
<div
|
|
v-if="record.showOnMap != 1"
|
|
class="svg-container"
|
|
v-html="svg_showOnMap_0"
|
|
/>
|
|
</a-button>
|
|
</a-tooltip> -->
|
|
<a-tooltip placement="top">
|
|
<template #title>
|
|
<div>查看地图图片历史路径</div>
|
|
<!-- <div>只展示在地图上加载的图片</div> -->
|
|
</template>
|
|
<a-button
|
|
type="text"
|
|
v-if="record.objectKey && record.objectKey.includes('.jpeg')"
|
|
>
|
|
<BorderInnerOutlined @click="showPathDiv(record)" />
|
|
</a-button>
|
|
</a-tooltip>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</BasicTable>
|
|
<div v-if="tableTypeAfterShow == 'store'" class="storeDivsAllChoose">
|
|
<a-checkbox v-model:checked="checkNameChecked" @change="changeStore($event, 'allChoose')">
|
|
全选
|
|
</a-checkbox>
|
|
</div>
|
|
<div v-if="tableTypeAfterShow == 'store'" class="storeDivList">
|
|
<div
|
|
v-for="record in showTableData"
|
|
:key="record.id"
|
|
class="storeDiv"
|
|
:style="{ background: record.isHovered ? '#D5E8FC' : '#ffffff' }"
|
|
@mouseover="record.isHovered = true"
|
|
@mouseout="record.isHovered = false"
|
|
>
|
|
<!-- 选中 -->
|
|
<div style="position: absolute; top: 0px; left: 5px">
|
|
<a-checkbox v-model:checked="record.checked" @change="changeStore($event, record)" />
|
|
</div>
|
|
<!-- 文件夹 -->
|
|
<FolderOpenOutlined
|
|
v-if="!record.objectKey"
|
|
style="font-size: 40px"
|
|
@click="lookRecord(record)"
|
|
/>
|
|
<!-- 图片 -->
|
|
<img
|
|
v-if="record.objectKey && record.objectKey.includes('jpeg')"
|
|
:src="`${VITE_MEDIALIBRARY_IMAGE_URL + (record.minipic ? record.minipic : record.objectKey)}`"
|
|
:width="100"
|
|
:height="60"
|
|
style="position: absolute; top: 10px; left: 32.5px"
|
|
@click="lookRecord(record)"
|
|
/>
|
|
<!-- 视频 -->
|
|
<PlaySquareTwoTone
|
|
v-if="record.objectKey && record.objectKey.includes('mp4')"
|
|
style="font-size: 40px"
|
|
/>
|
|
<!-- 文件夹或者图片、视频 -->
|
|
<span
|
|
v-if="
|
|
!record.objectKey ||
|
|
(record.objectKey &&
|
|
(record.objectKey.includes('jpeg') || record.objectKey.includes('mp4')))
|
|
"
|
|
class="storeDivSpanName"
|
|
:style="{
|
|
textDecoration: record.isHovered ? 'underline' : 'none',
|
|
cursor: record.isHovered ? 'pointer' : 'default',
|
|
}"
|
|
@click="lookRecord(record)"
|
|
>
|
|
{{ record.name }}
|
|
</span>
|
|
<!-- 其他文件 -->
|
|
<FileOutlined
|
|
v-if="
|
|
record.objectKey &&
|
|
!record.objectKey.includes('jpeg') &&
|
|
!record.objectKey.includes('mp4')
|
|
"
|
|
style="font-size: 40px"
|
|
/>
|
|
<span
|
|
v-if="
|
|
record.objectKey &&
|
|
!record.objectKey.includes('jpeg') &&
|
|
!record.objectKey.includes('mp4')
|
|
"
|
|
class="storeDivSpanName"
|
|
>
|
|
{{ record.name }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 新建文件夹弹窗 -->
|
|
<AddFolderModal @register="addFolderModal" @handleSuccess="handleSuccess" />
|
|
<!-- 移动弹窗 -->
|
|
<MoveFileModal @register="moveFileModal" @handleSuccess="handleSuccess" />
|
|
<!-- 压缩弹窗 -->
|
|
<CompressFileModal @register="compressFileModal" @handleSuccess="handleSuccess" />
|
|
<!-- 重命名弹窗 -->
|
|
<RenameModal @register="renameModal" @handleSuccess="handleSuccess" />
|
|
<!-- 预览弹窗 -->
|
|
<a-modal
|
|
v-model:open="open"
|
|
width="100%"
|
|
wrap-class-name="full-modal"
|
|
:centered="true"
|
|
:closable="false"
|
|
:footer="null"
|
|
:destroyOnClose="true"
|
|
:keyboard="false"
|
|
:mask="false"
|
|
:maskClosable="false"
|
|
>
|
|
<Preview
|
|
v-if="nowPreviewRecord.objectKey"
|
|
:nowPreviewRecord="nowPreviewRecord"
|
|
:previewRecordList="previewRecordList"
|
|
@chooseNowPreviewRecord="chooseNowPreviewRecord"
|
|
@closeModal="closeModal"
|
|
@handleSuccessPreview="handleSuccessPreview"
|
|
@openPathModal="openPathModal"
|
|
/>
|
|
</a-modal>
|
|
<!-- 变化检测弹窗 -->
|
|
<a-modal
|
|
v-model:open="comparisonOpen"
|
|
width="100%"
|
|
wrap-class-name="full-modal"
|
|
:centered="true"
|
|
:closable="false"
|
|
:footer="null"
|
|
:destroyOnClose="true"
|
|
:keyboard="false"
|
|
:mask="false"
|
|
:maskClosable="false"
|
|
>
|
|
<Comparison @closeComparisonModal="closeComparisonModal" />
|
|
</a-modal>
|
|
|
|
<Path
|
|
v-if="pathDivShow"
|
|
:pathDivShow="pathDivShow"
|
|
:allImageDataList="allImageDataList"
|
|
:nowShowImageData="nowShowImageData"
|
|
:floderName="floderName"
|
|
@closePathModal="closePathModal"
|
|
@handleSuccessPath="handleSuccessPath"
|
|
/>
|
|
</PageWrapper>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { reactive, ref, watch, h } from 'vue';
|
|
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
|
import { PageWrapper } from '@/components/Page';
|
|
import { useModal } from '@/components/Modal';
|
|
import {
|
|
EditOutlined,
|
|
DeleteOutlined,
|
|
BorderHorizontalOutlined,
|
|
PlusOutlined,
|
|
ColumnHeightOutlined,
|
|
DownloadOutlined,
|
|
AppstoreOutlined,
|
|
BarsOutlined,
|
|
FolderOutlined,
|
|
FolderOpenOutlined,
|
|
EyeOutlined,
|
|
PlaySquareTwoTone,
|
|
FileOutlined,
|
|
BorderInnerOutlined,
|
|
} from '@ant-design/icons-vue';
|
|
import {
|
|
GetMediaFile,
|
|
UpdatePicStatus,
|
|
Deletepic,
|
|
UpdatePicName,
|
|
UpdatePicParentKey,
|
|
} from '@/api/demo/mediaLibrary';
|
|
import LeftTree from './LeftTree.vue';
|
|
import Preview from './preview/index.vue';
|
|
import Comparison from './comparison/index.vue';
|
|
import Path from './path/index.vue';
|
|
import { AddFolderModal, MoveFileModal, CompressFileModal, RenameModal } from './modal/modal';
|
|
import { PermissionBtn } from '@/components/PermissionBtn/index';
|
|
import { getAppEnvConfig } from '@/utils/env';
|
|
import { useMessage } from '@/hooks/web/useMessage';
|
|
import { columns, searchFormSchema, svg_showOnMap_0, svg_showOnMap_1 } from './modal.data';
|
|
import dayjs from 'dayjs';
|
|
import { cloneDeep } from 'lodash-es';
|
|
|
|
const { VITE_MEDIALIBRARY_IMAGE_URL } = getAppEnvConfig();
|
|
const { createConfirm, createMessage } = useMessage();
|
|
|
|
// 表格数据--------------------------------------------------------------------
|
|
// 展示数据
|
|
const showTableData = ref();
|
|
// 表格还是文件夹
|
|
const tableType = ref('table');
|
|
const tableTypeAfterShow = ref('table');
|
|
const tableHeight: any = ref(0);
|
|
watch(
|
|
() => tableType.value,
|
|
(newval) => {
|
|
// 格子
|
|
if (newval === 'store') {
|
|
// 数据
|
|
GetMediaFile({
|
|
parentKey: nowParentKey.value,
|
|
page: 1,
|
|
limit: 1000,
|
|
}).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);
|
|
});
|
|
}
|
|
},
|
|
);
|
|
|
|
// 单选框选择
|
|
const checkNameChecked = ref(false);
|
|
// 表格or文件夹切换
|
|
function changeStore(e, record) {
|
|
if (typeof record == 'string') {
|
|
if (e.target.checked) {
|
|
checkNameChecked.value = true;
|
|
showTableData.value = showTableData.value.map((item) => ({
|
|
...item,
|
|
checked: true,
|
|
}));
|
|
} else {
|
|
checkNameChecked.value = false;
|
|
showTableData.value = showTableData.value.map((item) => ({
|
|
...item,
|
|
checked: false,
|
|
}));
|
|
}
|
|
} else {
|
|
if (showTableData.value.filter((item) => item.checked).length == showTableData.value.length) {
|
|
checkNameChecked.value = true;
|
|
} else {
|
|
checkNameChecked.value = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 表格
|
|
// 目录
|
|
const floders = ref([
|
|
{
|
|
id: '0',
|
|
name: '全部文件',
|
|
},
|
|
]);
|
|
const nowParentKey = ref('0');
|
|
const searchInfo = reactive<Recordable>({});
|
|
const searchParams = ref();
|
|
const [
|
|
registerTable,
|
|
{ reload, getDataSource, getSelectRows, setSelectedRows, clearSelectedRowKeys },
|
|
] = useTable({
|
|
api: GetMediaFile,
|
|
rowKey: 'id',
|
|
columns,
|
|
formConfig: {
|
|
labelWidth: 120,
|
|
schemas: searchFormSchema,
|
|
},
|
|
rowSelection: {
|
|
type: 'checkbox',
|
|
},
|
|
isTreeTable: false,
|
|
striped: false,
|
|
bordered: false,
|
|
inset: false,
|
|
tableSetting: {
|
|
redo: false,
|
|
size: false,
|
|
setting: false,
|
|
},
|
|
useSearchForm: true,
|
|
showIndexColumn: false,
|
|
showTableSetting: true,
|
|
beforeFetch: (data) => {
|
|
// 接口请求前 参数处理
|
|
let temp = {
|
|
...data,
|
|
page: tableTypeAfterShow.value == 'table' ? data.page : 1,
|
|
limit: tableTypeAfterShow.value == 'table' ? data.limit : 1000,
|
|
parentKey: nowParentKey.value,
|
|
};
|
|
return temp;
|
|
},
|
|
handleSearchInfoFn(info) {
|
|
if (info.startTime && info.endTime) {
|
|
info = {
|
|
...info,
|
|
startTime: dayjs(info.startTime).format('YYYY-MM-DD') + ' 00:00:00',
|
|
endTime: dayjs(info.endTime).format('YYYY-MM-DD') + ' 23:59:59',
|
|
};
|
|
}
|
|
searchParams.value = info;
|
|
return info;
|
|
},
|
|
afterFetch: (res) => {
|
|
res.forEach((arr) => {
|
|
if (arr.fileTags) {
|
|
arr.fileTags = JSON.parse(arr.fileTags);
|
|
} else {
|
|
arr.fileTags = [];
|
|
}
|
|
if (arr.graffitiJson) {
|
|
arr.graffitiJson = JSON.parse(arr.graffitiJson);
|
|
} else {
|
|
arr.graffitiJson = [];
|
|
}
|
|
});
|
|
return res;
|
|
},
|
|
});
|
|
|
|
// 目录跳跃
|
|
function getChildrenByProp(f, index) {
|
|
nowParentKey.value = f.id;
|
|
floders.value = floders.value.splice(0, index + 1);
|
|
clearSelectedRowKeys();
|
|
reload().then((res) => {
|
|
showTableData.value = res;
|
|
});
|
|
}
|
|
|
|
// 弹窗----------------------------------------------------------------------
|
|
// 左侧目录选择
|
|
function handleSelect(orgId = '') {
|
|
searchInfo.orgId = orgId;
|
|
reload();
|
|
}
|
|
// 刷新表格
|
|
const childRef = ref<any>();
|
|
function handleSuccessPreview(record = null) {
|
|
clearSelectedRowKeys();
|
|
childRef.value.fetch();
|
|
reload();
|
|
setTimeout(() => {
|
|
if (record) {
|
|
// 删除后-刷新当前查看项
|
|
previewRecordList.value.forEach((item, index) => {
|
|
if (record.id == item.id) {
|
|
previewRecordList.value.splice(index, 1);
|
|
if (previewRecordList.value.length != 0) {
|
|
nowPreviewRecord.value = previewRecordList.value[index];
|
|
} else {
|
|
open.value = false;
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
// 刷新当前查看项
|
|
GetMediaFile({
|
|
...searchParams.value,
|
|
parentKey: nowParentKey.value,
|
|
page: 1,
|
|
limit: 100,
|
|
}).then((res) => {
|
|
previewRecordList.value = uniqueByKey(res.items, nowPreviewRecord.value);
|
|
nowPreviewRecord.value = getDataSource().find(
|
|
(item) => item.id == nowPreviewRecord.value.id,
|
|
);
|
|
});
|
|
}
|
|
}, 500);
|
|
}
|
|
// 新建文件夹
|
|
const [addFolderModal, { openModal: openAddFolderModal }] = useModal();
|
|
// 移动
|
|
const [moveFileModal, { openModal: openMoveFileModal }] = useModal();
|
|
// 压缩
|
|
const [compressFileModal, { openModal: openCompressFileModal }] = useModal();
|
|
// 重命名
|
|
const [renameModal, { openModal: openRenameModal }] = useModal();
|
|
// 刷新
|
|
function handleSuccess(record = null) {
|
|
clearSelectedRowKeys();
|
|
childRef.value.fetch();
|
|
reload();
|
|
}
|
|
// 新建文件夹
|
|
function addFolder() {
|
|
openAddFolderModal(true, {
|
|
parentKey: nowParentKey.value,
|
|
});
|
|
}
|
|
// 移动文件
|
|
function moveFolderOrFile() {
|
|
let rows = getSelectRows();
|
|
if (rows.length > 0) {
|
|
if (rows.some((item) => item.parentKey == '0' && !item.objectKey)) {
|
|
return createMessage.warn('根目录的文件夹不能移动!');
|
|
}
|
|
const records = rows;
|
|
openMoveFileModal(true, {
|
|
records,
|
|
});
|
|
} else {
|
|
return createMessage.warn('请选择一个或者多个文件/文件夹进行移动');
|
|
}
|
|
}
|
|
// 重命名
|
|
function renameRecord(record) {
|
|
openRenameModal(true, {
|
|
record,
|
|
});
|
|
}
|
|
// 删除
|
|
async function deleteFolderOrFile() {
|
|
let rows = getSelectRows();
|
|
if (rows.length == 0) {
|
|
return createMessage.warn('请选择一个或者多个文件/文件夹进行删除');
|
|
}
|
|
createConfirm({
|
|
iconType: 'info',
|
|
title: '删除',
|
|
content: '确定要删除选择的文件/文件夹吗？',
|
|
onOk: async () => {
|
|
let ids = '';
|
|
rows.forEach((row) => {
|
|
if (!ids) {
|
|
ids = row.id;
|
|
} else {
|
|
ids = ids + ',' + row.id;
|
|
}
|
|
});
|
|
Deletepic({
|
|
ids: ids,
|
|
}).then((res) => {
|
|
handleSuccess();
|
|
createMessage.success(res);
|
|
});
|
|
},
|
|
});
|
|
}
|
|
|
|
// 查看弹窗----------------------------------------------------------------------------
|
|
const open = ref(false);
|
|
// 目前展示图片
|
|
const nowPreviewRecord: any = ref();
|
|
// 目前展示图片的列表
|
|
const previewRecordList: any = ref([]);
|
|
// 查看-打开这个文件夹或者展示这个图片
|
|
async function lookRecord(record) {
|
|
// 展示这个图片后者视频
|
|
if (record.objectKey) {
|
|
GetMediaFile({
|
|
...searchParams.value,
|
|
parentKey: nowParentKey.value,
|
|
page: 1,
|
|
limit: 100,
|
|
}).then((res) => {
|
|
nowPreviewRecord.value = record;
|
|
// 同文件下的图片或者视频
|
|
previewRecordList.value = uniqueByKey(res.items, record);
|
|
open.value = true;
|
|
});
|
|
}
|
|
// 文件夹
|
|
if (!record.objectKey) {
|
|
nowParentKey.value = record.id;
|
|
floders.value.push({
|
|
id: nowParentKey.value,
|
|
name: record.name,
|
|
});
|
|
reload().then((res) => {
|
|
showTableData.value = res;
|
|
});
|
|
}
|
|
}
|
|
function uniqueByKey(arrlist, record) {
|
|
let resultList: any = [];
|
|
if (record.objectKey.includes('.jpeg')) {
|
|
arrlist
|
|
.filter((item) => item.objectKey && item.objectKey.includes('jpeg'))
|
|
.forEach((item) => {
|
|
if (!item.fileTags) {
|
|
item.fileTags = [];
|
|
} else {
|
|
item.fileTags = JSON.parse(item.fileTags);
|
|
}
|
|
if (!item.graffitiJson) {
|
|
item.graffitiJson = [];
|
|
} else {
|
|
item.graffitiJson = JSON.parse(item.graffitiJson);
|
|
}
|
|
resultList.push(item);
|
|
});
|
|
}
|
|
if (record.objectKey.includes('mp4')) {
|
|
arrlist
|
|
.filter((item) => item.objectKey && item.objectKey.includes('mp4'))
|
|
.forEach((item) => {
|
|
if (!item.fileTags) {
|
|
item.fileTags = [];
|
|
} else {
|
|
item.fileTags = JSON.parse(item.fileTags);
|
|
}
|
|
if (!item.graffitiJson) {
|
|
item.graffitiJson = [];
|
|
} else {
|
|
item.graffitiJson = JSON.parse(item.graffitiJson);
|
|
}
|
|
resultList.push(item);
|
|
});
|
|
}
|
|
return resultList;
|
|
}
|
|
// 图片选择
|
|
function chooseNowPreviewRecord(value) {
|
|
nowPreviewRecord.value = value;
|
|
}
|
|
// 关闭
|
|
function closeModal() {
|
|
document.body.style.cursor = 'auto';
|
|
open.value = false;
|
|
}
|
|
|
|
// 变化检测弹窗----------------------------------------------------------------------
|
|
const comparisonOpen = ref(false);
|
|
// 打开变化检测弹窗
|
|
function openComparisonModal() {
|
|
comparisonOpen.value = true;
|
|
}
|
|
// 关闭变化检测弹窗
|
|
function closeComparisonModal() {
|
|
comparisonOpen.value = false;
|
|
}
|
|
|
|
// 路径地图----------------------------------------------------------------------
|
|
// 打开路径地图
|
|
const floderName = ref('');
|
|
const nowShowImageData = ref({});
|
|
const allImageDataList: any = ref([]);
|
|
// 展示路径地图部分
|
|
const pathDivShow = ref(false);
|
|
function showPathDiv(record) {
|
|
GetMediaFile({
|
|
parentKey: record.parentKey,
|
|
page: 1,
|
|
limit: 1000,
|
|
}).then((res) => {
|
|
allImageDataList.value = res.items.filter(
|
|
(item) => item.objectKey && item.objectKey.includes('.jpeg'),
|
|
);
|
|
allImageDataList.value.forEach((arr) => {
|
|
if (arr.fileTags) {
|
|
arr.fileTags = JSON.parse(arr.fileTags);
|
|
} else {
|
|
arr.fileTags = [];
|
|
}
|
|
if (arr.graffitiJson) {
|
|
arr.graffitiJson = JSON.parse(arr.graffitiJson);
|
|
} else {
|
|
arr.graffitiJson = [];
|
|
}
|
|
});
|
|
nowShowImageData.value = allImageDataList.value.find((item) => item.id == record.id);
|
|
floderName.value = floders.value[floders.value.length - 1].name;
|
|
pathDivShow.value = true;
|
|
});
|
|
}
|
|
// 关闭路径地图弹窗
|
|
function closePathModal() {
|
|
nowShowImageData.value = {};
|
|
pathDivShow.value = false;
|
|
}
|
|
// 刷新
|
|
function handleSuccessPath(value) {
|
|
setTimeout(() => {
|
|
showPathDiv(value);
|
|
reload();
|
|
}, 500);
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.floderTitle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: fit-content;
|
|
cursor: pointer;
|
|
}
|
|
|
|
::v-deep .vben-basic-table-header__toolbar {
|
|
display: flex !important;
|
|
justify-content: flex-start !important;
|
|
}
|
|
.floderOtherButton {
|
|
position: absolute;
|
|
right: 0px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.flodersname {
|
|
max-width: 120px;
|
|
white-space: nowrap; /* 禁止换行 */
|
|
overflow: hidden; /* 超出部分隐藏 */
|
|
text-overflow: ellipsis; /* 超出显示省略号 */
|
|
}
|
|
|
|
::v-deep .floderTitle .ant-btn {
|
|
padding-left: 0px !important;
|
|
padding-right: 0px !important;
|
|
}
|
|
::v-deep .floderTitle .ant-btn-text {
|
|
padding-left: 0px !important;
|
|
padding-right: 0px !important;
|
|
}
|
|
|
|
::v-deep .ant-table-row-expand-icon {
|
|
display: none !important;
|
|
}
|
|
::v-deep .ant-table-row-expand-icon-collapsed {
|
|
display: none !important;
|
|
}
|
|
|
|
.storeDivsAllChoose {
|
|
width: 100%;
|
|
height: 40px;
|
|
margin: 0px 0px 16px 16px;
|
|
padding-left: 16px;
|
|
background: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.storeDivList {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
|
|
width: 100%;
|
|
height: 72.5%;
|
|
background: #ffffff;
|
|
margin: 0px 16px 16px 16px;
|
|
overflow-y: auto;
|
|
|
|
.storeDiv {
|
|
position: relative;
|
|
width: 165px;
|
|
height: 130px;
|
|
outline: 1px solid #000000;
|
|
margin: 16px;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.storeDivSpanName {
|
|
position: absolute;
|
|
bottom: 16px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 30px;
|
|
cursor: pointer;
|
|
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
overflow-wrap: break-word;
|
|
max-width: 100%;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.svg-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
::v-deep .vben-basic-table {
|
|
height: fit-content !important;
|
|
}
|
|
::v-deep .full-modal {
|
|
height: 100% !important;
|
|
}
|
|
::v-deep .ant-modal-body {
|
|
height: 100% !important;
|
|
}
|
|
</style>
|