|
|
@@ -1,102 +1,106 @@
|
|
|
<template>
|
|
|
- <div class="mediaDetail">
|
|
|
- <Search :mode="state.mode" :fetchList="fetchList" :selectedRowKeys="state.selectedRowKeys"
|
|
|
- :onClickDownload="onClickBatchDownload" :onClickDelete="onClickBatchDelete" :onClickSearch="onClickSearch"
|
|
|
- :onClickReset="onClickReset" />
|
|
|
- <div style="background: #FFFFFF;padding: 20px;">
|
|
|
- <div class="mediaDetail-info">
|
|
|
- <div class="mediaDetail-info-left">
|
|
|
- <div style="color: #7C7C7C;cursor: pointer;" @click="onClickGoBack">
|
|
|
- 媒体文件
|
|
|
- </div>
|
|
|
- <div style="margin: 0 10px;">
|
|
|
- /
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- {{ 'DJI_20240624143929_0112_V.JPG' }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="mediaDetail-info-right">
|
|
|
- <div class="mediaDetail-info-right-text">
|
|
|
- <div>
|
|
|
- 已选/全部：
|
|
|
+ <a-spin :spinning="state.downloadLoading" tip="下载中...">
|
|
|
+ <div class="mediaDetail">
|
|
|
+ <Search :mode="state.mode" :fetchList="fetchList" :selectedRowKeys="state.selectedRowKeys"
|
|
|
+ :onClickDownload="onClickBatchDownload" :onClickDelete="onClickBatchDelete" :onClickSearch="onClickSearch"
|
|
|
+ :onClickReset="onClickReset" />
|
|
|
+ <div style="background: #FFFFFF;padding: 20px;">
|
|
|
+ <div class="mediaDetail-info">
|
|
|
+ <div class="mediaDetail-info-left">
|
|
|
+ <div style="color: #7C7C7C;cursor: pointer;" @click="onClickGoBack">
|
|
|
+ 媒体文件
|
|
|
+ </div>
|
|
|
+ <div style="margin: 0 10px;">
|
|
|
+ /
|
|
|
</div>
|
|
|
<div>
|
|
|
- {{ state.selectedRowKeys.length }}/{{ paginationConfig.total }}
|
|
|
+ {{ state.dirName }}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <a-button style="padding:0 5px;" :type="state.mode === 'table' ? 'primary' : 'default'"
|
|
|
- :ghost="state.mode === 'table'" size="small" @click="state.mode = 'table'">
|
|
|
- <MenuOutlined />
|
|
|
- </a-button>
|
|
|
- <a-button style="padding:0 5px;" :type="state.mode === 'list' ? 'primary' : 'default'"
|
|
|
- :ghost="state.mode === 'list'" size="small" @click="state.mode = 'list'">
|
|
|
- <AppstoreOutlined />
|
|
|
- </a-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="mediaDetail-table" v-if="state.mode === 'table'">
|
|
|
- <a-table :scroll="{ x: '100%', y: 500 }" :childrenColumnName="null" rowKey="file_id"
|
|
|
- :loading="state.listLoading" :columns="columns" :dataSource="state.list" :rowClassName="rowClassName"
|
|
|
- :pagination="paginationConfig"
|
|
|
- :rowSelection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }">
|
|
|
- <!-- 文件夹名称 -->
|
|
|
- <template #file_name="{ record }">
|
|
|
- <a-tooltip :title="record.file_name">
|
|
|
- <div class="fileName" @click="onClickLookFile(record)">
|
|
|
- <div>
|
|
|
- <img :src="pictureSrc">
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- {{ record.file_name }}
|
|
|
- </div>
|
|
|
+ <div class="mediaDetail-info-right">
|
|
|
+ <div class="mediaDetail-info-right-text">
|
|
|
+ <div>
|
|
|
+ 已选/全部：
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ {{ state.selectedRowKeys.length }}/{{ paginationConfig.total }}
|
|
|
</div>
|
|
|
- </a-tooltip>
|
|
|
- </template>
|
|
|
- <!-- 操作 -->
|
|
|
- <template #action="{ record }">
|
|
|
- <div class="flex-align-center flex-row" style="color: #2d8cf0">
|
|
|
- <a-tooltip title="照片位置" v-if="1">
|
|
|
- <EnvironmentOutlined style="margin-right: 10px;" @click="onClickPhotoPosition" />
|
|
|
- </a-tooltip>
|
|
|
- <a-tooltip title="重命名" v-else-if="1">
|
|
|
- <EditOutlined style="margin-right: 10px;" @click="onClickRechristen" />
|
|
|
- </a-tooltip>
|
|
|
- <a-tooltip title="删除" v-else-if="1">
|
|
|
- <DeleteOutlined style="margin-right: 10px;" @click="onClickDelete" />
|
|
|
- </a-tooltip>
|
|
|
- <a-tooltip title="压缩下载">
|
|
|
- <DownloadOutlined @click="onClickDownload(record)" />
|
|
|
- </a-tooltip>
|
|
|
</div>
|
|
|
- </template>
|
|
|
- </a-table>
|
|
|
- </div>
|
|
|
- <div class="mediaDetail-list" v-else>
|
|
|
- <a-list :grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4, xl: 8, xxl: 12 }" :loading="state.listLoading"
|
|
|
- :dataSource="state.list" :pagination="paginationConfig">
|
|
|
- <template #renderItem="{ item }">
|
|
|
- <a-list-item>
|
|
|
- <a-card hoverable @click="onClickLookFile(item)">
|
|
|
- <template #cover>
|
|
|
- <div style="display: flex;justify-content:center;align-items: center;">
|
|
|
- <img style="width: 70%;margin: 10px;" :src="pictureSrc" />
|
|
|
+ <a-button style="padding:0 5px;" :type="state.mode === 'table' ? 'primary' : 'default'"
|
|
|
+ :ghost="state.mode === 'table'" size="small" @click="state.mode = 'table'">
|
|
|
+ <MenuOutlined />
|
|
|
+ </a-button>
|
|
|
+ <a-button style="padding:0 5px;" :type="state.mode === 'list' ? 'primary' : 'default'"
|
|
|
+ :ghost="state.mode === 'list'" size="small" @click="state.mode = 'list'">
|
|
|
+ <AppstoreOutlined />
|
|
|
+ </a-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mediaDetail-table" v-if="state.mode === 'table'">
|
|
|
+ <a-table :scroll="{ x: '100%', y: 500 }" :childrenColumnName="null" rowKey="file_id"
|
|
|
+ :loading="state.listLoading" :columns="columns" :dataSource="state.list" :rowClassName="rowClassName"
|
|
|
+ :pagination="paginationConfig"
|
|
|
+ :rowSelection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }">
|
|
|
+ <!-- 文件夹名称 -->
|
|
|
+ <template #file_name="{ record }">
|
|
|
+ <a-tooltip :title="record.file_name">
|
|
|
+ <div class="fileName" @click="onClickLookFile(record)">
|
|
|
+ <div>
|
|
|
+ <img :src="panoramaSrc" v-if="record.media_type === 3" />
|
|
|
+ <img :src="videoSrc" v-else-if="record.media_type === 4" />
|
|
|
+ <img :src="pictureSrc" v-else />
|
|
|
</div>
|
|
|
- </template>
|
|
|
- <a-card-meta>
|
|
|
- <template #description>
|
|
|
- <div class="mediaDetail-list-name">
|
|
|
- {{ item.file_name }}
|
|
|
+ <div>
|
|
|
+ {{ record.file_name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-tooltip>
|
|
|
+ </template>
|
|
|
+ <!-- 操作 -->
|
|
|
+ <template #action="{ record }">
|
|
|
+ <div class="flex-align-center flex-row" style="color: #2d8cf0">
|
|
|
+ <a-tooltip title="照片位置" v-if="[1, 3].includes(record.media_type)">
|
|
|
+ <EnvironmentOutlined style="margin-right: 10px;" @click="onClickPhotoPosition" />
|
|
|
+ </a-tooltip>
|
|
|
+ <a-tooltip title="重命名" v-else-if="record.media_type === 4">
|
|
|
+ <EditOutlined style="margin-right: 10px;" @click="onClickRechristen" />
|
|
|
+ </a-tooltip>
|
|
|
+ <a-tooltip title="删除" v-else-if="record.media_type === 2">
|
|
|
+ <DeleteOutlined style="margin-right: 10px;" @click="onClickDelete(record)" />
|
|
|
+ </a-tooltip>
|
|
|
+ <a-tooltip title="压缩下载">
|
|
|
+ <DownloadOutlined @click="onClickDownload(record)" />
|
|
|
+ </a-tooltip>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+ <div class="mediaDetail-list" v-else>
|
|
|
+ <a-list :grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4, xl: 8, xxl: 12 }" :loading="state.listLoading"
|
|
|
+ :dataSource="state.list" :pagination="paginationConfig">
|
|
|
+ <template #renderItem="{ item }">
|
|
|
+ <a-list-item>
|
|
|
+ <a-card hoverable @click="onClickLookFile(item)">
|
|
|
+ <template #cover>
|
|
|
+ <div style="display: flex;justify-content:center;align-items: center;">
|
|
|
+ <img style="width: 70%;margin: 10px;" :src="pictureSrc" />
|
|
|
</div>
|
|
|
</template>
|
|
|
- </a-card-meta>
|
|
|
- </a-card>
|
|
|
- </a-list-item>
|
|
|
- </template>
|
|
|
- </a-list>
|
|
|
+ <a-card-meta>
|
|
|
+ <template #description>
|
|
|
+ <div class="mediaDetail-list-name">
|
|
|
+ {{ item.file_name }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </a-card-meta>
|
|
|
+ </a-card>
|
|
|
+ </a-list-item>
|
|
|
+ </template>
|
|
|
+ </a-list>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </a-spin>
|
|
|
<FileInfo :fileId="state.fileId" :onClose="fileInfoOnClickClose" v-if="state.fileInfoVisible" />
|
|
|
</template>
|
|
|
|
|
|
@@ -106,13 +110,20 @@ import { MenuOutlined, AppstoreOutlined, EditOutlined, DeleteOutlined, DownloadO
|
|
|
import Search from './components/Search.vue';
|
|
|
import FileInfo from './components/FileInfo.vue';
|
|
|
import pictureSrc from '/@/assets/media/picture.svg';
|
|
|
+import panoramaSrc from '/@/assets/media/panorama.svg';
|
|
|
+import videoSrc from '/@/assets/media/video.svg';
|
|
|
import { apis } from '/@/api/custom';
|
|
|
import router from '/@/router/index';
|
|
|
+import { downloadFile } from '/@/utils/common';
|
|
|
+import { downloadMediaFile } from '/@/api/media';
|
|
|
+import { ELocalStorageKey } from '/@/types';
|
|
|
|
|
|
interface State {
|
|
|
listLoading: boolean,
|
|
|
list: any[],
|
|
|
+ dirName: string,
|
|
|
selectedRowKeys: string[],
|
|
|
+ downloadLoading: boolean,
|
|
|
mode: 'table' | 'list',
|
|
|
fileId: string,
|
|
|
fileInfoVisible: boolean,
|
|
|
@@ -121,7 +132,9 @@ interface State {
|
|
|
const state: State = reactive({
|
|
|
listLoading: false,
|
|
|
list: [],
|
|
|
+ dirName: '',
|
|
|
selectedRowKeys: [],
|
|
|
+ downloadLoading: false,
|
|
|
mode: 'table',
|
|
|
fileId: '',
|
|
|
fileInfoVisible: false,
|
|
|
@@ -144,11 +157,16 @@ const paginationConfig = reactive({
|
|
|
}
|
|
|
})
|
|
|
|
|
|
-const fetchList = async () => {
|
|
|
+const fetchList = async (query?: any) => {
|
|
|
state.listLoading = true;
|
|
|
try {
|
|
|
const dirId = router.currentRoute.value.params?.id;
|
|
|
- const res = await apis.fetchFileListByFolder(dirId as string, { page: paginationConfig.current, page_size: paginationConfig.pageSize });
|
|
|
+ const res = await apis.fetchFileListByFolder(dirId as string, {
|
|
|
+ ...query,
|
|
|
+ page: paginationConfig.current,
|
|
|
+ page_size: paginationConfig.pageSize,
|
|
|
+ });
|
|
|
+ state.dirName = res.data.group_name;
|
|
|
state.list = res.data.list;
|
|
|
paginationConfig.current = res.data.pagination.page;
|
|
|
paginationConfig.pageSize = res.data.pagination.page_size;
|
|
|
@@ -185,7 +203,7 @@ const columns = [
|
|
|
width: 150,
|
|
|
ellipsis: true,
|
|
|
customRender: ({ text }: any) => {
|
|
|
- return text || '--';
|
|
|
+ return text > 0 ? (text / 1024 / 1024).toFixed(1) + 'M' : '--';
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
@@ -196,16 +214,16 @@ const columns = [
|
|
|
},
|
|
|
{
|
|
|
title: '媒体类型',
|
|
|
- dataIndex: 'media_name',
|
|
|
- width: 150,
|
|
|
+ dataIndex: 'media_type_text',
|
|
|
+ width: 100,
|
|
|
customRender: ({ text }: any) => {
|
|
|
return text || '--';
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
- title: '照片类型',
|
|
|
+ title: '文件类型',
|
|
|
dataIndex: 'picture_type',
|
|
|
- width: 150,
|
|
|
+ width: 100,
|
|
|
customRender: ({ text }: any) => {
|
|
|
return text || '--';
|
|
|
}
|
|
|
@@ -229,22 +247,38 @@ const rowClassName = (record: any, index: number) => {
|
|
|
|
|
|
// 点击批量下载
|
|
|
const onClickBatchDownload = async () => {
|
|
|
- console.log(state.selectedRowKeys, '点击批量下载');
|
|
|
+ state.downloadLoading = true;
|
|
|
+ try {
|
|
|
+ const bold = await apis.batchDownloadFile({
|
|
|
+ id: state.selectedRowKeys.join(',')
|
|
|
+ });
|
|
|
+ const data = new Blob([bold], { type: 'application/zip' });
|
|
|
+ downloadFile(data, state.dirName);
|
|
|
+ } catch (e) {
|
|
|
+ console.error(e);
|
|
|
+ } finally {
|
|
|
+ state.downloadLoading = false;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
// 点击批量删除
|
|
|
const onClickBatchDelete = async () => {
|
|
|
- console.log(state.selectedRowKeys, '点击批量删除');
|
|
|
+ const canDeleteList = state.list.filter(item => state.selectedRowKeys.includes(item.file_id) && item.media_type === 2);
|
|
|
+ const data = {
|
|
|
+ id: canDeleteList.map(item => item.file_id).join(',')
|
|
|
+ }
|
|
|
+ await apis.batchDeletePicture(data);
|
|
|
+ await fetchList()
|
|
|
}
|
|
|
|
|
|
// 点击搜索
|
|
|
-const onClickSearch = async () => {
|
|
|
- console.log('点击搜索');
|
|
|
+const onClickSearch = async (query: any) => {
|
|
|
+ await fetchList(query);
|
|
|
}
|
|
|
|
|
|
// 点击重置
|
|
|
-const onClickReset = async () => {
|
|
|
- console.log('点击重置');
|
|
|
+const onClickReset = async (query: any) => {
|
|
|
+ await fetchList(query);
|
|
|
}
|
|
|
|
|
|
// 点击返回
|
|
|
@@ -271,7 +305,7 @@ const fileInfoOnClickClose = () => {
|
|
|
|
|
|
// 点击照片位置
|
|
|
const onClickPhotoPosition = () => {
|
|
|
-
|
|
|
+ console.log('点击之后，在地图上显示这个图片的点标记信息');
|
|
|
}
|
|
|
|
|
|
// 点击重命名
|
|
|
@@ -280,19 +314,28 @@ const onClickRechristen = () => {
|
|
|
}
|
|
|
|
|
|
// 点击删除
|
|
|
-const onClickDelete = () => {
|
|
|
-
|
|
|
+const onClickDelete = async (record: any) => {
|
|
|
+ const data = {
|
|
|
+ id: record.file_id
|
|
|
+ }
|
|
|
+ await apis.batchDeletePicture(data);
|
|
|
}
|
|
|
|
|
|
// 点击下载
|
|
|
const onClickDownload = async (record: any) => {
|
|
|
- state.listLoading = true;
|
|
|
+ state.downloadLoading = true;
|
|
|
try {
|
|
|
-
|
|
|
+ const workspaceId: string = localStorage.getItem(ELocalStorageKey.WorkspaceId) || '';
|
|
|
+ const res = await downloadMediaFile(workspaceId, record.file_id)
|
|
|
+ if (!res) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const data = new Blob([res])
|
|
|
+ downloadFile(data, record.file_name)
|
|
|
} catch (e) {
|
|
|
console.error(e);
|
|
|
} finally {
|
|
|
- state.listLoading = false;
|
|
|
+ state.downloadLoading = false;
|
|
|
}
|
|
|
}
|
|
|
</script>
|
李富豪