cKey
5 years ago
committed by
GitHub
GitHub
53 changed files with 184 additions and 1083 deletions
@ -0,0 +1,13 @@ |
|||
import { Component, Vue } from 'vue-property-decorator' |
|||
|
|||
@Component |
|||
export default class LocalizationMiXin extends Vue { |
|||
/** |
|||
* 本地化接口 |
|||
* @param name 本地化名称 |
|||
* @param values 参数 |
|||
*/ |
|||
public l(name: string, values?: any[] | { [key: string]: any }) { |
|||
return this.$t(name, values).toString() |
|||
} |
|||
} |
|||
@ -1,27 +0,0 @@ |
|||
import { RouteConfig } from 'vue-router' |
|||
import Layout from '@/layout/index.vue' |
|||
|
|||
const fileManagementRouter: RouteConfig = { |
|||
path: '/file-management', |
|||
component: Layout, |
|||
meta: { |
|||
title: 'filemanagement', |
|||
icon: 'file-manager', |
|||
roles: ['AbpFileManagement.FileSystem'], |
|||
alwaysShow: true |
|||
}, |
|||
children: [ |
|||
{ |
|||
path: 'file-system', |
|||
component: () => import(/* webpackChunkName: "file-system" */ '@/views/file-management/index.vue'), |
|||
name: 'filesystem', |
|||
meta: { |
|||
title: 'filesystem', |
|||
icon: 'file-storage', |
|||
roles: ['AbpFileManagement.FileSystem'] |
|||
} |
|||
} |
|||
] |
|||
} |
|||
|
|||
export default fileManagementRouter |
|||
@ -1,179 +0,0 @@ |
|||
<template> |
|||
<el-dialog |
|||
v-el-draggable-dialog |
|||
width="800px" |
|||
:visible="showDialog" |
|||
:title="$t('fileSystem.downloadTask')" |
|||
@close="onFormClosed" |
|||
> |
|||
<el-table |
|||
:data="files" |
|||
stripe |
|||
style="width: 100%" |
|||
> |
|||
<el-table-column |
|||
prop="name" |
|||
:label="$t('fileSystem.name')" |
|||
width="180" |
|||
/> |
|||
<el-table-column |
|||
prop="size" |
|||
:label="$t('fileSystem.size')" |
|||
width="180" |
|||
/> |
|||
<el-table-column |
|||
:label="$t('fileSystem.progress')" |
|||
width="180" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-progress |
|||
:text-inside="true" |
|||
:stroke-width="26" |
|||
:status="downloadStatus(scope.row)" |
|||
:percentage="downloadProgress(scope.row)" |
|||
/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
:label="$t('global.operaActions')" |
|||
align="center" |
|||
width="250px" |
|||
> |
|||
<template slot-scope="{row}"> |
|||
<el-button |
|||
size="mini" |
|||
type="success" |
|||
icon="el-icon-caret-right" |
|||
:disabled="row.downloading" |
|||
@click="handleDownload(row)" |
|||
/> |
|||
<el-button |
|||
size="mini" |
|||
type="info" |
|||
:disabled="row.pause" |
|||
@click="handlePause(row)" |
|||
> |
|||
<svg-icon name="pause" /> |
|||
</el-button> |
|||
<el-button |
|||
size="mini" |
|||
type="danger" |
|||
icon="el-icon-delete" |
|||
@click="handleRemove(row)" |
|||
/> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { Component, Vue, Prop } from 'vue-property-decorator' |
|||
import FileSystemService from '@/api/filemanagement' |
|||
|
|||
export class FileInfo { |
|||
name!: string |
|||
path!: string |
|||
size!: number |
|||
progress!: number |
|||
pause = true |
|||
blobs = new Array<BlobPart>() |
|||
type!: string |
|||
downloading!: boolean |
|||
} |
|||
|
|||
@Component({ |
|||
name: 'FileDownloadForm' |
|||
}) |
|||
export default class FileDownloadForm extends Vue { |
|||
@Prop({ default: false }) |
|||
private showDialog!: boolean |
|||
|
|||
@Prop({ default: '' }) |
|||
private files!: FileInfo[] |
|||
|
|||
get downloadProgress() { |
|||
return (fileInfo: FileInfo) => { |
|||
return Math.round(fileInfo.progress / fileInfo.size * 10000) / 100 |
|||
} |
|||
} |
|||
|
|||
get downloadStatus() { |
|||
return (fileInfo: FileInfo) => { |
|||
const progress = Math.round(fileInfo.progress / fileInfo.size * 10000) / 100 |
|||
if (progress >= 50 && progress < 100) { |
|||
return 'warning' |
|||
} |
|||
if (progress >= 100) { |
|||
return 'success' |
|||
} |
|||
} |
|||
} |
|||
|
|||
private handlePause(fileInfo: FileInfo) { |
|||
fileInfo.pause = true |
|||
fileInfo.downloading = false |
|||
this.$emit('onFilePaused', fileInfo) |
|||
} |
|||
|
|||
private handleRemove(fileInfo: FileInfo) { |
|||
fileInfo.pause = true |
|||
fileInfo.downloading = false |
|||
fileInfo.blobs.length = 0 |
|||
this.$emit('onFileRemoved', fileInfo) |
|||
} |
|||
|
|||
private handleDownload(fileInfo: FileInfo) { |
|||
if (!fileInfo.downloading) { |
|||
fileInfo.pause = false |
|||
fileInfo.downloading = true |
|||
if (this.downloadProgress(fileInfo) >= 100) { |
|||
this.downloadBlob(fileInfo) |
|||
} else { |
|||
this.downlodFile(fileInfo) |
|||
} |
|||
} |
|||
} |
|||
|
|||
private downlodFile(fileInfo: FileInfo) { |
|||
if (fileInfo.pause) { |
|||
return |
|||
} |
|||
FileSystemService |
|||
.downlodFle(fileInfo.name, fileInfo.path, fileInfo.progress) |
|||
.then((res: any) => { |
|||
fileInfo.type = res.headers['content-type'] |
|||
// 获取当前下载字节大小 |
|||
const downloadByte = res.data.size |
|||
// 当前下载分块入栈 |
|||
fileInfo.blobs.push(res.data) |
|||
fileInfo.progress += downloadByte |
|||
if (fileInfo.size > fileInfo.progress) { |
|||
this.downlodFile(fileInfo) |
|||
} else { |
|||
// 合并下载文件 |
|||
this.downloadBlob(fileInfo) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
private downloadBlob(fileInfo: FileInfo) { |
|||
const url = window.URL.createObjectURL(new Blob(fileInfo.blobs, { type: fileInfo.type })) |
|||
const link = document.createElement('a') |
|||
link.style.display = 'none' |
|||
link.href = url |
|||
link.setAttribute('download', fileInfo.name) |
|||
document.body.appendChild(link) |
|||
link.click() |
|||
URL.revokeObjectURL(url) |
|||
|
|||
fileInfo.pause = true |
|||
fileInfo.downloading = false |
|||
this.$emit('onFileDownloaded', fileInfo) |
|||
} |
|||
|
|||
private onFormClosed() { |
|||
this.$emit('closed') |
|||
} |
|||
} |
|||
</script> |
|||
@ -1,107 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<uploader |
|||
ref="uploader" |
|||
:options="options" |
|||
:auto-start="false" |
|||
class="uploader-pane" |
|||
@file-added="onFileAdded" |
|||
@file-error="onFileError" |
|||
@file-complete="onFileUploadCompleted" |
|||
> |
|||
<uploader-unsupport /> |
|||
<uploader-drop> |
|||
<uploader-btn :attrs="attrs"> |
|||
{{ $t('fileSystem.addFile') }} |
|||
</uploader-btn> |
|||
</uploader-drop> |
|||
<uploader-list /> |
|||
</uploader> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { Component, Vue, Prop, Watch } from 'vue-property-decorator' |
|||
import { FileUploadUrl } from '@/api/filemanagement' |
|||
import { UserModule } from '@/store/modules/user' |
|||
|
|||
export class UploadOptions { |
|||
target!: string |
|||
chunkSize!: number |
|||
testChunks!: boolean |
|||
fileParameterName!: string |
|||
maxChunkRetries!: number |
|||
headers?: any |
|||
query?: any |
|||
permanentErrors?: number[] |
|||
successStatuses?: number[] |
|||
|
|||
constructor() { |
|||
this.query = {} |
|||
this.headers = {} |
|||
this.testChunks = false |
|||
this.successStatuses = new Array<number>() |
|||
this.permanentErrors = new Array<number>() |
|||
} |
|||
} |
|||
|
|||
@Component({ |
|||
name: 'FileUploadForm' |
|||
}) |
|||
export default class extends Vue { |
|||
@Prop({ default: () => new UploadOptions() }) |
|||
private options!: UploadOptions |
|||
|
|||
@Prop({ default: '' }) |
|||
private path!: string |
|||
|
|||
private attrs!: {[key: string]: any} |
|||
private files?: any = {} |
|||
|
|||
constructor() { |
|||
super() |
|||
this.attrs = { |
|||
accept: ['image/*', 'document/*', 'video/*', 'audio/*'] |
|||
} |
|||
this.options.target = FileUploadUrl |
|||
this.options.successStatuses = [200, 201, 202, 204, 205] |
|||
this.options.permanentErrors = [400, 401, 403, 404, 415, 500, 501] |
|||
this.options.headers.Authorization = UserModule.token |
|||
} |
|||
|
|||
public close() { |
|||
this.files = {} |
|||
const uploadControl = this.$refs.uploader as any |
|||
uploadControl.files = [] |
|||
uploadControl.fileList = [] |
|||
uploadControl.uploader.cancel() |
|||
} |
|||
|
|||
@Watch('path', { immediate: true }) |
|||
private onPathChanged() { |
|||
this.options.query.path = this.path |
|||
} |
|||
|
|||
private onFileAdded(file: any) { |
|||
this.files[file.name] = file.chunkSize |
|||
file.uploader.fileStatusText.error = this.$t('fileSystem.uploadError') |
|||
file.uploader.fileStatusText.paused = this.$t('fileSystem.paused') |
|||
file.uploader.fileStatusText.success = this.$t('fileSystem.uploadSuccess') |
|||
file.uploader.fileStatusText.waiting = this.$t('fileSystem.waitingUpload') |
|||
file.uploader.fileStatusText.uploading = this.$t('fileSystem.uploading') |
|||
} |
|||
|
|||
private onFileError(rootFile: any, file: any, message: any) { |
|||
const abpResponse = JSON.parse(message) |
|||
this.$message.error(abpResponse.error.message) |
|||
} |
|||
|
|||
private onFileUploadCompleted(file: any) { |
|||
this.$emit('onFileUploaded', file) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
</style> |
|||
@ -1,516 +0,0 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div class="filter-container"> |
|||
<el-breadcrumb |
|||
ref="fileSystemBreadCrumb" |
|||
separator-class="el-icon-arrow-right" |
|||
> |
|||
<el-breadcrumb-item |
|||
v-for="(fileRoot, index) in fileSystemRoot" |
|||
:key="index" |
|||
class="file-system-breadcrumb" |
|||
@click.native="(event) => onBreadCrumbClick(event, index)" |
|||
> |
|||
{{ fileRoot }} |
|||
</el-breadcrumb-item> |
|||
</el-breadcrumb> |
|||
</div> |
|||
|
|||
<el-table |
|||
ref="fileSystemTable" |
|||
v-loading="dataLoading" |
|||
row-key="name" |
|||
:data="dataList" |
|||
border |
|||
fit |
|||
highlight-current-row |
|||
style="width: 100%;" |
|||
@row-click="onRowClick" |
|||
@row-dblclick="onRowDoubleClick" |
|||
@contextmenu.native="onContextMenu" |
|||
@sort-change="handleSortChange" |
|||
> |
|||
<el-table-column |
|||
type="selection" |
|||
width="50" |
|||
align="center" |
|||
/> |
|||
<el-table-column |
|||
:label="$t('fileSystem.name')" |
|||
prop="name" |
|||
sortable |
|||
width="350" |
|||
align="left" |
|||
> |
|||
<template slot-scope="{row}"> |
|||
<svg-icon |
|||
:name="row.type | fileSystemTypeIconFilter" |
|||
:class="row.type | fileSystemTypeIconClassFilter" |
|||
/> |
|||
<span>{{ row.name }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
:label="$t('fileSystem.creationTime')" |
|||
prop="creationTime" |
|||
sortable |
|||
width="200" |
|||
align="center" |
|||
> |
|||
<template slot-scope="{row}"> |
|||
<span>{{ row.creationTime | dateTimeFilter }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
:label="$t('fileSystem.lastModificationTime')" |
|||
prop="lastModificationTime" |
|||
sortable |
|||
width="200" |
|||
align="center" |
|||
> |
|||
<template slot-scope="{row}"> |
|||
<span>{{ row.lastModificationTime | dateTimeFilter }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
:label="$t('fileSystem.type')" |
|||
prop="type" |
|||
sortable |
|||
width="150" |
|||
align="center" |
|||
> |
|||
<template slot-scope="{row}"> |
|||
<span>{{ row.type === 0 ? $t('fileSystem.folder') : $t('fileSystem.fileType', {exten: row.extension}) }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
:label="$t('fileSystem.size')" |
|||
prop="size" |
|||
sortable |
|||
width="200" |
|||
align="center" |
|||
> |
|||
<template slot-scope="{row}"> |
|||
<span>{{ row.size | fileSystemSizeFilter }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
:label="$t('global.operaActions')" |
|||
align="center" |
|||
width="250" |
|||
min-width="250" |
|||
> |
|||
<template slot-scope="{row}"> |
|||
<el-button |
|||
:disabled="row.type === 0 ? !checkPermission(['AbpFileManagement.FileSystem.Delete']) : !checkPermission(['AbpFileManagement.FileSystem.FileManager.Delete'])" |
|||
size="mini" |
|||
type="danger" |
|||
@click="handleDeleteFolderOrFile(row)" |
|||
> |
|||
{{ row.type === 0 ? $t('fileSystem.deleteFolder') : $t('fileSystem.deleteFile') }} |
|||
</el-button> |
|||
<el-dropdown |
|||
class="options" |
|||
@command="handleFileSystemCommand" |
|||
> |
|||
<el-button |
|||
v-permission="['AbpFileManagement.FileSystem']" |
|||
size="mini" |
|||
type="info" |
|||
> |
|||
{{ $t('global.otherOpera') }}<i class="el-icon-arrow-down el-icon--right" /> |
|||
</el-button> |
|||
<el-dropdown-menu slot="dropdown"> |
|||
<el-dropdown-item |
|||
v-permission="['AbpFileManagement.FileSystem.FileManager.Create']" |
|||
:command="{key: 'upload', row}" |
|||
> |
|||
{{ $t('fileSystem.upload') }} |
|||
</el-dropdown-item> |
|||
<el-dropdown-item |
|||
v-permission="['AbpFileManagement.FileSystem.FileManager.Download']" |
|||
divided |
|||
:command="{key: 'download', row}" |
|||
:disabled="downloading || row.type === 0" |
|||
> |
|||
{{ $t('fileSystem.download') }} |
|||
</el-dropdown-item> |
|||
</el-dropdown-menu> |
|||
</el-dropdown> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<Pagination |
|||
v-show="dataTotal>0" |
|||
:total="dataTotal" |
|||
:page.sync="currentPage" |
|||
:limit.sync="pageSize" |
|||
@pagination="refreshPagedData" |
|||
/> |
|||
|
|||
<el-dialog |
|||
:visible.sync="showFileUploadDialog" |
|||
:title="$t('fileSystem.upload')" |
|||
:show-close="false" |
|||
@closed="onFileUploadFormClosed" |
|||
> |
|||
<file-upload-form |
|||
ref="fileUploadForm" |
|||
:path="lastFilePath" |
|||
@onFileUploaded="onFileUploaded" |
|||
/> |
|||
</el-dialog> |
|||
|
|||
<file-download-form |
|||
:show-dialog="showDownloadDialog" |
|||
:files="downloadFiles" |
|||
@closed="showDownloadDialog=false" |
|||
@onFileRemoved="onFileRemoved" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { dateFormat } from '@/utils' |
|||
import { checkPermission } from '@/utils/permission' |
|||
import { Vue } from 'vue-property-decorator' |
|||
import DataListMiXin from '@/mixins/DataListMiXin' |
|||
import Component, { mixins } from 'vue-class-component' |
|||
import FileUploadForm from './components/FileUploadForm.vue' |
|||
import FileDownloadForm, { FileInfo } from './components/FileDownloadForm.vue' |
|||
import Pagination from '@/components/Pagination/index.vue' |
|||
import FileSystemService, { FileSystemGetByPaged, FileSystemType } from '@/api/filemanagement' |
|||
|
|||
const kbUnit = 1 * 1024 |
|||
const mbUnit = kbUnit * 1024 |
|||
const gbUnit = mbUnit * 1024 |
|||
const $contextmenu = Vue.prototype.$contextmenu |
|||
|
|||
@Component({ |
|||
name: 'FileManagement', |
|||
components: { |
|||
Pagination, |
|||
FileUploadForm, |
|||
FileDownloadForm |
|||
}, |
|||
filters: { |
|||
dateTimeFilter(datetime: string) { |
|||
const date = new Date(datetime) |
|||
return dateFormat(date, 'YYYY-mm-dd HH:MM') |
|||
}, |
|||
fileSystemTypeIconFilter(type: FileSystemType) { |
|||
if (type === FileSystemType.Folder) { |
|||
return 'folder' |
|||
} |
|||
return 'file' |
|||
}, |
|||
fileSystemTypeIconClassFilter(type: FileSystemType) { |
|||
if (type === FileSystemType.Folder) { |
|||
return 'folder-icon' |
|||
} |
|||
return 'file-icon' |
|||
}, |
|||
fileSystemTypeFilter(type: FileSystemType) { |
|||
if (type === FileSystemType.Folder) { |
|||
return 'fileSystem.folder' |
|||
} |
|||
return 'fileSystem.fileType' |
|||
}, |
|||
fileSystemSizeFilter(size: number) { |
|||
if (size > gbUnit) { |
|||
let gb = Math.round(size / gbUnit) |
|||
if (gb < 1) { |
|||
gb = 1 |
|||
} |
|||
return gb + ' GB' |
|||
} |
|||
if (size > mbUnit) { |
|||
let mb = Math.round(size / mbUnit) |
|||
if (mb < 1) { |
|||
mb = 1 |
|||
} |
|||
return mb + ' MB' |
|||
} |
|||
let kb = Math.round(size / kbUnit) |
|||
if (kb < 1) { |
|||
kb = 1 |
|||
} |
|||
return kb + ' KB' |
|||
} |
|||
}, |
|||
methods: { |
|||
checkPermission, |
|||
tableRowClassName(row: any) { |
|||
if (row.row.type === 0) { |
|||
return 'folder-row' |
|||
} |
|||
return 'file-row' |
|||
} |
|||
} |
|||
}) |
|||
export default class extends mixins(DataListMiXin) { |
|||
private showFileUploadDialog = false |
|||
private downloading = false |
|||
private lastFilePath = '' |
|||
private fileSystemRoot = new Array<string>() |
|||
|
|||
private showDownloadDialog = false |
|||
private downloadFiles = new Array<FileInfo>() |
|||
|
|||
public dataFilter = new FileSystemGetByPaged() |
|||
|
|||
mounted() { |
|||
this.fileSystemRoot.push(this.$t('fileSystem.root').toString()) |
|||
this.refreshPagedData() |
|||
} |
|||
|
|||
protected getPagedList(filter: any) { |
|||
return FileSystemService.getFileSystemList(filter) |
|||
} |
|||
|
|||
private navigationToFilePath() { |
|||
const fileSystemPathArray = this.fileSystemRoot.slice(1) |
|||
const fileSystemPath = fileSystemPathArray.join('/') |
|||
this.dataFilter.parent = fileSystemPath |
|||
this.refreshPagedData() |
|||
} |
|||
|
|||
private handleGoToLastFolder() { |
|||
if (this.fileSystemRoot.length > 1) { |
|||
this.fileSystemRoot.splice(this.fileSystemRoot.length - 1) |
|||
this.navigationToFilePath() |
|||
} |
|||
} |
|||
|
|||
private handleDeleteFolderOrFile(row: any) { |
|||
this.$confirm(this.l('global.whetherDeleteData', { name: row.name }), |
|||
this.l('global.questingDeleteByMessage', |
|||
{ message: row.type === 0 ? this.l('fileSystem.folder') : this.l('fileSystem.file') }), { |
|||
callback: (action) => { |
|||
if (action === 'confirm') { |
|||
if (row.type === 0) { |
|||
let path = row.name |
|||
if (row.parent) { |
|||
path = row.parent + '/' + row.name |
|||
} |
|||
FileSystemService.deleteFolder(path).then(() => { |
|||
this.$notify.success(this.l('global.dataHasBeenDeleted', { name: row.name })) |
|||
this.refreshPagedData() |
|||
}) |
|||
} else { |
|||
FileSystemService.deleteFile(row.parent, row.name).then(() => { |
|||
this.$notify.success(this.l('global.dataHasBeenDeleted', { name: row.name })) |
|||
this.refreshPagedData() |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
|
|||
private handleFileSystemCommand(command: { key: string, row: any}) { |
|||
switch (command.key) { |
|||
case 'download': |
|||
this.handleDownloadFile(command.row.parent, command.row.name, command.row.size) |
|||
break |
|||
case 'upload': |
|||
if (command.row.type === 0) { |
|||
let path = command.row.name |
|||
if (command.row.parent) { |
|||
path = command.row.parent + '/' + path |
|||
} |
|||
this.handleUploadFile(path) |
|||
} else { |
|||
this.handleUploadFile(command.row.parent) |
|||
} |
|||
break |
|||
} |
|||
} |
|||
|
|||
private handleUploadFile(path: string) { |
|||
this.lastFilePath = path |
|||
this.showFileUploadDialog = true |
|||
} |
|||
|
|||
private handleDownloadFile(path: string, fileName: string, size: number) { |
|||
if (!this.downloadFiles.some(x => x.name === fileName && x.path === path)) { |
|||
const file = new FileInfo() |
|||
file.name = fileName |
|||
file.path = path |
|||
file.size = size |
|||
file.progress = 0 |
|||
this.downloadFiles.push(file) |
|||
} |
|||
this.showDownloadDialog = true |
|||
} |
|||
|
|||
private onFileRemoved(fileInfo: FileInfo) { |
|||
const index = this.downloadFiles.findIndex(x => x.path === fileInfo.path && x.name === fileInfo.name) |
|||
this.downloadFiles.splice(index, 1) |
|||
} |
|||
|
|||
private onRowClick(row: any) { |
|||
if (row.type === FileSystemType.Folder) { |
|||
let path = row.name |
|||
if (row.parent) { |
|||
path = row.parent + '/' + row.name |
|||
} |
|||
this.lastFilePath = path |
|||
} |
|||
const table = this.$refs.fileSystemTable as any |
|||
table.toggleRowSelection(row) |
|||
} |
|||
|
|||
private onRowDoubleClick(row: any) { |
|||
if (row.type === FileSystemType.Folder) { |
|||
this.fileSystemRoot.push(row.name) |
|||
this.navigationToFilePath() |
|||
} |
|||
} |
|||
|
|||
private onBreadCrumbClick(event: any, index: number) { |
|||
// 如果点击的索引为最后一个,不做响应 |
|||
if ((index + 1) < this.fileSystemRoot.length) { |
|||
this.fileSystemRoot.splice(index + 1) |
|||
this.navigationToFilePath() |
|||
} else { |
|||
this.refreshPagedData() |
|||
} |
|||
} |
|||
|
|||
private onFileUploaded() { |
|||
this.refreshPagedData() |
|||
} |
|||
|
|||
private onFileUploadFormClosed() { |
|||
this.showFileUploadDialog = false |
|||
const frmUpload = this.$refs.fileUploadForm as any |
|||
frmUpload.close() |
|||
} |
|||
|
|||
private onContextMenu(event: any) { |
|||
event.preventDefault() |
|||
$contextmenu({ |
|||
items: [ |
|||
{ |
|||
label: this.$t('fileSystem.addFolder'), |
|||
disabled: !checkPermission(['AbpFileManagement.FileSystem.Create']), |
|||
onClick: () => { |
|||
let parent = '' |
|||
// 在根目录下 |
|||
if (this.fileSystemRoot.length > 1) { |
|||
parent = this.fileSystemRoot.slice(1).join('/') |
|||
} |
|||
this.$prompt(this.$t('global.pleaseInputBy', { key: this.$t('fileSystem.name') }).toString(), |
|||
this.$t('fileSystem.addFolder').toString(), { |
|||
showInput: true, |
|||
inputValidator: (val) => { |
|||
return !(!val || val.length === 0) |
|||
}, |
|||
inputErrorMessage: this.$t('fileSystem.folderNameIsRequired').toString(), |
|||
inputPlaceholder: this.$t('global.pleaseInputBy', { key: this.$t('fileSystem.name') }).toString() |
|||
}).then((val: any) => { |
|||
FileSystemService.createFolder(val.value, parent).then(() => { |
|||
this.$message.success(this.$t('fileSystem.folderCreateSuccess', { name: val.value }).toString()) |
|||
this.refreshPagedData() |
|||
}) |
|||
}).catch(_ => _) |
|||
}, |
|||
divided: true |
|||
}, |
|||
{ |
|||
label: this.$t('fileSystem.upload'), |
|||
disabled: !checkPermission(['AbpFileManagement.FileSystem.FileManager.Create']), |
|||
onClick: () => { |
|||
let path = '' |
|||
if (this.fileSystemRoot.length > 1) { |
|||
path = this.fileSystemRoot.slice(1).join('/') |
|||
} |
|||
this.lastFilePath = path |
|||
this.showFileUploadDialog = true |
|||
}, |
|||
divided: true |
|||
}, |
|||
{ |
|||
label: this.$t('fileSystem.bacthDownload'), |
|||
disabled: !checkPermission(['AbpFileManagement.FileSystem.FileManager.Download']), |
|||
onClick: () => { |
|||
const table = this.$refs.fileSystemTable as any |
|||
// 过滤未添加到下载列表的文件 |
|||
const selectFiles = table.selection.filter((x: any) => x.type === 1 && !this.downloadFiles.some(f => f.name === x.name && f.path === x.path)) |
|||
// 格式化文件列表别添加到下载列表 |
|||
this.downloadFiles.push(...selectFiles.map((f: any) => { |
|||
const file = new FileInfo() |
|||
file.name = f.name |
|||
file.path = f.parent |
|||
file.size = f.size |
|||
file.progress = 0 |
|||
return file |
|||
})) |
|||
// 显示下载列表 |
|||
this.showDownloadDialog = true |
|||
} |
|||
}, |
|||
{ |
|||
label: this.$t('fileSystem.bacthDelete'), |
|||
disabled: true, // !checkPermission(['AbpFileManagement.FileSystem.FileManager.Delete']), |
|||
onClick: () => { |
|||
// 未公布批量删除接口 |
|||
// const table = this.$refs.fileSystemTable as any |
|||
// 过滤类型为文件的选中项 |
|||
// const selectFiles = table.selection.filter((x: any) => x.type === 1) |
|||
} |
|||
} |
|||
], |
|||
event, |
|||
customClass: 'context-menu', |
|||
zIndex: 3, |
|||
minWidth: 150 |
|||
}) |
|||
return false |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.options { |
|||
vertical-align: top; |
|||
margin-left: 20px; |
|||
} |
|||
.el-dropdown + .el-dropdown { |
|||
margin-left: 15px; |
|||
} |
|||
.el-icon-arrow-down { |
|||
font-size: 12px; |
|||
} |
|||
</style> |
|||
|
|||
<style lang="scss"> |
|||
.el-table .folder-row { |
|||
cursor: pointer; |
|||
background-color:rgb(245, 235, 226); |
|||
} |
|||
.el-table .file-row { |
|||
cursor: pointer; |
|||
background-color: rgb(210, 219, 235); |
|||
} |
|||
.file-system-breadcrumb .el-breadcrumb__inner { |
|||
color: rgb(34, 34, 173); |
|||
cursor: pointer; |
|||
} |
|||
.file-icon { |
|||
margin-left: 0px; |
|||
margin-right: 5px; |
|||
margin-top: 0px; |
|||
margin-bottom: 0px; |
|||
color: rgb(55, 189, 189); |
|||
} |
|||
.folder-icon { |
|||
margin-left: 0px; |
|||
margin-right: 5px; |
|||
margin-top: 0px; |
|||
margin-bottom: 0px; |
|||
color: rgb(235, 130, 33); |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue