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:
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'
|
||||
|
||||
Reference in new issue
Block a user