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>
|
|
