<template> <a-card :bordered="false"> <!-- 左侧文件树 --> <a-col :span="4" class="clName"> <a-tree :treeData="treeData" :defaultExpandAll="defaultExpandAll" @select="this.onSelect" style="height: 500px;overflow-y: auto;" > </a-tree> </a-col> <!-- 中间面板 --> <a-col :span="2"/> <!--右侧缩略图--> <a-col :span="18"> <a-spin tip="Loading..." :spinning="spinning"> <div v-for="(file, key) in dataSource" :key="key"> <a-row> <a-col :span="24"> <p> <a-divider orientation="left">{{ file.fileName }}</a-divider> </p> </a-col> <!-- 预览区域 --> <a-col :span="24"> <template v-if="file.filePdfPath"> <div style="float: left;width:104px;height:104px;margin-right: 10px;margin: 0 8px 8px 0;"> <div style="width: 100%;height: 100%;position: relative;padding: 8px;" @click="pdfPreview(file.title)"> <img style="width: 100%;" src="~@/assets/pdf4.jpg"> </div> </div> </template> <template v-else> (暂无材料,点击"选择文件"或"扫描上传"上传文件) </template> </a-col> </a-row> </div> </a-spin> </a-col> <pdf-preview-modal ref="pdfmodal"></pdf-preview-modal> </a-card> </template> <script> import {getAction} from '@/api/manage' import {ACCESS_TOKEN} from "@/store/mutation-types" import Vue from 'vue' import PdfPreviewModal from './modules/PdfPreviewModal' const mockdata = [{ "id": "1", "key": "1", "title": "实例.pdf", "fileCode": "shili", "fileName": "实例", "filePdfPath": "实例" }] export default { name: "JeecgPdfView", components: { PdfPreviewModal }, data() { return { description: 'PDF预览页面', // 文件类型集 treeData: [{ title: '所有PDF电子档', key: '0-0', children: mockdata }], // 文件数据集 dataSource: mockdata, allData: mockdata, // 上传文件集 defaultExpandAll: true, // 加载中 spinning: false, url: { pdfList: "/mock/api/pdfList", }, } }, created() { //this.loadData(); }, methods: { loadData() { this.spinning = false; getAction(this.url.pdfList).then((res) => { if (res.length > 0) { this.allData = res; this.dataSource = res; this.treeData[0].children = res; } this.spinning = false; }) }, pdfPreview: function (title) { const token = Vue.ls.get(ACCESS_TOKEN); this.headers = {"X-Access-Token": token} this.$refs.pdfmodal.previewFiles(title, token); }, // 选择文件类型 onSelect(selectedKeys, info) { this.dataSource = []; if (selectedKeys[0] === undefined || selectedKeys[0] === '0-0') { this.dataSource = this.allData; } else { this.dataSource.push(info.node._props.dataRef); } console.log("SELECT-->dataSource", this.dataSource); }, // model回调 modalFormOk() { this.loadData(); }, }, } </script> <style scoped> .clName .ant-tree li span.ant-tree-switcher, .ant-tree li span.ant-tree-iconEle { width: 10px } </style>