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