school-developer/src/views/purchase/purchasingrequisition/FileArchiveDialog.vue

<template>
  <el-dialog
    v-model="visible"
    title="文件归档"
    width="900px"
    destroy-on-close
    append-to-body
  >
    <template #header>
      <div class="dialog-header">
        <span class="dialog-title">
          <el-icon><FolderOpened /></el-icon>
          文件归档 - {{ purchaseNo || purchaseId }}
        </span>
        <el-button
          type="primary"
          :loading="downloading"
          @click="handleDownloadAll"
        >
          <el-icon><Download /></el-icon>
          下载全部文件
        </el-button>
      </div>
    </template>

    <el-table
      v-loading="loading"
      :data="fileList"
      stripe
      border
      max-height="500px"
      class="file-table"
    >
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="fileTitle" label="文件名称" min-width="220" show-overflow-tooltip>
        <template #default="{ row }">
          <div class="file-name">
            <el-icon class="file-icon"><Document /></el-icon>
            <span>{{ row.fileTitle }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="fileTypeDesc" label="文件类型" width="160" align="center">
        <template #default="{ row }">
          <el-tag type="info">{{ row.fileTypeDesc || '未知类型' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" align="center" fixed="right">
        <template #default="{ row }">
          <el-button
            type="primary"
            link
            icon="View"
            @click="handlePreview(row)"
          >
            预览
          </el-button>
          <el-button
            type="primary"
            link
            icon="Download"
            @click="handleDownloadFile(row)"
          >
            下载
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div v-if="!loading && fileList.length === 0" class="empty-tip">
      <el-empty description="暂无文件" />
    </div>

    <template #footer>
      <el-button @click="visible = false">关闭</el-button>
    </template>
  </el-dialog>

  <!-- PDF预览弹窗 -->
  <el-dialog
    v-model="previewVisible"
    title="文件预览"
    width="90%"
    top="5vh"
    destroy-on-close
    append-to-body
    class="preview-dialog"
  >
    <div class="preview-container">
      <iframe
        v-if="previewUrl"
        :src="previewUrl"
        class="preview-iframe"
        frameborder="0"
      />
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, onUnmounted } from 'vue'
import { FolderOpened, Download, Document } from '@element-plus/icons-vue'
import { useMessage } from '/@/hooks/message'
import { listDownloadUrls, getArchiveDownloadUrl, downloadFileById, previewFileById } from '/@/api/purchase/purchasingrequisition'
import other from '/@/utils/other'

interface FileItem {
  id: string
  fileTitle: string
  fileType: string
  fileTypeDesc: string
  downloadUrl: string
}

const visible = ref(false)
const loading = ref(false)
const downloading = ref(false)
const previewVisible = ref(false)
const previewUrl = ref('')
const previewLoading = ref(false)
const purchaseId = ref('')
const purchaseNo = ref('')
const fileList = ref<FileItem[]>([])

const open = async (id: string, no?: string) => {
  purchaseId.value = id || ''
  purchaseNo.value = no || ''
  visible.value = true
  await loadFileList()
}

const loadFileList = async () => {
  if (!purchaseId.value) {
    useMessage().warning('无法获取采购申请ID')
    return
  }
  loading.value = true
  try {
    const res = await listDownloadUrls(purchaseId.value)
    if (res && res.data) {
      fileList.value = res.data as FileItem[]
    } else {
      fileList.value = []
    }
  } catch (err: any) {
    useMessage().error(err?.msg || '获取文件列表失败')
    fileList.value = []
  } finally {
    loading.value = false
  }
}

const isPdfFile = (fileName: string): boolean => {
  if (!fileName) return false
  const ext = fileName.toLowerCase().split('.').pop()
  return ext === 'pdf'
}

const handlePreview = async (row: FileItem) => {
  if (!row.id) {
    useMessage().warning('文件ID不存在')
    return
  }

  if (!isPdfFile(row.fileTitle)) {
    useMessage().info('仅支持PDF格式文件预览，将为您下载文件')
    handleDownloadFile(row)
    return
  }

  previewLoading.value = true
  previewVisible.value = true
  previewUrl.value = ''

  try {
    const res = await previewFileById(row.id)
    const blob = res as unknown as Blob
    const url = window.URL.createObjectURL(blob)
    previewUrl.value = url
  } catch (err: any) {
    useMessage().error(err?.msg || '预览失败')
    previewVisible.value = false
  } finally {
    previewLoading.value = false
  }
}

const handleDownloadFile = async (row: FileItem) => {
  if (!row.id) {
    useMessage().warning('文件ID不存在')
    return
  }
  try {
    const res = await downloadFileById(row.id)
    const blob = res as unknown as Blob
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = row.fileTitle || 'download'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)
  } catch (err: any) {
    useMessage().error(err?.msg || '下载失败')
  }
}

const handleDownloadAll = () => {
  if (!purchaseId.value) {
    useMessage().warning('无法获取采购申请ID')
    return
  }
  downloading.value = true
  try {
    const url = getArchiveDownloadUrl(purchaseId.value)
    const fileName = `归档_${purchaseNo.value || purchaseId.value}.zip`
    other.downBlobFile(url, {}, fileName)
  } finally {
    setTimeout(() => {
      downloading.value = false
    }, 500)
  }
}

onUnmounted(() => {
  if (previewUrl.value) {
    window.URL.revokeObjectURL(previewUrl.value)
  }
})

defineExpose({
  open
})
</script>

<style scoped lang="scss">
.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.dialog-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
}

.file-table {
  width: 100%;
}

.file-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-icon {
  color: #409eff;
}

.empty-tip {
  padding: 40px 0;
}

.preview-container {
  width: 100%;
  height: calc(90vh - 120px);
}

.preview-iframe {
  width: 100%;
  height: 100%;
}
</style>