<template>
|
<div>
|
<!-- <iframe src="https://viewerjs.org/ViewerJS/#../demospreadsheet.ods"></iframe> -->
|
<ul id="images" class="images">
|
<li v-for="(item, index) in imgList" :key="index">
|
<iframe
|
:src="item.url"
|
v-if="item.imagetype.toLocaleLowerCase === 'pdf'"
|
></iframe>
|
<!-- <iframe :src="item.url" v-else-if="item.imagetype.toLocaleLowerCase === 'ods'"></iframe> -->
|
<img :src="item.url" :alt="item.fileName" v-else />
|
</li>
|
</ul>
|
<canvas id="canvas"></canvas>
|
</div>
|
</template>
|
<script>
|
// 图片查看器
|
import '@comprehensive/public/comm.css'
|
import {
|
queryEcmPageList,
|
deleteFile
|
// downloadFile
|
} from '@comprehensive/serve/public'
|
import { qryImageInfoList } from '../api/productManage.api'
|
import Viewer from 'viewerjs'
|
import 'viewerjs/dist/viewer.css'
|
import { setTimeout } from 'timers'
|
const pdfFile = require('@assets/PDF.svg')
|
const wordFile = require('@assets/word.svg')
|
const excelFile = require('@assets/excel.svg')
|
const pptFile = require('@assets/ppt.svg')
|
const Filepdf = require('@assets/PDF.svg')
|
export default {
|
data() {
|
return {
|
imgList: [],
|
gallery: null,
|
index: 0,
|
isEdit: 0,
|
query: {}
|
}
|
},
|
created() {
|
this.init()
|
},
|
methods: {
|
async init() {
|
const {
|
attachmentno,
|
objectno,
|
objecttype,
|
serialno,
|
typeno
|
} = this.$route.query
|
const params = {
|
attachmentno,
|
objectno,
|
objecttype,
|
serialno,
|
typeno
|
}
|
if (!objectno) {
|
return
|
}
|
const preViewRes = await qryImageInfoList(params)
|
if (preViewRes.code === '00') {
|
const fileList = preViewRes.result
|
let initIndex = 0
|
// 首先基于serialno查找
|
initIndex = fileList.findIndex(
|
item => serialno && item.serialno === serialno
|
)
|
// serialno查找失败则基于typeno查找
|
if (initIndex === -1 && typeno) {
|
initIndex = fileList.findIndex(item => item.typeno === typeno)
|
}
|
initIndex = initIndex > -1 ? initIndex : 0
|
|
this.imgList = this.changeFileImg(fileList)
|
this.index = initIndex > -1 ? initIndex : 0
|
this.$nextTick(() => {
|
this.madeViewer()
|
})
|
}
|
},
|
// 渲染组件
|
madeViewer() {
|
let { index, isEdit } = this
|
let editInfo = {}
|
if (Number(isEdit) === 1) {
|
editInfo = {
|
del: (event = {}) => {
|
this.tipDel()
|
}
|
}
|
}
|
|
const gallery = new Viewer(document.getElementById('images'), {
|
initialViewIndex: index,
|
button: false,
|
modal: false,
|
backdrop: false,
|
zIndex: 100,
|
toolbar: {
|
// zoomIn: true,
|
// zoomOut: true,
|
prev: true,
|
rotateLeft: true,
|
rotateRight: true,
|
next: true,
|
...editInfo
|
},
|
ready: () => {
|
this.setAttr(this.getEle('.viewer-prev'), 'title', '上一张')
|
|
this.setAttr(this.getEle('.viewer-next'), 'title', '下一张')
|
|
this.setAttr(
|
this.getEle('.viewer-rotate-left'),
|
'title',
|
'逆时针旋转'
|
)
|
|
this.setAttr(
|
this.getEle('.viewer-rotate-right'),
|
'title',
|
'顺时针旋转'
|
)
|
|
this.setAttr(this.getEle('.viewer-del'), 'title', '删除')
|
},
|
view: (event = {}) => {
|
const { imgList } = this
|
const { detail = {} } = event
|
const { index } = detail
|
|
if (!isNaN(index)) {
|
this.index = index
|
}
|
if (imgList[index] && imgList[index].pdfUrl) {
|
const contentEle = this.getEle('.viewer-canvas')
|
setTimeout(() => {
|
contentEle.innerHTML = `<iframe width="100%" height="100%" src="${imgList[index].pdfUrl}"></iframe>`
|
}, 10)
|
}
|
}
|
})
|
gallery.show(true)
|
this.gallery = gallery
|
},
|
getEle(str) {
|
return document.querySelector(str)
|
},
|
setAttr(ele, name, val) {
|
if (ele) {
|
ele.setAttribute(name, val)
|
}
|
},
|
tipDel() {
|
const { index, imgList } = this
|
const { iseEditor, serialno } = imgList[index]
|
if (iseEditor === '02') {
|
this.$confirm('此操作将删除该文件, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(() => {
|
this.deleteImg(serialno)
|
})
|
.catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
})
|
})
|
} else {
|
this.$message({
|
type: 'info',
|
message: '不能删除该图片！'
|
})
|
}
|
},
|
async deleteImg(serialno) {
|
// const { index, imgList } = this
|
const res = await deleteFile({
|
serialno
|
})
|
this.$message({
|
type: 'success',
|
message: '删除成功!'
|
})
|
// 推送消息，目前type类型仅有deleteImg，删除某张图片
|
window.postMessage(
|
JSON.stringify({
|
type: 'deleteImg',
|
info: {
|
serialno
|
}
|
}),
|
'/'
|
)
|
|
// viewerjs无法刷新（update方法会导致无法切换问题），暂时reload处理
|
// this.init()
|
setTimeout(() => location.reload(), 1500)
|
},
|
changeFileImg(list) {
|
return list.reduce((pre, curr) => {
|
const { imagetype, url } = curr
|
if (imagetype.toLocaleLowerCase() === 'pdf') {
|
curr.pdfUrl = url
|
curr.url = pdfFile
|
}
|
pre.push({ ...curr })
|
// console.log(pre)
|
return pre
|
}, [])
|
},
|
trunFileImg(list) {
|
return list.reduce((pre, curr) => {
|
const { imagetype, url } = curr
|
if (imagetype.toLocaleLowerCase() === 'pdf') {
|
curr.pdfUrl = url
|
curr.url = Filepdf
|
}
|
// xlsx表格处理
|
if (imagetype.toLocaleLowerCase() === 'xlsx') {
|
curr.pdfUrl = url
|
curr.url = excelFile
|
}
|
// docx和doc文档处理
|
if (
|
imagetype.toLocaleLowerCase() === 'docx' ||
|
imagetype.toLocaleLowerCase() === 'doc'
|
) {
|
curr.pdfUrl = url
|
curr.url = wordFile
|
}
|
// ppt文件处理
|
if (imagetype.toLocaleLowerCase() === 'pptx') {
|
curr.pdfUrl = url
|
curr.url = pptFile
|
}
|
pre.push({ ...curr })
|
// console.log(pre)
|
return pre
|
}, [])
|
}
|
}
|
}
|
</script>
|
<style lang="postcss" scoped>
|
.images {
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
list-style: none;
|
text-align: center;
|
margin: 0;
|
opacity: 0;
|
& li {
|
width: 180px;
|
margin: 50px 50px 0 0;
|
& img {
|
width: 150px;
|
height: 100px;
|
}
|
}
|
}
|
</style>
|
