sl-sfy-safety/src/views/production-safety/hiddenTroubleInvestigationAndGovernance/oneByOneManagement/components/OneByOneAuditDetail.vue

<template>
  <div class="safety-platform-container">
    <header class="safety-platform-container__header">
      <div class="breadcrumb-title">{{ detailData?.problem || '-' }}</div>
      <div class="detail-content">
        <span>创建人：{{ detailData?.creatorName || '-' }}</span>
        <span>创建时间：{{ detailData?.createdAt || '-' }}</span>
      </div>
    </header>
    <main class="safety-platform-container__main">
      <div class="audit-content">
        <h4 class="section-title">
          <el-icon class="section-title__icon"><Document /></el-icon>
          <span>基本信息</span>
        </h4>
        <div class="detail-ct detail-ct--table">
          <div class="row">
            <div class="col">
              <div class="label">隐患问题：</div>
              <div class="value">{{ detailData?.problem || '-' }}</div>
            </div>
            <div class="col">
              <div class="label">状态：</div>
              <div class="value">{{ detailData?.statusName || '-' }}</div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">下发数：</div>
              <div class="value">{{ detailData?.issueCount ?? '-' }}</div>
            </div>
            <div class="col">
              <div class="label">反馈数：</div>
              <div class="value">{{ detailData?.feedbackCount ?? '-' }}</div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label">计划开始日期：</div>
              <div class="value">{{ detailData?.planStartDate || detailData?.dangerProposeDate || '-' }}</div>
            </div>
            <div class="col">
              <div class="label">计划完成日期：</div>
              <div class="value">{{ detailData?.associationOtTimeLimit || '-' }}</div>
            </div>
          </div>
        </div>

        <h4 class="section-title">
          <el-icon class="section-title__icon"><Document /></el-icon>
          <span>举一反三要求</span>
        </h4>
        <div class="detail-ct requirement-block">
          <div class="value value-text">{{ detailData?.associationOneThree || '-' }}</div>
        </div>

        <h4 class="section-title">
          <el-icon class="section-title__icon"><Document /></el-icon>
          <span>材料上传</span>
        </h4>
        <div class="detail-ct detail-ct--table attachment-row">
          <div class="row">
            <div class="col">
              <div class="label">上传附件：</div>
              <div class="value value--attachment">
                <div class="attachment-list">
                  <div
                    v-for="(item, index) in attachmentList"
                    :key="index"
                    class="attachment-item"
                  >
                    <span class="attachment-item--name">{{ item.fileName || item.fileNameOrUrl }}</span>
                    <el-button
                      v-if="item.fileUrl || item.url"
                      type="primary"
                      link
                      @click="handlePreview(item)"
                    >
                      预览
                    </el-button>
                  </div>
                </div>
                <span v-if="!attachmentList.length" class="empty-text">-</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <footer class="safety-platform-container__footer">
      <el-button @click="router.back()">返回</el-button>
      <el-button type="primary" @click="handleReject">审核不通过</el-button>
      <el-button type="primary" @click="handleApprove">审核通过</el-button>
    </footer>

    <el-dialog
      v-model="showRejectDialog"
      title="审核不通过原因"
      width="560px"
      :close-on-click-modal="false"
      destroy-on-close
      @close="rejectReason = ''"
    >
      <el-input
        v-model="rejectReason"
        type="textarea"
        :rows="6"
        maxlength="300"
        show-word-limit
        placeholder="请填写审核不通过原因（限300字）"
      />
      <template #footer>
        <el-button @click="showRejectDialog = false">取消</el-button>
        <el-button type="primary" @click="handleRejectSubmit">确定</el-button>
      </template>
    </el-dialog>
    <PreviewOnline ref="previewOnlineRef" />
  </div>
</template>

