JEECG-BOOT 2.0.2版本发布

ant-design-vue-jeecg/src/views/jeecg/JeecgPdfView.vue

@@ -0,0 +1,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>