文件管理添加删除、重命名文件和新建文件夹功能

src/common/GlobalData.ts

@@ -1,5 +1,6 @@
 import { SessionStorage } from "quasar";
 import ApplicationConfigEntity from "src/entities/ApplicationConfigEntity";
+import { HttpProtocol } from "src/entities/HttpProtocol";
 import { SignalSourceEntity } from "src/entities/SignalSourceEntity";
 import ClientConnection from "./ClientConnection";
 import EventBus, { EventNamesDefine } from "./EventBus";
@@ -123,6 +124,19 @@ export default class GlobalData {
     return this.getClient(this._current_client_name);
   }
 
+  public createCurrentRequestUrl() {
+    let client = this.getCurrentClient();
+    if (client) {
+      let url = new URL(client.url);
+      url.port =
+        this.applicationConfig?.httpserver_port ??
+        HttpProtocol.DefaultHttpPort.toString();
+      url.protocol = "http:";
+      return url;
+    }
+    return null;
+  }
+
   public addClient(name: string | null, client: ClientConnection) {
     if (name) {
       this.clients.set(name, client);

src/components/FileManageDialog.vue

@@ -87,9 +87,20 @@
         </q-btn>
         <q-btn
           flat
+          icon="create_new_folder"
+          @click="onCreateNewFolder"
+          :disable="loading"
+          :label="$t('create folder')"
+        >
+          <q-tooltip>
+            {{ $t("create folder") }}
+          </q-tooltip>
+        </q-btn>
+        <q-btn
+          flat
+          v-if="status != 'uploading'"
           icon="upload"
           :label="$t('upload file')"
-          :disable="status == 'uploading'"
           @click="status = 'uploading'"
         >
           <q-tooltip>
@@ -167,6 +178,7 @@
         <div v-show="status == 'uploading'" class="row q-ma-sm">
           <q-space />
           <q-uploader
+            style="height: 69vh; width: 70%"
             :url="getUrl"
             method="post"
             :headers="generatorFileUploadHeaders"
@@ -258,6 +270,7 @@ import { api } from "boot/axios";
 import GlobalData from "src/common/GlobalData";
 import FileEntity from "src/entities/FileEntity";
 import { HttpProtocol } from "src/entities/HttpProtocol";
+import NormalResult from "src/entities/NormalResult";
 
 class _BreadcrumbItem {
   name: string = "";
@@ -431,19 +444,6 @@ export default defineComponent({
       showDialog() {
         refresh_file_list();
         show_dialog.value = true;
-
-        // let client = GlobalData.getInstance().getCurrentClient();
-        // if (client) {
-        //   let url = new URL(client.url);
-        //   url.port =
-        //     GlobalData.getInstance().applicationConfig?.httpserver_port ??
-        //     HttpProtocol.DefaultHttpPort.toString();
-        //   url.pathname = HttpProtocol.RequestUploadFile;
-        //   url.protocol = "http:";
-        //   url.searchParams.append("type", HttpProtocol.UploadTypeDatabase);
-        //   url.searchParams.append("target_path", path.value);
-        //   upload_url.value = url.toString();
-        // }
       },
       generatorFileUploadHeaders(files: File[]) {
         if (files.length > 0) {
@@ -467,8 +467,146 @@ export default defineComponent({
         status.value = "normal";
         upload_url.value = "";
       },
-      deleteFile(file: FileEntity) {},
+      async onCreateNewFolder() {
-      renameFile(file: FileEntity) {},
+        let url = GlobalData.getInstance().createCurrentRequestUrl();
+        if (url) {
+          $q.dialog({
+            title: $t.t("create folder"),
+            message: $t.t("input folder name") + ":",
+            prompt: {
+              model: "",
+              isValid: (val: string) => val && val.trim().length > 0,
+              type: "text",
+            },
+            cancel: true,
+            persistent: true,
+          }).onOk(async (data: string) => {
+            if (url) {
+              url.pathname = HttpProtocol.RequestPathCreateDirectory;
+              let response = (
+                await api.post(url.toString(), {
+                  base_dir: path.value,
+                  dir_name: data,
+                })
+              ).data as NormalResult;
+              if (response && response.success) {
+                refresh_file_list();
+                $q.notify({
+                  type: "positive",
+                  message: $t.t("create folder") + $t.t("success") + "!",
+                  position: "top",
+                  timeout: 1500,
+                });
+              } else {
+                $q.notify({
+                  type: "warning",
+                  message:
+                    $t.t("create folder") +
+                    $t.t("fail") +
+                    "!" +
+                    (response ? response.message : ""),
+                  position: "top",
+                  timeout: 1500,
+                });
+              }
+            }
+          });
+        }
+      },
+      async deleteFile(file: FileEntity) {
+        let url = GlobalData.getInstance().createCurrentRequestUrl();
+        if (url) {
+          url.pathname = HttpProtocol.RequestPathDeleteFile;
+          let response = null;
+          try {
+            response = (
+              await api.delete(url.toString(), {
+                data: {
+                  base_dir: path.value,
+                  file_name: file.name,
+                },
+              })
+            ).data as NormalResult;
+          } catch (e) {
+            console.log(e);
+          }
+          if (response && response.success) {
+            refresh_file_list();
+            $q.notify({
+              type: "positive",
+              message: $t.t("delete file") + $t.t("success") + "!",
+              position: "top",
+              timeout: 1500,
+            });
+          } else {
+            $q.notify({
+              type: "warning",
+              message:
+                $t.t("delete file") +
+                $t.t("fail") +
+                "!" +
+                (response ? response.message : ""),
+              position: "top",
+              timeout: 1500,
+            });
+          }
+        }
+      },
+      renameFile(file: FileEntity) {
+        let url = GlobalData.getInstance().createCurrentRequestUrl();
+        if (url) {
+          $q.dialog({
+            title: $t.t("rename"),
+            message: $t.t("input new file name") + ":",
+            prompt: {
+              model: file.name,
+              isValid: (val: string) => val && val.trim().length > 0,
+              type: "text",
+            },
+            cancel: true,
+            persistent: true,
+          }).onOk(async (data: string) => {
+            if (data == file.name) {
+              return;
+            }
+            if (url) {
+              url.pathname = HttpProtocol.RequestPathRenameFile;
+              url.searchParams.append(
+                "type",
+                HttpProtocol.RequestPathRenameFile
+              );
+
+              let response = (
+                await api.put(url.toString(), {
+                  base_dir: path.value,
+                  file_name: file.name,
+                  new_file_name: data,
+                })
+              ).data as NormalResult;
+              if (response && response.success) {
+                refresh_file_list();
+                $q.notify({
+                  type: "positive",
+                  message: $t.t("file rename") + $t.t("success") + "!",
+                  position: "top",
+                  timeout: 1500,
+                });
+              } else {
+                $q.notify({
+                  type: "warning",
+                  message:
+                    $t.t("file rename") +
+                    $t.t("fail") +
+                    "!" +
+                    (response ? response.message : ""),
+                  position: "top",
+                  timeout: 1500,
+                });
+              }
+            }
+          });
+        }
+      },
       copyStringToClipboard(value: string) {
         copyToClipboard(value);
       },
@@ -495,27 +633,23 @@ export default defineComponent({
         }
       },
       getUrl(file: File[]) {
-        let client = GlobalData.getInstance().getCurrentClient();
+        let url = GlobalData.getInstance().createCurrentRequestUrl();
-        if (client) {
+        if (url) {
-          let url = new URL(client.url);
-          url.port =
-            GlobalData.getInstance().applicationConfig?.httpserver_port ??
-            HttpProtocol.DefaultHttpPort.toString();
           url.pathname = HttpProtocol.RequestUploadFile;
-          url.protocol = "http:";
           url.searchParams.append("type", HttpProtocol.HttpUploadTypeNormal);
           url.searchParams.append("base_dir", path.value);
-          console.log(url.toString());
           return url.toString();
         }
         return "#";
       },
       onUploaded() {
+        refresh_file_list();
+
         $q.notify({
           type: "positive",
           message: $t.t("file upload") + $t.t("success") + "!",
           position: "top",
-          timeout: 1000,
+          timeout: 1500,
         });
       },
       onFailed(info: any) {
@@ -524,7 +658,7 @@ export default defineComponent({
           type: "warning",
           message: $t.t("file upload") + $t.t("fail") + "!",
           position: "top",
-          timeout: 1000,
+          timeout: 1500,
         });
         loading.value = false;
       },

src/entities/HttpProtocol.ts

@@ -4,7 +4,9 @@ export namespace HttpProtocol {
   export const RequestPathUpdateDBBackupFile = "/common/update_db_backup_file";
   export const RequestPathDBBackup = "/db_backup";
   export const RequestPathListFile = "/list_file";
+  export const RequestPathCreateDirectory = "/create_directory";
   export const RequestPathDeleteFile = "/delete_file";
+  export const RequestPathRenameFile = "/rename_file";
 
   export const HttpUploadTypeNormal = "U_T_Normal";
   export const UploadTypeBackgroundImage = "U_T_BACKGROUND_IMAGE";

src/entities/NormalResult.ts

@@ -0,0 +1,4 @@
+export default class NormalResult {
+  success = false;
+  message = "";
+}

src/i18n/zh-CN/index.ts

@@ -108,4 +108,10 @@ export default {
   forward: "前进",
   "cancel upload file": "取消文件上传",
   "select file": "选择文件",
+  "file upload": "文件上传",
+  "file rename": "文件重命名",
+  "file delete": "文件删除",
+  "delete file": "文件删除",
+  "create folder": "新建文件夹",
+  "input folder name": "输入文件夹名称",
 };