rmLayGaoujU9O46l603ccl_plm-vue/src/views/modules/common/file-list.vue

<template>
  <div class="mod-oss">
    <el-dialog
      title="帮助文档"
      :visible.sync="visible"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      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 @click="getDataList()">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fileUploadInit">上传<i class="el-icon-upload el-icon--right"></i></el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="dataList"
        border
        :height="tableHeight"
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <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 type="text" size="small" @click="deleteHandle(scope.row.id)">删除</a>
            <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 style="margin-top: -10vh"  append-to-body v-if="pdfVisible" title="预览" :visible.sync="pdfVisible" center width="80%">
      <iframe :src="this.pdfUrl" frameborder="0" width="100%" :height="height"></iframe>
    </el-dialog>
    <FileUpload v-if="uploadShow" ref="fileUpload" @refreshDataList="getDataList"></FileUpload>

  </div>
</template>

<script>

import FileUpload from './file-upload.vue'
import axios from "axios";
import Vue from "vue";

export default {
  data() {
    return {
      menuId: '',
      height: '',
      uploadShow: false,
      tableHeight: 365,
      visible: false,
      pdfUrl: '',
      pdfVisible: false,
      dataForm: {
        fileName: ''
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 9999,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      configVisible: false,
      uploadVisible: false,
      fileMappingDto: {
        fileId: '',
        fileTypeCode: '',
        orderRef1: '',
        orderRef2: '',
        orderRef3: '',
      }
    }
  },
  components: {
    FileUpload
  },
  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
    },
    //上传
    fileUploadInit() {
      this.uploadShow = true
      this.$nextTick(() => {
        this.$refs.fileUpload.init(this.fileMappingDto)
      })
    },
    // 初始化
    init(val) {
      this.fileMappingDto = val
      this.visible = true
      this.getDataList()
    },
    // 预览
    filePreview(row) {
      this.pdfVisible = true
      this.pdfUrl = '/file/' + row.newFileName
    },
    // 文件下载
    fileDownload(row) {
      axios.get('/api/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,
          'fileTypeCode': this.fileMappingDto.fileTypeCode,
          '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()
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },
    // 删除
    deleteHandle(id) {
      var ids = id ? [id] : this.dataListSelections.map(item => {
        return item.id
      })
      this.$confirm(`确定进行删除操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/sys/oss/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message.success('操作成功')
            this.getDataList()
          } else {
            this.$message.error(data.msg)
          }
        })
      }).catch(() => {
      })
    }
  }
}
</script>