sl-sfy-safety/src/views/production-safety/hiddenTroubleInvestigationAndGovernance/oneByOneManagementDept/components/oneByOneManagementDeptDetail.vue

<template>
  <div class="safety-platform-container">
    <header v-if="detailData" 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 v-if="detailData" 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 || '-' }}</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--radio">
          <el-radio-group v-model="hasProblem" class="has-problem-radio">
            <el-radio :label="false">否</el-radio>
            <el-radio :label="true">是</el-radio>
          </el-radio-group>
        </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 v-if="hasProblem" class="row row--upload">
            <div class="col col--full">
              <div class="label">选择附件：</div>
              <div class="value value--attachment">
                <UploadFiles
                  label="选择附件"
                  :file-list="materialAttachmentList"
                  @uploadSuccess="handleMaterialUploadSuccess"
                />
              </div>
            </div>
          </div>
        </div>

        <h4 v-if="detailData?.issueRecords?.length" class="section-title">
          <el-icon class="section-title__icon"><Document /></el-icon>
          <span>我的任务 / 下发记录</span>
        </h4>
        <el-table v-if="detailData?.issueRecords?.length" :data="detailData.issueRecords" border size="small">
          <el-table-column prop="associationOtObligationDeptName" label="责任部门" width="120" />
          <el-table-column prop="associationOtObligationDeptUserName" label="责任人" width="100" />
          <el-table-column prop="feedbackResult" label="反馈结果" min-width="200" show-overflow-tooltip />
          <el-table-column prop="feedbackTime" label="反馈时间" width="160" />
          <el-table-column prop="statusName" label="状态" width="100" />
          <el-table-column label="操作" width="100" fixed="right">
            <template #default="{ row }">
              <el-button
                v-if="canFeedback(row)"
                type="primary"
                link
                size="small"
                @click="openFeedbackDialog(row)"
              >
                反馈
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </main>
    <footer class="safety-platform-container__footer">
      <el-button @click="router.back()">返回</el-button>
      <el-button type="primary" @click="handleSubmit">
        提交
      </el-button>
    </footer>

    <!-- 部门反馈弹窗 -->
    <el-dialog v-model="showFeedbackDialog" title="部门反馈" width="560px" destroy-on-close @close="resetFeedbackForm">
      <el-form ref="feedbackFormRef" :model="feedbackForm" :rules="feedbackRules" label-width="100px">
        <el-form-item label="反馈结果" prop="feedbackResult">
          <el-input
            v-model="feedbackForm.feedbackResult"
            type="textarea"
            :rows="4"
            placeholder="请详细说明完成情况"
          />
        </el-form-item>
        <el-form-item label="反馈时间" prop="feedbackTime">
          <el-date-picker
            v-model="feedbackForm.feedbackTime"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="选填，默认当前时间"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="附件URL" prop="attachments">
          <el-input
            v-model="feedbackForm.attachments"
            type="textarea"
            :rows="2"
            placeholder="选填，多个用逗号分隔"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showFeedbackDialog = false">取消</el-button>
        <el-button type="primary" @click="handleFeedbackSubmit">提交反馈</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 type { FormInstance, FormRules } from 'element-plus';
  import { Document } from '@element-plus/icons-vue';
  import PreviewOnline from '@/views/disaster/components/PreviewOnline.vue';
  import UploadFiles from '@/components/UploadFiles/UploadFiles.vue';
  import type { FileItem } from '@/components/UploadFiles/types';
  import { formatAttachmentList } from '@/components/UploadFiles/utils';
  import { getDrawLessonsAdminDetail } from '@/api/drawLessons';
  import { submitDrawLessonsDeptFeedback, type DeptFeedbackRequest } from '@/api/drawLessons';

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

  const currentId = computed(() => Number(route.query.id));

  /** 是否存在问题：否/是，为是时材料上传显示选择附件 */
  const hasProblem = ref(false);

  /** 材料上传中「选择附件」已选文件（仅当 是否存在问题=是 时使用，提交反馈时可带入） */
  const materialAttachmentList = ref<FileItem[]>([]);

  const previewOnlineRef = ref<InstanceType<typeof PreviewOnline>>();

  /** 详情数据（主记录 + issueRecords） */
  const detailData = ref<{
    problem?: string;
    creatorName?: string;
    createdAt?: string;
    associationOneThree?: string;
    associationOtTimeLimit?: string;
    planStartDate?: string;
    issueCount?: number;
    feedbackCount?: number;
    attachments?: string;
    attachmentList?: Array<{ fileName?: string; fileUrl?: string; fileNameOrUrl?: string; url?: string }>;
    statusName?: string;
    statusId?: number;
    issueRecords?: Array<{
      id: number;
      associationOtObligationDeptName?: string;
      associationOtObligationDeptUserName?: string;
      feedbackResult?: string;
      feedbackTime?: string;
      statusName?: string;
      statusId?: number;
    }>;
  } | null>(null);

  /** 附件列表（从详情 attachments / attachmentList 解析，无数据时为空） */
  const attachmentList = computed(() => {
    const d = detailData.value;
    if (!d) return [];
    if (Array.isArray(d.attachmentList) && d.attachmentList.length) return d.attachmentList;
    if (d.attachments) {
      try {
        const parsed = JSON.parse(d.attachments);
        if (Array.isArray(parsed) && parsed.length) return parsed;
      } catch {
        const list = d.attachments.split(',').filter(Boolean).map((s) => ({ fileNameOrUrl: s.trim(), fileUrl: s.trim() }));
        if (list.length) return list;
      }
    }
    return [];
  });

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

  function handleMaterialUploadSuccess(fileList: FileItem[]) {
    materialAttachmentList.value = fileList;
  }

  /** 下发记录状态：3-待反馈 可反馈；4-待审核 已反馈不可再提交 */
  function canFeedback(row: { statusId?: number }) {
    return row.statusId === 3;
  }

  /** 底部提交：直接调用反馈接口（使用当前详情主记录 id） */
  async function handleSubmit() {
    const id = currentId.value;
    if (!id) return;
    try {
      let attachments = '';
      if (hasProblem.value && materialAttachmentList.value.length) {
        const formatted = await formatAttachmentList(materialAttachmentList.value);
        attachments = JSON.stringify(formatted);
      }
      const now = new Date();
      const feedbackTime = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
      await submitDrawLessonsDeptFeedback({
        id,
        feedbackHasIssue: hasProblem.value ? 1 : 0,
        feedbackResult: '',
        feedbackTime,
        attachments,
      });
      ElMessage.success('反馈提交成功');
      getDetail();
    } catch (e) {
      console.error('反馈提交失败:', e);
      ElMessage.error('反馈提交失败，请重试');
    }
  }

  const getDetail = async () => {
    if (!currentId.value) return;
    try {
      const res = await getDrawLessonsAdminDetail(currentId.value);
      const data = (res as any)?.data ?? res;
      if (data && typeof data === 'object') {
        detailData.value = data;
      }
    } catch (e) {
      console.error('获取举一反三详情失败:', e);
      ElMessage.error('获取详情失败');
    }
  };

  // ---------- 部门反馈 ----------
  const showFeedbackDialog = ref(false);
  const feedbackFormRef = ref<FormInstance>();
  /** 当前操作的下发记录 ID（举一反三下发表 id） */
  const currentIssueId = ref<number>(0);
  const feedbackForm = ref<DeptFeedbackRequest>({
    id: 0,
    feedbackHasIssue: 0,
    feedbackResult: '',
    feedbackTime: '',
    attachments: '',
  });
  const feedbackRules: FormRules = {
    feedbackResult: [{ required: true, message: '请输入反馈结果', trigger: 'blur' }],
  };

  function resetFeedbackForm() {
    feedbackForm.value = {
      id: currentIssueId.value,
      feedbackHasIssue: hasProblem.value ? 1 : 0,
      feedbackResult: '',
      feedbackTime: '',
      attachments: '',
    };
  }

  async function openFeedbackDialog(row: { id: number }) {
    currentIssueId.value = row.id;
    resetFeedbackForm();
    // 若「是否存在问题」为是且已选择附件，带入反馈表单
    if (hasProblem.value && materialAttachmentList.value.length) {
      try {
        const formatted = await formatAttachmentList(materialAttachmentList.value);
        feedbackForm.value.attachments = JSON.stringify(formatted);
      } catch (e) {
        console.error('附件格式化失败:', e);
      }
    }
    showFeedbackDialog.value = true;
  }

  async function handleFeedbackSubmit() {
    await feedbackFormRef.value?.validate?.().catch(() => {});
    try {
      feedbackForm.value.id = currentIssueId.value;
      feedbackForm.value.feedbackHasIssue = hasProblem.value ? 1 : 0;
      // 若有「选择附件」且未在 openFeedbackDialog 中写入，这里再带一次
      if (hasProblem.value && materialAttachmentList.value.length && !feedbackForm.value.attachments) {
        const formatted = await formatAttachmentList(materialAttachmentList.value);
        feedbackForm.value.attachments = JSON.stringify(formatted);
      }
      await submitDrawLessonsDeptFeedback(feedbackForm.value);
      ElMessage.success('反馈提交成功');
      showFeedbackDialog.value = false;
      getDetail();
    } catch (e) {
      console.error('反馈提交失败:', e);
      ElMessage.error('反馈提交失败，请重试');
    }
  }

  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;
          }

          &.col--full {
            flex: 1 1 100%;
          }

          .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;
        }
      }

      &--radio {
        border: 1px solid #e0e0e0;
        background-color: #fff;
        padding: 16px 20px;

        .has-problem-radio {
          display: flex;
          gap: 24px;
        }
      }

      &.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;
            }
          }

          .empty-text {
            color: #999;
          }
        }

        .row--upload .value {
          align-items: flex-start;
        }
      }
    }
  }
</style>