1Panel-dev/1Panel
1
1
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-11-11 20:20:48 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
zhengkunwang 2023-11-13 15:00:08 +08:00 • committed by GitHub
parent e09cefd0f7
commit 78576a3724
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 45 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/components/index.ts
View file

@ -4,6 +4,7 @@ import RouterButton from './router-button/index.vue';
import ComplexTable from './complex-table/index.vue'; import ComplexTable from './complex-table/index.vue';
import ErrPrompt from './error-prompt/index.vue'; import ErrPrompt from './error-prompt/index.vue';
import OpDialog from './del-dialog/index.vue'; import OpDialog from './del-dialog/index.vue';
import Tooltip from '@/components/tooltip/index.vue';
export default { export default {
install(app: App) { install(app: App) {
app.component(LayoutContent.name, LayoutContent); app.component(LayoutContent.name, LayoutContent);
@ -11,5 +12,6 @@ export default {
app.component(ComplexTable.name, ComplexTable); app.component(ComplexTable.name, ComplexTable);
app.component(ErrPrompt.name, ErrPrompt); app.component(ErrPrompt.name, ErrPrompt);
app.component(OpDialog.name, OpDialog); app.component(OpDialog.name, OpDialog);
app.component(Tooltip.name, Tooltip);
}, },
}; };

2
frontend/src/components/tooltip/index.vue
View file

@ -15,6 +15,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
defineOptions({ name: 'Tooltip' });
const showTooltip = ref(); const showTooltip = ref();
const tooltipBox = ref(); const tooltipBox = ref();
const tooltipItem = ref(); const tooltipItem = ref();

57
frontend/src/views/host/file-management/delete/index.vue
View file

@ -1,25 +1,36 @@
<template> <template>
<el-dialog v-model="open" :title="$t('app.delete')" width="30%" :close-on-click-modal="false"> <el-dialog v-model="open" :title="$t('app.delete')" width="30%" :close-on-click-modal="false">
<el-row> <div>
<el-col :span="20" :offset="2"> <el-row>
<el-alert class="mt-2" :show-icon="true" type="warning" :closable="false"> <el-col :span="20" :offset="2">
<div style="line-height: 20px; word-wrap: break-word"> <el-alert class="mt-2" :show-icon="true" type="warning" :closable="false">
<span>{{ $t('file.deleteHelper') }}</span> <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> </div>
</el-alert> <div class="file-list">
<div class="mt-4"> <div class="flx-align-center mb-1" v-for="(row, index) in files" :key="index">
<el-checkbox v-model="forceDelete">{{ $t('file.forceDeleteHelper') }}</el-checkbox> <div>
</div> <svg-icon
v-if="row.isDir"
<div class="flx-align-center mb-1" v-for="(row, index) in files" :key="index"> className="table-icon mr-1 "
<div> iconName="p-file-folder"
<svg-icon v-if="row.isDir" className="table-icon mr-1 " iconName="p-file-folder"></svg-icon> ></svg-icon>
<svg-icon v-else className="table-icon mr-1" :iconName="getIconName(row.extension)"></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> </div>
<span class="sle">{{ row.name }}</span> </el-col>
</div> </el-row>
</el-col> </div>
</el-row>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
@ -85,4 +96,14 @@ defineExpose({
max-height: 400px; max-height: 400px;
overflow: auto; overflow: auto;
} }
.file-list {
height: 400px;
overflow-y: auto;
}
.delete-warn {
line-height: 20px;
word-wrap: break-word;
}
</style> </style>

5
frontend/src/views/host/file-management/upload/index.vue
View file

@ -127,11 +127,10 @@ const removeFile = (index: number) => {
}; };
const fileOnChange = (_uploadFile: UploadFile, uploadFiles: UploadFiles) => { const fileOnChange = (_uploadFile: UploadFile, uploadFiles: UploadFiles) => {
uploaderFiles.value = uploadFiles;
const reader = new FileReader(); const reader = new FileReader();
reader.readAsDataURL(_uploadFile.raw); reader.readAsDataURL(_uploadFile.raw);
reader.onload = async () => { reader.onload = async () => {};
uploaderFiles.value = uploadFiles;
};
reader.onerror = () => { reader.onerror = () => {
uploaderFiles.value = uploaderFiles.value.filter((file) => file.uid !== _uploadFile.uid); uploaderFiles.value = uploaderFiles.value.filter((file) => file.uid !== _uploadFile.uid);
MsgError(i18n.global.t('file.typeErrOrEmpty', [_uploadFile.name])); MsgError(i18n.global.t('file.typeErrOrEmpty', [_uploadFile.name]));