废弃代码删除
This commit is contained in:
parent
07f126d8ec
commit
f6948fae61
|
|
@ -1,360 +0,0 @@
|
||||||
<template>
|
|
||||||
<!-- 小型弹窗，用于完成，删除，保存等操作 -->
|
|
||||||
<el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
|
|
||||||
:closeOnClickModal="false" @close="handleClose" :append-to-body="true">
|
|
||||||
<el-row :gutter="24" style="display: flex; align-items: center">
|
|
||||||
<el-col :span="16">
|
|
||||||
<el-input v-model="filterText" placeholder="输入关键字" @keyup.enter.native="onHandleSearch">
|
|
||||||
</el-input>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="8">
|
|
||||||
<el-button type="primary" size="small" @click="onHandleSearch">
|
|
||||||
查询
|
|
||||||
</el-button>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<div class="tree-container" style="max-height: calc(80vh - 190px); overflow-y: auto;">
|
|
||||||
|
|
||||||
|
|
||||||
<el-tree ref="leftTreeRef" :data="treeDataList" default-expand-all class="left-tree-list"
|
|
||||||
@node-click="onHandleNodeClick" :filter-node-method="filterNode" highlight-current node-key="id">
|
|
||||||
<span class="custom-tree-node" slot-scope="{ node }">
|
|
||||||
<span class="node-label">{{ node.label }}</span>
|
|
||||||
</span>
|
|
||||||
</el-tree>
|
|
||||||
</div>
|
|
||||||
<span slot="footer" class="dialog-footer">
|
|
||||||
<el-button class="clear-btn" @click="handleClose">取消</el-button>
|
|
||||||
<el-button type="primary" class="search-btn" @click="handleSave">确认</el-button>
|
|
||||||
</span>
|
|
||||||
</el-dialog>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import _ from 'lodash'
|
|
||||||
import {
|
|
||||||
getFileManageTreeApi
|
|
||||||
} from '@/api/filesTransfer/apply'
|
|
||||||
import { validSecurity } from '@/utils/validate'
|
|
||||||
export default {
|
|
||||||
name: "FileTree",
|
|
||||||
props: ["width", "title", "rowData"],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
lDialog: this.width > 500 ? "w700" : "w500",
|
|
||||||
dialogVisible: true,
|
|
||||||
isDisabled: true,
|
|
||||||
treeDataList: [],
|
|
||||||
filterText: '',
|
|
||||||
originalTreeData: [], // 保存原始数据,
|
|
||||||
selectedNodeId: null, // 保存当前选中的节点ID
|
|
||||||
};
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.getLeftTreeList();
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
// 过滤后的树数据
|
|
||||||
filteredTreeData() {
|
|
||||||
if (!this.filterText) {
|
|
||||||
return this.treeDataList
|
|
||||||
}
|
|
||||||
return this.filterTreeData(this.treeDataList)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 获取树列表
|
|
||||||
async getLeftTreeList() {
|
|
||||||
const proId = this.rowData.proId;
|
|
||||||
const res = await getFileManageTreeApi({ proId })
|
|
||||||
const transformedData = this.convertToVueTree(res.data)
|
|
||||||
this.treeDataList = transformedData;
|
|
||||||
// 保存原始数据
|
|
||||||
this.originalTreeData = JSON.parse(JSON.stringify(this.treeDataList))
|
|
||||||
},
|
|
||||||
/* 刷新树节点 */
|
|
||||||
async handleQuery() {
|
|
||||||
// 保存当前选中的节点ID
|
|
||||||
const currentNode = this.$refs.leftTreeRef.getCurrentNode();
|
|
||||||
if (currentNode) {
|
|
||||||
this.selectedNodeId = currentNode.id;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 重新获取树数据
|
|
||||||
await this.getLeftTreeList();
|
|
||||||
|
|
||||||
// 恢复选中状态
|
|
||||||
this.$nextTick(() => {
|
|
||||||
if (this.selectedNodeId) {
|
|
||||||
this.$refs.leftTreeRef.setCurrentKey(this.selectedNodeId);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
// 树数据过滤 - 支持无限层级转换
|
|
||||||
convertToVueTree(data) {
|
|
||||||
if (!data || !Array.isArray(data)) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
return data.map(item => {
|
|
||||||
|
|
||||||
const node = {
|
|
||||||
id: item.id,
|
|
||||||
label: item.contentName,
|
|
||||||
level: item.level,
|
|
||||||
parentId: item.parentId
|
|
||||||
};
|
|
||||||
|
|
||||||
// 递归处理子节点
|
|
||||||
if (item.children && Array.isArray(item.children) && item.children.length > 0) {
|
|
||||||
const children = this.convertToVueTree(item.children);
|
|
||||||
// 只有当子节点不为空时才添加 children 属性
|
|
||||||
if (children.length > 0) {
|
|
||||||
node.children = children;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return node;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
// 节点点击事件
|
|
||||||
onHandleNodeClick(data) {
|
|
||||||
// 保存选中的节点ID
|
|
||||||
this.selectedNodeId = data.id;
|
|
||||||
},
|
|
||||||
|
|
||||||
// 搜索
|
|
||||||
onHandleSearch() {
|
|
||||||
// 安全校验
|
|
||||||
if (this.filterText && !validSecurity(this.filterText)) {
|
|
||||||
this.$message.error('搜索内容包含非法字符，请重新输入')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.$refs.leftTreeRef.filter(this.filterText)
|
|
||||||
},
|
|
||||||
// 树节点过滤方法
|
|
||||||
filterNode(value, data) {
|
|
||||||
if (!value) return true
|
|
||||||
return data.label.indexOf(value) !== -1
|
|
||||||
},
|
|
||||||
// 递归过滤树数据
|
|
||||||
filterTreeData(treeData) {
|
|
||||||
const result = []
|
|
||||||
for (const node of treeData) {
|
|
||||||
const newNode = { ...node }
|
|
||||||
if (node.children && node.children.length > 0) {
|
|
||||||
const filteredChildren = this.filterTreeData(node.children)
|
|
||||||
if (filteredChildren.length > 0) {
|
|
||||||
newNode.children = filteredChildren
|
|
||||||
result.push(newNode)
|
|
||||||
} else if (node.label.indexOf(this.filterText) !== -1) {
|
|
||||||
// 如果父节点匹配，保留所有子节点
|
|
||||||
result.push(node)
|
|
||||||
}
|
|
||||||
} else if (node.label.indexOf(this.filterText) !== -1) {
|
|
||||||
result.push(newNode)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return result
|
|
||||||
},
|
|
||||||
/*关闭弹窗 */
|
|
||||||
handleClose() {
|
|
||||||
this.dialogVisible = false;
|
|
||||||
this.$emit("closeDialog");
|
|
||||||
/* setTimeout(() => {
|
|
||||||
this.dialogVisible = true;
|
|
||||||
}); */
|
|
||||||
},
|
|
||||||
/**确认弹窗 */
|
|
||||||
sureBtnClick() {
|
|
||||||
this.dialogVisible = false;
|
|
||||||
this.$emit("closeDialog");
|
|
||||||
/* setTimeout(() => {
|
|
||||||
this.dialogVisible = true;
|
|
||||||
}); */
|
|
||||||
},
|
|
||||||
// 保存数据
|
|
||||||
handleSave(){
|
|
||||||
this.$emit('getTreeData', this.selectedNodeId);
|
|
||||||
this.handleClose();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.w700 ::v-deep .el-dialog {
|
|
||||||
width: 700px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.w500 ::v-deep .el-dialog {
|
|
||||||
width: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.w500 ::v-deep .el-dialog__header,
|
|
||||||
.w700 ::v-deep .el-dialog__header {
|
|
||||||
// background: #eeeeee;
|
|
||||||
|
|
||||||
.el-dialog__title {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.yxq .el-range-separator {
|
|
||||||
margin-right: 7px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-date-editor--daterange.el-input__inner {
|
|
||||||
width: 260px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-item {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-style {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-container {
|
|
||||||
margin-top: 10px;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 自定义滚动条样式 */
|
|
||||||
.tree-container::-webkit-scrollbar {
|
|
||||||
width: 6px;
|
|
||||||
background: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-container::-webkit-scrollbar-track {
|
|
||||||
background: #f5f5f5;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-container::-webkit-scrollbar-thumb {
|
|
||||||
background: #c0c4cc;
|
|
||||||
border-radius: 3px;
|
|
||||||
transition: background 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-container::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: #909399;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left-tree-list {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 自定义节点行：左右布局，支持多行文本 */
|
|
||||||
.custom-tree-node {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
width: 100%;
|
|
||||||
min-height: 20px;
|
|
||||||
padding: 1px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.node-label {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
overflow: visible;
|
|
||||||
text-overflow: initial;
|
|
||||||
white-space: normal;
|
|
||||||
word-break: break-word;
|
|
||||||
word-wrap: break-word;
|
|
||||||
line-height: 1.2;
|
|
||||||
padding-right: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 使行容器自适应高度，单行文本居中对齐，多行文本顶部对齐 */
|
|
||||||
.left-tree-list .el-tree-node__content {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
height: auto;
|
|
||||||
min-height: 20px;
|
|
||||||
padding: 1px 4px;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 多行文本时改为顶部对齐 */
|
|
||||||
.left-tree-list .el-tree-node__content:has(.node-label[style*="height"]) {
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 高亮选中状态同样自适应高度 */
|
|
||||||
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
|
|
||||||
height: auto !important;
|
|
||||||
align-items: center;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 选中节点的背景色 */
|
|
||||||
.left-tree-list .el-tree-node.is-current>.el-tree-node__content {
|
|
||||||
background-color: #b3d9ff;
|
|
||||||
color: #006e6a !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 确保选中节点的文字颜色正确应用 */
|
|
||||||
.left-tree-list .el-tree-node.is-current>.el-tree-node__content .el-tree-node__label {
|
|
||||||
color: #006e6a !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 确保自定义树节点中的文字颜色正确应用 */
|
|
||||||
.left-tree-list .el-tree-node.is-current>.el-tree-node__content .custom-tree-node {
|
|
||||||
color: #006e6a !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 悬停效果 */
|
|
||||||
.left-tree-list .el-tree-node__content:hover {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 选中节点的悬停效果 */
|
|
||||||
.left-tree-list .el-tree-node.is-current>.el-tree-node__content:hover {
|
|
||||||
background-color: #8cc8ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.btn-box {
|
|
||||||
margin-left: 4px;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.15s ease-in-out;
|
|
||||||
flex-shrink: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 悬浮到整行时显示操作按钮 */
|
|
||||||
.left-tree-list .el-tree-node__content:hover .btn-box {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 确保树节点内容正确显示 */
|
|
||||||
::v-deep .el-tree-node__content {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
height: auto;
|
|
||||||
min-height: 38px;
|
|
||||||
padding: 1px 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 树节点展开/收起图标 */
|
|
||||||
::v-deep .el-tree-node__expand-icon {
|
|
||||||
padding: 1px;
|
|
||||||
margin-right: 1px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 树节点图标容器 */
|
|
||||||
::v-deep .el-tree-node__content>.el-tree-node__expand-icon {
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,441 +0,0 @@
|
||||||
<template>
|
|
||||||
<!-- 预览文件 -->
|
|
||||||
<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">
|
|
||||||
<div class="image-toolbar">
|
|
||||||
<!-- <el-button size="mini" @click="downloadFile"><i class="el-icon-download"></i> 下载</el-button> -->
|
|
||||||
</div>
|
|
||||||
<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>
|
|
||||||
</el-image>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- PDF 预览 -->
|
|
||||||
<template v-else>
|
|
||||||
<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 class="pdf-actions">
|
|
||||||
<!-- <el-button size="mini" @click="downloadFile"><i class="el-icon-download"></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>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import pdf from 'vue-pdf'
|
|
||||||
import { getFileAsBase64Api } from '@/api/archivesManagement/fileManager/fileManager'
|
|
||||||
export default {
|
|
||||||
name: 'ViewFile',
|
|
||||||
props: ['width', 'hight', 'dataForm', 'title', 'disabled', 'isAdd', 'rowData', 'projectId'],
|
|
||||||
components: { pdf },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
dialogVisible: true,
|
|
||||||
lDialog: this.width > 500 ? "w700" : "w500",
|
|
||||||
fileUrl: '', // 实际文件地址
|
|
||||||
fileName: '', // 用于从文件名判断类型
|
|
||||||
previewList: [], // 预览组（可只放当前图片）
|
|
||||||
// PDF相关状态
|
|
||||||
pdfLoading: false,
|
|
||||||
pdfError: false,
|
|
||||||
currentPage: 1,
|
|
||||||
numPages: 0,
|
|
||||||
// 滚轮翻页相关
|
|
||||||
wheelTimeout: null,
|
|
||||||
isWheelScrolling: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
isImage() {
|
|
||||||
// 允许的图片类型
|
|
||||||
const exts = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp']
|
|
||||||
const url = (this.fileUrl || '')
|
|
||||||
const name = (this.fileName || '').toLowerCase()
|
|
||||||
return exts.some(ext => url.endsWith(ext) || name.endsWith(ext))
|
|
||||||
},
|
|
||||||
isPdf() {
|
|
||||||
// 判断是否为PDF文件
|
|
||||||
const exts = ['.pdf']
|
|
||||||
const url = (this.fileUrl || '')
|
|
||||||
const name = (this.fileName || '').toLowerCase()
|
|
||||||
return exts.some(ext => url.endsWith(ext) || name.endsWith(ext))
|
|
||||||
},
|
|
||||||
processedFileUrl() {
|
|
||||||
// 处理文件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();
|
|
||||||
},
|
|
||||||
|
|
||||||
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;
|
|
||||||
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++;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 下载文件（图片或PDF，base64 -> Blob，避免在控制台暴露base64）
|
|
||||||
downloadFile() {
|
|
||||||
if (!this.fileUrl) return
|
|
||||||
const filename = this.fileName || '文件'
|
|
||||||
|
|
||||||
// 推断 MIME 类型
|
|
||||||
let mime = this.isPdf ? 'application/pdf' : this.getImageMimeType()
|
|
||||||
|
|
||||||
// 如果带有 data: 前缀，从中解析 mime 与数据体
|
|
||||||
let base64Data = this.fileUrl
|
|
||||||
if (typeof base64Data === 'string' && base64Data.startsWith('data:')) {
|
|
||||||
try {
|
|
||||||
const parts = base64Data.split(',')
|
|
||||||
const header = parts[0]
|
|
||||||
const dataPart = parts[1]
|
|
||||||
const match = header.match(/^data:(.*?);base64$/)
|
|
||||||
if (match && match[1]) mime = match[1]
|
|
||||||
base64Data = dataPart
|
|
||||||
} catch (e) {
|
|
||||||
// 解析失败则按原样处理
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const blob = this.base64ToBlob(base64Data, mime)
|
|
||||||
const url = URL.createObjectURL(blob)
|
|
||||||
const a = document.createElement('a')
|
|
||||||
a.style.display = 'none'
|
|
||||||
a.href = url
|
|
||||||
a.download = filename
|
|
||||||
document.body.appendChild(a)
|
|
||||||
a.click()
|
|
||||||
document.body.removeChild(a)
|
|
||||||
URL.revokeObjectURL(url)
|
|
||||||
},
|
|
||||||
|
|
||||||
// base64(不含data前缀) 转 Blob
|
|
||||||
base64ToBlob(base64, mime) {
|
|
||||||
const byteChars = atob(base64)
|
|
||||||
const sliceSize = 1024
|
|
||||||
const byteArrays = []
|
|
||||||
for (let offset = 0; offset < byteChars.length; offset += sliceSize) {
|
|
||||||
const slice = byteChars.slice(offset, offset + sliceSize)
|
|
||||||
const byteNumbers = new Array(slice.length)
|
|
||||||
for (let i = 0; i < slice.length; i++) {
|
|
||||||
byteNumbers[i] = slice.charCodeAt(i)
|
|
||||||
}
|
|
||||||
const byteArray = new Uint8Array(byteNumbers)
|
|
||||||
byteArrays.push(byteArray)
|
|
||||||
}
|
|
||||||
return new Blob(byteArrays, { type: mime || 'application/octet-stream' })
|
|
||||||
},
|
|
||||||
|
|
||||||
// 获取图片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" scoped>
|
|
||||||
.w700 ::v-deep .el-dialog {
|
|
||||||
width: 700px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.w500 ::v-deep .el-dialog {
|
|
||||||
width: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.w500 ::v-deep .el-dialog__header,
|
|
||||||
.w700 ::v-deep .el-dialog__header {
|
|
||||||
// background: #eeeeee;
|
|
||||||
|
|
||||||
.el-dialog__title {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.yxq .el-range-separator {
|
|
||||||
margin-right: 7px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-date-editor--daterange.el-input__inner {
|
|
||||||
width: 260px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-item {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-style {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-slot {
|
|
||||||
width: 100%;
|
|
||||||
height: 240px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-toolbar {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
padding: 4px 0 8px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pdf-actions {
|
|
||||||
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