提交

src/views/fileTransfer/components/rectFeedbackDetail.vue

@@ -42,9 +42,17 @@
             {{ scope.row.deptName || '--' }}
           </template>
         </el-table-column>
+        <!-- 档案名称列：改为可点击预览 -->
         <el-table-column prop="archiveName" label="档案名称" min-width="300">
           <template #default="scope">
-            {{ scope.row.archiveName || '--' }}
+            <div
+              v-if="scope.row.fileId"
+              class="archive-name-cell file-name-link"
+              @click="viewFile(scope.row)"
+            >
+              {{ scope.row.archiveName || '--' }}
+            </div>
+            <span v-else>{{ scope.row.archiveName || '--' }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="description" label="整改内容" min-width="200">
@@ -60,6 +68,15 @@
       <span>整改下发人：{{ issuerName || '--' }}</span>
       <span>联系方式：{{ issuerPhone || '--' }}</span>
     </div>
+
+    <!-- 预览文件组件（新增） -->
+    <ViewFile
+      v-if="isViewFlag"
+      :row-data="currentRow"
+      title="预览"
+      @close-dialog="isViewFlag = false"
+      :width="600"
+    />
   </div>
 </template>
 
@@ -69,6 +86,9 @@ import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { Close, Timer } from '@element-plus/icons-vue'
 
+// ✅ 新增：引入 ViewFile 组件
+import ViewFile from '@/views/viewFile/viewFile.vue'
+
 // API（请根据你实际路径调整）
 import { getRectifyDetailApi } from '@/api/filesTransfer/rectFeedback.js'
 
@@ -84,12 +104,15 @@ const fileList = ref([])
 const issuerName = ref('')
 const issuerPhone = ref('')
 
+// ✅ 新增：预览相关响应式变量
+const isViewFlag = ref(false)
+const currentRow = ref({})
+
 // 生命周期
 onMounted(() => {
   document.body.style.overflow = 'hidden'
   initData()
 })
-
 onBeforeUnmount(() => {
   document.body.style.overflow = 'auto'
 })
@@ -99,23 +122,24 @@ const initData = async () => {
   try {
     const res = await getRectifyDetailApi({ id, proId })
     console.log('获取整改详情成功:', res.data)
-
     if (res.data?.code === 200) {
       const data = res.data.data || {}
-
       // 1. 先赋值下发人信息（用于底部）
       issuerName.value = data.issuerName || '--'
       issuerPhone.value = data.issuerPhone || '--'
       // 关键：把单条记录转为数组
       if (Object.keys(data).length > 0) {
-        fileList.value = [{
-          proName: data.proName || '--',
-          singleProName: data.singleProName || '--',
-          deptName: data.deptName || '', // 避免显示 --
-          archiveName: (data.contentName || ''),
-          description: data.description || '--',
-          id: data.id
-        }]
+        fileList.value = [
+          {
+            proName: data.proName || '--',
+            singleProName: data.singleProName || '--',
+            deptName: data.deptName || '',
+            archiveName: data.contentName || '',
+            description: data.description || '--',
+            id: data.id,
+            fileId: data.fileId || ''
+          }
+        ]
       } else {
         fileList.value = []
       }
@@ -134,6 +158,12 @@ const initData = async () => {
 const handleClose = () => {
   router.go(-1)
 }
+
+// ✅ 新增：预览方法
+const viewFile = (row) => {
+  currentRow.value = row
+  isViewFlag.value = true
+}
 </script>
 
 <style scoped>
@@ -177,6 +207,20 @@ const handleClose = () => {
   margin-bottom: 24px;
 }
 
+/* ✅ 新增：复用 data-detail 的链接样式 */
+.archive-name-cell {
+  white-space: normal;
+  word-break: break-word;
+  line-height: 1.4;
+}
+.file-name-link {
+  color: #409eff;
+  cursor: pointer;
+}
+.file-name-link:hover {
+  text-decoration: underline;
+}
+
 /* 信息区域 */
 .info-section {
   text-align: center;