sl-sfy-safety/src/views/production-safety/risk-identification-and-control/hazard-approval-manage/view.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" disabled 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="上传附件"
                disabled
                @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="上传附件"
                disabled
                @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="上传附件"
                disabled
                @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
                disabled
                label="上传附件"
                @upload-success="(l) => handleUpload('hot', 'photos', l)"
                :fileList="listMap['hot.photos']"
            /></el-form-item>
            <el-form-item label="身份证复印件"
              ><UploadFiles
                disabled
                label="上传附件"
                @upload-success="(l) => handleUpload('hot', 'idCard', l)"
                :fileList="listMap['hot.idCard']"
            /></el-form-item>
            <el-form-item label="特种作业证"
              ><UploadFiles
                disabled
                label="上传附件"
                @upload-success="(l) => handleUpload('hot', 'optionCard', l)"
                :fileList="listMap['hot.optionCard']"
            /></el-form-item>
            <el-form-item label="安全教育记录"
              ><UploadFiles
                disabled
                label="上传附件"
                @upload-success="(l) => handleUpload('hot', 'safetyEducationPlan', l)"
                :fileList="listMap['hot.safetyEducationPlan']"
            /></el-form-item>
            <el-form-item label="施工方案"
              ><UploadFiles
                disabled
                label="上传附件"
                @upload-success="(l) => handleUpload('hot', 'constructionPlan', l)"
                :fileList="listMap['hot.constructionPlan']"
            /></el-form-item>
            <el-form-item label="准备工作照片"
              ><UploadFiles
                disabled
                label="上传附件"
                @upload-success="(l) => handleUpload('hot', 'preparationPhotos', l)"
                :fileList="listMap['hot.preparationPhotos']"
            /></el-form-item>
            <el-form-item label="管理协议"
              ><UploadFiles
                disabled
                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> -->

    <main class="safety-platform-container__main">
      <el-form ref="formRef" :model="formValue" :rules="rules" disabled label-width="180px" label-position="right">
        <div class="section-title">基础信息</div>
        <div class="form-grid" style="width:50%">

          <el-form-item label="申请单位" prop="applicationUnitName"
            ><el-input size="large" placeholder="输入申请单位名称" v-model="formValue.applicationUnitName"
          /></el-form-item>

          <el-form-item label="申请人" prop="applicantName"
            ><el-input size="large" placeholder="输入申请人" 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" placeholder="输入申请人电话" v-model="formValue.applicantPhone"
          /></el-form-item>

          <el-form-item label="危险作业类别" prop="hazardOperationType">
            <el-select size="large" v-model="formValue.hazardOperationType" placeholder="选择危险作业类别">
              <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="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="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" style="width:50%">
            <el-form-item label="有限空间所属单位" prop="space.confinedSpaceUnit"
              ><el-input size="large" placeholder="输入有限空间所属单位" v-model="formValue.space.confinedSpaceUnit"
            /></el-form-item>
            <el-form-item label="有限空间名称" prop="space.confinedSpaceName"
              ><el-input size="large" placeholder="输入有限空间名称" v-model="formValue.space.confinedSpaceName"
            /></el-form-item>

            <el-form-item label="作业内容" prop="space.operationContent" class="span-full"
              ><el-input size="large" placeholder="输入作业内容" v-model="formValue.space.operationContent" type="textarea"
            /></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"
                placeholder="作业开始时间"
                style="width: 100%"
            /></el-form-item>
            <el-form-item label="作业结束时间" prop="space.operationEndTime"
              ><el-date-picker
                size="large"
                v-model="formValue.space.operationEndTime"
                placeholder="作业结束时间"
                value-format="YYYY-MM-DD"
                style="width: 100%"
            /></el-form-item>

            <el-form-item label="作业单位负责人" prop="space.unitResponsible"
              ><el-input size="large" placeholder="输入作业单位负责人" v-model="formValue.space.unitResponsible"
            /></el-form-item>
            <el-form-item label="监护人" prop="space.supervisor"
              ><el-input size="large" placeholder="输入监护人" v-model="formValue.space.supervisor"
            /></el-form-item>
            <el-form-item label="作业人" prop="space.operator"
              ><el-input size="large" placeholder="输入作业人" v-model="formValue.space.operator"
            /></el-form-item>
            <el-form-item label="涉及其它特殊作业" prop="space.otherSpecialOps"
              ><el-input size="large" placeholder="输入涉及其它特殊作业" v-model="formValue.space.otherSpecialOps"
            /></el-form-item>

            <el-form-item label="危害辨识" prop="space.hazardIdentification" class="span-full"
              ><el-input size="large" placeholder="输入危害辨识" v-model="formValue.space.hazardIdentification" type="textarea"
            /></el-form-item>
            <el-form-item label="作业附件" class="span-full" prop="space.attachment">
                <!-- <UploadFiles
                label="上传附件"
                disabled
                @upload-success="(l) => handleUpload('space', 'attachment', l)"
                :fileList="listMap['space.attachment']"
                /> -->
                <div class="file-list" v-if="listMap['space.attachment'].length > 0">
                    <div v-for="file in listMap['space.attachment']" :key="file.fileId" class="file-item">
                        <div class="file-info">
                            <img :src="FILE_TYPE_ICON[file.fileType as keyof typeof FILE_TYPE_ICON]" />
                            <span class="file-name">{{ file.fileName }}</span>
                        </div>
                        <div link class="fileAction" @click="previewOnline(file.fileUrl, file.fileType as keyof typeof FILE_TYPE_ICON)">预览</div>
                        <div link class="fileAction" @click.stop="downloadFile(file.fileUrl, file.fileName)">下载</div>
                    </div>
                </div>
        </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="有毒有害介质">
                <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="可燃气">
                <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="氧含量">
                <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="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.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="部位"
            ><template #default="scope"><el-input v-model="scope.row.analysisPosition" /></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="100" align="center">
            <template #default="scope"
              ><el-button type="primary" link @click="removeRow('analysis', scope.$index)">删除</el-button></template
            >
          </el-table-column>
        </el-table>
        </template>

        <template v-else-if="formValue.hazardOperationType === 2">
          <div class="section-title">高处作业详情</div>
          <div class="form-grid" style="width:50%">

            <el-form-item label="作业地点" prop="highAltitude.operationLocation"
              ><el-input size="large" placeholder="输入作业地点" v-model="formValue.highAltitude.operationLocation"
            /></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"
                placeholder="作业开始时间"
                style="width: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"
                placeholder="作业结束时间"
                style="width:100%"
            /></el-form-item>
            <el-form-item label="作业内容" prop="highAltitude.operationContent" class="span-full"
              ><el-input size="large" placeholder="输入作业内容" v-model="formValue.highAltitude.operationContent" type="textarea"
            /></el-form-item>

            <el-form-item label="作业高度" prop="highAltitude.operationHeight"
              ><el-input-number
                size="large"
                placeholder="输入作业高度"
                v-model="formValue.highAltitude.operationHeight"
                style="width:100%"
                :controls="false"
            /></el-form-item>

            <el-form-item label="作业单位" prop="highAltitude.operationUnit"
              ><el-input size="large" placeholder="输入作业单位" v-model="formValue.highAltitude.operationUnit"
            /></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" placeholder="输入作业人" v-model="formValue.highAltitude.operatorName"
            /></el-form-item>
            <el-form-item label="监护人" prop="highAltitude.supervisor"
              ><el-input size="large" placeholder="输入监护人" v-model="formValue.highAltitude.supervisor"
            /></el-form-item>
            <el-form-item label="涉及其它特殊作业" prop="highAltitude.operatorJob"
              ><el-input size="large" placeholder="输入涉及其它特殊作业" v-model="formValue.highAltitude.operatorJob"
            /></el-form-item>
            <el-form-item label="危害辨识" prop="highAltitude.hazardIdentification" class="span-full"
              ><el-input size="large" placeholder="输入危害辨识" v-model="formValue.highAltitude.hazardIdentification" type="textarea"
            /></el-form-item>
            <el-form-item label="作业附件" class="span-full" prop="highAltitude.attachment">
              <!-- <UploadFiles
                label="上传附件"
                @upload-success="(l) => handleUpload('highAltitude', 'attachment', l)"
                :fileList="listMap['highAltitude.attachment']"
            /> -->
                <div class="file-list" v-if="listMap['highAltitude.attachment'].length > 0">
                    <div v-for="file in listMap['highAltitude.attachment']" :key="file.fileId" class="file-item">
                        <div class="file-info">
                            <img :src="FILE_TYPE_ICON[file.fileType as keyof typeof FILE_TYPE_ICON]" />
                            <span class="file-name">{{ file.fileName }}</span>
                        </div>
                        <div link class="fileAction" @click="previewOnline(file.fileUrl, file.fileType as keyof typeof FILE_TYPE_ICON)">预览</div>
                        <div link class="fileAction" @click.stop="downloadFile(file.fileUrl, file.fileName)">下载</div>
                    </div>
                </div>
            </el-form-item>
          </div>
        </template>

        <template v-else-if="formValue.hazardOperationType === 3">
          <div class="section-title">临时用电详情</div>
          <div class="form-grid" style="width:50%">
            <el-form-item label="需求部门/IPT团队" prop="electricityList.requestDepartment"
              ><el-input size="large" placeholder="输入需求部门/IPT团队" 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.operationStartTime"
              ><el-date-picker
                size="large"
                placeholder="作业开始时间"
                v-model="formValue.electricityList.operationStartTime"
                value-format="YYYY-MM-DD"
                class="w-100"
                style="width: 100%;"
            /></el-form-item>
            <el-form-item label="作业结束时间" prop="electricityList.operationEndTime"
              ><el-date-picker
                size="large"
                placeholder="作业结束时间"
                v-model="formValue.electricityList.operationEndTime"
                value-format="YYYY-MM-DD"
                class="w-100"
                style="width:100%"
            /></el-form-item>
            <el-form-item label="事由" prop="electricityList.reason" class="span-full"
              ><el-input size="large" placeholder="输入事由" v-model="formValue.electricityList.reason" type="textarea" rows="3" show-word-limit maxlength="300" 
            /></el-form-item>
            <el-form-item label="责任人及联系方式" prop="electricityList.contactPerson"
              ><el-input size="large" placeholder="输入责任人及联系方式" v-model="formValue.electricityList.contactPerson" type="textarea" rows="3" show-word-limit maxlength="300" 
            /></el-form-item>
            <el-form-item label="设备及功率" prop="electricityList.equipmentPower"
              ><el-input size="large" placeholder="输入设备及功率" v-model="formValue.electricityList.equipmentPower" type="textarea" rows="3" show-word-limit maxlength="300" 
            /></el-form-item>
            
            <el-form-item label="保护措施" prop="electricityList.safety" class="span-full"
              ><el-input size="large" placeholder="输入保护措施" v-model="formValue.electricityList.safety" type="textarea" rows="3" show-word-limit maxlength="300" 
            /></el-form-item>
            
            <el-form-item label="需求部门负责人" prop="electricityList.deptManager" class="span-full"
              ><el-input size="large" placeholder="输入需求部门负责人" v-model="formValue.electricityList.deptManager" 
            /></el-form-item>

            <el-form-item label="建设管理部负责人" prop="electricityList.constructionManager" class="span-full"
              ><el-input size="large" placeholder="输入建设管理部负责人" v-model="formValue.electricityList.constructionManager" 
            /></el-form-item>
            <el-form-item label="申请附件" class="span-full" prop="electricityList.attachment">
              <!-- <UploadFiles
                label="上传附件"
                @upload-success="(l) => handleUpload('electricityList', 'attachment', l)"
                :fileList="listMap['electricityList.attachment']"
            /> -->
            <div class="file-list" v-if="listMap['electricityList.attachment'].length > 0">
                <div v-for="file in listMap['electricityList.attachment']" :key="file.fileId" class="file-item">
                    <div class="file-info">
                        <img :src="FILE_TYPE_ICON[file.fileType as keyof typeof FILE_TYPE_ICON]" />
                        <span class="file-name">{{ file.fileName }}</span>
                    </div>
                    <div link class="fileAction" @click="previewOnline(file.fileUrl, file.fileType as keyof typeof FILE_TYPE_ICON)">预览</div>
                    <div link class="fileAction" @click.stop="downloadFile(file.fileUrl, file.fileName)">下载</div>
                </div>
            </div>
        </el-form-item>
          </div>
        </template>

        <template v-else-if="formValue.hazardOperationType === 4">
          <div class="section-title">动火作业详情</div>
          <div class="form-grid" style="width:50%">
            <el-form-item label="动火作业地点" prop="hot.hotWorkLocation"
              ><el-input size="large" placeholder="输入动火作业地点" 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 :value="1">是</el-radio>
                <el-radio :value="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="动火时间起" prop="hot.hotWorkStart"
              ><el-date-picker
                size="large"
                placeholder="输入动火时间起"
                v-model="formValue.hot.hotWorkStart"
                value-format="YYYY-MM-DD"
                style="width:100%"
            /></el-form-item>
            <el-form-item label="动火时间止" prop="hot.hotWorkEnd"
              ><el-date-picker size="large" placeholder="动火时间止" v-model="formValue.hot.hotWorkEnd" value-format="YYYY-MM-DD" style="width:100%"
            /></el-form-item>

            <el-form-item label="动火任务" prop="hot.hotWorkTask" class="span-full"
              ><el-input size="large" placeholder="输入动火任务" v-model="formValue.hot.hotWorkTask" 
            /></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.hotWorkman"
              ><el-input size="large" placeholder="输入动火作业人员" v-model="formValue.hot.hotWorkman"
            /></el-form-item>

            <el-form-item label="动火人联系电话" prop="hot.hotWorkContact"
              ><el-input size="large" placeholder="输入动火人联系电话" v-model="formValue.hot.hotWorkContact"
            /></el-form-item>

            <el-form-item label="动火危险性分析" prop="hot.hazardAnalysis" class="span-full"
              ><el-input size="large" placeholder="输入动火危险性分析" v-model="formValue.hot.hazardAnalysis"
            /></el-form-item>

            <el-form-item label="消防安全防护措施" prop="hot.fireSafetyMeasures" class="span-full"
              ><el-input size="large" placeholder="输入消防安全防护措施" v-model="formValue.hot.fireSafetyMeasures"
            /></el-form-item>
          </div>

          <div class="form-grid" style="width:50%">
            <el-form-item label="施工单位指定动火监护人" prop="hot.constructionSupervisor"
              ><el-input size="large" placeholder="输入施工单位指定动火监护人"  v-model="formValue.hot.constructionSupervisor"
            /></el-form-item>
            <el-form-item label="施工单位指定动火监护人联系电话" prop="hot.supervisorContact"
              ><el-input size="large" placeholder="输入施工单位指定动火监护人联系电话" v-model="formValue.hot.supervisorContact"
            /></el-form-item>
            <el-form-item label="施工单位现场负责人" prop="hot.constructionSiteLeader"
              ><el-input size="large" placeholder="输入施工单位现场负责人" v-model="formValue.hot.constructionSiteLeader"
            /></el-form-item>
            <el-form-item label="施工单位教育人" prop="hot.constructionEducator"
              ><el-input size="large" placeholder="输入施工单位教育人" v-model="formValue.hot.constructionEducator"
            /></el-form-item>
            <el-form-item label="申请部门指定动火监护人" prop="hot.hotWorkSupervisor"
              ><el-input size="large" placeholder="输入申请部门指定动火监护人" v-model="formValue.hot.hotWorkSupervisor"
            /></el-form-item>
            <el-form-item label="申请部门指定动火监护人联系电话" prop="hot.supervisorNumber"
              ><el-input size="large" placeholder="输入申请部门指定动火监护人联系电话" v-model="formValue.hot.supervisorNumber"
            /></el-form-item>
          </div>

          <div class="form-grid" style="width:50%">
            <el-form-item label="动火操作现场防护措施及检查情况" prop="hot.supervisorMeasures" class="span-full"
              ><el-input size="large" placeholder="输入动火操作现场防护措施及检查情况" v-model="formValue.hot.supervisorMeasures" type="textarea"
            /></el-form-item>

            <el-form-item label="动火现场检查照片" prop="hot.photos">
              <!-- <UploadFiles
                label="上传附件"
                @upload-success="(l) => handleUpload('hot', 'photos', l)"
                :fileList="listMap['hot.photos']"
            /> -->
                <div class="file-list" v-if="listMap['hot.photos'].length > 0">
                    <div v-for="file in listMap['hot.photos']" :key="file.fileId" class="file-item">
                        <div class="file-info">
                            <img :src="FILE_TYPE_ICON[file.fileType as keyof typeof FILE_TYPE_ICON]" />
                            <span class="file-name">{{ file.fileName }}</span>
                        </div>
                        <div link class="fileAction" @click="previewOnline(file.fileUrl, file.fileType as keyof typeof FILE_TYPE_ICON)">预览</div>
                        <div link class="fileAction" @click.stop="downloadFile(file.fileUrl, file.fileName)">下载</div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="身份证复印件" prop="hot.idCard">
              <!-- <UploadFiles
                label="上传附件"
                @upload-success="(l) => handleUpload('hot', 'idCard', l)"
                :fileList="listMap['hot.idCard']"
            /> -->
                <div class="file-list" v-if="listMap['hot.idCard'].length > 0">
                    <div v-for="file in listMap['hot.idCard']" :key="file.fileId" class="file-item">
                        <div class="file-info">
                            <img :src="FILE_TYPE_ICON[file.fileType as keyof typeof FILE_TYPE_ICON]" />
                            <span class="file-name">{{ file.fileName }}</span>
                        </div>
                        <div link class="fileAction" @click="previewOnline(file.fileUrl, file.fileType as keyof typeof FILE_TYPE_ICON)">预览</div>
                        <div link class="fileAction" @click.stop="downloadFile(file.fileUrl, file.fileName)">下载</div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="动火人特种作业操作证复印件" prop="hot.optionCard">
              <!-- <UploadFiles
                label="上传附件"
                @upload-success="(l) => handleUpload('hot', 'optionCard', l)"
                :fileList="listMap['hot.optionCard']"
            /> -->
                <div class="file-list" v-if="listMap['hot.optionCard'].length > 0">
                    <div v-for="file in listMap['hot.optionCard']" :key="file.fileId" class="file-item">
                        <div class="file-info">
                            <img :src="FILE_TYPE_ICON[file.fileType as keyof typeof FILE_TYPE_ICON]" />
                            <span class="file-name">{{ file.fileName }}</span>
                        </div>
                        <div link class="fileAction" @click="previewOnline(file.fileUrl, file.fileType as keyof typeof FILE_TYPE_ICON)">预览</div>
                        <div link class="fileAction" @click.stop="downloadFile(file.fileUrl, file.fileName)">下载</div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="动火安全教育记录" prop="hot.safetyEducationPlan">
              <!-- <UploadFiles
                label="上传附件"
                @upload-success="(l) => handleUpload('hot', 'safetyEducationPlan', l)"
                :fileList="listMap['hot.safetyEducationPlan']"
            /> -->
                <div class="file-list" v-if="listMap['hot.safetyEducationPlan'].length > 0">
                    <div v-for="file in listMap['hot.safetyEducationPlan']" :key="file.fileId" class="file-item">
                        <div class="file-info">
                            <img :src="FILE_TYPE_ICON[file.fileType as keyof typeof FILE_TYPE_ICON]" />
                            <span class="file-name">{{ file.fileName }}</span>
                        </div>
                        <div link class="fileAction" @click="previewOnline(file.fileUrl, file.fileType as keyof typeof FILE_TYPE_ICON)">预览</div>
                        <div link class="fileAction" @click.stop="downloadFile(file.fileUrl, file.fileName)">下载</div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="动火作业施工方案" prop="hot.constructionPlan">
              <!-- <UploadFiles
                label="上传附件"
                @upload-success="(l) => handleUpload('hot', 'constructionPlan', l)"
                :fileList="listMap['hot.constructionPlan']"
            /> -->
                <div class="file-list" v-if="listMap['hot.constructionPlan'].length > 0">
                    <div v-for="file in listMap['hot.constructionPlan']" :key="file.fileId" class="file-item">
                        <div class="file-info">
                            <img :src="FILE_TYPE_ICON[file.fileType as keyof typeof FILE_TYPE_ICON]" />
                            <span class="file-name">{{ file.fileName }}</span>
                        </div>
                        <div link class="fileAction" @click="previewOnline(file.fileUrl, file.fileType as keyof typeof FILE_TYPE_ICON)">预览</div>
                        <div link class="fileAction" @click.stop="downloadFile(file.fileUrl, file.fileName)">下载</div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="动火作业场所准备照片" prop="hot.preparationPhotos">
              <!-- <UploadFiles
                label="上传附件"
                @upload-success="(l) => handleUpload('hot', 'preparationPhotos', l)"
                :fileList="listMap['hot.preparationPhotos']"
            /> -->
                <div class="file-list" v-if="listMap['hot.preparationPhotos'].length > 0">
                    <div v-for="file in listMap['hot.preparationPhotos']" :key="file.fileId" class="file-item">
                        <div class="file-info">
                            <img :src="FILE_TYPE_ICON[file.fileType as keyof typeof FILE_TYPE_ICON]" />
                            <span class="file-name">{{ file.fileName }}</span>
                        </div>
                        <div link class="fileAction" @click="previewOnline(file.fileUrl, file.fileType as keyof typeof FILE_TYPE_ICON)">预览</div>
                        <div link class="fileAction" @click.stop="downloadFile(file.fileUrl, file.fileName)">下载</div>
                    </div>
                </div>
            </el-form-item>

            <el-form-item label="特种行业操作证网上查询情况照片" prop="hot.operationCertificates">
              <!-- <UploadFiles
                label="上传附件"
                @upload-success="(l) => handleUpload('hot', 'operationCertificates', l)"
                :fileList="listMap['hot.operationCertificates']"
            /> -->
                <div class="file-list" v-if="listMap['hot.operationCertificates'].length > 0">
                    <div v-for="file in listMap['hot.operationCertificates']" :key="file.fileId" class="file-item">
                        <div class="file-info">
                            <img :src="FILE_TYPE_ICON[file.fileType as keyof typeof FILE_TYPE_ICON]" />
                            <span class="file-name">{{ file.fileName }}</span>
                        </div>
                        <div link class="fileAction" @click="previewOnline(file.fileUrl, file.fileType as keyof typeof FILE_TYPE_ICON)">预览</div>
                        <div link class="fileAction" @click.stop="downloadFile(file.fileUrl, file.fileName)">下载</div>
                    </div>
                </div>
            </el-form-item>

            <el-form-item label="动火作业安全管理协议" prop="hot.safetyManagementAgreement">
              <!-- <UploadFiles
                label="上传附件"
                @upload-success="(l) => handleUpload('hot', 'safetyManagementAgreement', l)"
                :fileList="listMap['hot.safetyManagementAgreement']"
            /> -->
                <div class="file-list" v-if="listMap['hot.safetyManagementAgreement'].length > 0">
                    <div v-for="file in listMap['hot.safetyManagementAgreement']" :key="file.fileId" class="file-item">
                        <div class="file-info">
                            <img :src="FILE_TYPE_ICON[file.fileType as keyof typeof FILE_TYPE_ICON]" />
                            <span class="file-name">{{ file.fileName }}</span>
                        </div>
                        <div link class="fileAction" @click="previewOnline(file.fileUrl, file.fileType as keyof typeof FILE_TYPE_ICON)">预览</div>
                        <div link class="fileAction" @click.stop="downloadFile(file.fileUrl, file.fileName)">下载</div>
                    </div>
                </div>
            </el-form-item>
          </div>
        </template>

        <div class="form-line-divider"></div>
        <div v-if="formValue.hazardOperationType < 3">
            <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 placeholder="输入安全措施" v-model="scope.row.safetyMeasure" /></template
            ></el-table-column>
            <el-table-column label="确认人" width="200"
                ><template #default="scope"><el-input placeholder="输入确认人" v-model="scope.row.confirmer" /></template
            ></el-table-column>
            <el-table-column label="操作" width="100" align="center">
                <template #default="scope"
                ><el-button type="primary" link @click="removeRow('measure', scope.$index)">删除</el-button></template
                >
            </el-table-column>
            </el-table>
        </div>
      </el-form>
    </main>

    <footer class="safety-platform-container__footer">
      <el-button size="large" @click="router.back()">返回</el-button>
    </footer>

    <PreviewOnline ref="previewOnlineRef" />
  </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 } 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';
  import PreviewOnline from '@/views/disaster/components/PreviewOnline.vue';
  import { FILE_TYPE_ICON } from '@/components/UploadFiles/constants';
  import type { FileItem } from '@/components/UploadFiles/types';
  import { downloadFile } from '@/views/disaster/utils';
  const router = useRouter();
  const route = useRoute();
  const formRef = ref<any>(null);
  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.operationCertificates': [],
    '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: '',
      operationCertificates: '',
      safetyManagementAgreement: '',
    },
    measure: [],
    analysis: [],
  });

  const r = { required: true, message: '此项必填', trigger: ['blur', 'change'] };
