|
|
@@ -1,7 +1,16 @@
|
|
|
<template>
|
|
|
<el-row>
|
|
|
<el-row>
|
|
|
- <el-form :inline="true" :model="searchForm" class="demo-form-inline">
|
|
|
+ <el-form :inline="true" :model="searchForm" class="demo-form-inline" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
|
|
|
+ <el-form-item>
|
|
|
+ <el-button size="mini" type="danger" @click="goToUpload">上传</el-button>
|
|
|
+ <el-button size="mini" type="danger" @click="downloadFile">下载</el-button>
|
|
|
+ <el-button size="mini" type="danger" @click="deleteMultiple">删除</el-button>
|
|
|
+ <el-button size="mini" type="danger" @click="createNewFolder">新建文件夹</el-button>
|
|
|
+ <el-button size="mini" type="danger" @click="move(1)">移动</el-button>
|
|
|
+ <el-button size="mini" type="danger" @click="move(2)">复制</el-button>
|
|
|
+ <el-button size="mini" type="danger" @click="share">分享</el-button>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-select v-model="searchForm.fileType" placeholder="文件类型" @change="search">
|
|
|
<el-option label="全部" value="0" />
|
|
|
@@ -18,20 +27,20 @@
|
|
|
<el-button size="mini" type="warning" @click="search">查询</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
- <el-form :inline="true" class="demo-form-inline" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
|
|
|
- <el-button size="mini" type="danger" @click="goToUpload">上传</el-button>
|
|
|
- <el-button size="mini" type="danger" @click="downloadFile">下载</el-button>
|
|
|
- <el-button size="mini" type="danger" @click="deleteMultiple">删除</el-button>
|
|
|
- <el-button size="mini" type="danger" @click="createNewFolder">新建文件夹</el-button>
|
|
|
- <el-button size="mini" type="danger" @click="move">移动</el-button>
|
|
|
- <el-button size="mini" type="danger" @click="move">复制</el-button>
|
|
|
- <el-button size="mini" type="danger" @click="share">分享</el-button>
|
|
|
- </el-form>
|
|
|
- <el-breadcrumb separator-class="el-icon-arrow-right" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
|
|
|
- <el-breadcrumb-item v-for="(item, index) of parentDirs" :key="index">
|
|
|
- <a href="javascript:void(0)" style="text-decoration-line: none" @click="goTo(item.path)">{{ item.filename }}</a>
|
|
|
- </el-breadcrumb-item>
|
|
|
- </el-breadcrumb>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :md="2">
|
|
|
+ <span>当前路径:</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :md="22">
|
|
|
+ <el-breadcrumb separator-class="el-icon-arrow-right" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
|
|
|
+ <el-breadcrumb-item v-for="(item, index) of parentDirs" :key="index">
|
|
|
+ <a href="javascript:void(0)" style="text-decoration-line: none" @click="goTo(item.path)">{{ item.filename }}</a>
|
|
|
+ </el-breadcrumb-item>
|
|
|
+ </el-breadcrumb>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
<el-table
|
|
|
ref="multipleTable"
|
|
|
:data="dataList"
|
|
|
@@ -132,7 +141,7 @@
|
|
|
/>
|
|
|
</el-row>
|
|
|
|
|
|
- <!--登录弹窗-->
|
|
|
+ <!--创建新目录弹窗-->
|
|
|
<el-dialog
|
|
|
title="创建新目录"
|
|
|
append-to-body
|
|
|
@@ -183,12 +192,42 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
+ <!--移动/复制弹窗-->
|
|
|
+ <el-dialog
|
|
|
+ title="移动文件"
|
|
|
+ append-to-body
|
|
|
+ :visible.sync="moveDialog"
|
|
|
+ width="50%"
|
|
|
+ center
|
|
|
+ >
|
|
|
+ <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
|
|
|
+ <el-card class="box-card" :body-style="{ paddingTop: '0px' }">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>选择目录</span>
|
|
|
+ <el-button style="float: right; padding: 3px 0" type="text" @click="onMove">确定</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <el-tree
|
|
|
+ :accordion="true"
|
|
|
+ :data="treeNode"
|
|
|
+ :props="defaultProps"
|
|
|
+ highlight-current
|
|
|
+ @node-click="handleNodeClick"
|
|
|
+ >
|
|
|
+ <span slot-scope="{ node, data }">
|
|
|
+ <span :class="data.icon">{{ node.label }}</span>
|
|
|
+ </span>
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-row>
|
|
|
+ </el-dialog>
|
|
|
</el-row>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import VideoPreviewPlayer from 'components/VideoPreviewPlayer'
|
|
|
-import { getFileList, deleteDiskFile, addDiskFolder, getFileDetail, getFileUrl } from '@/api/disk'
|
|
|
+import { getFileList, deleteDiskFile, addDiskFolder, getFileDetail, getFileUrl, getFolderTree } from '@/api/disk'
|
|
|
|
|
|
export default {
|
|
|
name: 'FileList',
|
|
|
@@ -209,31 +248,26 @@ export default {
|
|
|
},
|
|
|
currentDir: '/',
|
|
|
multipleSelection: [],
|
|
|
- parentDirs: [
|
|
|
- {
|
|
|
- filename: '/',
|
|
|
- path: '/'
|
|
|
- },
|
|
|
- {
|
|
|
- filename: '图片',
|
|
|
- path: '/图片'
|
|
|
- },
|
|
|
- {
|
|
|
- filename: '照片',
|
|
|
- path: '/图片/照片'
|
|
|
- },
|
|
|
- {
|
|
|
- filename: '2023',
|
|
|
- path: '/图片/照片/2023'
|
|
|
- }
|
|
|
- ],
|
|
|
+ parentDirs: [],
|
|
|
createFolderDialog: false,
|
|
|
createFolderForm: {
|
|
|
parent: null,
|
|
|
folderName: null
|
|
|
},
|
|
|
previewFileDialog: false,
|
|
|
- fileDetail: null
|
|
|
+ fileDetail: null,
|
|
|
+ moveDialog: false,
|
|
|
+ treeNode: [],
|
|
|
+ defaultProps: {
|
|
|
+ children: 'children',
|
|
|
+ label: 'label',
|
|
|
+ value: 'value'
|
|
|
+ },
|
|
|
+ moveForm: {
|
|
|
+ type: 1,
|
|
|
+ fileId: null,
|
|
|
+ fileIds: []
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
@@ -259,8 +293,8 @@ export default {
|
|
|
if (resp.code === 0) {
|
|
|
this.dataList = resp.data.fileList.list
|
|
|
this.totalSize = resp.data.fileList.totalSize
|
|
|
-
|
|
|
this.parentDirs = resp.data.pathList
|
|
|
+ this.currentDir = this.parentDirs[this.parentDirs.length - 1].path
|
|
|
} else {
|
|
|
this.$notify({
|
|
|
title: '提示',
|
|
|
@@ -376,7 +410,9 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
goTo(path) {
|
|
|
- console.log('go to ' + path)
|
|
|
+ this.searchForm.page = 1
|
|
|
+ this.searchForm.path = path
|
|
|
+ this.getData(this.searchForm)
|
|
|
},
|
|
|
previewFile(fileType, fileId) {
|
|
|
getFileUrl(fileType, fileId).then(resp => {
|
|
|
@@ -403,8 +439,49 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- move() {
|
|
|
- console.log('移动/复制文件')
|
|
|
+ move(type) {
|
|
|
+ if (this.multipleSelection.length === 0) {
|
|
|
+ this.$notify({
|
|
|
+ message: '至少应选中一行',
|
|
|
+ type: 'warning',
|
|
|
+ duration: 3000
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ this.moveForm.type = type
|
|
|
+ for (const item of this.multipleSelection) {
|
|
|
+ this.moveForm.fileIds.push(item.fileId)
|
|
|
+ }
|
|
|
+
|
|
|
+ getFolderTree().then(resp => {
|
|
|
+ if (resp.code === 0) {
|
|
|
+ this.treeNode = resp.data
|
|
|
+ this.moveDialog = true
|
|
|
+ } else {
|
|
|
+ this.$notify({
|
|
|
+ title: '提示',
|
|
|
+ message: resp.msg,
|
|
|
+ type: 'error',
|
|
|
+ duration: 3000
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ this.$notify({
|
|
|
+ title: '提示',
|
|
|
+ message: error.message,
|
|
|
+ type: 'warning',
|
|
|
+ duration: 3000
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleNodeClick(data) {
|
|
|
+ this.moveForm.fileId = data.fileId
|
|
|
+ },
|
|
|
+ onMove() {
|
|
|
+ console.log(this.moveForm)
|
|
|
+ this.moveDialog = false
|
|
|
+ this.$refs.multipleTable.clearSelection()
|
|
|
},
|
|
|
share() {
|
|
|
console.log('分享文件')
|