From 8e55e8e6ef0fc508e90bb4455742b81c2fee5bd0 Mon Sep 17 00:00:00 2001
From: zhengkunwang223 <zhengkun@fit2cloud.com>
Date: Tue, 13 Sep 2022 11:10:02 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=B8=8A=E4=BC=A0=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E8=BF=9B=E5=BA=A6=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/index.ts                     |  4 +-
 frontend/src/api/modules/files.ts             |  5 ++-
 frontend/src/lang/modules/en.ts               |  1 +
 frontend/src/lang/modules/zh.ts               |  1 +
 .../host/file-management/upload/index.vue     | 44 ++++++++++++++-----
 5 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
index 538a4438a..a61064b73 100644
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -11,7 +11,6 @@ const globalStore = GlobalStore();
 const config = {
     baseURL: import.meta.env.VITE_API_URL as string,
     timeout: ResultEnum.TIMEOUT as number,
-    // 跨域时候允许携带凭证
     withCredentials: true,
 };
 
@@ -81,6 +80,9 @@ class RequestHttp {
     download<BlobPart>(url: string, params?: object, _object = {}): Promise<BlobPart> {
         return this.service.post(url, params, _object);
     }
+    upload<T>(url: string, params: object = {}, config: AxiosRequestConfig): Promise<T> {
+        return this.service.post(url, params, config);
+    }
 }
 
 export default new RequestHttp(config);
diff --git a/frontend/src/api/modules/files.ts b/frontend/src/api/modules/files.ts
index bc78ef289..699c33104 100644
--- a/frontend/src/api/modules/files.ts
+++ b/frontend/src/api/modules/files.ts
@@ -1,5 +1,6 @@
 import { File } from '@/api/interface/file';
 import http from '@/api';
+import { AxiosRequestConfig } from 'axios';
 
 export const GetFilesList = (params: File.ReqFile) => {
     return http.post<File.File>('files/search', params);
@@ -37,8 +38,8 @@ export const SaveFileContent = (params: File.FileEdit) => {
     return http.post<File.File>('files/save', params);
 };
 
-export const UploadFileData = (params: FormData) => {
-    return http.post<File.File>('files/upload', params);
+export const UploadFileData = (params: FormData, config: AxiosRequestConfig) => {
+    return http.upload<File.File>('files/upload', params, config);
 };
 
 export const RenameRile = (params: File.FileRename) => {
diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index dcdcfb2a0..14ac17395 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -244,5 +244,6 @@ export default {
         copy: 'Cpoy',
         calculate: 'Calculate',
         canNotDeCompress: 'Can not DeCompress this File',
+        uploadSuccess: 'Upload Success!',
     },
 };
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index 06d364feb..170e6b2b5 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -244,5 +244,6 @@ export default {
         copy: '复制',
         calculate: '计算',
         canNotDeCompress: '无法解压此文件',
+        uploadSuccess: '上传成功!',
     },
 };
diff --git a/frontend/src/views/host/file-management/upload/index.vue b/frontend/src/views/host/file-management/upload/index.vue
index f975fa38f..f9bea047f 100644
--- a/frontend/src/views/host/file-management/upload/index.vue
+++ b/frontend/src/views/host/file-management/upload/index.vue
@@ -1,14 +1,24 @@
 <template>
-    <el-dialog v-model="open" :title="$t('file.upload')" @open="onOpen" :before-close="handleClose">
-        <el-upload action="#" :auto-upload="false" ref="uploadRef" :multiple="true" :on-change="fileOnChange">
+    <el-dialog v-model="open" :title="$t('file.upload')" :before-close="handleClose" width="30%" :file-list="files">
+        <el-upload
+            action="#"
+            :auto-upload="false"
+            ref="uploadRef"
+            :multiple="true"
+            :on-change="fileOnChange"
+            v-loading="loading"
+        >
             <template #trigger>
                 <el-button type="primary">{{ $t('file.selectFile') }}</el-button>
             </template>
         </el-upload>
+        <el-progress v-if="loading" :text-inside="true" :stroke-width="26" :percentage="uploadPrecent"></el-progress>
         <template #footer>
             <span class="dialog-footer">
-                <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" @click="submit()">{{ $t('commons.button.confirm') }}</el-button>
+                <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button type="primary" @click="submit()" :disabled="loading">
+                    {{ $t('commons.button.confirm') }}
+                </el-button>
             </span>
         </template>
     </el-dialog>
@@ -18,6 +28,7 @@
 import { ref } from 'vue';
 import { ElMessage, UploadFile, UploadFiles, UploadInstance } from 'element-plus';
 import { UploadFileData } from '@/api/modules/files';
+import i18n from '@/lang';
 
 const props = defineProps({
     open: {
@@ -31,9 +42,13 @@ const props = defineProps({
 });
 
 const uploadRef = ref<UploadInstance>();
+const files = ref();
+const loading = ref(false);
+let uploadPrecent = ref(0);
 
 const em = defineEmits(['close']);
 const handleClose = () => {
+    uploadRef.value!.clearFiles();
     em('close', false);
 };
 
@@ -43,6 +58,11 @@ const fileOnChange = (_uploadFile: UploadFile, uploadFiles: UploadFiles) => {
     uploaderFiles.value = uploadFiles;
 };
 
+const onProcess = (e: any) => {
+    const { loaded, total } = e;
+    uploadPrecent.value = ((loaded / total) * 100) | 0;
+};
+
 const submit = () => {
     const formData = new FormData();
     for (const file of uploaderFiles.value) {
@@ -51,12 +71,14 @@ const submit = () => {
         }
     }
     formData.append('path', props.path);
-
-    UploadFileData(formData).then(() => {
-        ElMessage('upload success');
-        handleClose();
-    });
+    loading.value = true;
+    UploadFileData(formData, { onUploadProgress: onProcess })
+        .then(() => {
+            ElMessage.success(i18n.global.t('file.uploadSuccess'));
+            handleClose();
+        })
+        .finally(() => {
+            loading.value = false;
+        });
 };
-
-const onOpen = () => {};
 </script>