feat(web-admin): show remark-based names on bx attachment cards

Add optional remark prop to BxAttachmentUpload and BxAttachmentReadonly so cards display sanitized remark_index names while download keeps the original fileName.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
wuzilongandCursor committed 2026-09-14 11:30:55 +08:00
1 parent a564bfe733
commit e50d2c27c8
2 files changed
+43 -9

No files matched your search

@@ -2,7 +2,7 @@
<div v-if="displayFiles.length" class="attachment-upload">
<div class="attachment-list">
<div
v-for="file in displayFiles"
v-for="(file, index) in displayFiles"
:key="String(file.id)"
class="attachment-item"
>
@@ -16,7 +16,7 @@
@click="canBxPreview(file) ? handlePreview(file) : undefined"
>
<template v-if="isBxImageFile(file) && file.previewUrl">
<img :src="file.previewUrl" :alt="file.fileName" />
<img :src="file.previewUrl" :alt="displayNameOf(file, index)" />
</template>
<template v-else-if="isBxImageFile(file)">
<div class="attachment-preview__icon attachment-preview__icon--image">
@@ -41,7 +41,9 @@
</template>
</div>
<div class="attachment-footer">
<span class="attachment-name" :title="file.fileName">{{ file.fileName }}</span>
<span class="attachment-name" :title="displayNameOf(file, index)">{{
displayNameOf(file, index)
}}</span>
<div class="attachment-actions">
<el-icon
v-if="canBxPreview(file)"
@@ -103,10 +105,17 @@ import {
previewBxAttachment,
fillBxAttachmentPreviews
} from '@/utils/bx/attachment'
import { buildApplyAttachmentDisplayName } from '@/utils/bx/attachment-display-name'
const props = defineProps<{
files: BxAttachmentItem[]
}>()
const props = withDefaults(
defineProps<{
files: BxAttachmentItem[]
remark?: string
}>(),
{
remark: ''
}
)
const displayFiles = ref<BxAttachmentItem[]>([])
const previewVisible = ref(false)
@@ -126,6 +135,14 @@ watch(
{ immediate: true, deep: true }
)
function displayNameOf(file: BxAttachmentItem, index: number) {
return buildApplyAttachmentDisplayName({
remark: props.remark || '',
originalFileName: file.fileName || '',
index1: index + 1
})
}
function handleDownload(file: BxAttachmentItem) {
downloadBxAttachment(file)
}
@@ -41,7 +41,11 @@
@click="canBxPreview(file) ? handlePreview(file) : undefined"
>
<template v-if="isBxImageFile(file) && (file.previewUrl || file._uploading)">
<img v-if="file.previewUrl" :src="file.previewUrl" :alt="file.fileName" />
<img
v-if="file.previewUrl"
:src="file.previewUrl"
:alt="displayNameOf(file, index)"
/>
<el-icon v-else :size="24" color="#94a3b8"><Loading /></el-icon>
</template>
<template v-else-if="isBxImageFile(file) && !file.previewUrl">
@@ -65,7 +69,9 @@
</template>
</div>
<div class="attachment-footer">
<span class="attachment-name" :title="file.fileName">{{ file.fileName }}</span>
<span class="attachment-name" :title="displayNameOf(file, index)">{{
displayNameOf(file, index)
}}</span>
<div class="attachment-actions">
<el-icon
v-if="canBxPreview(file)"
@@ -145,6 +151,7 @@
downloadBxAttachment,
previewBxAttachment
} from '@/utils/bx/attachment'
import { buildApplyAttachmentDisplayName } from '@/utils/bx/attachment-display-name'
const props = withDefaults(
defineProps<{
@@ -154,12 +161,14 @@
hint?: string
showHint?: boolean
disabled?: boolean
remark?: string
}>(),
{
bizId: 0,
hint: '支持图片、视频、PDF、Word、Excel等文件;可拖拽或在此区域粘贴上传',
showHint: true,
disabled: false
disabled: false,
remark: ''
}
)
@@ -197,6 +206,14 @@
emit('update:modelValue', next)
}
function displayNameOf(file: BxAttachmentItem, index: number) {
return buildApplyAttachmentDisplayName({
remark: props.remark || '',
originalFileName: file.fileName || '',
index1: index + 1
})
}
function normalizeIncomingFile(file: File, index = 0) {
if (file.name && file.name.trim()) return file
const ext = (file.type || '').split('/')[1] || 'bin'