Browse Source

add context menu on file management

pull/55/head
cKey 5 years ago
parent
commit
25fa04c648
  1. 6
      aspnet-core/modules/file-management/LINGYUN.Abp.FileManagement.Application/LINGYUN/Abp/FileManagement/FileManagementApplicationServiceBase.cs
  2. 4
      aspnet-core/modules/file-management/LINGYUN.Abp.FileManagement.Application/LINGYUN/Abp/FileManagement/FileSystemAppService.cs
  3. 5
      vueJs/package-lock.json
  4. 1
      vueJs/package.json
  5. 2
      vueJs/src/App.vue
  6. 17
      vueJs/src/api/filemanagement.ts
  7. 32
      vueJs/src/lang/en.ts
  8. 4
      vueJs/src/lang/zh.ts
  9. 2
      vueJs/src/main.ts
  10. 5
      vueJs/src/shims.d.ts
  11. 7
      vueJs/src/views/file-management/components/FileUploadForm.vue
  12. 66
      vueJs/src/views/file-management/index.vue

6
aspnet-core/modules/file-management/LINGYUN.Abp.FileManagement.Application/LINGYUN/Abp/FileManagement/FileManagementApplicationServiceBase.cs

@ -1,6 +1,4 @@
using System;
using System.Collections.Generic;
using System.Text;
using LINGYUN.Abp.FileManagement.Localization;
using Volo.Abp.Application.Services;
namespace LINGYUN.Abp.FileManagement
@ -9,7 +7,7 @@ namespace LINGYUN.Abp.FileManagement
{
protected FileManagementApplicationServiceBase()
{
LocalizationResource = typeof(AbpFileManagementResource);
}
}
}

4
aspnet-core/modules/file-management/LINGYUN.Abp.FileManagement.Application/LINGYUN/Abp/FileManagement/FileSystemAppService.cs

