JeecgPdfView.vue
3.43 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<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: "/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>