122 lines
3.4 KiB
Vue
122 lines
3.4 KiB
Vue
<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> |