fix:归档预览

src/api/audit/archive.js

@@ -10,3 +10,30 @@ export function getArchiveList(data) {
     data: data,
   })
 }
+
+// 获取归档状态
+export function getArchiveStatus(taskId) {
+  return request({
+    url: url + '/api/materialSummary/v1/getArchiveStatus',
+    method: 'get',
+    params: { taskId },
+  })
+}
+
+// 生成卷宗
+export function generateArchive(taskId) {
+  return request({
+    url: url + '/api/materialSummary/v1/approveArchive',
+    method: 'post',
+    data: { taskId },
+  })
+}
+
+// 确定归档
+export function confirmArchive(taskId) {
+  return request({
+    url: url + '/api/materialSummary/v1/confirmArchive',
+    method: 'post',
+    data: { taskId },
+  })
+}

src/views/costAudit/auditInfo/archivesManage/ArchiveDetail.vue

@@ -31,6 +31,7 @@
       <!-- 第2步：档案预览 -->
       <ArchivePreview
         v-if="currentStep === 2"
+        :task-id="taskId"
         @prev-step="prevStep"
         @complete="completeArchive"
       />
@@ -76,18 +77,8 @@
         }
       },
       completeArchive() {
-        this.$confirm('确定要完成归档吗？', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning',
-        })
-          .then(() => {
-            this.$message.success('归档完成')
-            this.backToList()
-          })
-          .catch(() => {
-            this.$message.info('已取消')
-          })
+        // 归档确认已在 ArchivePreview 组件中处理
+        this.backToList()
       },
       backToList() {
         this.$emit('back')

src/views/costAudit/auditInfo/archivesManage/ArchivePreview.vue

@@ -16,13 +16,81 @@
         <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 plain type="primary" icon="el-icon-success">保存</el-button>
-      <el-button plain type="primary" icon="el-icon-download">下载</el-button>
-      <el-button plain type="primary" icon="iconfont-5039297 icon-zhongzhi">
+      <!-- 未生成状态：显示生成卷宗按钮 -->
+      <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-view"
+          @click="handlePreview"
+        >
+          预览
+        </el-button>
+        <el-button
+          plain
+          type="primary"
+          icon="el-icon-download"
+          @click="handleDownload"
+        >
+          下载
+        </el-button>
+        <el-button
+          plain
+          type="warning"
+          icon="iconfont-5039297 icon-zhongzhi"
+          :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;
@@ -32,22 +100,265 @@
         min-height: 400px;
       "
     >
-      <div style="text-align: center; color: #909399">档案预览内容区域</div>
+      <!-- 已生成且有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,
+    confirmArchive,
+  } 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() {
-        // 处理完成操作
-        this.$emit('complete')
+        // 检查卷宗是否已生成
+        if (this.archiveStatus !== '2') {
+          this.$message.warning('请先生成卷宗后再完成归档')
+          return
+        }
+        this.$confirm('确定要完成归档吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+        })
+          .then(async () => {
+            try {
+              const response = await confirmArchive(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
+        }
       },
     },
   }