boying-vue/src/views/modules/qc/QCReportFileTable.vue

<script>
import {downLoadObjectFile} from '@/api/eam/eam_object_list.js'
export default {
  name: "qcReportFileTable",
  props:{
    dataList:{
      type:Array,
      required:true
    },
    queryLoading:{
      type:Boolean,
      default:false,
    },
    columns:{
      type:Array,
      required: true,
    }
  },
  methods: {
    // 预览
    previewFile (row) {
      const fileName = row.fileName || row.fileType
      downLoadObjectFile(row).then(({data}) => {
        this.$filePreview.previewFile(data, fileName).then(result => {
          if (result.message) {
            this.$message.success(result.message)
          }
        }).catch(error => {
          this.$message.error('文件预览失败：' + (error.message || '未知错误'))
        })
      }).catch(() => {
        this.$message.error('文件下载失败，请稍后重试')
      })
    },

    // 文件下载
    downloadFile (row) {
      downLoadObjectFile(row)
        .then(({data}) => {
          // 不限制文件下载类型
          const blob = new Blob([data], {type: "application/octet-stream"})
          // 下载文件名称
          const fileName = row.fileName
          // a标签下载
          const linkNode = document.createElement('a')
          // a标签的download属性规定下载文件的名称
          linkNode.download = fileName
          linkNode.style.display = 'none'
          // 生成一个Blob URL
          linkNode.href = URL.createObjectURL(blob)
          document.body.appendChild(linkNode)
          // 模拟在按钮上的一次鼠标单击
          linkNode.click()
          // 释放URL 对象
          URL.revokeObjectURL(linkNode.href)
          document.body.removeChild(linkNode)
        })
    },

  }
}
</script>

<template>
  <el-table
    :height="350"
    :data="dataList"
    border
    v-loading="queryLoading"
    element-loading-text="拼命加载中"
    style="width: 100%; ">
    <el-table-column
      v-for="(item,index) in columns" :key="index"
      :sortable="item.columnSortable"
      :prop="item.columnProp"
      :header-align="item.headerAlign"
      :show-overflow-tooltip="item.showOverflowTooltip"
      :align="item.align"
      :fixed="item.fixed===''?false:item.fixed"
      :min-width="item.columnWidth"
      :label="item.columnLabel">
      <template slot-scope="scope">
        <span v-if="!item.columnHidden">{{scope.row[item.columnProp]}}</span>
        <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span>
      </template>
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      width="100"
      label="操作">
      <template slot-scope="scope">
        <el-link style="cursor: pointer" @click="previewFile(scope.row)">预览</el-link>
        <el-link style="cursor: pointer" @click="downloadFile(scope.row)">下载</el-link>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped>

</style>