xujiecloud-vue/src/views/modules/common/file-list-view.vue

<template>
  <div class="mod-oss">
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="800px"
      :append-to-body="true">
      <el-form :inline="true" >
        <el-form-item>
          <el-input v-model="fileMappingDto.fileName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getDataList()">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="dataList"
        border
        :height="tableHeight"
        v-loading="dataListLoading"
        style="width: 100%;">
        <el-table-column
          prop="fileName"
          header-align="center"
          align="left"
          label="文件名">
        </el-table-column>
        <el-table-column
          prop="createdBy"
          header-align="center"
          align="left"
          width="180"
          label="创建人">
        </el-table-column>
        <el-table-column
          prop="createDate"
          header-align="center"
          align="left"
          width="180"
          label="创建时间">
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          label="操作">
          <template slot-scope="scope">
            <a @click="fileDownload(scope.row)">下载</a>
            <a @click="filePreview(scope.row)" v-if="showPreview(scope.row)">预览</a>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog append-to-body v-if="pdfVisible" title="预览" :visible.sync="pdfVisible" center width="60%">
      <iframe :src="this.pdfUrl" frameborder="0" width="100%" :height="height"></iframe>
    </el-dialog>

  </div>
</template>

<script>

import axios from "axios";
import Vue from "vue";

export default {
  data() {
    return {
      menuId: '',
      height: '',
      title: '',
      uploadShow: false,
      tableHeight: 365,
      visible: false,
      pdfUrl: '',
      pdfVisible: false,
      dataForm: {
        fileName: ''
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 200,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      configVisible: false,
      uploadVisible: false,
      fileMappingDto: {
        fileId: '',
        fileType: '',
        orderRef1: '',
        orderRef2: '',
        orderRef3: '',
      }
    }
  },
  components: {
  },
  mounted() {
    this.$nextTick(() => {
      this.height = (window.innerHeight*0.82);
    })
  },
  activated() {
    this.getDataList()
  },
  methods: {
    // 是否能预览
    showPreview(val){
      if (val.fileSuffix=='jpg' || val.fileSuffix=='png' || val.fileSuffix=='gif' || val.fileSuffix=='pdf' ){
        return true
      }
      return false
    },
    // 初始化
    init(val) {
      this.fileMappingDto = val
      this.title = val.fileType
      if (val.fileType == '功能帮助文档'){
        this.title = this.title+" - "+this.$route.meta.title
      }
      this.visible = true
      this.getDataList()
    },
    // 预览
    filePreview(row) {
      this.pdfVisible = true
      this.pdfUrl = '/file/' + row.newFileName
    },
    // 文件下载
    fileDownload(row) {
      axios.get('/ftp/file/downFtpFile/' + row.id, {
        responseType: 'blob',
        headers: {
          'Content-Type': 'application/json',
          'token': Vue.cookie.get('token')
        }
      }).then(({data}) => {
        // 不限制文件下载类型
        const blob = new Blob([data], {type: "application/octet-stream"})
        // 下载文件名称
        const fileName = row.fileName
        // a标签下载
        const linkNode = document.createElement('a')
        linkNode.download = fileName // a标签的download属性规定下载文件的名称
        linkNode.style.display = 'none'
        linkNode.href = URL.createObjectURL(blob) // 生成一个Blob URL
        // if(val == 'Y'){
        //   this.pdfVisible = true
        //   this.pdfUrl = linkNode.href
        // }else {
        document.body.appendChild(linkNode)
        linkNode.click() // 模拟在按钮上的一次鼠标单击
        URL.revokeObjectURL(linkNode.href) // 释放URL 对象
        document.body.removeChild(linkNode)
        // }
      })
    },

    downloadFile(fileName, data) {
      if (!data) {
        return;
      }
      let url = window.URL.createObjectURL(new Blob([data]));
      let link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;
      link.setAttribute('download', fileName);
      document.body.appendChild(link);
      link.click();
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/sys/oss/list'),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize,
          'fileName': this.fileMappingDto.fileName,
          'fileType': this.fileMappingDto.fileType,
          'orderRef1': this.fileMappingDto.orderRef1,
          'orderRef2': this.fileMappingDto.orderRef2,
          'orderRef3': this.fileMappingDto.orderRef3,
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
  }
}
</script>