laws-sinotruk-client/src/components/FileEcho.vue

<template>
  <div>
    <template v-if="fileList && fileList.length > 0">
      <div class="file" :class="{'operate-right': operateFixedRight}" v-for="file in fileList" :key="file.id">
        <div class="file-info">
          <a-icon type="link" />
          <div class="file-name" @click="handlePreview(file)">{{ file.fileName }}</div>
        </div>
        <div class="file-operate">
          <!--                下载-->
          <a-button type="link" icon="download" @click="handleDownload(file)">{{ $t('download') }}</a-button>
        </div>
      </div>
    </template>

    <div id="images">
      <div class="image" v-viewer="{movable: false}">
        <img v-show="image" :src="imageUrl" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import { getFileInfo } from '../api/api.js'
import Vue from 'vue'
import { ACCESS_TOKEN } from '../store/mutation-types.js'
import { downloadFile, getFileAccessHttpUrl } from '../api/manage.js'
import { previewPdf } from '../utils/previewPdf.js'
import { Base64 } from 'js-base64'

const FILE_TYPE_IMGS = ['jpg', 'jpeg', 'png', 'raw']
const FILE_TYPE_PDF = 'pdf'

export default {
  name: 'FileEcho',
  props: {
    // 文件id
    fileIds: {
      type: String,
      required: false,
      default: null
    },
    // 操作按钮固定在右侧
    operateFixedRight: {
      type: Boolean,
      required: false,
      default: true
    }
  },
  watch: {
    fileIds (value) {
      if (value) {
        this.getFileList()
      }
    }
  },
  data () {
    return {
      fileList: [],
      image: false,
      imageUrl: null
    }
  },
  methods: {
    getFileList () {
      const fileIdsList = this.fileIds.split(',')
      for (let i = 0; i < fileIdsList.length; i++) {
        const id = fileIdsList[i]
        getFileInfo({ id }).then(res => {
          if (res.success) {
            this.fileList.push(res.result)
          }
        })
      }
    },
    handlePreview (file) {
      if (!file || !file.url) {
        return
      }
      // 截取文件后缀名
      const fileSuffix = file.fileName ? file.fileName.split('.')[file.fileName.split('.').length - 1] : ''
      const canPreview = FILE_TYPE_IMGS.some(tt => fileSuffix.toLowerCase() === tt) || fileSuffix.toLowerCase() === FILE_TYPE_PDF
      // 判断是否为可预览格式的文件
      if (!canPreview) {
        this.$message.loading('该文件类型不支持预览，正在为您准备下载...').then(() => {
          this.handleDownload(file)
        })
        return
      }
      const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/download/${file.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.fileName}`
      // 图片预览，使用自己添加的组件
      if (canPreview && FILE_TYPE_IMGS.includes(fileSuffix.toLowerCase())) {
        this.imageUrl = getFileAccessHttpUrl(file.id)
        // 获取viewer实例
        const viewer = this.$el.querySelector('.image').$viewer
        // 调用show方法进行显示预览图
        viewer.show()
        // this.$refs.imagePreviewModal.open(file)
        return
      }
      // pdf预览
      if (canPreview && FILE_TYPE_PDF.includes(fileSuffix)) {
        const url = previewPdf(file.id)
        window.open(url)
        return
      }
      // 其余可预览文件仍使用KKFile进行预览
      const url = `${window._CONFIG.onlinePreviewDomainURL}?url=${encodeURIComponent(Base64.encode(fileFullUrl))}`
      window.open(url)
    },
    /**
     * 单个文件的下载功能
     * @param file
     */
    handleDownload (file) {
      // 下载文件
      downloadFile(`/sys/common/download/${file.id}`, file.fileName)
    }
  }
}
</script>

<style scoped lang="less">
.operate-right {
  justify-content: space-between;

  .file-info {
    flex: 1;
    width: 0;
  }

  .file-name {
    flex: 1;
    width: 0;
  }
}

.file {
  display: flex;
  align-items: center;
}

.file:last-child {
  margin-bottom: 0;
}

.file-info {
  display: flex;
  align-items: center;
  color: @primary-color;
  cursor: pointer;
  max-width: calc(100% - 97px);
}

.file-info > .anticon {
  margin-right: 8px;
}

.file-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-operate {
  .ant-btn > .anticon + span, .ant-btn > .iconfont + span {
    margin-left: 10px;
  }

  .ant-btn:first-child {
    margin-left: 15px;
  }
}
</style>