const rules = reactive({
    templateId: [r],
    applicationUnitName: [r],
    applicantName: [r],
    applicationDepartment: [r],
    applicantPhone: [r],
    hazardOperationType:[r],
    remark: [r],
    // 有限空间
    'space.confinedSpaceUnit': [r],
    'space.confinedSpaceName': [r],
    'space.unitResponsible': [r],
    'space.supervisor': [r],
    'space.operator': [r],
    'space.otherSpecialOps': [r],
    'space.operationStartTime': [r],
    'space.operationEndTime': [r],
    'space.operationContent': [r],
    'space.hazardIdentification': [r],
    'space.attachment':[r],
    // 高处作业
    'highAltitude.operationLocation': [r],
    'highAltitude.operationUnit': [r],
    'highAltitude.operationHeight': [r],
    'highAltitude.operationType': [r],
    'highAltitude.operatorName': [r],
    'highAltitude.supervisor': [r],
    'highAltitude.operationStartTime': [r],
    'highAltitude.operationEndTime': [r],
    'highAltitude.operationContent': [r],
    'highAltitude.hazardIdentification': [r],
    'highAltitude.operatorJob':[r],
    'highAltitude.attachment':[r],
    // 临时用电
    'electricityList.requestDepartment': [r],
    'electricityList.electricityType': [r],
    'electricityList.contactPerson': [r],
    'electricityList.equipmentPower': [r],
    'electricityList.operationStartTime': [r],
    'electricityList.operationEndTime': [r],
    'electricityList.safety': [r],
    'electricityList.deptManager': [r],
    'electricityList.constructionManager':[r],
    'electricityList.reason': [r],
    'electricityList.attachment': [r],
    // 动火作业
    'hot.hotWorkLocation': [r],
    'hot.hotWorkLevel': [r],
    'hot.isSpecialPeriod':[r],
    'hot.hotWorkType': [r],
    'hot.hotWorkStart': [r],
    'hot.hotWorkEnd': [r],
    'hot.hotWorkman': [r],
    'hot.hotWorkContact': [r],
    'hot.constructionSupervisor': [r],
    'hot.supervisorContact': [r],
    'hot.constructionSiteLeader': [r],
    'hot.constructionEducator': [r],
    'hot.hotWorkSupervisor': [r],
    'hot.supervisorNumber': [r],
    'hot.hotWorkTask': [r],
    'hot.hazardAnalysis': [r],
    'hot.fireSafetyMeasures': [r],
    'hot.supervisorMeasures': [r],
    // 动火附件
    'hot.photos': [r],
    'hot.idCard': [r],
    'hot.optionCard': [r],
    'hot.safetyEducationPlan': [r],
    'hot.constructionPlan': [r],
    'hot.preparationPhotos': [r],
    'hot.operationCertificates': [r],
    'hot.safetyManagementAgreement': [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);
        res.applicationDepartmentId = JSON.parse(res.applicationDepartmentId)
      // 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('详情回显失败');
    }
  };
  // 预览
  const previewOnlineRef = ref<InstanceType<typeof PreviewOnline>>();
  const previewOnline = (url: string | undefined, type: keyof typeof FILE_TYPE_ICON) => {
    if (url) {
      previewOnlineRef.value?.open(url, type);
    }
  };
  /**
   * 辅助：表格行操作
   */
  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;
      }
    }
  }
  .file-list {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    &:first-child {
        margin-top: 0;
    }
  }

  .file-item {
    @include flex-center;
    justify-content: space-between;
    gap: 10px;
    height: 32px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 12px;
    transition: all 0.2s ease;

    &:hover {
      background-color: #f8fafc;
    }
  }

  .file-info {
    display: flex;
    align-items: center;
    gap: 8px;

    img {
      width: 10px;
    }
  }

  .file-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: rgba($text-color, 0.65);
  }
  .fileAction {
    width: 60px;
    text-align: center;
    cursor: pointer;
    color: #1777ff;
  }
  .delete-button {
    color: #ef4444;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
  }
  :deep(.preview-img){
    overflow: auto;
    img {
        max-height: 90vh;
    }
  }
</style>