|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<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>
|
|
20
21
22
23
24
|
<a-col :span="24">
<p>
<a-divider orientation="left">{{ file.fileName }}</a-divider>
</p>
</a-col>
|
|
25
26
27
28
|
<!-- 预览区域 -->
<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;">
|
|
29
30
|
<div style="width: 100%;height: 100%;position: relative;padding: 8px;"
@click="pdfPreview(file.title)">
|
|
31
32
33
34
35
36
37
38
39
40
41
42
|
<img style="width: 100%;" src="~@/assets/pdf4.jpg">
</div>
</div>
</template>
<template v-else>
(暂无材料,点击"选择文件"或"扫描上传"上传文件)
</template>
</a-col>
</a-row>
</div>
</a-spin>
</a-col>
|
|
43
|
<pdf-preview-modal ref="pdfmodal"></pdf-preview-modal>
|
|
44
45
46
47
48
|
</a-card>
</template>
<script>
|
|
49
50
51
52
|
import {getAction} from '@/api/manage'
import {ACCESS_TOKEN} from "@/store/mutation-types"
import Vue from 'vue'
import PdfPreviewModal from './modules/PdfPreviewModal'
|
|
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
|
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;
})
|
|
103
|
},
|
|
104
105
106
107
|
pdfPreview: function (title) {
const token = Vue.ls.get(ACCESS_TOKEN);
this.headers = {"X-Access-Token": token}
this.$refs.pdfmodal.previewFiles(title, token);
|
|
108
|
},
|
|
109
110
111
112
113
114
115
116
117
|
// 选择文件类型
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);
|
|
118
|
},
|
|
119
120
121
|
// model回调
modalFormOk() {
this.loadData();
|
|
122
|
},
|
|
123
124
|
},
}
|
|
125
126
127
|
</script>
<style scoped>
|
|
128
129
130
|
.clName .ant-tree li span.ant-tree-switcher, .ant-tree li span.ant-tree-iconEle {
width: 10px
}
|
|
131
|
</style>
|