<template>
|
<div>
|
<div v-show="isOpenDocPreviewDialog" class="preview-dialog">
|
<button @click="closePreviewDialog('doc')" class="close-button">关闭</button>
|
<div :id="pageMarkerfun+'-doc'" style="overflow: auto; width: 100%; height: 90%;"></div>
|
<div class="file-name">{{ docName }}</div>
|
</div>
|
<div v-show="isOpenPdfPreviewDialog" class="preview-dialog">
|
<button @click="closePreviewDialog('pdf')" class="close-button">关闭</button>
|
<iframe :id="pageMarkerfun+'-pdf'" src="" style="margin:0;padding:0;width:100%;height:90%;"></iframe>
|
<div class="file-name">{{ pdfName }}</div>
|
</div>
|
<div v-show="isOpenImgPreviewDialog" class="preview-dialog">
|
<button @click="closePreviewDialog('img')" class="close-button">关闭</button>
|
<img :id="pageMarkerfun+'-img'" src="" style="margin:0;padding:0;width:100%;height:90%;">
|
<div class="file-name">{{ imgName }}</div>
|
</div>
|
<div v-show="isOpenXlsPreviewDialog" class="preview-dialog">
|
<button @click="closePreviewDialog('xls')" class="close-button">关闭</button>
|
<div :id="pageMarkerfun+'-xls'" style="margin:0;padding:0;width:100%;height:90%;"></div>
|
<div class="file-name">{{ xlsName }}</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {setAccessoryFormatComm} from '@/commonJS/commonFile'
|
import {setAccessoryFormatSingle} from '@/commonJS/commonFile'
|
import {setAccessoryFormatByForm} from '@/commonJS/commonFile'
|
export default {
|
name:'ViewAccessory',
|
props: {
|
pageMarkerfun: {
|
default: ''
|
}
|
},
|
data() {
|
return {
|
isOpenDocPreviewDialog: false,
|
isOpenPdfPreviewDialog: false,
|
isOpenImgPreviewDialog: false,
|
isOpenXlsPreviewDialog: false,
|
docName: '',
|
pdfName: '',
|
imgName: '',
|
xlsName: ''
|
}
|
},
|
created() {
|
this.$EventBus.$on(this.pageMarkerfun+'-doc', () => {
|
this.isOpenDocPreviewDialog = true
|
})
|
this.$EventBus.$on(this.pageMarkerfun +'-pdf', () => {
|
this.isOpenPdfPreviewDialog = true
|
})
|
this.$EventBus.$on(this.pageMarkerfun +'-img', () => {
|
this.isOpenImgPreviewDialog = true
|
})
|
this.$EventBus.$on(this.pageMarkerfun +'-xls', () => {
|
this.isOpenXlsPreviewDialog = true
|
})
|
},
|
methods: {
|
openAccessoryFormatComm(row) {
|
console.log(row, 'setAccessoryFormatSingle(row)');
|
return setAccessoryFormatComm(row, this.pageMarkerfun, this)
|
},
|
openAccessoryFormatSingle(row) {
|
console.log(row, 'setAccessoryFormatSingle(row)');
|
return setAccessoryFormatSingle(row, this.pageMarkerfun, this)
|
},
|
openAccessoryFormatByForm(row) {
|
console.log(row, 'setAccessoryFormatSingle(row)');
|
return setAccessoryFormatByForm(row, this.pageMarkerfun, this)
|
},
|
|
closePreviewDialog(file) {
|
if (file == 'doc') {
|
this.docName = ''
|
this.isOpenDocPreviewDialog = false // 关闭弹窗
|
const docElement = document.getElementById(this.pageMarkerfun +'-doc')
|
docElement.innerHTML = ''
|
} else if (file == 'pdf') {
|
this.pdfName = ''
|
this.isOpenPdfPreviewDialog = false;
|
let iframe = document.getElementById(this.pageMarkerfun +'-pdf')
|
iframe.src = ''
|
} else if (file == 'img') {
|
this.imgName = '';
|
this.isOpenImgPreviewDialog = false;
|
let img = document.getElementById(this.pageMarkerfun +'-img')
|
img.src = ''
|
} else if (file == 'xls') {
|
this.xlsName = ''
|
this.isOpenXlsPreviewDialog = false;
|
let excelElement = document.getElementById(this.pageMarkerfun+'-xls')
|
excelElement.innerHTML = ''
|
}
|
}
|
}
|
}
|
</script>
|
<style>
|
/* 弹窗样式 */
|
.preview-dialog {
|
z-index: 100;
|
width: 1200px;
|
height: 700px;
|
position: fixed;
|
top: 120px;
|
right: 10px;
|
background: gray;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
}
|
.close-button {
|
position: absolute;
|
top: 10px;
|
right: 10px;
|
border: none;
|
font-size: 18px;
|
color: snow;
|
cursor: pointer;
|
background: #062944;
|
}
|
|
.file-name {
|
position: absolute;
|
top: 10px;
|
left: 50%;
|
transform: translateX(-50%);
|
border: none;
|
font-size: 18px;
|
color: snow;
|
cursor: pointer;
|
background: #062944;
|
}
|
|
img {
|
object-fit: contain;
|
}
|
</style>
|
