<template>
|
<a-card :bordered="false">
|
<a-row>
|
<!-- 左侧文件树 -->
|
<a-col :span="4" class="clName">
|
<a-tree :treeData="treeData" :defaultExpandAll="true" @select="onSelect" style="height: 500px; overflow-y: auto"> </a-tree>
|
</a-col>
|
<!--右侧缩略图-->
|
<a-col :span="18">
|
<div v-for="(file, key) in dataSource" :key="key">
|
<a-col :span="24">
|
<a-divider orientation="left">{{ file.fileName }}</a-divider>
|
</a-col>
|
<!-- 预览区域 -->
|
<a-col :span="24">
|
<template v-if="file.filePdfPath">
|
<div @click="pdfPreview(file.title)">
|
<img style="width: 80px; height: 80px" src="../../../assets/images/pdf4.jpg" />
|
</div>
|
</template>
|
<template v-else> (暂无材料，点击"选择文件"或"扫描上传"上传文件) </template>
|
</a-col>
|
</div>
|
</a-col>
|
</a-row>
|
<div style="display: none">
|
<iframe id="pdfPreviewIframe" :src="url" frameborder="0" width="100%" height="550px" scrolling="auto"></iframe>
|
</div>
|
</a-card>
|
</template>
|
|
<script lang="ts">
|
import { defineComponent, ref, unref, onMounted } from 'vue';
|
import { useGlobSetting } from '/@/hooks/setting';
|
import { getToken } from '/@/utils/auth';
|
|
const mockdata = [
|
{
|
id: '1',
|
key: '1',
|
title: '实例.pdf',
|
fileCode: 'shili',
|
fileName: '实例',
|
filePdfPath: '实例',
|
},
|
];
|
|
export default defineComponent({
|
name: 'JeecgPdfView',
|
setup() {
|
const glob = useGlobSetting();
|
const treeData = ref([
|
{
|
title: '所有PDF电子档',
|
key: '0-0',
|
children: mockdata,
|
},
|
]);
|
const dataSource = ref(mockdata);
|
const allData = ref(mockdata);
|
const url = ref(`${glob.domainUrl}/sys/common/pdf/pdfPreviewIframe`);
|
|
/**
|
* 打开iframe窗口
|
* @param title
|
*/
|
function pdfPreview(title) {
|
let iframe = document.getElementById('pdfPreviewIframe');
|
let json = { title: title, token: getToken() };
|
iframe.contentWindow.postMessage(json, '*');
|
}
|
|
// 选择PDF文件
|
function onSelect(selectedKeys, info) {
|
dataSource.value = [];
|
if (selectedKeys[0] === undefined || selectedKeys[0] === '0-0') {
|
dataSource.value = unref(allData);
|
} else {
|
dataSource.value.push(info.node.dataRef);
|
}
|
}
|
|
return {
|
url,
|
dataSource,
|
treeData,
|
allData,
|
onSelect,
|
pdfPreview,
|
};
|
},
|
});
|
</script>
|
