cKey
5 years ago
12 changed files with 436 additions and 32 deletions
@ -0,0 +1,103 @@ |
|||||
|
import ApiService from './serviceBase' |
||||
|
import { PagedAndSortedResultRequestDto, PagedResultDto } from './types' |
||||
|
|
||||
|
const serviceUrl = process.env.VUE_APP_BASE_API |
||||
|
const baseUrl = '/api/file-management/file-system' |
||||
|
export const FileManagementUrl = serviceUrl + baseUrl |
||||
|
|
||||
|
export default class FileManagementService { |
||||
|
public static getFileSystem(name: string, path: string | undefined) { |
||||
|
let _url = baseUrl + '?name=' + name |
||||
|
if (path) { |
||||
|
_url += '&path=' + path |
||||
|
} |
||||
|
return ApiService.Get<FileSystem>(_url, serviceUrl) |
||||
|
} |
||||
|
|
||||
|
public static getFileSystemList(payload: FileSystemGetByPaged) { |
||||
|
let _url = baseUrl + '?skipCount=' + payload.skipCount |
||||
|
_url += '&maxResultCount=' + payload.maxResultCount |
||||
|
_url += '&sorting=' + payload.sorting |
||||
|
if (payload.filter) { |
||||
|
_url += '&filter=' + payload.filter |
||||
|
} |
||||
|
if (payload.parent) { |
||||
|
_url += '&parent=' + payload.parent |
||||
|
} |
||||
|
return ApiService.Get<PagedResultDto<FileSystem>>(_url, serviceUrl) |
||||
|
} |
||||
|
|
||||
|
public static editFileSystem(name: string, newName: string) { |
||||
|
const _payload = { newName } |
||||
|
return ApiService.Put<FileSystem>(baseUrl, _payload, serviceUrl) |
||||
|
} |
||||
|
|
||||
|
public static createFolder(path: string, parent: string | undefined) { |
||||
|
const _url = baseUrl + '/folders' |
||||
|
const _payload = { |
||||
|
path, |
||||
|
parent |
||||
|
} |
||||
|
return ApiService.Post<void>(_url, _payload, serviceUrl) |
||||
|
} |
||||
|
|
||||
|
public static deleteFolder(path: string) { |
||||
|
const _url = baseUrl + '/folders?path=' + path |
||||
|
return ApiService.Delete(_url, serviceUrl) |
||||
|
} |
||||
|
|
||||
|
public static moveFolder(path: string, toPath: string) { |
||||
|
const _url = baseUrl + '/folders/move?path=' + path |
||||
|
const _payload = { toPath } |
||||
|
return ApiService.Put<void>(_url, _payload, serviceUrl) |
||||
|
} |
||||
|
|
||||
|
public static copyFolder(path: string, toPath: string) { |
||||
|
const _url = baseUrl + '/folders/copy?path=' + path |
||||
|
const _payload = { toPath } |
||||
|
return ApiService.Put<void>(_url, _payload, serviceUrl) |
||||
|
} |
||||
|
|
||||
|
public static deleteFile(path: string, name: string) { |
||||
|
let _url = baseUrl + '/files?path=' + path |
||||
|
_url += '&name=' + name |
||||
|
return ApiService.Delete(_url, serviceUrl) |
||||
|
} |
||||
|
|
||||
|
public static moveFile(payload: FileCopyOrMove) { |
||||
|
const _url = baseUrl + '/files/move' |
||||
|
return ApiService.Put<void>(_url, payload, serviceUrl) |
||||
|
} |
||||
|
|
||||
|
public static copyFile(payload: FileCopyOrMove) { |
||||
|
const _url = baseUrl + '/files/copy' |
||||
|
return ApiService.Put<void>(_url, payload, serviceUrl) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export enum FileSystemType { |
||||
|
Folder = 0, |
||||
|
File = 1 |
||||
|
} |
||||
|
|
||||
|
export class FileSystem { |
||||
|
type!: FileSystemType |
||||
|
name!: string |
||||
|
parent?: string |
||||
|
size?: number |
||||
|
extension?: string |
||||
|
creationTime!: Date |
||||
|
lastModificationTime?: Date |
||||
|
} |
||||
|
|
||||
|
export class FileSystemGetByPaged extends PagedAndSortedResultRequestDto { |
||||
|
parent?: string |
||||
|
filter?: string |
||||
|
} |
||||
|
|
||||
|
export class FileCopyOrMove { |
||||
|
path!: string |
||||
|
name!: string |
||||
|
toPath!: string |
||||
|
toName?: string |
||||
|
} |
||||
@ -0,0 +1,27 @@ |
|||||
|
import { RouteConfig } from 'vue-router' |
||||
|
import Layout from '@/layout/index.vue' |
||||
|
|
||||
|
const fileManagementRouter: RouteConfig = { |
||||
|
path: '/file-management', |
||||
|
component: Layout, |
||||
|
meta: { |
||||
|
title: 'filemanagement', |
||||
|
icon: 'manager', |
||||
|
roles: ['Abp.FileManagement.FileSystem'], |
||||
|
alwaysShow: true |
||||
|
}, |
||||
|
children: [ |
||||
|
{ |
||||
|
path: 'file-system', |
||||
|
component: () => import('@/views/file-management/index.vue'), |
||||
|
name: 'filesystem', |
||||
|
meta: { |
||||
|
title: 'filesystem', |
||||
|
icon: 'file-system', |
||||
|
roles: ['Abp.FileManagement.FileSystem'] |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
|
||||
|
export default fileManagementRouter |
||||
@ -0,0 +1,220 @@ |
|||||
|
<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="handleBreadCrumbClick" |
||||
|
> |
||||
|
{{ fileRoot }} |
||||
|
</el-breadcrumb-item> |
||||
|
</el-breadcrumb> |
||||
|
</div> |
||||
|
|
||||
|
<el-table |
||||
|
ref="fileSystemTable" |
||||
|
v-loading="fileSystemListLoading" |
||||
|
row-key="name" |
||||
|
:data="fileSystemList" |
||||
|
border |
||||
|
fit |
||||
|
highlight-current-row |
||||
|
style="width: 100%;" |
||||
|
@row-click="handleRowClick" |
||||
|
@row-dblclick="handleRowDoubleClick" |
||||
|
> |
||||
|
<el-table-column |
||||
|
type="selection" |
||||
|
width="50px" |
||||
|
align="center" |
||||
|
/> |
||||
|
<el-table-column |
||||
|
:label="$t('fileSystem.name')" |
||||
|
prop="name" |
||||
|
sortable |
||||
|
width="150px" |
||||
|
align="center" |
||||
|
> |
||||
|
<template slot-scope="{row}"> |
||||
|
<span>{{ row.name }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
:label="$t('fileSystem.creationTime')" |
||||
|
prop="creationTime" |
||||
|
sortable |
||||
|
width="150px" |
||||
|
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="150px" |
||||
|
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="150px" |
||||
|
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="150px" |
||||
|
align="center" |
||||
|
> |
||||
|
<template slot-scope="{row}"> |
||||
|
<span>{{ row.size | fileSystemSizeFilter }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<Pagination |
||||
|
v-show="fileSystemCount>0" |
||||
|
:total="fileSystemCount" |
||||
|
:page.sync="fileSystemGetFilter.skipCount" |
||||
|
:limit.sync="fileSystemGetFilter.maxResultCount" |
||||
|
@pagination="handleGetFileSystemList" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { dateFormat } from '@/utils' |
||||
|
import { Component, Vue } from 'vue-property-decorator' |
||||
|
import Pagination from '@/components/Pagination/index.vue' |
||||
|
import FileSystemService, { FileSystem, FileSystemGetByPaged, FileSystemType } from '@/api/filemanagement' |
||||
|
|
||||
|
const kbUnit = 1 * 1024 |
||||
|
const mbUnit = kbUnit * 1024 |
||||
|
const gbUnit = mbUnit * 1024 |
||||
|
|
||||
|
@Component({ |
||||
|
name: 'FileManagement', |
||||
|
components: { |
||||
|
Pagination |
||||
|
}, |
||||
|
filters: { |
||||
|
dateTimeFilter(datetime: string) { |
||||
|
const date = new Date(datetime) |
||||
|
return dateFormat(date, 'YYYY-mm-dd HH:MM') |
||||
|
}, |
||||
|
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' |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
export default class extends Vue { |
||||
|
private lastFilePath!: string |
||||
|
private fileSystemRoot!: string[] |
||||
|
private fileSystemList?: FileSystem[] |
||||
|
private fileSystemCount!: number |
||||
|
private fileSystemListLoading!: boolean |
||||
|
private fileSystemGetFilter!: FileSystemGetByPaged |
||||
|
|
||||
|
constructor() { |
||||
|
super() |
||||
|
this.lastFilePath = '' |
||||
|
this.fileSystemCount = 0 |
||||
|
this.fileSystemListLoading = false |
||||
|
this.fileSystemRoot = new Array<string>() |
||||
|
this.fileSystemList = new Array<FileSystem>() |
||||
|
this.fileSystemGetFilter = new FileSystemGetByPaged() |
||||
|
} |
||||
|
|
||||
|
mounted() { |
||||
|
console.log(this.$route.params) |
||||
|
this.fileSystemRoot.push(this.$t('fileSystem.root').toString()) |
||||
|
this.handleGetFileSystemList() |
||||
|
} |
||||
|
|
||||
|
private handleGetFileSystemList() { |
||||
|
this.fileSystemListLoading = true |
||||
|
FileSystemService.getFileSystemList(this.fileSystemGetFilter).then(res => { |
||||
|
this.fileSystemCount = res.totalCount |
||||
|
this.fileSystemList = res.items |
||||
|
}).finally(() => { |
||||
|
this.fileSystemListLoading = false |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
private handleRowClick(row: any) { |
||||
|
console.log(row) |
||||
|
const table = this.$refs.fileSystemTable as any |
||||
|
table.setCurrentRow(row) |
||||
|
} |
||||
|
|
||||
|
private handleRowDoubleClick(row: any) { |
||||
|
if (row.type === FileSystemType.Folder) { |
||||
|
this.fileSystemRoot.push(row.name) |
||||
|
this.navigationToFilePath() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private handleBreadCrumbClick(event: any) { |
||||
|
const nodeIndex = this.fileSystemRoot.findIndex(f => f === event.target.textContent) |
||||
|
this.fileSystemRoot.splice(nodeIndex) |
||||
|
this.navigationToFilePath() |
||||
|
} |
||||
|
|
||||
|
private navigationToFilePath() { |
||||
|
const fileSystemPathArray = this.fileSystemRoot.slice(1) |
||||
|
const fileSystemPath = fileSystemPathArray.join('\\') |
||||
|
console.log(fileSystemPath) |
||||
|
this.fileSystemGetFilter.parent = fileSystemPath |
||||
|
this.handleGetFileSystemList() |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.file-system-breadcrumb .el-breadcrumb__inner { |
||||
|
color: rgb(34, 34, 173); |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue