ha-mes-vue/src/views/modules/qc/SQCFileTable.vue

<script>
import {downLoadObjectFile, downLoadObjectFileMes} from '@/api/eam/eam_object_list.js'
import {deleteObjectFile} from '@/api/eam/eam.js'
export default {
  name: "sqcFileTable",
  props:{
    dataList:{
      type:Array,
      required:true
    },
    queryLoading:{
      type:Boolean,
      default:false,
    },
    columns:{
      type:Array,
      required: true,
    }
  },
  methods: {
    // 预览
    previewFile (row) {
      // 预览文件
      let image = ['jpg', 'jpeg', 'png', 'gif', 'bmp']
      let type = ''
      if (image.includes(row.fileType.toLowerCase())) {
        type = 'image/' + row.fileType
      }
      let video = ['mp4', 'avi', 'mov', 'wmv', 'flv']
      if (video.includes(row.fileType.toLowerCase())) {
        type = 'video/' + row.fileType
      }
      let txt = ['txt']
      if (txt.includes(row.fileType.toLowerCase())) {
        type = 'text/plain'
      }
      let office = ['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx']
      if (office.includes(row.fileType.toLowerCase())) {
        this.$message.warning(`暂不支持预览${row.fileType.toLowerCase()}文件`)
        return
      }
      let pdf = ['pdf']
      if (pdf.includes(row.fileType.toLowerCase())) {
        type = 'application/pdf'
      }
      if (type === ''){
        this.$message.warning(`暂不支持预览${row.fileType.toLowerCase()}文件`)
        return;
      }
      downLoadObjectFile(row).then(({data}) => {
        const type = 'text/plain;charset=utf-8'; // 指定编码
        const blob = new Blob([data], { type });
        const reader = new FileReader();
        reader.onload = function(e) {
          const content = e.target.result;
          // 新窗口展示内容
          const newTab = window.open();
          newTab.document.write('<pre>' + content + '</pre>');
        };
        reader.readAsText(blob, 'utf-8');
      })
    },

    // 预览
    previewFileMes (row) {
      // 预览文件
      let image = ['jpg', 'jpeg', 'png', 'gif', 'bmp']
      let type = ''
      if (image.includes(row.fileType.toLowerCase())) {
        type = 'image/' + row.fileType
      }
      let video = ['mp4', 'avi', 'mov', 'wmv', 'flv']
      if (video.includes(row.fileType.toLowerCase())) {
        type = 'video/' + row.fileType
      }
      let txt = ['txt']
      if (txt.includes(row.fileType.toLowerCase())) {
        type = 'text/plain'
      }
      let office = ['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx']
      if (office.includes(row.fileType.toLowerCase())) {
        this.$message.warning(`暂不支持预览${row.fileType.toLowerCase()}文件`)
        return
      }
      let pdf = ['pdf']
      if (pdf.includes(row.fileType.toLowerCase())) {
        type = 'application/pdf'
      }
      if (type === ''){
        this.$message.warning(`暂不支持预览${row.fileType.toLowerCase()}文件`)
        return;
      }
      downLoadObjectFileMes(row).then(({data}) => {
        const blob = new Blob([data], { type: type });
        // 创建URL来生成预览
        const fileURL = URL.createObjectURL(blob);
        // 在新标签页中打开文件预览
        window.open(fileURL, '_blank')
      })
    },

    // 文件下载
    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)
        })
    },

    // 文件下载
    downloadFileMes (row) {
      downLoadObjectFileMes(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)
        })
    },

    // 删除文件
    deleteFile (row) {
      this.$confirm('确定要删除此文件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteObjectFile(row).then(({data}) => {
          if (data && data.code == 0) {
            this.$emit('refresh')
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {}
            })
          } else {
            this.$alert(data.msg, '错误', {
              confirmButtonText: '确定'
            })
          }
        })
      }).catch(() => {
      })
    },
  }
}
</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 v-if="scope.row.orderReftype !== 'mes'" style="cursor: pointer" @click="previewFile(scope.row)">预览</el-link>
        <el-link v-if="scope.row.orderReftype !== 'mes'" style="cursor: pointer" @click="downloadFile(scope.row)">下载</el-link>
        <el-link v-if="scope.row.orderReftype !== 'mes'" style="cursor: pointer" @click="deleteFile(scope.row)">删除</el-link>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped>

</style>