<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 "@assets/css/comm.css";
|
import { qryImageInfoList, deleteFile } 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: () => {
|
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="less" 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>
|
