tool-tech-front/src/views/document/downloadFileDetail.vue

<template>
  <div class="fbox1">
    <div class="fl">
      <el-tabs v-model="detailActiveName">
        <el-tab-pane label="附件信息" name="first" v-loading="previewLoading" element-loading-text="预览转换中，请耐心等待">
          <el-table :data="attachmentList" style="width: 100%">
            <el-table-column label="序号" width="60" align="center" type="index"></el-table-column>
            <el-table-column label="附件名称" prop="fileName" :show-overflow-tooltip="true" />
            <el-table-column label="创建时间" align="center" prop="createTime" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createDate) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="180" v-if="docDetail.downloadStatus">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="handlePreview(scope.row)"
                >预览</el-button>
                <el-button type="text" icon="el-icon-download" @click="handleDownload(scope.row)" v-loading="loadingDownload">下载</el-button>
              </template>
            </el-table-column>
          </el-table><!--el-table-->
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getAttachmentList"
          />
        </el-tab-pane><!--el-tab-pane-->
      </el-tabs><!--el-tabs-->
    </div><!--fl 左侧页签-->

    <preview-util v-if="isPreviewDisable" ref="previewForm" @previewClose="previewClose" @previewLoadingClose="previewLoadingClose"></preview-util>

  </div><!--fbox1 左右分栏-->
</template>

<script>
  import previewUtil from '@/components/PreviewUtil/previewUtil.vue'
  import { listAttachment } from "@/api/attachment/attachment";
  import { addCount } from "@/api/tool/downloadCount";

  export default {
    name: 'docDetailFile',
    components: { previewUtil},
    dicts:[],
    props: {
      docDetail: {
        type: Object,
        default: {},
      }
    },
    data(){
      return{
        detailActiveName: 'first',
        attachmentList: [],
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          docId: ''
        },
        previewUrl: '',
        viewDialogTitle: "",
        viewDialogOpen: false,
        open: false,
        loadingDownload: false,
        discussionContent: null, // 评论内容
        repliesContent: null, // 回复内容
        // 评论列表
        discussionsList: [],
        // 回复列表
        repliesList: [],
        showReplyForm: [],
        replyContent: [],
        isPreviewDisable: false,
        attFileType: "zip,rar,7z",
        total: 0,
        previewLoading: false,
      }
    },
    created(){
      this.previewLoading = false
      this.getAttachmentList()
    },
    methods:{
      getAttachmentList() {
        this.loading = true;
        this.$set(this.queryParams,'del',"0")
        this.$set(this.queryParams,'businessId',this.docDetail.docId)
        listAttachment(this.queryParams).then(response => {
            this.attachmentList = response.rows;
            this.total = response.total;
            this.loading = false;
          }
        );
      },
      handlePreview(row){
        this.isPreviewDisable = true
        this.previewLoading = true
        this.$nextTick(() => {
          this.$refs.previewForm.frontModulePreview(row)
        })
      },
      /** 关闭预览 **/
      previewClose(){
        this.isPreviewDisable = false
      },
      /** 关闭预览遮罩 **/
      previewLoadingClose(){
        this.previewLoading = false
      },
      previewAuth(row){
        if(row.fileUrl == null || row.fileUrl == '' || row.fileUrl == undefined){
          return false
        }
        let extension = this.getExtension(row.fileUrl);
        const acceptedExtensions = this.attFileType.toLowerCase().split(',');
        if(acceptedExtensions.includes(extension)){
          return false
        }
        return true
      },
      getExtension(filePath) {
        // 分割字符串，以 '.' 为分隔符
        const parts = filePath.split('.');
        // 取最后一个部分作为后缀名
        const extension = parts.pop();
        return extension;
      },
      /**
       * 处理下载
       * **/
      handleDownload(row){
        let self = this
        self.loadingDownload = true
        this.$download.resource(row.fileUrl);

        //保存下载记录
        if(row.businessId){
          let formData = {
            'businessId': row.businessId,
            'businessType': 'doc',
            'attId': row.id,
            'attName': row.fileOldName
          }
          addCount(formData).then(res => {
          });
        }

        setTimeout(()=>{
          self.loadingDownload = false
        },1000)
      },
    }
  }
</script>

<style scoped>

</style>