|
|
|
@ -1,82 +1,187 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div class="header">Media Files</div> |
|
|
|
<div class="header"> |
|
|
|
<a-spin :spinning="loading" :delay="1000" tip="downloading" size="large"> |
|
|
|
<a-button type="primary" large class="btn-primary" @click='openFileDialog'>创建文件夹</a-button> |
|
|
|
|
|
|
|
<div v-show="state.selectedRowIds.length" class="other-btn"> |
|
|
|
|
|
|
|
<a-button large class="btn-primary">压缩并下载</a-button> |
|
|
|
|
|
|
|
<a-button large class="btn-primary" @click="move()">移动</a-button> |
|
|
|
|
|
|
|
<a-button large class="btn-primary" @click="deleteRow()">删除</a-button> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="search-content"> |
|
|
|
|
|
|
|
<a-form> |
|
|
|
|
|
|
|
<a-row :gutter="16"> |
|
|
|
|
|
|
|
<a-col :span="10"> |
|
|
|
|
|
|
|
<a-form-item name="timestamp"> |
|
|
|
|
|
|
|
<a-range-picker v-model:value="searchParam.timestamp" show-time/> |
|
|
|
|
|
|
|
</a-form-item> |
|
|
|
|
|
|
|
</a-col> |
|
|
|
|
|
|
|
<a-col :span="7"> |
|
|
|
|
|
|
|
<a-form-item name="type"> |
|
|
|
|
|
|
|
<a-select placeholder="所有类型"> |
|
|
|
|
|
|
|
<a-select-option value="searchParam.type">所有类型</a-select-option> |
|
|
|
|
|
|
|
</a-select> |
|
|
|
|
|
|
|
</a-form-item> |
|
|
|
|
|
|
|
</a-col> |
|
|
|
|
|
|
|
<a-col :span="7"> |
|
|
|
|
|
|
|
<a-form-item name="type"> |
|
|
|
|
|
|
|
<a-select placeholder="所有负载"> |
|
|
|
|
|
|
|
<a-select-option value="searchParam.type">所有负载</a-select-option> |
|
|
|
|
|
|
|
</a-select> |
|
|
|
|
|
|
|
</a-form-item> |
|
|
|
|
|
|
|
</a-col> |
|
|
|
|
|
|
|
</a-row> |
|
|
|
|
|
|
|
<a-row :gutter="16"> |
|
|
|
|
|
|
|
<a-col :span="7"> |
|
|
|
|
|
|
|
<a-form-item name="type"> |
|
|
|
|
|
|
|
<a-select placeholder="标签筛选"> |
|
|
|
|
|
|
|
<a-select-option value="searchParam.type">所有类型</a-select-option> |
|
|
|
|
|
|
|
</a-select> |
|
|
|
|
|
|
|
</a-form-item> |
|
|
|
|
|
|
|
</a-col> |
|
|
|
|
|
|
|
<a-col :span="7"> |
|
|
|
|
|
|
|
<a-form-item name="name"> |
|
|
|
|
|
|
|
<a-input v-model:value="searchParam.name" placeholder="按文件名称搜索"> |
|
|
|
|
|
|
|
<template #addonAfter> |
|
|
|
|
|
|
|
<ZoomInOutlined /> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
</a-input> |
|
|
|
|
|
|
|
</a-form-item> |
|
|
|
|
|
|
|
</a-col> |
|
|
|
|
|
|
|
</a-row> |
|
|
|
|
|
|
|
</a-form> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<a-spin :spinning="loading" tip="加载中..." size="large"> |
|
|
|
<div class="media-panel-wrapper"> |
|
|
|
<div class="media-panel-wrapper"> |
|
|
|
<a-table class="media-table" :columns="columns" :data-source="mediaData.data" row-key="fingerprint" |
|
|
|
<div class="bread-content"> |
|
|
|
:pagination="paginationProp" :scroll="{ x: '100%', y: 600 }" @change="refreshData"> |
|
|
|
<span v-for="(item,index) in breadList" :key="item" @click="jumpToPath(index)" :class="[index!=breadList.length-1?'tab-click':'']">{{ item }}<span v-if="index!=breadList.length-1" >/</span></span> |
|
|
|
<template v-for="col in ['name', 'path']" #[col]="{ text }" :key="col"> |
|
|
|
</div> |
|
|
|
<a-tooltip :title="text"> |
|
|
|
<a-table :columns="columns" ref='tableRef' :data-source="mediaData.data" :scroll="{ x: '100%', y: 400 }" :row-selection="rowSelection"> |
|
|
|
<a v-if="col === 'name'">{{ text }}</a> |
|
|
|
<template v-for="col in ['file_name','payload','drone','create_time']" #[col]="{ text,index }" :key="col"> |
|
|
|
<span v-else>{{ text }}</span> |
|
|
|
<div @click="goDetail(mediaData.data[index],index)" v-if="col=='file_name'"> |
|
|
|
</a-tooltip> |
|
|
|
<img src="../assets/icons/folder.svg" v-if='mediaData.data[index].file_type==0'> |
|
|
|
|
|
|
|
<img src="../assets/icons/zip.svg" v-if='mediaData.data[index].file_type==2'> |
|
|
|
|
|
|
|
<a-image :width="30" :hight="30" v-if='mediaData.data[index].file_type==1' :src="mediaData.data[index].picture_url" :preview="{ |
|
|
|
|
|
|
|
src: mediaData.data[index].picture_url}" |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<template v-if="index===state.index"> |
|
|
|
|
|
|
|
<a-input v-model:value="state.changeName" class="edit-input space"></a-input> |
|
|
|
|
|
|
|
<a @click="createFile(mediaData.data[index].id)" style="margin-right: 6px;"><CheckOutlined /></a> |
|
|
|
|
|
|
|
<CloseOutlined @click.stop="cancelEdit" /> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<template #original="{ text }"> |
|
|
|
<a-tooltip :title="text" v-else> |
|
|
|
{{ text }} |
|
|
|
<a class="space"> {{ text }}</a> |
|
|
|
|
|
|
|
</a-tooltip> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-else>{{ text||'--' }}</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<template #action="{ record }"> |
|
|
|
<template #action="{ record, index }"> |
|
|
|
<a-tooltip title="download"> |
|
|
|
<a-tooltip title="download"> |
|
|
|
<a class="fz18" @click="downloadMedia(record)"><DownloadOutlined /></a> |
|
|
|
<a class="fz18 space" @click="downloadMedia(record)"><DownloadOutlined /></a> |
|
|
|
|
|
|
|
<a class="fz18 space" @click="editName(index)"><EditOutlined /></a> |
|
|
|
|
|
|
|
<a class="fz18 space" @click="deleteRow(index)"><DeleteOutlined /></a> |
|
|
|
|
|
|
|
<a class="fz18 space" @click="move(mediaData.data[index].id)"><LoginOutlined /></a> |
|
|
|
</a-tooltip> |
|
|
|
</a-tooltip> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</a-table> |
|
|
|
</a-table> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</a-spin> |
|
|
|
</a-spin> |
|
|
|
|
|
|
|
<a-modal v-model:visible="state.folderOpen" :closable="false" :maskClosable="false"> |
|
|
|
|
|
|
|
<template #title> |
|
|
|
|
|
|
|
<div ref="modalTitleRef" style="width: 100%; cursor: move" class="model-title">创建文件夹</div> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
<a-input class="ml10" |
|
|
|
|
|
|
|
v-model:value="state.fileName" |
|
|
|
|
|
|
|
placeholder="请输入文件名"></a-input> |
|
|
|
|
|
|
|
<template #footer> |
|
|
|
|
|
|
|
<div> |
|
|
|
|
|
|
|
<a-button large class="btn-primary" @click='state.folderOpen=false'>取消</a-button> |
|
|
|
|
|
|
|
<a-button type="primary" large class="btn-primary" @click='createFile()'>确定</a-button> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
</a-modal> |
|
|
|
|
|
|
|
<a-modal v-model:visible="state.folderTree" :closable="false" :maskClosable="false"> |
|
|
|
|
|
|
|
<template #title> |
|
|
|
|
|
|
|
<div ref="modalTitleRef" style="width: 100%; cursor: move" class="model-title">移动到</div> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
<a-directory-tree |
|
|
|
|
|
|
|
@select="selectTree" |
|
|
|
|
|
|
|
:tree-data="treeList" |
|
|
|
|
|
|
|
:field-names="fieldNames" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<template #title="{ file_name}" > |
|
|
|
|
|
|
|
<span >{{ file_name }}</span> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
</a-directory-tree> |
|
|
|
|
|
|
|
<template #footer> |
|
|
|
|
|
|
|
<div> |
|
|
|
|
|
|
|
<a-button large class="btn-primary" @click='state.folderTree=false'>取消</a-button> |
|
|
|
|
|
|
|
<a-button type="primary" large class="btn-primary" @click='moveSubmit()'>确定</a-button> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
</a-modal> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
<script setup lang="ts"> |
|
|
|
import { ref } from '@vue/reactivity' |
|
|
|
import { ref } from '@vue/reactivity' |
|
|
|
import { TableState } from 'ant-design-vue/lib/table/interface' |
|
|
|
import { TableState } from 'ant-design-vue/lib/table/interface' |
|
|
|
import { onMounted, reactive } from 'vue' |
|
|
|
import { onMounted, reactive, nextTick } from 'vue' |
|
|
|
import { IPage } from '../api/http/type' |
|
|
|
import { IPage } from '../api/http/type' |
|
|
|
import { ELocalStorageKey } from '../types/enums' |
|
|
|
import { ELocalStorageKey } from '../types/enums' |
|
|
|
import { downloadFile } from '../utils/common' |
|
|
|
import { downloadFile } from '../utils/common' |
|
|
|
import { downloadMediaFile, getMediaFiles } from '/@/api/media' |
|
|
|
import { downloadMediaFile, getMediaFiles, operateFile, deleteFile, floderTreeData } from '/@/api/media' |
|
|
|
import { DownloadOutlined } from '@ant-design/icons-vue' |
|
|
|
import { |
|
|
|
|
|
|
|
ZoomInOutlined, |
|
|
|
|
|
|
|
DownloadOutlined, |
|
|
|
|
|
|
|
EditOutlined, |
|
|
|
|
|
|
|
CheckOutlined, |
|
|
|
|
|
|
|
CloseOutlined, |
|
|
|
|
|
|
|
DeleteOutlined, |
|
|
|
|
|
|
|
LoginOutlined |
|
|
|
|
|
|
|
} from '@ant-design/icons-vue' |
|
|
|
import { message, Pagination } from 'ant-design-vue' |
|
|
|
import { message, Pagination } from 'ant-design-vue' |
|
|
|
import { load } from '@amap/amap-jsapi-loader' |
|
|
|
const workspaceId = localStorage.getItem(ELocalStorageKey.WorkspaceId) |
|
|
|
import EventBus from '/@/event-bus' |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const workspaceId = localStorage.getItem(ELocalStorageKey.WorkspaceId)! |
|
|
|
|
|
|
|
const loading = ref(false) |
|
|
|
const loading = ref(false) |
|
|
|
const pathId = ref('') |
|
|
|
const searchParam = reactive({ timestamp: [], type: [], name: '' }) |
|
|
|
|
|
|
|
const state = reactive({ rowid: '', selectedRowIds: [], folderOpen: false, fileName: '新建文件夹', fatherId: 0, changeName: '', index: '', folderTree: false }) |
|
|
|
|
|
|
|
const tableRef = ref() |
|
|
|
|
|
|
|
// 面包屑对应的文件名 |
|
|
|
|
|
|
|
const breadList = ref(['全部文件']) |
|
|
|
|
|
|
|
// 面包屑对应的父级id |
|
|
|
|
|
|
|
const fatherids = ref([0]) |
|
|
|
|
|
|
|
// 所在层级 |
|
|
|
|
|
|
|
const breadNum = ref(0) |
|
|
|
const columns = [ |
|
|
|
const columns = [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
title: 'File Name', |
|
|
|
title: '文件名称', |
|
|
|
dataIndex: 'file_name', |
|
|
|
dataIndex: 'file_name', |
|
|
|
ellipsis: true, |
|
|
|
ellipsis: true, |
|
|
|
slots: { customRender: 'name' } |
|
|
|
width: 300, |
|
|
|
|
|
|
|
slots: { customRender: 'file_name' } |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
{ |
|
|
|
title: 'File Path', |
|
|
|
title: '拍摄负载', |
|
|
|
dataIndex: 'file_path', |
|
|
|
dataIndex: 'payload', |
|
|
|
ellipsis: true, |
|
|
|
ellipsis: true, |
|
|
|
slots: { customRender: 'path' } |
|
|
|
slots: { customRender: 'payload' } |
|
|
|
}, |
|
|
|
|
|
|
|
// { |
|
|
|
|
|
|
|
// title: 'FileSize', |
|
|
|
|
|
|
|
// dataIndex: 'size', |
|
|
|
|
|
|
|
// }, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
title: 'Drone', |
|
|
|
|
|
|
|
dataIndex: 'drone' |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
title: 'Payload Type', |
|
|
|
|
|
|
|
dataIndex: 'payload' |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
{ |
|
|
|
title: 'Original', |
|
|
|
title: '大小', |
|
|
|
dataIndex: 'is_original', |
|
|
|
dataIndex: 'drone', |
|
|
|
slots: { customRender: 'original' } |
|
|
|
slots: { customRender: 'drone' } |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
{ |
|
|
|
title: 'Created', |
|
|
|
title: '创建时间', |
|
|
|
dataIndex: 'create_time' |
|
|
|
dataIndex: 'create_time' |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
{ |
|
|
|
title: 'Action', |
|
|
|
title: '操作', |
|
|
|
|
|
|
|
key: 'operation', |
|
|
|
|
|
|
|
fixed: 'right', |
|
|
|
|
|
|
|
width: 120, |
|
|
|
slots: { customRender: 'action' } |
|
|
|
slots: { customRender: 'action' } |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
] |
|
|
|
] |
|
|
|
const body: IPage = { |
|
|
|
const body: IPage = { |
|
|
|
@ -85,14 +190,20 @@ const body: IPage = { |
|
|
|
page_size: 50 |
|
|
|
page_size: 50 |
|
|
|
} |
|
|
|
} |
|
|
|
const paginationProp = reactive({ |
|
|
|
const paginationProp = reactive({ |
|
|
|
pageSizeOptions: ['20', '50', '100'], |
|
|
|
page_size: 10, |
|
|
|
showQuickJumper: true, |
|
|
|
page: 1, |
|
|
|
showSizeChanger: true, |
|
|
|
|
|
|
|
pageSize: 50, |
|
|
|
|
|
|
|
current: 1, |
|
|
|
|
|
|
|
total: 0 |
|
|
|
total: 0 |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
const treeList = ref([]) |
|
|
|
|
|
|
|
const fieldNames = reactive({ |
|
|
|
|
|
|
|
children: 'children', |
|
|
|
|
|
|
|
title: 'file_name', |
|
|
|
|
|
|
|
key: 'id', |
|
|
|
|
|
|
|
value: 'id', |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
const expandedKeys = ref<string[]>([]) |
|
|
|
|
|
|
|
const selectedKeys = ref<string[]>([]) |
|
|
|
|
|
|
|
const checkedKeys = ref<string[]>([]) |
|
|
|
type Pagination = TableState['pagination'] |
|
|
|
type Pagination = TableState['pagination'] |
|
|
|
|
|
|
|
|
|
|
|
interface MediaFile { |
|
|
|
interface MediaFile { |
|
|
|
@ -104,6 +215,7 @@ interface MediaFile { |
|
|
|
file_path: string, |
|
|
|
file_path: string, |
|
|
|
create_time: string, |
|
|
|
create_time: string, |
|
|
|
file_id: string, |
|
|
|
file_id: string, |
|
|
|
|
|
|
|
id:number |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const mediaData = reactive({ |
|
|
|
const mediaData = reactive({ |
|
|
|
@ -111,27 +223,42 @@ const mediaData = reactive({ |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
onMounted(() => { |
|
|
|
// 订阅消息 |
|
|
|
// pathId.value = val |
|
|
|
EventBus.on('getFolderFiles', (val) => { |
|
|
|
nextTick(() => { |
|
|
|
pathId.value = val |
|
|
|
if (tableRef.value.$el) { |
|
|
|
|
|
|
|
const tableContainer = tableRef.value.$el.querySelector('.ant-table-body') |
|
|
|
getFiles() |
|
|
|
tableContainer.addEventListener('scroll', handleScroll) |
|
|
|
|
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
getFiles(workspaceId, paginationProp) |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
const handleScroll = () => { |
|
|
|
function getFiles () { |
|
|
|
const tableContainer = tableRef.value.$el.querySelector('.ant-table-body') |
|
|
|
getMediaFiles(workspaceId, body, pathId.value).then(res => { |
|
|
|
const scrollPosition = tableContainer.scrollTop |
|
|
|
mediaData.data = res.data.list |
|
|
|
const isAtTop = scrollPosition === 0 |
|
|
|
|
|
|
|
const isAtBottom = tableContainer.scrollHeight - scrollPosition === tableContainer.clientHeight |
|
|
|
|
|
|
|
if (isAtBottom) { |
|
|
|
|
|
|
|
// 已滚动到底部，执行相应操作 |
|
|
|
|
|
|
|
if (paginationProp.total > mediaData.data.length) { |
|
|
|
|
|
|
|
getFiles(workspaceId, paginationProp, state.fatherId) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
function getFiles (...data) { |
|
|
|
|
|
|
|
loading.value = true |
|
|
|
|
|
|
|
getMediaFiles(...data).then(res => { |
|
|
|
|
|
|
|
mediaData.data = mediaData.data.concat(res.data.list) |
|
|
|
paginationProp.total = res.data.pagination.total |
|
|
|
paginationProp.total = res.data.pagination.total |
|
|
|
paginationProp.current = res.data.pagination.page |
|
|
|
paginationProp.page = res.data.pagination.page |
|
|
|
console.info(mediaData.data[0]) |
|
|
|
}).finally(() => { |
|
|
|
|
|
|
|
loading.value = false |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function refreshData (page: Pagination) { |
|
|
|
function refreshData (page: Pagination) { |
|
|
|
body.page = page?.current! |
|
|
|
body.page = page?.current! |
|
|
|
body.page_size = page?.pageSize! |
|
|
|
body.page_size = page?.pageSize! |
|
|
|
getFiles() |
|
|
|
getFiles(workspaceId, paginationProp) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function downloadMedia (media: MediaFile) { |
|
|
|
function downloadMedia (media: MediaFile) { |
|
|
|
@ -147,29 +274,168 @@ function downloadMedia (media: MediaFile) { |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const rowSelection = { |
|
|
|
|
|
|
|
onChange: (selectedRowKeys:any, selectedRows:any) => { |
|
|
|
|
|
|
|
state.selectedRowIds = selectedRows.map((item:any) => item.id) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const openFileDialog = () => { |
|
|
|
|
|
|
|
state.folderOpen = true |
|
|
|
|
|
|
|
state.fileName = '新建文件夹' |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const goDetail = (param:any, index?:any) => { |
|
|
|
|
|
|
|
if (param.file_type === 0 && state.index === '') { |
|
|
|
|
|
|
|
state.fatherId = param.id |
|
|
|
|
|
|
|
loading.value = true |
|
|
|
|
|
|
|
breadNum.value++ |
|
|
|
|
|
|
|
fatherids.value.push(param.id) |
|
|
|
|
|
|
|
breadList.value[breadNum.value] = param.file_name |
|
|
|
|
|
|
|
mediaData.data = [] |
|
|
|
|
|
|
|
getFiles(workspaceId, paginationProp, param.id) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const jumpToPath = (index:any) => { |
|
|
|
|
|
|
|
if (index !== breadNum.value) { |
|
|
|
|
|
|
|
breadList.value.splice(index + 1) |
|
|
|
|
|
|
|
fatherids.value.splice(index + 1) |
|
|
|
|
|
|
|
breadNum.value = index |
|
|
|
|
|
|
|
state.fatherId = fatherids.value[index] |
|
|
|
|
|
|
|
mediaData.data = [] |
|
|
|
|
|
|
|
getFiles(workspaceId, paginationProp, fatherids.value[index]) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
// 操作文件夹（新增或者修改） |
|
|
|
|
|
|
|
const createFile = (id?:any) => { |
|
|
|
|
|
|
|
state.fileName = id ? state.changeName : state.fileName |
|
|
|
|
|
|
|
if (!state.fileName) { |
|
|
|
|
|
|
|
message.warning('文件夹名称不能为空') |
|
|
|
|
|
|
|
return |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const param = id ? { id: id, file_name: state.fileName, father_id: state.fatherId } : { file_name: state.fileName, father_id: state.fatherId } |
|
|
|
|
|
|
|
operateFile(workspaceId, param).then(res => { |
|
|
|
|
|
|
|
if (res.code === 0) { |
|
|
|
|
|
|
|
state.index = '' |
|
|
|
|
|
|
|
const msg = id ? '修改成功' : '新建成功' |
|
|
|
|
|
|
|
message.success(msg) |
|
|
|
|
|
|
|
state.folderOpen = false |
|
|
|
|
|
|
|
mediaData.data = [] |
|
|
|
|
|
|
|
getFiles(workspaceId, paginationProp, param.father_id) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
// 编辑项目名称 |
|
|
|
|
|
|
|
const editName = (index:any) => { |
|
|
|
|
|
|
|
state.index = index |
|
|
|
|
|
|
|
state.changeName = mediaData.data[index].file_name |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
// 取消编辑 |
|
|
|
|
|
|
|
const cancelEdit = () => { |
|
|
|
|
|
|
|
state.index = '' |
|
|
|
|
|
|
|
state.changeName = '' |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const deleteRow = (index?:any) => { |
|
|
|
|
|
|
|
deleteFile(workspaceId, index ? mediaData.data[index].id : state.selectedRowIds).then(res => { |
|
|
|
|
|
|
|
if (res.code === 0) { |
|
|
|
|
|
|
|
state.selectedRowIds = [] |
|
|
|
|
|
|
|
message.success('删除成功') |
|
|
|
|
|
|
|
mediaData.data = [] |
|
|
|
|
|
|
|
getFiles(workspaceId, paginationProp, state.fatherId) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
// 移动确认 |
|
|
|
|
|
|
|
const moveSubmit = () => { |
|
|
|
|
|
|
|
const param = { ids: state.selectedRowIds.length ? state.selectedRowIds : [state.rowid], father_id: selectedKeys.value } |
|
|
|
|
|
|
|
operateFile(workspaceId, param).then(res => { |
|
|
|
|
|
|
|
if (res.code === 0) { |
|
|
|
|
|
|
|
message.success('移动成功') |
|
|
|
|
|
|
|
state.folderTree = false |
|
|
|
|
|
|
|
mediaData.data = [] |
|
|
|
|
|
|
|
getFiles(workspaceId, paginationProp, state.fatherId) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
// 打开移动弹框 |
|
|
|
|
|
|
|
const move = (id?:any) => { |
|
|
|
|
|
|
|
state.rowid = id |
|
|
|
|
|
|
|
floderTreeData(workspaceId).then(res => { |
|
|
|
|
|
|
|
if (res.code === 0) { |
|
|
|
|
|
|
|
treeList.value = res.data |
|
|
|
|
|
|
|
console.log(treeList.value, res.data, '1212') |
|
|
|
|
|
|
|
state.folderTree = true |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const selectTree = (seid:any, e:any) => { |
|
|
|
|
|
|
|
selectedKeys.value = e.node.dataRef.id |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.media-panel-wrapper { |
|
|
|
.media-panel-wrapper { |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
padding: 16px; |
|
|
|
padding: 16px; |
|
|
|
|
|
|
|
.bread-content{ |
|
|
|
|
|
|
|
background: #fff; |
|
|
|
|
|
|
|
padding: 16px; |
|
|
|
|
|
|
|
.tab-click{ |
|
|
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
color:#333; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
.media-table { |
|
|
|
.media-table { |
|
|
|
background: #fff; |
|
|
|
background: #fff; |
|
|
|
margin-top: 10px; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
.action-area { |
|
|
|
.action-area { |
|
|
|
color: $primary; |
|
|
|
color: $primary; |
|
|
|
cursor: pointer; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.video-img{ |
|
|
|
|
|
|
|
width:25px; |
|
|
|
|
|
|
|
height: 25px; |
|
|
|
|
|
|
|
margin-right: 8px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.space{ |
|
|
|
|
|
|
|
margin-left: 6px; |
|
|
|
|
|
|
|
} |
|
|
|
.header { |
|
|
|
.header { |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
height: 60px; |
|
|
|
padding: 16px 16px 0 16px; |
|
|
|
background: #fff; |
|
|
|
|
|
|
|
padding: 16px; |
|
|
|
|
|
|
|
font-size: 20px; |
|
|
|
|
|
|
|
font-weight: bold; |
|
|
|
|
|
|
|
text-align: start; |
|
|
|
|
|
|
|
color: #000; |
|
|
|
color: #000; |
|
|
|
|
|
|
|
.other-btn{ |
|
|
|
|
|
|
|
display: inline-block; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
&::v-deep{ |
|
|
|
|
|
|
|
.ant-btn{ |
|
|
|
|
|
|
|
margin-right: 8px !important; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.ant-calendar-picker{ |
|
|
|
|
|
|
|
width:100% !important; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.ant-form-item{ |
|
|
|
|
|
|
|
margin-bottom: 8px !important; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.btn-primary{ |
|
|
|
|
|
|
|
margin-bottom: 16px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.model-title{ |
|
|
|
|
|
|
|
text-align: center; |
|
|
|
|
|
|
|
border: none; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
::v-deep{ |
|
|
|
|
|
|
|
.edit-input{ |
|
|
|
|
|
|
|
width: 100px !important; |
|
|
|
|
|
|
|
margin-right: 10px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.ant-modal-header{ |
|
|
|
|
|
|
|
padding: 0 0 !important; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
|
|
|
|
lLong
2 years ago
committed by
GitHub
