sl-sfy-safety/src/views/production-safety/risk-identification-and-control/construction-safety-manage/view.vue

<template>
  <div class="safety-platform-container">
    <header class="safety-platform-container__header">
      <div class="breadcrumb-title">
        <BreadcrumbBack />
        查看施工安全申请
      </div>
    </header>
    <el-alert v-if="showAlertBar" :title="formValue.rejectReason" type="error" />

    <main class="safety-platform-container__main">
      <el-form ref="formRef" :inline="true" label-width="auto" :model="formValue">
        <el-form-item label="项目名称" prop="projectName">
          <el-input
            v-model="formValue.projectName"
            size="large"
            :disabled="true"
            placeholder="请输入项目名称"
            style="width: 330px"
          />
        </el-form-item>

        <el-form-item label="施工地点（区域）" prop="constructionLocation">
          <el-input
            v-model="formValue.constructionLocation"
            size="large"
            :disabled="true"
            placeholder="请输入施工地点（区域）"
            style="width: 330px"
          />
        </el-form-item>

        <el-form-item label="施工单位名称" prop="constructionUnit">
          <el-input
            v-model="formValue.constructionUnit"
            size="large"
            :disabled="true"
            placeholder="请输入施工单位名称"
            style="width: 330px"
          />
        </el-form-item>

        <el-form-item label="施工项目负责人" prop="projectManagerName">
          <el-input
            v-model="formValue.projectManagerName"
            :disabled="true"
            size="large"
            placeholder="输入施工项目负责人"
            style="width: 330px"
          />
        </el-form-item>

        <el-form-item label="施工项目负责人电话1" prop="projectManagerPhone1">
          <el-input
            v-model="formValue.projectManagerPhone1"
            :disabled="true"
            size="large"
            placeholder="输入施工项目负责人电话1"
            style="width: 330px"
          />
        </el-form-item>

        <el-form-item label="施工项目负责人电话2" prop="projectManagerPhone2">
          <el-input
            v-model="formValue.projectManagerPhone2"
            :disabled="true"
            size="large"
            placeholder="输入施工项目负责人电话2"
            style="width: 330px"
          />
        </el-form-item>

        <el-form-item label="施工现场安全负责人" prop="siteSafetyManagerName">
          <el-input
            v-model="formValue.siteSafetyManagerName"
            size="large"
            :disabled="true"
            placeholder="输入施工现场安全负责人"
            style="width: 330px"
          />
        </el-form-item>

        <el-form-item label="施工现场安全负责人电话1" prop="siteSafetyPhone1">
          <el-input
            v-model="formValue.siteSafetyPhone1"
            :disabled="true"
            size="large"
            placeholder="输入施工现场安全负责人电话1"
            style="width: 330px"
          />
        </el-form-item>

        <el-form-item label="施工现场安全负责人电话2" prop="siteSafetyPhone2">
          <el-input
            v-model="formValue.siteSafetyPhone2"
            size="large"
            :disabled="true"
            placeholder="输入施工现场安全负责人电话2"
            style="width: 330px"
          />
        </el-form-item>

        <el-form-item label="开始时间" prop="projectStartTime">
          <el-date-picker
            v-model="formValue.projectStartTime"
            type="date"
            value-format="YYYY-MM-DD"
            size="large"
            :disabled="true"
            placeholder="开始时间"
            style="width: 330px"
          />
        </el-form-item>

        <el-form-item label="结束时间" prop="projectEndTime">
          <el-date-picker
            v-model="formValue.projectEndTime"
            type="date"
            value-format="YYYY-MM-DD"
            size="large"
            :disabled="true"
            placeholder="结束时间"
            style="width: 330px"
          />
        </el-form-item>

        <el-form-item label="施工人数" prop="workerCount">
          <el-input-number
            v-model="formValue.workerCount"
            :disabled="true"
            size="large"
            :min="1"
            style="width: 330px"
          />
        </el-form-item>

        <el-form-item label="所涉工种" prop="involvedTrades" style="width: 87.2%">
          <el-checkbox-group v-model="tradeArray" :disabled="true">
            <el-checkbox
              v-for="t in ['水电', '泥瓦', '木工', '焊接', '气割', '登高', '密闭', '特种驾驶', '其他']"
              :key="t"
              :label="t"
              :value="t"
            />
          </el-checkbox-group>
        </el-form-item>

        <el-form-item v-if="tradeArray.includes('其他')" label="其他工种说明" prop="otherTrade">
          <el-input
            v-model="formValue.otherTrade"
            size="large"
            :disabled="true"
            placeholder="请补充工种类型"
            style="width: 330px"
          />
        </el-form-item>

        <el-form-item label="工程施工内容（方案）简要描述" prop="constructionContent" style="width: 81%">
          <el-input
            type="textarea"
            v-model="formValue.constructionContent"
            size="large"
            :rows="3"
            :disabled="true"
            placeholder="输入工程施工内容（方案）简要描述"
          />
        </el-form-item>

        <el-form-item label="其他说明" prop="otherDescription" style="width: 81%">
          <el-input
            type="textarea"
            v-model="formValue.otherDescription"
            size="large"
            :rows="3"
            :disabled="true"
            placeholder="补充其他说明"
          />
        </el-form-item>

        <div style="width: 100%; height: 1px; background: #eee; margin: 20px 0"></div>
        <div style="width: 100%; margin-bottom: 20px; font-weight: bold; padding-left: 10px">附件清单</div>

        <el-form-item
          v-for="item in attachmentConfigs"
          :key="item.prop"
          :label="item.label"
          label-width="240px"
          :prop="item.prop"
          class="label"
          style="width: 43.6%"
        >
          <!-- 详情页面只展示，不需要上传 -->
          <!-- <UploadFiles
            label="上传文件"
            :disabled="true"
            :fileList="attachmentLists[item.prop]"
          /> -->
          <div class="file-list" v-if="attachmentLists[item.prop]?.length">
            <div class="file-item" v-for="li in attachmentLists[item.prop]" :key="li.fileId">
              <span class="file-item--name">{{ li.fileName }}</span>
              <div class="file-item--footer">
                <el-button link type="primary" @click="previewOnline(li.fileUrl, li.fileType)">预览</el-button>
                <el-button link type="primary" @click.stop="downloadFile(li.fileUrl, li.fileName)">下载</el-button>
                <el-button type="primary" link @click="templateDownload(item)"> 模版下载 </el-button>
              </div>
            </div>
          </div>
          <div v-else>
            <el-button type="primary" link @click="templateDownload(item)"> 模版下载 </el-button>
          </div>
        </el-form-item>

        <div style="width: 100%; height: 1px; background: #eee; margin: 20px 0"></div>
        <el-form-item label="审批流程" style="width: 87.2%">
          <el-select v-model="formValue.templateId" size="large" :disabled="true" style="width: 330px">
            <el-option v-for="opt in approvalOptions" :key="opt.id" :label="opt.templateName" :value="opt.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <PreviewOnline ref="previewOnlineRef" />
    </main>
    <footer class="safety-platform-container__footer">
      <el-button @click="router.back()">返回</el-button>
    </footer>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted, computed } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { ElMessage } from 'element-plus';
  import UploadFiles from '@/components/UploadFiles/UploadFiles.vue';
  import { getAllApproval } from '@/api/approval/approval';
  import { constructionSafetyQueryDetailConstruction } from '@/api/production-safety/responsibility-implementation';
  import { unformatAttachment } from '@/components/UploadFiles/utils';
  import PreviewOnline from '@/views/disaster/components/PreviewOnline.vue';
  import { downloadFile } from '@/views/disaster/utils';
  const router = useRouter();
  const route = useRoute();
  const tradeArray = ref<string[]>([]);
  const approvalOptions = ref<any[]>([]);

  const attachmentConfigs = [
    { label: '施工人员身份信息（复印件，施工单位盖章)', prop: 'personnelIdAttachment' },

    { label: '施工方提供施工安全交底（施工方敲章）', prop: 'safetyCommitmentAttachment' },

    { label: '施工方提供施工人员安全教育（施工人员签字并敲章）', prop: 'safetyEducationAttachment' },

    {
      label: '安全管理协议（双方签字两份，上飞院部门领导签甲方代表、乙方盖章并签字）',
      prop: 'safetyAgreementAttachment',
    },

    { label: '施工作业环境承诺（上飞院的项目具体经办人签字）', prop: 'environmentCommitmentAttachment' },

    { label: '安全告知单（部门具体经办人签字）', prop: 'safetyNoticeAttachment' },

    { label: '消防管理承诺书（部门具体经办人签字）', prop: 'fireManagementAttachment' },

    { label: '施工方案（含风险识别、安全措施、应急预案等）', prop: 'constructionPlanAttachment' },

    { label: '劳保用品清单', prop: 'ppeListAttachment' },
    { label: '施工机械清单', prop: 'equipmentListAttachment' },
    { label: '若有特种施工人员提供特种作业证（复印件，施工单位盖章）', prop: 'specialWorkerCertAttachment' },
    { label: '若有特种设备提供特种设备的合格证（复印件，施工单位盖章', prop: 'specialEquipmentCertAttachment' },
  ];

  const attachmentLists = reactive<any>(Object.fromEntries(attachmentConfigs.map((a) => [a.prop, []])));

  const showAlertBar = computed(() => {
    if (!formValue.rejectReason) {
      return false;
    }
    return formValue.status === 1 && formValue.rejectReason !== '';
  });
  const formValue = reactive<any>({
    projectName: '',
    constructionContent: '',
    constructionLocation: '',
    constructionUnit: '',
    projectManagerName: '',
    projectManagerPhone1: '',
    projectManagerPhone2: '',
    siteSafetyManagerName: '',
    siteSafetyPhone1: '',
    siteSafetyPhone2: '',
    workerCount: undefined,
    projectStartTime: '',
    projectEndTime: '',
    involvedTrades: '',
    otherTrade: '',
    otherDescription: '',
    templateId: '',
    status: '',
  });
  const previewOnlineRef = ref<InstanceType<typeof PreviewOnline>>();
  const previewOnline = (url: string | undefined, type) => {
    if (url) {
      previewOnlineRef.value?.open(url, type);
    }
  };
  const initData = async () => {
    const id = route.query.id as string;
    if (!id) return;

    try {
      // 1. 获取审批流选项（为了回显 label）
      const approvals = await getAllApproval();
      approvalOptions.value = approvals || [];

      // 2. 获取详情
      const res = await constructionSafetyQueryDetailConstruction(id);
      if (res) {
        // 基础数据回显
        Object.assign(formValue, res);

        // 工种回显
        if (res.involvedTrades) {
          tradeArray.value = res.involvedTrades.split(',');
        }

        // 附件回显还原
        attachmentConfigs.forEach((item) => {
          if (res[item.prop]) {
            attachmentLists[item.prop] = unformatAttachment(res[item.prop]);
          }
        });
      }
    } catch (error) {
      console.error('获取详情数据失败:', error);
    }
  };
  // 下载模版
  const templateDownload = (item) => {
    const baseUrl = './skyeye-file-upload/sfysecurity/TEMPLATE/';

    switch (item.prop) {
      case 'personnelIdAttachment':
        downloadFile('./skyeye-file-upload/sfysecurity/TEMPLATE/施工证申请表.doc', item.label);
        break;

      case 'safetyCommitmentAttachment':
        downloadFile('./skyeye-file-upload/sfysecurity/TEMPLATE/施工证申请表.doc', item.label);
        break;

      case 'safetyEducationAttachment':
        downloadFile('./skyeye-file-upload/sfysecurity/TEMPLATE/施工证申请表.doc', item.label);
        break;

      case 'safetyAgreementAttachment':
        downloadFile('./skyeye-file-upload/sfysecurity/TEMPLATE/施工证申请表.doc', item.label);
        break;

      case 'environmentCommitmentAttachment':
        downloadFile('./skyeye-file-upload/sfysecurity/TEMPLATE/施工证申请表.doc', item.label);
        break;

      case 'safetyNoticeAttachment':
        downloadFile('./skyeye-file-upload/sfysecurity/TEMPLATE/施工证申请表.doc', item.label);
        break;

      case 'fireManagementAttachment':
        downloadFile('./skyeye-file-upload/sfysecurity/TEMPLATE/施工证申请表.doc', item.label);
        break;

      case 'constructionPlanAttachment':
        downloadFile('./skyeye-file-upload/sfysecurity/TEMPLATE/施工证申请表.doc', item.label);
        break;

      case 'ppeListAttachment':
        downloadFile('./skyeye-file-upload/sfysecurity/TEMPLATE/施工证申请表.doc', item.label);
        break;

      case 'equipmentListAttachment':
        downloadFile('./skyeye-file-upload/sfysecurity/TEMPLATE/施工证申请表.doc', item.label);
        break;

      case 'specialWorkerCertAttachment':
        downloadFile('./skyeye-file-upload/sfysecurity/TEMPLATE/施工证申请表.doc', item.label);
        break;

      case 'specialEquipmentCertAttachment':
        downloadFile('./skyeye-file-upload/sfysecurity/TEMPLATE/施工证申请表.doc', item.label);
        break;

      // 无匹配时提示
      default:
        ElMessage.warning('该附件暂无模板可下载');
    }
  };

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

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

  .safety-platform-container {
    &__main {
      padding: 24px;
      background-color: #fff;
    }
    :deep(.el-form-item) {
      margin-right: 20px;
      margin-bottom: 24px;
      vertical-align: top;
      .el-form-item__label {
        font-weight: bold;
      }
    }
    // :deep(.el-input.is-disabled .el-input__wrapper) {
    //   background-color: #f8f9fb;
    //   color: #606266;
    // }
  }
  .label {
    :deep(.el-form-item__label) {
      line-height: 26px;
    }
  }
  .file-list {
    .file-item--name {
      padding: 6px 14px;
      border: 1px solid #efefef;
      border-radius: 8px;
    }
  }
</style>