back-server/ant-design-jeecg-vue/src/views/jeecg/JeecgPdfView.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: "/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>