档案管理
This commit is contained in:
parent
cad677e4c3
commit
1ad3fc581f
|
|
@ -1,11 +1,12 @@
|
|||
<template>
|
||||
<!-- 预览文件 -->
|
||||
<el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
|
||||
:closeOnClickModal="false" @close="handleClose" :append-to-body="true">
|
||||
<el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
|
||||
:closeOnClickModal="false" @close="handleClose" :append-to-body="true">
|
||||
<div style="text-align:center">
|
||||
<!-- 图片预览 -->
|
||||
<template v-if="isImage">
|
||||
<el-image :src="processedFileUrl" :preview-src-list="previewList" fit="contain" style="max-width:100%;max-height:70vh">
|
||||
<el-image :src="processedFileUrl" :preview-src-list="previewList" fit="contain"
|
||||
style="max-width:100%;max-height:70vh">
|
||||
<div slot="error" class="image-slot">
|
||||
<i class="el-icon-picture-outline"></i>
|
||||
</div>
|
||||
|
|
@ -14,25 +15,71 @@
|
|||
|
||||
<!-- PDF 预览 -->
|
||||
<template v-else>
|
||||
<pdf :src="processedFileUrl" style="width:100%;height:70vh" />
|
||||
</template>
|
||||
<div class="pdf-container">
|
||||
<!-- PDF加载状态 -->
|
||||
<div v-if="pdfLoading" class="pdf-loading">
|
||||
<i class="el-icon-loading"></i>
|
||||
<p>PDF加载中...</p>
|
||||
</div>
|
||||
|
||||
<!-- PDF错误状态 -->
|
||||
<div v-else-if="pdfError" class="pdf-error">
|
||||
<i class="el-icon-warning"></i>
|
||||
<p>PDF加载失败</p>
|
||||
<el-button size="small" @click="retryLoadPdf">重试</el-button>
|
||||
</div>
|
||||
|
||||
<!-- PDF内容 -->
|
||||
<div v-else class="pdf-content">
|
||||
<!-- PDF工具栏 -->
|
||||
<div class="pdf-toolbar">
|
||||
<div class="pdf-controls">
|
||||
<el-button size="mini" :disabled="currentPage <= 1" @click="prevPage">
|
||||
<i class="el-icon-arrow-left"></i> 上一页
|
||||
</el-button>
|
||||
<span class="page-info">
|
||||
{{ currentPage }} / {{ numPages }}
|
||||
</span>
|
||||
<el-button size="mini" :disabled="currentPage >= numPages" @click="nextPage">
|
||||
下一页 <i class="el-icon-arrow-right"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- PDF显示区域 -->
|
||||
<div class="pdf-viewer" @wheel="handleWheel" ref="pdfViewer">
|
||||
<pdf :src="processedFileUrl" :page="currentPage" @num-pages="numPages = $event" @loaded="onPdfLoaded"
|
||||
@error="onPdfError" style="width:100%;height:70vh" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import pdf from 'vue-pdf'
|
||||
import { getFileAsBase64Api } from '@/api/archivesManagement/fileManager/fileManager'
|
||||
export default {
|
||||
name: 'ViewFile',
|
||||
name: 'ViewFile',
|
||||
props: ['width', 'hight', 'dataForm', 'title', 'disabled', 'isAdd', 'rowData', 'projectId'],
|
||||
components: { pdf },
|
||||
data() {
|
||||
return {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: true,
|
||||
lDialog: this.width > 500 ? "w700" : "w500",
|
||||
lDialog: this.width > 500 ? "w700" : "w500",
|
||||
fileUrl: '', // 实际文件地址
|
||||
fileName: '', // 用于从文件名判断类型
|
||||
previewList: [] // 预览组（可只放当前图片）
|
||||
previewList: [], // 预览组（可只放当前图片）
|
||||
// PDF相关状态
|
||||
pdfLoading: false,
|
||||
pdfError: false,
|
||||
currentPage: 1,
|
||||
numPages: 0,
|
||||
// 滚轮翻页相关
|
||||
wheelTimeout: null,
|
||||
isWheelScrolling: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -51,70 +98,188 @@ export default {
|
|||
return exts.some(ext => url.endsWith(ext) || name.endsWith(ext))
|
||||
},
|
||||
processedFileUrl() {
|
||||
// 处理文件URL，为PDF添加data前缀
|
||||
if (this.isPdf && this.fileUrl && !this.fileUrl.startsWith('data:')) {
|
||||
return `data:application/pdf;base64,${this.fileUrl}`
|
||||
// 处理文件URL，为PDF和图片添加data前缀
|
||||
if (this.fileUrl && !this.fileUrl.startsWith('data:')) {
|
||||
if (this.isPdf) {
|
||||
return `data:application/pdf;base64,${this.fileUrl}`
|
||||
} else if (this.isImage) {
|
||||
// 根据图片类型添加相应的MIME类型
|
||||
const imageType = this.getImageMimeType()
|
||||
return `data:${imageType};base64,${this.fileUrl}`
|
||||
}
|
||||
}
|
||||
return this.fileUrl
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getFileAsBase64();
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleClose() {
|
||||
|
||||
watch: {
|
||||
isPdf(newVal) {
|
||||
if (newVal) {
|
||||
this.resetPdfState();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClose() {
|
||||
this.dialogVisible = false
|
||||
this.$emit('closeDialog')
|
||||
},
|
||||
/* 获取文件的base64 */
|
||||
getFileAsBase64() {
|
||||
if (this.isPdf) {
|
||||
this.pdfLoading = true;
|
||||
this.pdfError = false;
|
||||
}
|
||||
|
||||
getFileAsBase64Api({ id: this.rowData.fileId }).then(res => {
|
||||
const obj =res.data;
|
||||
const obj = res.data;
|
||||
this.fileUrl = obj?.fileBase64 || ''
|
||||
this.fileName = obj?.fileName || ''
|
||||
|
||||
// 预览组（如果你有多张，可放数组；没有就放当前一张）
|
||||
if (this.isImage && this.fileUrl) {
|
||||
this.previewList = [this.processedFileUrl]
|
||||
}
|
||||
}).catch(error => {
|
||||
if (this.isPdf) {
|
||||
this.pdfError = true;
|
||||
this.pdfLoading = false;
|
||||
}
|
||||
console.error('获取文件失败:', error);
|
||||
})
|
||||
},
|
||||
|
||||
// PDF相关方法
|
||||
resetPdfState() {
|
||||
this.currentPage = 1;
|
||||
this.numPages = 0;
|
||||
this.pdfLoading = false;
|
||||
this.pdfError = false;
|
||||
this.isWheelScrolling = false;
|
||||
if (this.wheelTimeout) {
|
||||
clearTimeout(this.wheelTimeout);
|
||||
this.wheelTimeout = null;
|
||||
}
|
||||
},
|
||||
|
||||
onPdfLoaded() {
|
||||
this.pdfLoading = false;
|
||||
this.pdfError = false;
|
||||
},
|
||||
|
||||
onPdfError(error) {
|
||||
this.pdfLoading = false;
|
||||
this.pdfError = true;
|
||||
console.error('PDF加载失败:', error);
|
||||
},
|
||||
|
||||
retryLoadPdf() {
|
||||
this.resetPdfState();
|
||||
this.getFileAsBase64();
|
||||
},
|
||||
|
||||
prevPage() {
|
||||
if (this.currentPage > 1) {
|
||||
this.currentPage--;
|
||||
}
|
||||
},
|
||||
|
||||
nextPage() {
|
||||
if (this.currentPage < this.numPages) {
|
||||
this.currentPage++;
|
||||
}
|
||||
},
|
||||
|
||||
// 获取图片MIME类型
|
||||
getImageMimeType() {
|
||||
// 根据文件扩展名返回对应的MIME类型
|
||||
const name = (this.fileName || '').toLowerCase()
|
||||
if (name.endsWith('.jpg') || name.endsWith('.jpeg')) {
|
||||
return 'image/jpeg'
|
||||
} else if (name.endsWith('.png')) {
|
||||
return 'image/png'
|
||||
} else if (name.endsWith('.gif')) {
|
||||
return 'image/gif'
|
||||
} else if (name.endsWith('.bmp')) {
|
||||
return 'image/bmp'
|
||||
} else if (name.endsWith('.webp')) {
|
||||
return 'image/webp'
|
||||
}
|
||||
// 默认返回jpeg
|
||||
return 'image/jpeg'
|
||||
},
|
||||
|
||||
// 处理滚轮事件
|
||||
handleWheel(event) {
|
||||
// 阻止默认滚动行为
|
||||
event.preventDefault();
|
||||
|
||||
// 如果正在滚轮翻页中，忽略新的滚轮事件
|
||||
if (this.isWheelScrolling) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 设置滚轮翻页状态
|
||||
this.isWheelScrolling = true;
|
||||
|
||||
// 清除之前的定时器
|
||||
if (this.wheelTimeout) {
|
||||
clearTimeout(this.wheelTimeout);
|
||||
}
|
||||
|
||||
// 根据滚轮方向翻页
|
||||
if (event.deltaY > 0) {
|
||||
// 向下滚动 - 下一页
|
||||
this.nextPage();
|
||||
} else if (event.deltaY < 0) {
|
||||
// 向上滚动 - 上一页
|
||||
this.prevPage();
|
||||
}
|
||||
|
||||
// 设置定时器，防止滚轮翻页过于频繁
|
||||
this.wheelTimeout = setTimeout(() => {
|
||||
this.isWheelScrolling = false;
|
||||
}, 300);
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.w700 .el-dialog {
|
||||
width: 700px;
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
.w500 .el-dialog {
|
||||
width: 500px;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.w500 .el-dialog__header,
|
||||
.w700 .el-dialog__header {
|
||||
// background: #eeeeee;
|
||||
// background: #eeeeee;
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 16px;
|
||||
}
|
||||
.el-dialog__title {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.yxq .el-range-separator {
|
||||
margin-right: 7px !important;
|
||||
margin-right: 7px !important;
|
||||
}
|
||||
|
||||
.el-date-editor--daterange.el-input__inner {
|
||||
width: 260px;
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.select-style {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.image-slot {
|
||||
|
|
@ -126,4 +291,84 @@ export default {
|
|||
color: #909399;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
/* PDF预览样式 */
|
||||
.pdf-container {
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pdf-loading,
|
||||
.pdf-error {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #909399;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.pdf-loading i {
|
||||
font-size: 32px;
|
||||
margin-bottom: 16px;
|
||||
animation: rotating 2s linear infinite;
|
||||
}
|
||||
|
||||
.pdf-error i {
|
||||
font-size: 32px;
|
||||
margin-bottom: 16px;
|
||||
color: #F56C6C;
|
||||
}
|
||||
|
||||
.pdf-content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pdf-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
background: #f5f5f5;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pdf-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pdf-viewer {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: #f8f9fa;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 移除滚动条样式，因为现在使用滚轮翻页 */
|
||||
|
||||
@keyframes rotating {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue