sl-sfy-safety/src/views/production-safety/risk-identification-and-control/hazard-approval-manage/edit.vue

<template>
  <div class="safety-platform-container">
    <header class="safety-platform-container__header">
      <div class="breadcrumb-title"><BreadcrumbBack /> 编辑危险作业申请</div>
    </header>

    <main class="safety-platform-container__main">
      <el-form ref="formRef" :model="formValue" :rules="rules" label-width="160px" label-position="right">
        <div class="section-title">基础信息</div>
        <div class="form-grid">
          <el-form-item label="审批流程" prop="templateId" class="span-full">
            <el-select v-model="formValue.templateId" placeholder="请选择审批流程" size="large" clearable>
              <el-option v-for="opt in approvalOptions" :key="opt.id" :label="opt.templateName" :value="opt.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="作业类型" prop="hazardOperationType">
            <el-select disabled size="large" v-model="formValue.hazardOperationType" class="w-100">
              <el-option :value="1" label="有限空间作业" />
              <el-option :value="2" label="高处作业" />
              <el-option :value="3" label="临时用电" />
              <el-option :value="4" label="动火作业" />
            </el-select>
          </el-form-item>
          <el-form-item label="申请单位" prop="applicationUnitName"
            ><el-input size="large" v-model="formValue.applicationUnitName"
          /></el-form-item>
          <el-form-item label="申请人" prop="applicantName"
            ><el-input size="large" v-model="formValue.applicantName"
          /></el-form-item>
          <el-form-item label="申请部门" prop="applicationDepartment"
            ><el-cascader
              v-model="formValue.applicationDepartmentId"
              size="large"
              ref="cascaderRef"
              :options="firstLevelDepts"
              :props="cascaderProp"
              :show-all-levels="false"
              placeholder="请选择部门名称"
              filterable
              @change="handleChangeDept"
              style="width: 100%"
          /></el-form-item>
          <el-form-item label="联系电话" prop="applicantPhone"
            ><el-input size="large" v-model="formValue.applicantPhone"
          /></el-form-item>
          <el-form-item label="备注信息" prop="remark" class="span-full">
            <el-input size="large" v-model="formValue.remark" type="textarea" :rows="2" placeholder="备注信息..." />
          </el-form-item>
        </div>

        <div class="form-line-divider"></div>

        <template v-if="formValue.hazardOperationType === 1">
          <div class="section-title">有限空间作业详情</div>
          <div class="form-grid">
            <el-form-item label="所属单位" prop="space.confinedSpaceUnit"
              ><el-input size="large" v-model="formValue.space.confinedSpaceUnit"
            /></el-form-item>
            <el-form-item label="空间名称" prop="space.confinedSpaceName"
              ><el-input size="large" v-model="formValue.space.confinedSpaceName"
            /></el-form-item>
            <el-form-item label="负责人" prop="space.unitResponsible"
              ><el-input size="large" v-model="formValue.space.unitResponsible"
            /></el-form-item>
            <el-form-item label="监护人" prop="space.supervisor"
              ><el-input size="large" v-model="formValue.space.supervisor"
            /></el-form-item>
            <el-form-item label="作业人" prop="space.operator"
              ><el-input size="large" v-model="formValue.space.operator" placeholder="多人请用逗号分隔"
            /></el-form-item>
            <el-form-item label="其他作业" prop="space.otherSpecialOps"
              ><el-input size="large" v-model="formValue.space.otherSpecialOps"
            /></el-form-item>
            <el-form-item label="开始时间" prop="space.operationStartTime"
              ><el-date-picker
                size="large"
                v-model="formValue.space.operationStartTime"
                value-format="YYYY-MM-DD"
                class="w-100"
            /></el-form-item>
            <el-form-item label="结束时间" prop="space.operationEndTime"
              ><el-date-picker
                size="large"
                v-model="formValue.space.operationEndTime"
                value-format="YYYY-MM-DD"
                class="w-100"
            /></el-form-item>
          </div>

          <div class="sub-group-box">
            <div class="sub-label is-required-manual section-title-flex">环境当前浓度指标 (初始评估)</div>
            <el-table :data="[formValue.space]" border class="density-table" style="margin-bottom: 20px">
              <el-table-column label="有毒有害物质 (toxicHazardous)">
                <template #default="scope">
                  <el-form-item prop="space.toxicHazardous" :rules="r" label-width="0" class="m-0"
                    ><el-input v-model="scope.row.toxicHazardous"
                  /></el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="可燃气 (flammable)">
                <template #default="scope">
                  <el-form-item prop="space.flammable" :rules="r" label-width="0" class="m-0"
                    ><el-input v-model="scope.row.flammable"
                  /></el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="氧含量 (oxygenContent)">
                <template #default="scope">
                  <el-form-item prop="space.oxygenContent" :rules="r" label-width="0" class="m-0"
                    ><el-input v-model="scope.row.oxygenContent"
                  /></el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div class="form-grid mt-20">
            <el-form-item label="作业内容" prop="space.operationContent" class="span-full"
              ><el-input size="large" v-model="formValue.space.operationContent" type="textarea"
            /></el-form-item>
            <el-form-item label="危害辨识" prop="space.hazardIdentification" class="span-full"
              ><el-input size="large" v-model="formValue.space.hazardIdentification" type="textarea"
            /></el-form-item>
            <el-form-item label="作业附件" class="span-full"
              ><UploadFiles
                label="上传附件"
                @upload-success="(l) => handleUpload('space', 'attachment', l)"
                :fileList="listMap['space.attachment']"
            /></el-form-item>
          </div>
        </template>

        <template v-else-if="formValue.hazardOperationType === 2">
          <div class="section-title">高处作业详情</div>
          <div class="form-grid">
            <el-form-item label="作业地点" prop="highAltitude.operationLocation"
              ><el-input size="large" v-model="formValue.highAltitude.operationLocation"
            /></el-form-item>
            <el-form-item label="作业单位" prop="highAltitude.operationUnit"
              ><el-input size="large" v-model="formValue.highAltitude.operationUnit"
            /></el-form-item>
            <el-form-item label="作业高度(m)" prop="highAltitude.operationHeight"
              ><el-input-number
                size="large"
                v-model="formValue.highAltitude.operationHeight"
                class="w-100"
                :controls="false"
            /></el-form-item>
            <el-form-item label="作业类别" prop="highAltitude.operationType"
              ><el-input size="large" v-model="formValue.highAltitude.operationType" placeholder="如：悬挂作业"
            /></el-form-item>
            <el-form-item label="作业人姓名" prop="highAltitude.operatorName"
              ><el-input size="large" v-model="formValue.highAltitude.operatorName"
            /></el-form-item>
            <el-form-item label="监护人" prop="highAltitude.supervisor"
              ><el-input size="large" v-model="formValue.highAltitude.supervisor"
            /></el-form-item>
            <el-form-item label="开始时间" prop="highAltitude.operationStartTime"
              ><el-date-picker
                size="large"
                v-model="formValue.highAltitude.operationStartTime"
                value-format="YYYY-MM-DD"
                class="w-100"
            /></el-form-item>
            <el-form-item label="结束时间" prop="highAltitude.operationEndTime"
              ><el-date-picker
                size="large"
                v-model="formValue.highAltitude.operationEndTime"
                value-format="YYYY-MM-DD"
                class="w-100"
            /></el-form-item>
            <el-form-item label="作业内容" prop="highAltitude.operationContent" class="span-full"
              ><el-input size="large" v-model="formValue.highAltitude.operationContent" type="textarea"
            /></el-form-item>
            <el-form-item label="危害辨识" prop="highAltitude.hazardIdentification" class="span-full"
              ><el-input size="large" v-model="formValue.highAltitude.hazardIdentification" type="textarea"
            /></el-form-item>
            <el-form-item label="作业附件" class="span-full"
              ><UploadFiles
                label="上传附件"
                @upload-success="(l) => handleUpload('highAltitude', 'attachment', l)"
                :fileList="listMap['highAltitude.attachment']"
            /></el-form-item>
          </div>
        </template>

        <template v-else-if="formValue.hazardOperationType === 3">
          <div class="section-title">临时用电详情</div>
          <div class="form-grid">
            <el-form-item label="需求部门" prop="electricityList.requestDepartment"
              ><el-input size="large" v-model="formValue.electricityList.requestDepartment"
            /></el-form-item>
            <el-form-item label="用电类型" prop="electricityList.electricityType">
              <el-select v-model="formValue.electricityList.electricityType" class="w-100">
                <el-option :value="1" label="长期" /><el-option :value="2" label="临时" />
              </el-select>
            </el-form-item>
            <el-form-item label="责任人" prop="electricityList.contactPerson"
              ><el-input size="large" v-model="formValue.electricityList.contactPerson"
            /></el-form-item>
            <el-form-item label="设备功率" prop="electricityList.equipmentPower"
              ><el-input size="large" v-model="formValue.electricityList.equipmentPower"
            /></el-form-item>
            <el-form-item label="开始时间" prop="electricityList.operationStartTime"
              ><el-date-picker
                size="large"
                v-model="formValue.electricityList.operationStartTime"
                value-format="YYYY-MM-DD"
                class="w-100"
            /></el-form-item>
            <el-form-item label="结束时间" prop="electricityList.operationEndTime"
              ><el-date-picker
                size="large"
                v-model="formValue.electricityList.operationEndTime"
                value-format="YYYY-MM-DD"
                class="w-100"
            /></el-form-item>
            <el-form-item label="保护措施" prop="electricityList.safety" class="span-full"
              ><el-input size="large" v-model="formValue.electricityList.safety"
            /></el-form-item>
            <el-form-item label="用电事由" prop="electricityList.reason" class="span-full"
              ><el-input size="large" v-model="formValue.electricityList.reason" type="textarea"
            /></el-form-item>
            <el-form-item label="申请附件" class="span-full"
              ><UploadFiles
                label="上传附件"
                @upload-success="(l) => handleUpload('electricityList', 'attachment', l)"
                :fileList="listMap['electricityList.attachment']"
            /></el-form-item>
          </div>
        </template>

        <template v-else-if="formValue.hazardOperationType === 4">
          <div class="section-title">动火作业详情</div>
          <div class="sub-label">A. 动火任务信息</div>
          <div class="form-grid">
            <el-form-item label="动火地点" prop="hot.hotWorkLocation"
              ><el-input size="large" v-model="formValue.hot.hotWorkLocation"
            /></el-form-item>
            <el-form-item label="动火级别" prop="hot.hotWorkLevel">
              <el-select v-model="formValue.hot.hotWorkLevel" class="w-100">
                <el-option :value="1" label="一级" /><el-option :value="2" label="二级" /><el-option
                  :value="3"
                  label="三级"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="特殊时段" prop="hot.isSpecialPeriod">
              <el-radio-group v-model="formValue.hot.isSpecialPeriod">
                <el-radio :label="1">是 (节假日/重大活动)</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="动火类型" prop="hot.hotWorkType"
              ><el-input size="large" v-model="formValue.hot.hotWorkType" placeholder="气焊/电焊/打磨等"
            /></el-form-item>
            <el-form-item label="开始时间" prop="hot.hotWorkStart"
              ><el-date-picker
                size="large"
                v-model="formValue.hot.hotWorkStart"
                value-format="YYYY-MM-DD"
                class="w-100"
            /></el-form-item>
            <el-form-item label="结束时间" prop="hot.hotWorkEnd"
              ><el-date-picker size="large" v-model="formValue.hot.hotWorkEnd" value-format="YYYY-MM-DD" class="w-100"
            /></el-form-item>
            <el-form-item label="动火任务" prop="hot.hotWorkTask" class="span-full"
              ><el-input size="large" v-model="formValue.hot.hotWorkTask" type="textarea"
            /></el-form-item>
            <el-form-item label="危险性分析" prop="hot.hazardAnalysis" class="span-full"
              ><el-input size="large" v-model="formValue.hot.hazardAnalysis" type="textarea"
            /></el-form-item>
          </div>

          <div class="sub-label">B. 责任人信息</div>
          <div class="form-grid">
            <el-form-item label="动火作业人员" prop="hot.hotWorkman"
              ><el-input size="large" v-model="formValue.hot.hotWorkman"
            /></el-form-item>
            <el-form-item label="动火人电话" prop="hot.hotWorkContact"
              ><el-input size="large" v-model="formValue.hot.hotWorkContact"
            /></el-form-item>
            <el-form-item label="施工单位监护人" prop="hot.constructionSupervisor"
              ><el-input size="large" v-model="formValue.hot.constructionSupervisor"
            /></el-form-item>
            <el-form-item label="监护人电话" prop="hot.supervisorContact"
              ><el-input size="large" v-model="formValue.hot.supervisorContact"
            /></el-form-item>
            <el-form-item label="现场负责人" prop="hot.constructionSiteLeader"
              ><el-input size="large" v-model="formValue.hot.constructionSiteLeader"
            /></el-form-item>
            <el-form-item label="教育人" prop="hot.constructionEducator"
              ><el-input size="large" v-model="formValue.hot.constructionEducator"
            /></el-form-item>
            <el-form-item label="申请部门监护人" prop="hot.hotWorkSupervisor"
              ><el-input size="large" v-model="formValue.hot.hotWorkSupervisor"
            /></el-form-item>
            <el-form-item label="部门监护电话" prop="hot.supervisorNumber"
              ><el-input size="large" v-model="formValue.hot.supervisorNumber"
            /></el-form-item>
          </div>

          <div class="sub-label">C. 防护措施与附件</div>
          <div class="form-grid">
            <el-form-item label="安全防护措施" prop="hot.fireSafetyMeasures" class="span-full"
              ><el-input size="large" v-model="formValue.hot.fireSafetyMeasures" type="textarea"
            /></el-form-item>
            <el-form-item label="现场检查情况" prop="hot.supervisorMeasures" class="span-full"
              ><el-input size="large" v-model="formValue.hot.supervisorMeasures" type="textarea"
            /></el-form-item>

            <el-form-item label="动火现场照片"
              ><UploadFiles
                label="上传附件"
                @upload-success="(l) => handleUpload('hot', 'photos', l)"
                :fileList="listMap['hot.photos']"
            /></el-form-item>
            <el-form-item label="身份证复印件"
              ><UploadFiles
                label="上传附件"
                @upload-success="(l) => handleUpload('hot', 'idCard', l)"
                :fileList="listMap['hot.idCard']"
            /></el-form-item>
            <el-form-item label="特种作业证"
              ><UploadFiles
                label="上传附件"
                @upload-success="(l) => handleUpload('hot', 'optionCard', l)"
                :fileList="listMap['hot.optionCard']"
            /></el-form-item>
            <el-form-item label="安全教育记录"
              ><UploadFiles
                label="上传附件"
                @upload-success="(l) => handleUpload('hot', 'safetyEducationPlan', l)"
                :fileList="listMap['hot.safetyEducationPlan']"
            /></el-form-item>
            <el-form-item label="施工方案"
              ><UploadFiles
                label="上传附件"
                @upload-success="(l) => handleUpload('hot', 'constructionPlan', l)"
                :fileList="listMap['hot.constructionPlan']"
            /></el-form-item>
            <el-form-item label="准备工作照片"
              ><UploadFiles
                label="上传附件"
                @upload-success="(l) => handleUpload('hot', 'preparationPhotos', l)"
                :fileList="listMap['hot.preparationPhotos']"
            /></el-form-item>
            <el-form-item label="管理协议"
              ><UploadFiles
                label="上传附件"
                @upload-success="(l) => handleUpload('hot', 'safetyManagementAgreement', l)"
                :fileList="listMap['hot.safetyManagementAgreement']"
            /></el-form-item>
          </div>
        </template>

        <div class="form-line-divider"></div>

        <div class="section-title-flex">
          <span class="is-required-manual">安全措施清单</span>
          <el-button type="primary" @click="addRow('measure')">+ 新增措施</el-button>
        </div>
        <el-table :data="formValue.measure" border class="mb-20">
          <el-table-column label="序号" prop="serialNumber" width="100" align="center" />
          <el-table-column label="措施内容"
            ><template #default="scope"><el-input v-model="scope.row.safetyMeasure" /></template
          ></el-table-column>
          <el-table-column label="确认人" width="200"
            ><template #default="scope"><el-input v-model="scope.row.confirmer" /></template
          ></el-table-column>
          <el-table-column label="操作" width="80" align="center">
            <template #default="scope"
              ><el-button type="primary" link @click="removeRow('measure', scope.$index)">删除</el-button></template
            >
          </el-table-column>
        </el-table>

        <div class="section-title-flex">
          <span class="is-required-manual">危害分析记录</span>
          <el-button type="primary" @click="addRow('analysis')">+ 新增记录</el-button>
        </div>
        <el-table :data="formValue.analysis" border>
          <el-table-column label="检测部位"
            ><template #default="scope"><el-input v-model="scope.row.analysisPosition" /></template
          ></el-table-column>
          <el-table-column label="有毒物质及浓度"
            ><template #default="scope"><el-input v-model="scope.row.toxicSubstance" /></template
          ></el-table-column>
          <el-table-column label="可燃气及浓度"
            ><template #default="scope"><el-input v-model="scope.row.flammableGas" /></template
          ></el-table-column>
          <el-table-column label="氧含量"
            ><template #default="scope"><el-input v-model="scope.row.oxygenContent" /></template
          ></el-table-column>
          <el-table-column label="检测人" width="130"
            ><template #default="scope"><el-input v-model="scope.row.analyst" /></template
          ></el-table-column>
          <el-table-column label="检测时间" width="220"
            ><template #default="scope">
              <el-date-picker
                v-model="scope.row.analysisTime"
                value-format="YYYY-MM-DD"
                style="width: 100%"
              /> </template
          ></el-table-column>
          <el-table-column label="操作" width="80" align="center">
            <template #default="scope"
              ><el-button type="primary" link @click="removeRow('analysis', scope.$index)">删除</el-button></template
            >
          </el-table-column>
        </el-table>
      </el-form>
    </main>

    <footer class="safety-platform-container__footer">
      <el-button size="large" @click="router.back()">取 消</el-button>
      <el-button type="primary" size="large" :loading="loading" @click="handleSave">提交</el-button>
    </footer>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, onMounted, nextTick } 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 {
    dangerWorkQueryDetail,
    dangerWorkUpdateDangerWork,
  } from '@/api/production-safety/responsibility-implementation';
  import { formatDeptTree } from '@/views/disaster/utils/formatDeptTree';
  import { getAllDepartments } from '@/api/auth/dept';
  import { unformatAttachment, formatAttachmentList } from '@/components/UploadFiles/utils';

  const router = useRouter();
  const route = useRoute();
  const formRef = ref<any>(null);
  const loading = ref(false);
  const detailId = route.query.id as string;

  const approvalOptions = ref<any[]>([]);
  const firstLevelDepts = ref<any[]>([]);
  const cascaderRef = ref<any>(null);
  const cascaderProp = { expandTrigger: 'click', checkStrictly: true, value: 'id', label: 'deptName' };

  /**
   * 1. 附件显示映射 (仅用于组件内部回显显示)
   */
  const listMap = reactive<any>({
    'space.attachment': [],
    'highAltitude.attachment': [],
    'electricityList.attachment': [],
    'hot.photos': [],
    'hot.idCard': [],
    'hot.optionCard': [],
    'hot.safetyEducationPlan': [],
    'hot.constructionPlan': [],
    'hot.preparationPhotos': [],
    'hot.safetyManagementAgreement': [],
  });

  /**
   * 2. 初始化表单数据结构 (保持深度对象存在)
   */
  const formValue = reactive<any>({
    id: detailId,
    templateId: '',
    applicationDepartment: '',
    applicationDepartmentId: [],
    applicationUnitName: '',
    applicantName: '',
    applicantPhone: '',
    hazardOperationType: '',
    remark: '',
    // 必须预设这些对象，防止赋值时路径不存在
    space: { attachment: '' },
    highAltitude: { attachment: '' },
    electricityList: { attachment: '' },
    hot: {
      photos: '',
      idCard: '',
      optionCard: '',
      safetyEducationPlan: '',
      constructionPlan: '',
      preparationPhotos: '',
      safetyManagementAgreement: '',
    },
    measure: [],
    analysis: [],
  });

  const r = { required: true, message: '此项必填', trigger: ['blur', 'change'] };
  const rules = reactive({
    templateId: [r],
    applicationUnitName: [r],
    applicantName: [r],
    applicationDepartmentId: [r],
    applicantPhone: [r],
  });

  /**
   * 3. 关键：上传成功回调
   * @param obj 对应的对象名 (如 'space')
   * @param key 对应的字段名 (如 'attachment')
   * @param list 组件返回的最新的 fileList 数组
   */
  const handleUpload = async (obj: string, key: string, list: any[]) => {
    listMap[`${obj}.${key}`] = list;

    if (formValue[obj]) {
      const formatted = await formatAttachmentList(list);
      formValue[obj][key] = formatted.length > 0 ? JSON.stringify(formatted) : '';
    }
  };

  /**
   * 4. 详情回显
   */
  const getDetail = async () => {
    if (!detailId) return;
    try {
      const res = await dangerWorkQueryDetail(detailId);

      // 1. 基础属性拷贝
      Object.assign(formValue, res);

      // 2. 等待 DOM 和 v-if 完成渲染 (确保 Upload 控件已经挂载)
      await nextTick();

      const typeKeyMap: any = { 1: 'space', 2: 'highAltitude', 3: 'electricityList', 4: 'hot' };
      const activeObjName = typeKeyMap[formValue.hazardOperationType];

      if (!activeObjName) return;

      // 3. 附件处理逻辑
      Object.keys(listMap).forEach((path) => {
        // 检查当前路径是否属于选中的作业类型 (例如 "space.attachment")
        if (path.startsWith(activeObjName)) {
          const [objName, fieldName] = path.split('.');

          // 拿到后端返回的原始字段值 (通常是字符串)
          const rawValue = formValue[objName]?.[fieldName];

          if (rawValue) {
            // 【核心修改】：调用你的解析函数，将字符串转为数组
            // 确保 unformatAttachment 函数已在当前作用域可用
            listMap[path] = unformatAttachment(rawValue);

            console.log(`附件解析成功 [${path}]:`, listMap[path]);
          }
        }
      });
    } catch (err) {
      console.error('详情加载失败:', err);
      ElMessage.error('详情回显失败');
    }
  };

  /**
   * 5. 提交保存
   */
  const handleSave = async () => {
    const valid = await formRef.value.validate().catch(() => false);
    if (!valid) return ElMessage.error('请检查表单必填项');

    loading.value = true;

    // 深度克隆，避免操作原对象
    const submitData = JSON.parse(JSON.stringify(formValue));

    // 数据清洗：只发送当前选中的危险作业详情
    const typeMap: any = { 1: 'space', 2: 'highAltitude', 3: 'electricityList', 4: 'hot' };
    const currentKey = typeMap[formValue.hazardOperationType];

    Object.values(typeMap).forEach((val) => {
      if (val !== currentKey) {
        delete submitData[val as string];
      }
    });

    dangerWorkUpdateDangerWork(submitData)
      .then(() => {
        ElMessage.success('保存成功');
        router.back();
      })
      .finally(() => {
        loading.value = false;
      });
  };

  /**
   * 辅助：表格行操作
   */
  const addRow = (type: 'measure' | 'analysis') => {
    if (type === 'measure') {
      formValue.measure.push({ serialNumber: formValue.measure.length + 1, safetyMeasure: '', confirmer: '' });
    } else {
      formValue.analysis.push({
        toxicSubstance: '',
        flammableGas: '',
        oxygenContent: '',
        analysisTime: '',
        analysisPosition: '',
        analyst: '',
      });
    }
  };

  const removeRow = (type: 'measure' | 'analysis', index: number) => {
    formValue[type].splice(index, 1);
    if (type === 'measure') {
      formValue.measure.forEach((item: any, i: number) => (item.serialNumber = i + 1));
    }
  };

  const handleChangeDept = () => {
    const node = cascaderRef.value?.getCheckedNodes()?.[0];
    if (node) {
      formValue.applicationDepartment = node.label;
      formValue.applicationDepartmentId = node.pathValues;
    }
  };

  onMounted(async () => {
    const [depts, approvals] = await Promise.all([getAllDepartments(), getAllApproval()]);
    firstLevelDepts.value = formatDeptTree(depts);
    approvalOptions.value = approvals || [];

    getDetail();
  });
</script>
<style lang="scss" scoped>
  @use '@/styles/page-main-layout.scss' as *;
  @use '@/styles/page-details-layout.scss' as *;
  .safety-platform-container {
    .section-title-flex {
      display: flex;
      justify-content: space-between;
      margin: 15px 0;
    }
    &__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;
      }
    }
  }
</style>