jstd-web/src/views/fileTransfer/components/rectFeedbackDetail.vue

<template>
  <div class="rectify-detail-container">
    <!-- 返回按钮 -->
    <div>
      <el-button type="danger" plain :icon="Close" size="mini" @click="handleClose">返回</el-button>
    </div>

    <!-- 状态标题区域 -->
    <div class="status-section">
      <div class="status-icon">
        <Timer class="status-icon-svg" />
      </div>
      <div class="status-text">待整改</div>
    </div>

    <!-- 表格区域 -->
    <div class="table-section">
      <el-table
        :data="fileList"
        border
        style="width: 100%"
        class="detail-table"
        max-height="600"
      >
        <el-table-column prop="index" label="序号" width="80" align="center">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="proName" label="项目名称" min-width="150">
          <template #default="scope">
            {{ scope.row.proName || '--' }}
          </template>
        </el-table-column>
        <el-table-column prop="singleProName" label="单项工程名称" min-width="150">
          <template #default="scope">
            {{ scope.row.singleProName || '--' }}
          </template>
        </el-table-column>
        <el-table-column prop="deptName" label="责任单位" min-width="120">
          <template #default="scope">
            {{ scope.row.deptName || '--' }}
          </template>
        </el-table-column>
        <!-- 档案名称列：改为可点击预览 -->
        <el-table-column prop="archiveName" label="档案名称" min-width="300">
          <template #default="scope">
            <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">
          <template #default="scope">
            {{ scope.row.description || '--' }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 整改信息区域 -->
    <div class="info-section">
      <span>整改下发人：{{ issuerName || '--' }}</span>
      <span>联系方式：{{ issuerPhone || '--' }}</span>
    </div>

    <!-- 预览文件组件（新增） -->
    <ViewFile
      v-if="isViewFlag"
      :row-data="currentRow"
      title="预览"
      @close-dialog="isViewFlag = false"
      :width="600"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
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'

const route = useRoute()
const router = useRouter()

// 从 query 获取参数
const id = route.query.id || '0'
const proId = route.query.proId || '0'

// 响应式数据
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'
})

// 初始化数据
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,
            fileId: data.fileId || ''
          }
        ]
      } else {
        fileList.value = []
      }
    } else {
      fileList.value = []
      ElMessage.warning(res.data?.msg || '暂无数据')
    }
  } catch (error) {
    console.error('加载整改详情失败:', error)
    ElMessage.error('加载详情失败')
    fileList.value = []
  }
}

// 返回
const handleClose = () => {
  router.go(-1)
}

// ✅ 新增：预览方法
const viewFile = (row) => {
  currentRow.value = row
  isViewFlag.value = true
}
</script>

<style scoped>
.rectify-detail-container {
  padding: 20px;
  background: #fff;
  height: calc(100vh - 120px);
  overflow-y: auto;
  box-sizing: border-box;
}

/* 返回按钮 */
.rectify-detail-container > div:first-child {
  margin-bottom: 20px;
}

/* 状态区域 */
.status-section {
  text-align: center;
  margin: 0 auto 24px;
  max-width: 120px;
}
.status-icon {
  margin-bottom: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.status-icon-svg {
  font-size: 24px;
  color: #409eff;
}
.status-text {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

/* 表格区域 */
.table-section {
  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;
  padding: 16px 0;
  border-top: 1px dashed #ebeef5;
  color: #666;
  font-size: 14px;
}
.info-section span {
  margin: 0 16px;
}

/* 滚动条 */
.rectify-detail-container::-webkit-scrollbar {
  width: 6px;
  background: #f5f5f5;
}
.rectify-detail-container::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 3px;
}
.rectify-detail-container::-webkit-scrollbar-thumb:hover {
  background: #909399;
}
</style>