<template>
|
<div>
|
<ul id="images" class="photo-viewer-images">
|
<li v-for="(item, index) in imgList" :key="index">
|
<!-- <iframe :src="item.url" v-if="fileType === 'pdf'"></iframe>
|
<img :src="item.url" :alt="item.fileName +' . ' +item.imagetype" v-else /> -->
|
<img
|
:data-original="item.url"
|
:src="item.resizeUrl?`${item.resizeUrl}/60/90`:item.url"
|
:alt="item.fileName"
|
/>
|
</li>
|
</ul>
|
<canvas id="canvas"></canvas>
|
</div>
|
</template>
|
<script>
|
// 图片查看器
|
|
import Viewer from 'viewerjs'
|
import 'viewerjs/dist/viewer.css'
|
import qs from 'qs'
|
|
import deleteFile from '@/controller/deleteFile'
|
import queryEcmPageList from '@/controller/queryEcmPageList'
|
// import downloadFile from '@/controller/downloadFile'
|
import { downloadFile } from '@/utils/axiosRequest'
|
|
// const pdfFile = require('@/assets/office/pdf_icon.png')
|
const pdfFile = require('@/assets/office/PDF.svg')
|
const wordFile = require('@/assets/office/word.svg')
|
const excelFile = require('@/assets/office/excel.svg')
|
const pptFile = require('@/assets/office/ppt.svg')
|
const txtFile = require('@/assets/office/TXT.svg')
|
const Filepdf = require('@/assets/office/PDF.svg')
|
const mp4File = require('@/assets/office/mp4.svg')
|
const none = require('@/assets/office/none.svg')
|
|
export default {
|
data() {
|
return {
|
imgList: [],
|
gallery: null,
|
index: 0,
|
isEdit: 0,
|
query: {},
|
delModel: null,
|
model: null,
|
downModel: null,
|
pdfFile: ''
|
}
|
},
|
created() {
|
this.init()
|
},
|
methods: {
|
init() {
|
let { query } = this.$route
|
this.delModel = deleteFile()
|
this.model = queryEcmPageList()
|
this.downModel = downloadFile()
|
|
// type 无或为0时为影像资料，其他请自行添加
|
let { isEdit } = query
|
this.query = query
|
if (isEdit) {
|
this.isEdit = isEdit
|
}
|
this.getList()
|
},
|
// 影像资料信息1==图片列表
|
async getList() {
|
const { query } = this
|
|
const { model } = this
|
const { transLogSerialno, objectNo, objectType, typeNo, serialno } = query
|
|
const { list } = await model.request({
|
objectNo: transLogSerialno || objectNo,
|
objectType,
|
typeNo
|
})
|
|
let initIndex = 0
|
|
// 首先基于serialno查找
|
initIndex = list.findIndex(item => serialno && item.serialno === serialno)
|
|
// serialno查找失败则基于typeno查找
|
// if (initIndex === -1 && typeno) {
|
// initIndex = list.findIndex(item => item.typeno === typeno)
|
// }
|
initIndex = initIndex > -1 ? initIndex : 0
|
|
this.imgList = this.changeFileImg(list)
|
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()
|
}
|
}
|
}
|
|
editInfo.download = (event = {}) => {
|
this.download()
|
}
|
|
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', '删除')
|
this.setAttr(this.getEle('.viewer-download'), 'title', '下载')
|
},
|
view: (event = {}) => {
|
const { imgList } = this
|
const { detail = {} } = event
|
const { index } = detail
|
if (!isNaN(index)) {
|
this.index = index
|
}
|
if (imgList[index] && imgList[index].fileUrl) {
|
const contentEle = this.getEle('.viewer-canvas')
|
setTimeout(() => {
|
contentEle.innerHTML = `<iframe width="100%" height="100%" src="${imgList[index].fileUrl}"></iframe>`
|
}, 10)
|
}
|
}
|
})
|
gallery.show(true)
|
this.gallery = gallery
|
},
|
getEle(str) {
|
return document.querySelector(str)
|
},
|
|
download() {
|
const { index, imgList } = this
|
downloadFile(qs.stringify({ serialno: imgList[index].serialno })).then(
|
res => {
|
let blob = new Blob([res.data])
|
let fileName =
|
imgList[index].fileName + '.' + imgList[index].imagetype
|
if (window.navigator.msSaveBlob) {
|
// ie
|
window.navigator.msSaveOrOpenBlob(res, fileName)
|
return
|
}
|
let elink = document.createElement('a')
|
elink.style.display = 'none'
|
elink.href = window.URL.createObjectURL(blob)
|
elink.download = fileName
|
document.body.appendChild(elink)
|
elink.click()
|
URL.revokeObjectURL(elink.href)
|
document.body.removeChild(elink)
|
}
|
)
|
},
|
|
setAttr(ele, name, val) {
|
if (ele) {
|
ele.setAttribute(name, val)
|
}
|
},
|
tipDel() {
|
const { index, isEdit, imgList } = this
|
const { serialno } = imgList[index]
|
if (Number(isEdit) === 1) {
|
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 { delModel } = this
|
await delModel.request({
|
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
|
const fileType = imagetype.toLocaleLowerCase()
|
console.log(fileType)
|
const imgFormat = ['png','jpeg','jpg','gif','tif','mp4','pdf','zip','rar','7z']
|
let info = {}
|
if (fileType === 'pdf') {
|
let newUrl = "/rlc-cts/server/oss?bucket=" + url.match(/\/\/([^.]+)/)[1] + "&ossKey=" + url.match(/\/(\d[\w]+)/)[1]
|
info = {
|
fileUrl: newUrl,
|
url: pdfFile
|
}
|
}
|
if(fileType == 'ZIP' || fileType == 'RAR' || fileType == '7z'){
|
info = {
|
fileUrl: newUrl,
|
url: pdfFile
|
}
|
}
|
// xlsx表格处理
|
if (fileType === 'xlsx') {
|
curr.url = excelFile
|
}
|
// txt处理
|
if (fileType === 'txt') {
|
curr.pdfUrl = url
|
curr.url = txtFile
|
}
|
// 视频处理
|
if (fileType === 'mp4') {
|
curr.resizeUrl = ''
|
curr.url = mp4File
|
}
|
// docx和doc文档处理
|
if (fileType === 'docx' || fileType === 'doc') {
|
curr.url = wordFile
|
}
|
|
// 去除imgFormat内的图片格式
|
if (!imgFormat.includes(fileType)) {
|
curr.url = none
|
}
|
pre.push({ ...curr, fileType, ...info })
|
return pre
|
}, [])
|
}
|
}
|
}
|
</script>
|
<style lang="postcss">
|
.photo-viewer-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;
|
}
|
}
|
}
|
|
.viewer-footer {
|
& .viewer-title {
|
font-size: 14px;
|
color: #000;
|
}
|
|
& .viewer-list {
|
height: 40px;
|
padding: 1px 0;
|
}
|
|
& .viewer-list li {
|
height: 40px;
|
width: 60px;
|
padding-right: 10px;
|
}
|
|
& .viewer-prev,
|
& .viewer-next {
|
position: fixed;
|
top: 50%;
|
margin-top: -12px;
|
}
|
|
& .viewer-prev {
|
left: 20px;
|
}
|
|
& .viewer-next {
|
right: 20px;
|
}
|
|
& .viewer-del {
|
color: #fff;
|
background-image: url(../assets/delete.svg);
|
background-position: center center;
|
background-repeat: no-repeat;
|
background-size: 52% auto;
|
}
|
|
& .viewer-download {
|
color: #fff;
|
background-image: url(../assets/download.svg);
|
background-position: center center;
|
background-repeat: no-repeat;
|
background-size: 52% auto;
|
}
|
|
& .viewer-active {
|
opacity: 1;
|
}
|
}
|
</style>
|
