fix: 解决文件上传多选可能导致的文件列表丢失的问题 (#2925)

1Panel-dev · Nov 13, 2023 · 78576a3 · 78576a3
1 parent e09cefd
commit 78576a3
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 21 deletions.
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
@@ -4,12 +4,14 @@ import RouterButton from './router-button/index.vue';
 import ComplexTable from './complex-table/index.vue';
 import ErrPrompt from './error-prompt/index.vue';
 import OpDialog from './del-dialog/index.vue';
+import Tooltip from '@/components/tooltip/index.vue';
 export default {
     install(app: App) {
         app.component(LayoutContent.name, LayoutContent);
         app.component(RouterButton.name, RouterButton);
         app.component(ComplexTable.name, ComplexTable);
         app.component(ErrPrompt.name, ErrPrompt);
         app.component(OpDialog.name, OpDialog);
+        app.component(Tooltip.name, Tooltip);
     },
 };
diff --git a/frontend/src/components/tooltip/index.vue b/frontend/src/components/tooltip/index.vue
@@ -15,6 +15,8 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 
+defineOptions({ name: 'Tooltip' });
+
 const showTooltip = ref();
 const tooltipBox = ref();
 const tooltipItem = ref();

diff --git a/frontend/src/views/host/file-management/delete/index.vue b/frontend/src/views/host/file-management/delete/index.vue
@@ -1,25 +1,36 @@
 <template>
     <el-dialog v-model="open" :title="$t('app.delete')" width="30%" :close-on-click-modal="false">
-        <el-row>
-            <el-col :span="20" :offset="2">
-                <el-alert class="mt-2" :show-icon="true" type="warning" :closable="false">
-                    <div style="line-height: 20px; word-wrap: break-word">
-                        <span>{{ $t('file.deleteHelper') }}</span>
+        <div>
+            <el-row>
+                <el-col :span="20" :offset="2">
+                    <el-alert class="mt-2" :show-icon="true" type="warning" :closable="false">
+                        <div class="delete-warn">
+                            <span>{{ $t('file.deleteHelper') }}</span>
+                        </div>
+                    </el-alert>
+                    <div class="mt-4">
+                        <el-checkbox v-model="forceDelete">{{ $t('file.forceDeleteHelper') }}</el-checkbox>
                     </div>
-                </el-alert>
-                <div class="mt-4">
-                    <el-checkbox v-model="forceDelete">{{ $t('file.forceDeleteHelper') }}</el-checkbox>
-                </div>
-
-                <div class="flx-align-center mb-1" v-for="(row, index) in files" :key="index">
-                    <div>
-                        <svg-icon v-if="row.isDir" className="table-icon mr-1 " iconName="p-file-folder"></svg-icon>
-                        <svg-icon v-else className="table-icon mr-1" :iconName="getIconName(row.extension)"></svg-icon>
+                    <div class="file-list">
+                        <div class="flx-align-center mb-1" v-for="(row, index) in files" :key="index">
+                            <div>
+                                <svg-icon
+                                    v-if="row.isDir"
+                                    className="table-icon mr-1 "
+                                    iconName="p-file-folder"
+                                ></svg-icon>
+                                <svg-icon
+                                    v-else
+                                    className="table-icon mr-1"
+                                    :iconName="getIconName(row.extension)"
+                                ></svg-icon>
+                            </div>
+                            <span class="sle">{{ row.name }}</span>
+                        </div>
                     </div>
-                    <span class="sle">{{ row.name }}</span>
-                </div>
-            </el-col>
-        </el-row>
+                </el-col>
+            </el-row>
+        </div>
 
         <template #footer>
             <span class="dialog-footer">
@@ -85,4 +96,14 @@ defineExpose({
     max-height: 400px;
     overflow: auto;
 }
+
+.file-list {
+    height: 400px;
+    overflow-y: auto;
+}
+
+.delete-warn {
+    line-height: 20px;
+    word-wrap: break-word;
+}
 </style>
diff --git a/frontend/src/views/host/file-management/upload/index.vue b/frontend/src/views/host/file-management/upload/index.vue
@@ -127,11 +127,10 @@ const removeFile = (index: number) => {
 };
 
 const fileOnChange = (_uploadFile: UploadFile, uploadFiles: UploadFiles) => {
+    uploaderFiles.value = uploadFiles;
     const reader = new FileReader();
     reader.readAsDataURL(_uploadFile.raw);
-    reader.onload = async () => {
-        uploaderFiles.value = uploadFiles;
-    };
+    reader.onload = async () => {};
     reader.onerror = () => {
         uploaderFiles.value = uploaderFiles.value.filter((file) => file.uid !== _uploadFile.uid);
         MsgError(i18n.global.t('file.typeErrOrEmpty', [_uploadFile.name]));