292 lines
8.2 KiB
Vue
292 lines
8.2 KiB
Vue
<template>
|
|
<div>
|
|
<div class="file-preview-container" v-if="fileList && fileList.length > 0">
|
|
<div class="file-item" v-for="item in fileList" :key="item.id">
|
|
<img
|
|
v-if="isImageFile(item)"
|
|
:src="item.thumbnail"
|
|
@click.stop="onPreviewFile(item)"
|
|
class="file-image"
|
|
/>
|
|
|
|
<img
|
|
v-else
|
|
:src="$commonUtil.getFileItemShowIcon(item.suffix)"
|
|
@click.stop="onPreviewFile(item)"
|
|
class="file-image"
|
|
/>
|
|
|
|
<div class="file-download" @click="$downLoad(item.downloadPath)">
|
|
<i class="el-icon-download"></i>
|
|
{{ item.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="empty-container">
|
|
<div class="empty-text">暂无</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
name: "H5Index",
|
|
props: {
|
|
files: {
|
|
type: [String, Array],
|
|
default: undefined,
|
|
required: false
|
|
},
|
|
complete_result: {
|
|
type: Boolean,
|
|
default: false,
|
|
required: false
|
|
}
|
|
},
|
|
watch: {
|
|
files: {
|
|
handler(val) {
|
|
if (val) {
|
|
this.buildEchoFileObject(val)
|
|
} else {
|
|
this.fileList = []
|
|
}
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
fileList: [],
|
|
imagePreviewInstance: null,
|
|
imagePreviewContainer: null,
|
|
imagePreviewHistoryUnsubscribe: null,
|
|
closingImagePreviewFromHistory: false,
|
|
imagePreviewLayerName: "h5-file-image-preview"
|
|
}
|
|
},
|
|
methods: {
|
|
buildEchoFileObject(val) {
|
|
let ids = []
|
|
if (this.complete_result) {
|
|
if (Array.isArray(val)) {
|
|
ids = val.map((item) => this.resolveFileId(item)).filter((id) => id)
|
|
} else {
|
|
try {
|
|
ids = JSON.parse(val).map((item) => this.resolveFileId(item)).filter((id) => id)
|
|
} catch (err) {
|
|
this.fileList = []
|
|
}
|
|
}
|
|
} else {
|
|
//那就是链接 没有直接存id的吧。。
|
|
if (Array.isArray(val)) {
|
|
ids = val.map((item) => {
|
|
return item.substring(item.lastIndexOf("=") + 1)
|
|
})
|
|
} else {
|
|
ids = val.split(",").map((item) => {
|
|
return item.substring(item.lastIndexOf("=") + 1)
|
|
})
|
|
}
|
|
}
|
|
this.requestFullFile(ids)
|
|
},
|
|
|
|
// 新版上传组件保存 response.data，迁移的历史附件保留原文件主键 id。
|
|
resolveFileId(item) {
|
|
if (!item) {
|
|
return ""
|
|
}
|
|
const fileValue = item.response && item.response.data ? item.response.data : item.id
|
|
if (typeof fileValue !== "string" || !fileValue) {
|
|
return ""
|
|
}
|
|
return fileValue.includes("=") ? fileValue.substring(fileValue.lastIndexOf("=") + 1) : fileValue
|
|
},
|
|
|
|
requestFullFile(ids) {
|
|
this.$axios.post("/platform/sys/file/previewFileData", {ids: JSON.stringify(ids)}).then((res) => {
|
|
if (res.code === 0) {
|
|
this.$set(this, "fileList", res.data || [])
|
|
}
|
|
})
|
|
},
|
|
|
|
// 判断附件是否为图片；item 传完整文件对象，返回 boolean 类型。
|
|
isImageFile(item) {
|
|
const suffix = item && item.suffix ? String(item.suffix).toLowerCase() : ""
|
|
return ["jpg", "jpeg", "png", "gif", "bmp", "webp"].includes(suffix)
|
|
},
|
|
|
|
/**
|
|
* 预览附件。
|
|
* item 传 previewFileData 返回的文件对象，需包含 id、suffix、downloadPath；方法无返回值。
|
|
* 图片会与当前附件列表中的其他图片组成轮播，非图片继续使用公共文件预览逻辑。
|
|
*/
|
|
onPreviewFile(item) {
|
|
if (!this.isImageFile(item)) {
|
|
this.$commonUtil.previewFile(item)
|
|
return
|
|
}
|
|
if (this.imagePreviewInstance) return
|
|
const imageFiles = this.fileList.filter((file) => this.isImageFile(file) && file.downloadPath)
|
|
const startPosition = imageFiles.findIndex((file) => file.id === item.id)
|
|
if (startPosition < 0) return
|
|
const previewContainer = document.createElement("div")
|
|
previewContainer.style.display = "none"
|
|
imageFiles.forEach((file) => {
|
|
const image = document.createElement("img")
|
|
image.src = file.downloadPath
|
|
image.alt = file.name || ""
|
|
previewContainer.appendChild(image)
|
|
})
|
|
document.body.appendChild(previewContainer)
|
|
this.$set(this, "closingImagePreviewFromHistory", false)
|
|
this.$set(this, "imagePreviewContainer", previewContainer)
|
|
this.$set(this, "imagePreviewInstance", new Viewer(previewContainer, {
|
|
zIndex: 99999,
|
|
title: false,
|
|
initialViewIndex: startPosition,
|
|
hidden: () => { this.handleImagePreviewHidden() }
|
|
}))
|
|
this.imagePreviewInstance.show()
|
|
window.h5HistoryLayerManager.open(this.imagePreviewLayerName)
|
|
},
|
|
|
|
// Viewer 完全关闭后销毁实例和临时图片容器，并按关闭来源同步浏览器历史。
|
|
handleImagePreviewHidden() {
|
|
const closedFromHistory = this.closingImagePreviewFromHistory
|
|
this.cleanupImagePreview()
|
|
if (closedFromHistory) {
|
|
this.$set(this, "closingImagePreviewFromHistory", false)
|
|
return
|
|
}
|
|
if (window.h5HistoryLayerManager.stack.includes(this.imagePreviewLayerName)) {
|
|
window.h5HistoryLayerManager.close(this.imagePreviewLayerName)
|
|
}
|
|
},
|
|
|
|
// 清理 Viewer 实例及其临时 DOM；方法无参数、无返回值。
|
|
cleanupImagePreview() {
|
|
const previewInstance = this.imagePreviewInstance
|
|
const previewContainer = this.imagePreviewContainer
|
|
this.$set(this, "imagePreviewInstance", null)
|
|
this.$set(this, "imagePreviewContainer", null)
|
|
if (previewInstance) previewInstance.destroy()
|
|
if (previewContainer && previewContainer.parentNode) {
|
|
previewContainer.parentNode.removeChild(previewContainer)
|
|
}
|
|
},
|
|
|
|
// 浏览器返回导致图片预览层出栈时，仅关闭预览实例，不再重复回退历史记录。
|
|
syncImagePreviewHistory(stack) {
|
|
if (!this.imagePreviewInstance || stack.includes(this.imagePreviewLayerName)) return
|
|
this.$set(this, "closingImagePreviewFromHistory", true)
|
|
this.imagePreviewInstance.hide()
|
|
}
|
|
},
|
|
created() {
|
|
this.$set(this, "imagePreviewHistoryUnsubscribe", window.h5HistoryLayerManager.subscribe((stack) => {
|
|
this.syncImagePreviewHistory(stack)
|
|
}))
|
|
},
|
|
beforeDestroy() {
|
|
if (this.imagePreviewHistoryUnsubscribe) this.imagePreviewHistoryUnsubscribe()
|
|
if (this.imagePreviewInstance || this.imagePreviewContainer) {
|
|
this.$set(this, "closingImagePreviewFromHistory", true)
|
|
this.cleanupImagePreview()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.file-preview-container {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 8px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.file-preview-container .file-item {
|
|
aspect-ratio: 1;
|
|
position: relative;
|
|
transition: all 300ms;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #f8f9fa;
|
|
border: 1px solid #e9ecef;
|
|
}
|
|
|
|
.file-preview-container .file-item:active {
|
|
background: #e9ecef;
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.file-preview-container .file-item .file-image {
|
|
width: 60px;
|
|
height: 60px;
|
|
object-fit: cover;
|
|
border-radius: 4px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.file-preview-container .file-item .file-download {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 28px;
|
|
line-height: 28px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: white;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
border-radius: 0 0 8px 8px;
|
|
font-size: 12px;
|
|
padding: 0 8px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.empty-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 120px;
|
|
color: #999;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 480px) {
|
|
.file-preview-container {
|
|
gap: 4px;
|
|
padding: 4px;
|
|
}
|
|
|
|
.file-preview-container .file-item .file-image {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.file-preview-container .file-item .file-download {
|
|
height: 20px;
|
|
line-height: 20px;
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
</style>
|