cbjsxt-front-master/src/views/costAudit/auditInfo/archivesManage/ArchivePreview.vue

<template>
  <div style="padding: 20px; background-color: #f9f9f9; border-radius: 4px">
    <div
      style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
      "
    >
      <div style="font-size: 16px; font-weight: 500">档案预览</div>
      <div>
        <el-button style="margin-right: 10px" @click="handlePrevStep">
          上一步
        </el-button>
        <el-button type="success" @click="handleComplete">完成</el-button>
      </div>
    </div>

    <!-- 状态提示区域 -->
    <div
      v-if="archiveStatus !== null"
      style="margin-bottom: 20px; padding: 15px; border-radius: 4px"
      :style="statusStyle"
    >
      <div style="display: flex; align-items: center">
        <i :class="statusIcon" style="font-size: 20px; margin-right: 10px"></i>
        <span style="font-size: 14px">{{ statusText }}</span>
        <span
          v-if="archiveTime && archiveStatus === '2'"
          style="margin-left: 20px; color: #909399; font-size: 12px"
        >
          生成时间：{{ archiveTime }}
        </span>
      </div>
    </div>

    <!-- 操作按钮区域 -->
    <div class="preview-actions" style="margin-bottom: 20px">
      <!-- 未生成状态：显示生成卷宗按钮 -->
      <el-button
        v-if="archiveStatus === '0'"
        type="primary"
        icon="el-icon-document-add"
        :loading="generating"
        @click="handleGenerateArchive"
      >
        生成卷宗
      </el-button>

      <!-- 已生成状态：显示预览、下载、重新生成按钮 -->
      <template v-if="archiveStatus === '2'">
        <el-button
          plain
          type="primary"
          icon="el-icon-download"
          @click="handleDownload"
        >
          下载
        </el-button>
        <el-button
          plain
          type="warning"
          icon="el-icon-refresh"
          :loading="generating"
          @click="handleRegenerate"
        >
          重新生成
        </el-button>
      </template>

      <!-- 生成失败状态：显示重新生成按钮 -->
      <el-button
        v-if="archiveStatus === '3'"
        type="danger"
        icon="el-icon-refresh"
        :loading="generating"
        @click="handleGenerateArchive"
      >
        重新生成
      </el-button>
    </div>

    <!-- 档案预览内容区域 -->
    <div
      style="
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        padding: 20px;
        background-color: #fff;
        min-height: 400px;
      "
    >
      <!-- 已生成且有URL时显示预览 -->
      <div v-if="archiveStatus === '2' && archiveUrl">
        <iframe
          :src="previewUrl"
          style="width: 100%; height: 600px; border: none"
        ></iframe>
      </div>
      <!-- 其他状态显示提示 -->
      <div v-else style="text-align: center; color: #909399; padding: 100px 0">
        <i
          :class="emptyIcon"
          style="font-size: 48px; margin-bottom: 20px; display: block"
        ></i>
        <div>{{ emptyText }}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getArchiveStatus,
    generateArchive,
    queConfirmArchive,
  } from '@/api/audit/archive'

  export default {
    name: 'ArchivePreview',
    props: {
      taskId: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        loading: false,
        generating: false,
        archiveStatus: null, // 0-未生成 1-生成中 2-已生成 3-生成失败
        archiveUrl: '',
        archiveTime: '',
        pollingTimer: null, // 轮询定时器
        pollingInterval: 5000, // 轮询间隔（毫秒）
      }
    },
    computed: {
      // kkFileView 预览URL
      previewUrl() {
        if (!this.archiveUrl) return ''
        const fileUrl = this.getFullFileUrl(this.archiveUrl)
        const encodedUrl = encodeURIComponent(Base64.encode(fileUrl))
        return `${host}:8012/onlinePreview?url=${encodedUrl}`
      },
      statusText() {
        const textMap = {
          0: '卷宗尚未生成，请点击"生成卷宗"按钮开始生成',
          1: '卷宗正在生成中，请稍候...',
          2: '卷宗已生成完成',
          3: '卷宗生成失败，请重新生成',
        }
        return textMap[this.archiveStatus] || '未知状态'
      },
      statusIcon() {
        const iconMap = {
          0: 'el-icon-info',
          1: 'el-icon-loading',
          2: 'el-icon-success',
          3: 'el-icon-error',
        }
        return iconMap[this.archiveStatus] || 'el-icon-info'
      },
      statusStyle() {
        const styleMap = {
          0: { backgroundColor: '#f4f4f5', color: '#909399' },
          1: { backgroundColor: '#fdf6ec', color: '#e6a23c' },
          2: { backgroundColor: '#f0f9eb', color: '#67c23a' },
          3: { backgroundColor: '#fef0f0', color: '#f56c6c' },
        }
        return styleMap[this.archiveStatus] || {}
      },
      emptyIcon() {
        const iconMap = {
          0: 'el-icon-document',
          1: 'el-icon-loading',
          3: 'el-icon-warning',
        }
        return iconMap[this.archiveStatus] || 'el-icon-document'
      },
      emptyText() {
        const textMap = {
          0: '请先生成卷宗',
          1: '卷宗生成中，请稍候...',
          3: '卷宗生成失败，请重新生成',
        }
        return textMap[this.archiveStatus] || '档案预览内容区域'
      },
    },
    watch: {
      taskId: {
        handler(newVal) {
          if (newVal) {
            this.fetchArchiveStatus()
          }
        },
        immediate: true,
      },
      // 监听状态变化，控制轮询
      archiveStatus: {
        handler(newVal) {
          if (newVal === '1') {
            // 生成中状态，启动轮询
            this.startPolling()
          } else {
            // 其他状态，停止轮询
            this.stopPolling()
          }
        },
      },
    },
    beforeDestroy() {
      // 组件销毁前清除定时器
      this.stopPolling()
    },
    methods: {
      async fetchArchiveStatus() {
        if (!this.taskId) return

        try {
          this.loading = true
          const response = await getArchiveStatus(this.taskId)
          if (response && response.value) {
            const data = response.value
            this.archiveStatus = data.archiveStatus || '0'
            this.archiveUrl = data.archiveUrl || ''
            this.archiveTime = data.archiveTime || ''
          } else {
            this.archiveStatus = '0'
          }
        } catch (error) {
          console.error('获取归档状态失败:', error)
          this.archiveStatus = '0'
        } finally {
          this.loading = false
        }
      },
      async handleGenerateArchive() {
        if (!this.taskId) {
          this.$message.warning('缺少任务信息')
          return
        }

        try {
          this.generating = true
          const response = await generateArchive(this.taskId)
          if (response && response.success !== false) {
            this.$message.success(response.message || '卷宗生成请求已提交')
            // 刷新状态
            await this.fetchArchiveStatus()
          } else {
            this.$message.error(response.message || '生成失败')
          }
        } catch (error) {
          console.error('生成卷宗失败:', error)
          this.$message.error(
            '生成失败：' + (error.message || '请检查网络连接')
          )
        } finally {
          this.generating = false
        }
      },
      handleRegenerate() {
        this.$confirm(
          '确定要重新生成卷宗吗？这将覆盖现有的卷宗文件。',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(() => {
            this.handleGenerateArchive()
          })
          .catch(() => {})
      },
      // 获取完整文件URL
      getFullFileUrl(fileUrl) {
        if (!fileUrl) return ''
        if (fileUrl.startsWith('http')) {
          return fileUrl
        }
        return window.context.form + fileUrl
      },
      // 使用 kkFileView 预览
      handlePreview() {
        if (!this.archiveUrl) {
          this.$message.warning('卷宗文件地址为空')
          return
        }
        const fileUrl = this.getFullFileUrl(this.archiveUrl)
        const encodedUrl = encodeURIComponent(Base64.encode(fileUrl))
        window.open(`${host}:8012/onlinePreview?url=${encodedUrl}`, '_blank')
      },
      handleDownload() {
        if (!this.archiveUrl) {
          this.$message.warning('卷宗文件地址为空')
          return
        }
        const fileUrl = this.getFullFileUrl(this.archiveUrl)
        // 创建下载链接
        const link = document.createElement('a')
        link.href = fileUrl
        link.download = '档案卷宗.pdf'
        link.target = '_blank'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
      handlePrevStep() {
        this.$emit('prev-step')
      },
      handleComplete() {
        // 检查卷宗是否已生成
        if (this.archiveStatus !== '2') {
          this.$message.warning('请先生成卷宗后再完成归档')
          return
        }
        this.$confirm('确定要完成归档吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            try {
              const response = await queConfirmArchive(this.taskId)
              if (response && response.success !== false) {
                this.$message.success(response.message || '归档成功')
                this.$emit('complete')
              } else {
                this.$message.error(response.message || '归档失败')
              }
            } catch (error) {
              console.error('确定归档失败:', error)
              this.$message.error(
                '归档失败：' + (error.message || '请检查网络连接')
              )
            }
          })
          .catch(() => {})
      },
      // 启动轮询
      startPolling() {
        // 先清除已有的定时器
        this.stopPolling()
        // 启动新的定时器
        this.pollingTimer = setInterval(() => {
          this.fetchArchiveStatus()
        }, this.pollingInterval)
      },
      // 停止轮询
      stopPolling() {
        if (this.pollingTimer) {
          clearInterval(this.pollingTimer)
          this.pollingTimer = null
        }
      },
    },
  }
</script>

<style scoped lang="scss"></style>