add context menu on file management

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

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

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);

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",

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",

vueJs/src/App.vue

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

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) {

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} 已创建!'
   }
 }

vueJs/src/lang/zh.ts

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

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 => {

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'

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', file)
-    this.$emit('onFileUploaded')
   }
 }
 </script>

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()
   }