aidlab/gloabl_award_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bugfix: 文件列表显示

Browse Source
This commit is contained in:
zhangyahui
2026-02-25 17:04:28 +08:00
parent 1bd0e6334c
commit c91981f3d5
1 changed files with 66 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/views/AwardPage/contestants.vue
View File

@@ -157,6 +157,7 @@
v-model:fileList="pdfList"
:disabled="readOnly"
:maxCount="1"
:showUploadList="false"
@change="(info) => handleFileChange(info, 'pdf')"
:customRequest="handleUploadPdf"
:beforeUpload="beforeUploadPdf"
@@ -170,21 +171,20 @@
<p class="limit">
{{ t('AwardApply.pdfFileLimit') }}
</p>
<template #itemRender="{ file, actions }">
<div
v-show="pdfUploadStatus === 'success'"
class="custom-upload-list flex align-center space-between"
>
<div class="flex align-center">
<SvgIcon name="CFile" />
{{ file.name }}
</div>
<div @click="actions.remove" class="delete-file" title="delete file">
<SvgIcon name="CDelete" color="red" />
</div>
</div>
</template>
</a-upload-dragger>
<!-- 自定义文件列表显示 -->
<div
v-if="pdfUploadStatus === 'success' && pdfList.length > 0"
class="custom-upload-list flex align-center space-between"
>
<div class="flex align-center">
<SvgIcon name="CFile" />
{{ pdfList[0]?.name }}
</div>
<div @click="handleRemoveFile('pdf')" class="delete-file" title="delete file">
<SvgIcon name="CDelete" color="red" />
</div>
</div>
</div>
<div
v-show="pdfUploadStatus === 'uploading' || pdfUploadStatus === 'success'"
@@ -210,6 +210,7 @@
v-model:fileList="videoList"
:disabled="readOnly"
:maxCount="1"
:showUploadList="false"
@change="(info) => handleFileChange(info, 'video')"
:customRequest="handleUploadVideo"
:beforeUpload="beforeUploadVideo"
@@ -227,21 +228,20 @@
<p class="limit">
{{ t('AwardApply.videoFileLimit') }}
</p>
<template #itemRender="{ file, actions }">
<div
v-show="videoUploadStatus === 'success'"
class="custom-upload-list flex align-center space-between"
>
<div class="flex align-center">
<SvgIcon name="CFile" />
{{ file.name }}
</div>
<div @click="actions.remove" class="delete-file" title="delete file">
<SvgIcon name="CDelete" color="red" />
</div>
</div>
</template>
</a-upload-dragger>
<!-- 自定义文件列表显示 -->
<div
v-if="videoUploadStatus === 'success' && videoList.length > 0"
class="custom-upload-list flex align-center space-between"
>
<div class="flex align-center">
<SvgIcon name="CFile" />
{{ videoList[0]?.name }}
</div>
<div @click="handleRemoveFile('video')" class="delete-file" title="delete file">
<SvgIcon name="CDelete" color="red" />
</div>
</div>
</div>
<div
v-show="videoUploadStatus === 'success' || videoUploadStatus === 'uploading'"
@@ -320,7 +320,7 @@
</template>
<script setup lang="ts">
import { ref, onUnmounted, onMounted, computed } from 'vue'
import { ref, onUnmounted, onMounted, computed, nextTick } from 'vue'
import { useI18n } from 'vue-i18n'
import { debounce } from 'lodash-es'
import type { Rule } from 'ant-design-vue/es/form'
@@ -890,10 +890,28 @@ const handleFileChange = (info: UploadChangeParam, type: FileType) => {
isUploadingPdf.value = false
uploadProgressPdf.value = 0
pdfUploadStatus.value = 'success'
// 使用 customRequest 时需要手动更新 fileList
pdfList.value = [
{
uid: info.file.uid,
name: info.file.name,
status: 'done',
url: form.value.pdfPath
}
]
} else if (type === 'video') {
isUploadingVideo.value = false
uploadProgressVideo.value = 0
videoUploadStatus.value = 'success'
// 使用 customRequest 时需要手动更新 fileList
videoList.value = [
{
uid: info.file.uid,
name: info.file.name,
status: 'done',
url: form.value.videoPath
}
]
}
} else if (status === 'error') {
message.error(t('AwardApply.fileUploadFailed', { fileName: info.file.name }))
@@ -948,13 +966,31 @@ const handleUploadFile = async (option: any, type: FileType) => {
uploadProgressPdf.value = 100
isUploadingPdf.value = false
form.value.pdfPath = res.fileUrl
form.value.pdfSize = file.size
form.value.pdfSize = file.size
// 手动更新 fileList 以触发 itemRender 渲染
pdfList.value = [
{
uid: file.uid || Date.now(),
name: file.name,
status: 'done',
url: res.fileUrl
}
]
} else {
videoUploadStatus.value = 'success'
uploadProgressVideo.value = 100
isUploadingVideo.value = false
form.value.videoPath = res.fileUrl
form.value.videoSize = file.size
// 手动更新 fileList 以触发 itemRender 渲染
videoList.value = [
{
uid: file.uid || Date.now(),
name: file.name,
status: 'done',
url: res.fileUrl
}
]
}
option.onSuccess?.({ uploadId }, option.file)