@ -379,6 +379,8 @@ namespace LINGYUN.Abp.FileManagement
blobPath = Path.Combine(blobPath, containerName);
}
path = path.Replace(blobPath, "");
path = path.Replace('/', Path.DirectorySeparatorChar);
path = path.Replace('\\', Path.DirectorySeparatorChar);
return path;
}
/// <summary>
@ -393,6 +395,8 @@ namespace LINGYUN.Abp.FileManagement
if (!path.IsNullOrWhiteSpace() && fileSystemConfiguration.AppendContainerNameToBasePath)
{
path = path.Replace('/', Path.DirectorySeparatorChar);
path = path.Replace('\\', Path.DirectorySeparatorChar);
// 去除第一个路径标识符
path = path.RemovePreFix("/", "\\");
blobPath = Path.Combine(blobPath, path);

5
vueJs/package-lock.json

@ -21273,6 +21273,11 @@
"integrity": "sha1-YIeoYTLqgSWqieX44Kl4+8jPb1k=",
"dev": true
},
"vue-contextmenujs": {
"version": "1.3.10",
"resolved": "https://registry.npm.taobao.org/vue-contextmenujs/download/vue-contextmenujs-1.3.10.tgz",
"integrity": "sha1-fdl2wlwyHvRFQT/uWMo6x1uQnoQ="
},
"vue-count-to": {
"version": "1.0.13",
"resolved": "https://registry.npm.taobao.org/vue-count-to/download/vue-count-to-1.0.13.tgz",

1
vueJs/package.json

@ -46,6 +46,7 @@
"view-design": "^4.2.0",
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-contextmenujs": "^1.3.10",
"vue-count-to": "^1.0.13",
"vue-i18n": "^8.16.0",
"vue-image-crop-upload": "^2.5.0",

2
vueJs/src/App.vue

@ -17,7 +17,7 @@ import ServiceWorkerUpdatePopup from '@/pwa/components/ServiceWorkerUpdatePopup.
}
})
export default class extends Vue {
mounted() {
created() {
this.initializeAbpConfiguration()
}

17
vueJs/src/api/filemanagement.ts

@ -75,23 +75,6 @@ export default class FileManagementService {
return ApiService.Put<void>(_url, payload, serviceUrl)
}
public static mergeFile(name: string, path: string | undefined) {
const _url = baseUrl + '/files'
const _data = {
path: path,
fileName: name,
mergeFile: true
}
return ApiService.HttpRequest<void>({
url: _url,
data: qs.stringify(_data),
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
}
public static downlodFle(name: string, path: string | undefined, currentByte: number | undefined) {
let _url = baseUrl + '/files?name=' + name
if (path) {

32
vueJs/src/lang/en.ts

@ -78,7 +78,9 @@ export default {
clients: 'clients',
apiresources: 'api resources',
identityresources: 'id resources',
organizationUnit: 'organization unit'
organizationUnit: 'organization unit',
filemanagement: 'file management',
filesystem: 'file system'
},
navbar: {
logOut: 'Log Out',
@ -612,10 +614,36 @@ export default {
confirm: '确 定',
correctEmailAddress: '正确的邮件地址',
correctPhoneNumber: '正确的手机号码',
operatingFast: '您的操作过快,请稍后再试!'
operatingFast: '您的操作过快,请稍后再试!',
request404: '您所请求的资源不存在!'
},
messages: {
noNotifications: '没有通知',
noMessages: '没有消息'
},
fileSystem: {
setting: '文件系统',
name: '名称',
creationTime: '创建时间',
lastModificationTime: '修改时间',
type: '类型',
folder: '文件夹',
file: '文件',
fileType: '{exten}文件',
size: '大小',
root: '文件系统',
download: '下载文件',
upload: '上传文件',
deleteFolder: '删除目录',
deleteFile: '删除文件',
addFile: '添加文件',
addFolder: '添加目录',
uploadError: '上传失败',
uploading: '正在上传',
waitingUpload: '等待上传',
paused: '已暂停',
uploadSuccess: '上传成功',
folderNameIsRequired: '目录名称不能为空',
folderCreateSuccess: '目录 {name} 已创建!'
}
}

4
vueJs/src/lang/zh.ts

@ -642,6 +642,8 @@ export default {
uploading: '正在上传',
waitingUpload: '等待上传',
paused: '已暂停',
uploadSuccess: '上传成功'
uploadSuccess: '上传成功',
folderNameIsRequired: '目录名称不能为空',
folderCreateSuccess: '目录 {name} 已创建!'
}
}

2
vueJs/src/main.ts

@ -6,6 +6,7 @@ import ViewUI from 'view-design'
import SvgIcon from 'vue-svgicon'
import uploader from 'vue-simple-uploader'
import contextMenu from 'vue-contextmenujs'
import '@/styles/element-variables.scss'
import 'view-design/dist/styles/iview.css'
@ -40,6 +41,7 @@ Vue.use(SvgIcon, {
})
Vue.use(uploader)
Vue.use(contextMenu)
// Register global directives
Object.keys(directives).forEach(key => {

5
vueJs/src/shims.d.ts

@ -27,4 +27,7 @@ declare module 'vue-image-crop-upload'
declare module 'vue-splitpane'
// TODO vue-simple-uploader
declare module 'vue-simple-uploader'
declare module 'vue-simple-uploader'
// TODO vue-contextmenujs
declare module 'vue-contextmenujs'

7
vueJs/src/views/file-management/components/FileUploadForm.vue

@ -22,7 +22,8 @@
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import FileManagementAppService, { FileUploadUrl } from '@/api/filemanagement'
import { FileUploadUrl } from '@/api/filemanagement'
import { UserModule } from '@/store/modules/user'
export class UploadOptions {
target!: string
@ -65,6 +66,7 @@ export default class extends Vue {
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() {
@ -95,8 +97,7 @@ export default class extends Vue {
}
private onFileUploadCompleted(file: any) {
console.log(file)
this.$emit('onFileUploaded')
this.$emit('onFileUploaded', file)
}
}
</script>

66
vueJs/src/views/file-management/index.vue

@ -37,6 +37,7 @@
:row-class-name="tableRowClassName"
@row-click="onRowClick"
@row-dblclick="onRowDoubleClick"
@contextmenu.native="onContextMenu"
>
<el-table-column
type="selection"
@ -184,6 +185,7 @@ import FileSystemService, { FileSystem, FileSystemGetByPaged, FileSystemType } f
const kbUnit = 1 * 1024
const mbUnit = kbUnit * 1024
const gbUnit = mbUnit * 1024
const $contextmenu = Vue.prototype.$contextmenu
@Component({
name: 'FileManagement',
@ -330,7 +332,11 @@ export default class extends Vue {
break
case 'upload':
if (command.row.type === 0) {
this.handleUploadFile(command.row.name)
let path = command.row.name
if (command.row.parent) {
path = command.row.parent + '/' + path
}
this.handleUploadFile(path)
} else {
this.handleUploadFile(command.row.parent)
}
@ -381,6 +387,13 @@ export default class extends Vue {
}
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)
}
@ -412,6 +425,57 @@ export default class extends Vue {
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.handleGetFileSystemList()
})
}).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
}
}
],
event,
customClass: 'context-menu',
zIndex: 3,
minWidth: 150
})
return false
}
private l(name: string, values?: any[] | { [key: string]: any }) {
return this.$t(name, values).toString()
}

Loading…
Cancel
Save