wisdomcity-office/src/components/file_detail/index.vue

<!--
 * @Author: ChenYaJin
 * @Date: 2021-06-07 17:46:34
 * @LastEditors: LiZhiWei
 * @LastEditTime: 2025-04-16 10:20:31
 * @Description: 文件柜-文件详情
-->
<template>
  <div>
    <div class="detail-box">
      <header class="header-box">
        <span class="title">文件信息</span>
      </header>
      <div class="content-box" v-loading="loading || loadingFile">
        <div class="info-item">
          <i class="el-icon-document"></i>
          <div class="info-content">
            <div class="label">文件名</div>
            <div class="value">{{fileDetail.name || '-'}}</div>
          </div>
        </div>
        <div class="info-item">
          <i class="el-icon-tickets"></i>
          <div class="info-content">
            <div class="label">文件类型</div>
            <div class="value">{{fileDetail.type || '-'}}</div>
          </div>
        </div>
        <div class="info-item">
          <i class="el-icon-files"></i>
          <div class="info-content">
            <div class="label">文件大小</div>
            <div class="value">{{getFileSize || '-'}}</div>
          </div>
        </div>
      </div>
      <div class="operation-footer">
        <el-button 
          type="success" 
          @click="onDownload" 
          :loading="downloadLoading" 
          v-hasAuth="'FileDownload'"
          icon="el-icon-download">
          下载
        </el-button>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>

</style>
<script>
import { mapActions, mapState } from 'vuex'
import { debounce } from 'lodash-es'

import { downloadWithProgress } from '../../ libs/util'
import commJs from '../../comm_js/index'
import { downloadFile } from '../../ libs/file'

// import EditFileModal from '../../components/file_list/modal/edit_file'
// import PasswordConfirmModal from '../password_confirm'

export default {
  name: 'FileDetailModal',
  components: {
    // PasswordConfirmModal,
    // EditFileModal
  },
  props: {
    id: {
      type: String,
      default: null
    },
    showClose: {
      type: Boolean,
      default: false
    },
    file: {
      type: Object,
      default: () => {
        return {}
      }
    },
    loadingFile: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      fileDetail: {},
      fileInfo: {
        isShow: false,
        row: this.file
      },
      passwordConfirmInfo: {
        isShow: false,
        id: '',
        okType: 'danger',
        tips: '',
        row: {}
      },
      loading: false,
      downloadLoading: false,
      deleteLoading: false
    }
  },
  computed: {
    ...mapState({
      directoryTree: state => state.fileManage.directoryTree
    }),
    getSecretLevel () {
      return this.file.secretLevel === 'secret' ? '机密' : '普通'
    },
    getFileSize () {
      return commJs.fileSizeFormat(this.file.size, 'KB')
    }
  },
  watch: {
    'file': {
      handler (value) {
        if (value) {
          this.fileDetail = JSON.parse(JSON.stringify(value))
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    ...mapActions('fileManage', ['getFileDetail', 'deleteFile']),
    updateSuccess () {
      this.$emit('updateSuccess')
      this.getFileDetailFun()
    },
    getFileDetailFun () {
      if (!this.id) {
        return
      }
      this.loading = true
      this.getFileDetail(this.id)
        .then(res => {
          this.fileDetail = res
          const stringArr = commJs.getParentList(this.directoryTree, res.cabinetDirectoryId)
          this.fileDetail.directoryName = stringArr.join('/')
        })
        .finally(_ => {
          this.loading = false
        })
    },
    handleClose () {
      this.$emit('close')
    },
    toEdit () {
      this.fileInfo.isShow = true
      this.fileInfo.row = JSON.parse(JSON.stringify(this.fileDetail))
    },
    onClose () {
      this.fileInfo.isShow = false
      this.passwordConfirmInfo.isShow = false
    },
    onDownload () {
      if (this.fileDetail.secretLevel === 'secret') {
        this.passwordConfirmInfo = {
          isShow: true,
          type: 'download',
          okType: 'warning',
          tips: '为防止他人恶意下载导致文件泄露，请输入登录密码确认后再批量下载。下载后，请勿随意传播，如因个人传播泄密导致公司利益受损，将追求个人的法律责任。',
          row: this.fileDetail
        }
      } else {
        this.downloadFileFun2(this.fileDetail.url)
      }
    },
    downloadFileFun: debounce(function (fileId) {
      this.downloadLoading = true
      const { name, type, size } = this.fileDetail
      const url = `serve/cabinetFile/download/${fileId}`
      const fileInfo = { name: name + '.' + type, size: size }
      downloadWithProgress(url, this, 'downloadLoading', fileInfo)
    }, 500),
    downloadFileFun2 :debounce(function (url) {
      this.downloadLoading = true
      const { name, type, size } = this.fileDetail
      const fileInfo = { name: name + '.' + type, size: size }
      downloadWithProgress(url, this, 'downloadLoading', fileInfo)
    }, 500),
    onDeleteFile () {
      if (this.fileDetail.secretLevel === 'secret') {
        this.passwordConfirmInfo = {
          isShow: true,
          type: 'delete',
          okType: 'danger',
          tips: '删除后不可查看或下载，为防止他人恶意操作，请输入账登录密码确认删除。',
          row: this.fileDetail
        }
      } else {
        this.$confirm(
          '删除后不可查看或下载，请谨慎操作！',
          '确认删除文件？',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
          .then(_ => {
            this.deleteFileFun()
          })
      }
    },
    deleteFileFun (id) {
      this.deleteLoading = true
      this.deleteFile(this.fileDetail.id)
        .then(res => {
          this.$message.success('删除文件成功')
          this.passwordConfirmInfo.isShow = false
          this.back()
        })
        .finally(_ => {
          this.deleteLoading = false
        })
    },
    back () {
      this.$emit('back', true) // 返回需要刷新数据
    }
  }
}
</script>
<style lang="less">
@import './index.less';
.detail-box {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  
  .header-box {
    padding: 20px;
    border-bottom: 1px solid #ebeef5;
    
    .title {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
      position: relative;
      padding-left: 12px;
      
    //   &::before {
    //     content: '';
    //     position: absolute;
    //     left: 0;
    //     top: 50%;
    //     transform: translateY(-50%);
    //     width: 4px;
    //     height: 16px;
    //     background: #409eff;
    //     border-radius: 2px;
    //   }
    }
  }
  
  .content-box {
    padding: 20px;
    min-height: 200px;
    
    .info-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 24px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      i {
        font-size: 20px;
        color: #409eff;
        margin-right: 12px;
        margin-top: 2px;
      }
      
      .info-content {
        flex: 1;
        
        .label {
          font-size: 14px;
          color: #909399;
          margin-bottom: 8px;
        }
        
        .value {
          font-size: 14px;
          color: #303133;
          word-break: break-all;
          line-height: 1.4;
        }
      }
    }
  }
  
  .operation-footer {
    border-top: 1px solid #ebeef5;
     .el-button {
      padding: 9px 20px;
      
      [class^="el-icon-"] {
        margin-right: 4px;
      }
    }
  }
}

.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
}
</style>