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

1Panel-dev · Nov 13, 2023 · f7a7d43 · f7a7d43
1 parent e09cefd
commit f7a7d43
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]));