<script setup lang="ts">
  import { computed, onMounted, ref } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { ElMessage } from 'element-plus';
  import { Document } from '@element-plus/icons-vue';
  import PreviewOnline from '@/views/disaster/components/PreviewOnline.vue';
  import { getDrawLessonsAdminDetail, approveDrawLessons } from '@/api/drawLessons';

  const router = useRouter();
  const route = useRoute();
  const id = computed(() => Number(route.query.id));

  const detailData = ref<{
    problem?: string;
    creatorName?: string;
    createdAt?: string;
    statusName?: string;
    issueCount?: number;
    feedbackCount?: number;
    planStartDate?: string;
    dangerProposeDate?: string;
    associationOtTimeLimit?: string;
    associationOneThree?: string;
    attachments?: string;
    attachmentList?: Array<{ fileName?: string; fileUrl?: string; fileNameOrUrl?: string; url?: string }>;
  } | null>(null);

  const showRejectDialog = ref(false);
  const rejectReason = ref('');
  const submitting = ref(false);
  const previewOnlineRef = ref<InstanceType<typeof PreviewOnline>>();

  const attachmentList = computed(() => {
    const d = detailData.value;
    if (!d) return [];
    if (Array.isArray(d.attachmentList) && d.attachmentList.length) return d.attachmentList;
    if (!d.attachments) return [];
    try {
      const parsed = JSON.parse(d.attachments);
      return Array.isArray(parsed) ? parsed : [];
    } catch {
      return d.attachments.split(',').filter(Boolean).map((s) => ({ fileNameOrUrl: s.trim(), fileUrl: s.trim() }));
    }
  });

  const getDetail = async () => {
    if (!id.value) return;
    try {
      const res = await getDrawLessonsAdminDetail(id.value);
      const data = (res as any)?.data ?? res;
      if (data && typeof data === 'object') {
        const records = Array.isArray(data.issueRecords) ? data.issueRecords : [];
        detailData.value = {
          problem: data.problem,
          creatorName: data.creatorName,
          createdAt: data.createdAt,
          statusName: data.statusName,
          issueCount: records.length ?? data.issueCount,
          feedbackCount: data.feedbackCount ?? records.filter((r: any) => r.statusId === 5 || r.statusName === '已完成' || r.feedbackAt).length,
          planStartDate: data.planStartDate,
          dangerProposeDate: data.dangerProposeDate,
          associationOtTimeLimit: data.associationOtTimeLimit,
          associationOneThree: data.associationOneThree,
          attachments: data.attachments,
          attachmentList: data.attachmentList,
        };
      }
    } catch (e) {
      console.error('获取举一反三详情失败:', e);
      ElMessage.error('获取详情失败');
    }
  };

  const handlePreview = (item: { fileUrl?: string; url?: string }) => {
    const url = item.fileUrl || item.url;
    if (url) previewOnlineRef.value?.open(url, 'pdf');
  };

  const handleReject = () => {
    showRejectDialog.value = true;
  };

  const handleRejectSubmit = async () => {
    if (!rejectReason.value?.trim()) {
      ElMessage.warning('请填写审核不通过原因');
      return;
    }
    if (!id.value) return;
    submitting.value = true;
    try {
      await approveDrawLessons({
        id: id.value,
        statusId: 6,
        statusName: '已作废',
      });
      ElMessage.success('审核不通过操作成功');
      showRejectDialog.value = false;
      rejectReason.value = '';
      router.back();
    } catch (e) {
      console.error('审核不通过失败:', e);
      ElMessage.error('操作失败，请重试');
    } finally {
      submitting.value = false;
    }
  };

  const handleApprove = async () => {
    if (!id.value) return;
    submitting.value = true;
    try {
      await approveDrawLessons({
        id: id.value,
        statusId: 5,
        statusName: '已完成',
      });
      ElMessage.success('审核通过操作成功');
      router.back();
    } catch (e) {
      console.error('审核通过失败:', e);
      ElMessage.error('操作失败，请重试');
    } finally {
      submitting.value = false;
    }
  };

  onMounted(() => {
    getDetail();
  });
</script>

<style scoped lang="scss">
  @use '@/styles/page-details-layout.scss' as *;
  @use '@/styles/page-main-layout.scss' as *;

  .detail-content {
    display: flex;
    gap: 30px;
    margin: 10px 0;
    font-size: 14px;
  }

  .audit-content {
    padding: 0 16px;

    .section-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 20px 0 12px 0;
      font-size: 16px;
      font-weight: 600;
      color: #333;

      .section-title__icon {
        font-size: 18px;
        color: #333;
      }
    }

    .section-title:first-child {
      margin-top: 0;
    }

    .detail-ct {
      font-size: 14px;
      margin-bottom: 20px;

      &--table {
        border: 1px solid #dcdfe6;
        .row {
          display: flex;
          border-bottom: 1px solid #dcdfe6;

          &:last-child {
            border-bottom: none;
          }
        }
        .col {
          display: flex;
          flex: 1;
          min-height: 40px;
          align-items: stretch;

          &.col--wide {
            flex: 2;
          }

          .label {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex-shrink: 0;
            width: 140px;
            padding: 0 12px;
            background-color: #f5f5f5;
            border-right: 1px solid #dcdfe6;
            color: #333;
          }

          .value {
            flex: 1;
            display: flex;
            align-items: center;
            padding: 10px 20px;
            background-color: #fff;
            border-right: 1px solid #dcdfe6;
            color: #333;
          }
        }

        .row .col:last-child .value {
          border-right: none;
        }

        .row .col:nth-child(2) .label {
          border-left: 1px solid #dcdfe6;
        }
      }

      &.requirement-block {
        border: 1px solid #e0e0e0;
        background-color: #fff;
        padding: 16px 20px;
        min-height: 60px;

        .value-text {
          white-space: pre-wrap;
          word-break: break-word;
          color: #333;
          line-height: 1.5;
        }
      }

      &.attachment-row .value--attachment {
        flex-wrap: wrap;
        align-items: flex-start;

        .attachment-list {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 12px 24px;
          width: 100%;
        }

        .attachment-item {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 14px;

          .attachment-item--name {
            color: #333;
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .el-button--primary.is-link {
            flex-shrink: 0;
          }
        }

        .empty-text {
          color: #999;
        }
      }
    }
  }
</style>