<template>
|
<div>
|
<ul id="images" class="images">
|
<li v-for="(item, index) in imgList" :key="index">
|
<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 '@comprehensive/public/comm.css'
|
import {
|
queryEcmPageList,
|
deleteFile,
|
qryImageByType
|
// downloadFile
|
} from '@comprehensive/serve/public'
|
import { downloadFile, queryRiskEcmPageList, queryProjectImageList } from '@api/product'
|
import qs from 'qs'
|
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 txtFile = require('@assets/TXT.svg')
|
const Filepdf = require('@assets/PDF.svg')
|
const mp4File = require('@assets/mp4.svg')
|
export default {
|
data() {
|
return {
|
imgList: [],
|
gallery: null,
|
index: 0,
|
isEdit: 0,
|
query: {}
|
}
|
},
|
created() {
|
this.init()
|
},
|
methods: {
|
init() {
|
let { query } = this.$route
|
|
// type 无或为0时为影像资料，其他请自行添加
|
let { type, isEdit } = query
|
this.query = query
|
if (isEdit) {
|
this.isEdit = isEdit
|
}
|
if (!type) {
|
this.queryEcmPageList()
|
}
|
// 1-项目 2-企业 3-合作方 4-楼栋
|
if (type == '1') {
|
this.queryProjectManagementImgList()
|
}
|
if (type == '2') {
|
this.queryEnterpriseImgList()
|
}
|
if (type == '3') {
|
this.queryPartnerImgList()
|
}
|
if (type == '4') {
|
this.queryBuildingImgList()
|
}
|
if (type === '6') {
|
this.qryImageByType()
|
}
|
},
|
// 影像资料信息1==图片列表
|
async queryEcmPageList() {
|
const {
|
serialno = '', // 当前点击图片流水
|
objecttype = '', // 流程类型
|
typeno = '', // 影像类型编号
|
businessno = '' // 订单编号
|
// ispicture = '' // 是否图片（1、是 2、不是）暂未使用该字段
|
} = this.query
|
const res = await queryEcmPageList({
|
businessno,
|
objecttype,
|
serialno,
|
typeno
|
})
|
const { result } = res
|
let initIndex = 0
|
|
// 这里后台接口是根据请求头返回的origin添加的ip或者域名,本地调试需要替换(具体可看下后台返回的url地址)
|
if (result[0].url.indexOf('http://localhost') != -1) {
|
result.forEach(item => {
|
item.url = item.url.replace(
|
'http://localhost:8080',
|
'http://10.10.16.114'
|
)
|
item.resizeUrl = item.resizeUrl.replace(
|
'http://localhost:8080',
|
'http://10.10.16.114'
|
)
|
})
|
}
|
|
// 首先基于serialno查找
|
initIndex = result.findIndex(
|
item => serialno && item.serialno === serialno
|
)
|
|
// serialno查找失败则基于typeno查找
|
if (initIndex === -1 && typeno) {
|
initIndex = result.findIndex(item => item.typeno === typeno)
|
}
|
initIndex = initIndex > -1 ? initIndex : 0
|
|
this.imgList = this.changeFileImg(result)
|
this.index = initIndex > -1 ? initIndex : 0
|
this.$nextTick(() => {
|
this.madeViewer()
|
})
|
},
|
|
// 贷款合同发送
|
async qryImageByType() {
|
const {
|
serialno = '', // 当前点击图片流水
|
objecttype = '', // 流程类型
|
typeno = '', // 影像类型编号
|
objectno = '' // 订单编号
|
} = this.query
|
const res = await qryImageByType({
|
objectNo: objectno,
|
objectType: objecttype
|
})
|
let { result } = res
|
let initIndex = 0
|
|
result = result.map(item => ({
|
...item,
|
imagetype: item.imageType,
|
serialno: item.serialNo,
|
typeno: item.typeNo
|
}))
|
|
// 首先基于serialno查找
|
initIndex = result.findIndex(
|
item => serialno && item.serialno === serialno
|
)
|
|
// serialno查找失败则基于typeno查找
|
if (initIndex === -1 && typeno) {
|
initIndex = result.findIndex(item => item.typeno === typeno)
|
}
|
initIndex = initIndex > -1 ? initIndex : 0
|
|
this.imgList = this.changeFileImg(result)
|
this.index = initIndex > -1 ? initIndex : 0
|
this.$nextTick(() => {
|
this.madeViewer()
|
})
|
},
|
|
// 项目--图片列表
|
async queryProjectManagementImgList() {
|
let { attachmentno, objectno, objectType, serialno, typeno } = this.query
|
let res = await queryProjectImageList({
|
attachmentno,
|
objectno,
|
objectType,
|
serialno,
|
typeno
|
})
|
const { result } = res
|
let initIndex = 0
|
|
// 首先基于serialno查找
|
initIndex = result.findIndex(
|
item => attachmentno && item.serialno === attachmentno
|
)
|
// serialno查找失败则基于typeno查找
|
if (initIndex === -1 && typeno) {
|
initIndex = result.findIndex(item => item.typeno === typeno)
|
}
|
initIndex = initIndex > -1 ? initIndex : 0
|
|
this.imgList = this.trunFileImg(result)
|
this.index = initIndex > -1 ? initIndex : 0
|
this.$nextTick(() => {
|
this.madeViewer()
|
})
|
},
|
// 企业--图片列表
|
async queryEnterpriseImgList() {
|
let { attachmentno, objectno, objecttype, serialno, typeno } = this.query
|
let res = await queryRiskEcmPageList({
|
attachmentno,
|
objectno,
|
objecttype,
|
serialno,
|
typeno
|
})
|
const { result } = res
|
let initIndex = 0
|
|
// 首先基于serialno查找
|
initIndex = result.findIndex(
|
item => attachmentno && item.attachmentno === attachmentno
|
)
|
|
// serialno查找失败则基于typeno查找
|
if (initIndex === -1 && typeno) {
|
initIndex = result.findIndex(item => item.typeno === typeno)
|
}
|
initIndex = initIndex > -1 ? initIndex : 0
|
|
this.imgList = this.trunFileImg(result)
|
this.index = initIndex > -1 ? initIndex : 0
|
this.$nextTick(() => {
|
this.madeViewer()
|
})
|
},
|
// 合作方--图片列表
|
async queryPartnerImgList() {
|
let { objectno, objecttype, serialno, typeno, attachmentno } = this.query
|
let res = await queryRiskEcmPageList({
|
attachmentno,
|
objectno,
|
objecttype,
|
serialno,
|
typeno
|
})
|
const { result } = res
|
let initIndex = 0
|
|
// 首先基于serialno查找
|
initIndex = result.findIndex(
|
item => attachmentno && item.attachmentno === attachmentno
|
)
|
|
// serialno查找失败则基于typeno查找
|
if (initIndex === -1 && typeno) {
|
initIndex = result.findIndex(item => item.typeno === typeno)
|
}
|
initIndex = initIndex > -1 ? initIndex : 0
|
|
this.imgList = this.trunFileImg(result)
|
this.index = initIndex > -1 ? initIndex : 0
|
this.$nextTick(() => {
|
this.madeViewer()
|
})
|
},
|
// 楼栋--图片列表
|
async queryBuildingImgList() {
|
let { attachmentno, objectno, objectType, serialno, typeno } = this.query
|
let res = await queryProjectImageList({
|
attachmentno,
|
objectno,
|
objectType,
|
serialno,
|
typeno
|
})
|
const { result } = res
|
let initIndex = 0
|
|
// 首先基于serialno查找
|
initIndex = result.findIndex(
|
item => attachmentno && item.serialno === attachmentno
|
)
|
|
// serialno查找失败则基于typeno查找
|
if (initIndex === -1 && typeno) {
|
initIndex = result.findIndex(item => item.typeno === typeno)
|
}
|
initIndex = initIndex > -1 ? initIndex : 0
|
|
this.imgList = this.trunFileImg(result)
|
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,
|
url: 'data-original',
|
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].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)
|
}
|
},
|
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)
|
}
|
)
|
},
|
tipDel() {
|
const { index, imgList } = this
|
const { iseEditor, serialno } = imgList[index]
|
if (iseEditor === '02') {
|
this.$confirm('此操作将删除该文件, 是否继续?', '提示', {
|
confirmButtonText: '是',
|
cancelButtonText: '否',
|
center: true
|
}).then(() => {
|
this.deleteImg(serialno)
|
})
|
} else {
|
this.$message({
|
type: 'warning',
|
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
|
}
|
// xlsx处理
|
if (imagetype.toLocaleLowerCase() === 'xlsx') {
|
curr.url = excelFile
|
}
|
// txt处理
|
if (imagetype.toLocaleLowerCase() === 'txt') {
|
curr.pdfUrl = url
|
curr.url = txtFile
|
}
|
// 视频处理
|
if(imagetype.toLocaleLowerCase() === 'mp4'){
|
curr.resizeUrl = ''
|
curr.url = mp4File
|
}
|
// docx和doc文档处理
|
if (imagetype.toLocaleLowerCase() === 'docx' || imagetype.toLocaleLowerCase() === 'doc') {
|
curr.url = wordFile
|
}
|
pre.push({ ...curr })
|
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.url = excelFile
|
}
|
// docx和doc文档处理
|
if (
|
imagetype.toLocaleLowerCase() === 'docx' ||
|
imagetype.toLocaleLowerCase() === 'doc'
|
) {
|
curr.url = wordFile
|
}
|
// ppt文件处理
|
if (imagetype.toLocaleLowerCase() === 'pptx') {
|
curr.url = pptFile
|
}
|
// 视频处理
|
if(imagetype.toLocaleLowerCase() === 'mp4'){
|
curr.pdfUrl = url
|
curr.url = txtFile
|
}
|
// txt文件处理
|
if (imagetype.toLocaleLowerCase() === 'txt') {
|
curr.pdfUrl = url
|
curr.url = txtFile
|
}
|
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>
|
