|
@@ -2,7 +2,7 @@
|
|
|
<div v-if="displayFiles.length" class="attachment-upload">
|
|
<div v-if="displayFiles.length" class="attachment-upload">
|
|
|
<div class="attachment-list">
|
|
<div class="attachment-list">
|
|
|
<div
|
|
<div
|
|
|
- v-for="file in displayFiles"
|
|
|
|
|
|
|
+ v-for="(file, index) in displayFiles"
|
|
|
:key="String(file.id)"
|
|
:key="String(file.id)"
|
|
|
class="attachment-item"
|
|
class="attachment-item"
|
|
|
>
|
|
>
|
|
@@ -16,7 +16,7 @@
|
|
|
@click="canBxPreview(file) ? handlePreview(file) : undefined"
|
|
@click="canBxPreview(file) ? handlePreview(file) : undefined"
|
|
|
>
|
|
>
|
|
|
<template v-if="isBxImageFile(file) && file.previewUrl">
|
|
<template v-if="isBxImageFile(file) && file.previewUrl">
|
|
|
- <img :src="file.previewUrl" :alt="file.fileName" />
|
|
|
|
|
|
|
+ <img :src="file.previewUrl" :alt="displayNameOf(file, index)" />
|
|
|
</template>
|
|
</template>
|
|
|
<template v-else-if="isBxImageFile(file)">
|
|
<template v-else-if="isBxImageFile(file)">
|
|
|
<div class="attachment-preview__icon attachment-preview__icon--image">
|
|
<div class="attachment-preview__icon attachment-preview__icon--image">
|
|
@@ -41,7 +41,9 @@
|
|
|
</template>
|
|
</template>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="attachment-footer">
|
|
<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">
|
|
<div class="attachment-actions">
|
|
|
<el-icon
|
|
<el-icon
|
|
|
v-if="canBxPreview(file)"
|
|
v-if="canBxPreview(file)"
|
|
@@ -103,10 +105,17 @@ import {
|
|
|
previewBxAttachment,
|
|
previewBxAttachment,
|
|
|
fillBxAttachmentPreviews
|
|
fillBxAttachmentPreviews
|
|
|
} from '@/utils/bx/attachment'
|
|
} 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 displayFiles = ref<BxAttachmentItem[]>([])
|
|
|
const previewVisible = ref(false)
|
|
const previewVisible = ref(false)
|
|
@@ -126,6 +135,14 @@ watch(
|
|
|
{ immediate: true, deep: true }
|
|
{ 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) {
|
|
function handleDownload(file: BxAttachmentItem) {
|
|
|
downloadBxAttachment(file)
|
|
downloadBxAttachment(file)
|
|
|
}
|
|
}
|