sl-sfy-safety/src/views/emergency/emergency-procedure/components/AddLossItemRecord.vue

<template>
  <div>
    <el-dialog v-model="dialogVisible" width="700" align-center @close="handleCancel" class="add-loss-item-dialog">
      <template #header>
        <div class="dialog-header">
          <span>添加损失物品</span>
        </div>
      </template>
      <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
        <template #affectedRoom>
          <div class="affected-room-container">
            <el-form-item prop="buildingNo">
              <el-input v-model="ruleFormData.buildingNo" placeholder="楼号" />
            </el-form-item>
            <el-form-item prop="floorNo">
              <el-input v-model="ruleFormData.floorNo" placeholder="楼层" />
            </el-form-item>
            <el-form-item prop="roomNo">
              <el-input v-model="ruleFormData.roomNo" placeholder="房间号" />
            </el-form-item>
          </div>
        </template>
        <template #safetyLevel>
          <el-select v-model="ruleFormData.safetyLevel" placeholder="请选择影响安全评估">
            <el-option
              v-for="item in safetyLevelDice"
              :key="item.itemCode"
              :label="item.itemValue"
              :value="item.itemCode"
            />
          </el-select>
        </template>
        <template #responsibleDeptId>
          <el-select v-model="ruleFormData.responsibleDeptId" placeholder="请选择整改责任部门" filterable>
            <el-option v-for="item in firstLevelDepts" :key="item.id" :label="item.deptName" :value="item.id" />
          </el-select>
        </template>
      </BasicForm>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">提交</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import BasicForm from '@/components/BasicForm.vue';
  import { useFormConfigHook } from '@/hooks/useFormConfigHook';
  import type { LossReportItemFormData } from '@/types/disaster-control';
  import { useDeptInfoHook } from '@/views/disaster/hooks';
  import { useDisasterControlHook } from '@/views/disaster/disaster-control/src/hook';

  import {
    LOSS_ITEM_FORM_OF_EMERGENCY_PROCEDURE,
    LOSS_ITEM_FORM_RULES_OF_EMERGENCY_PROCEDURE,
    LOSS_ITEM_PARAM_OF_EMERGENCY_PROCEDURE,
  } from '../config';

  const { safetyLevelDice, getSafetyLevelDict } = useDisasterControlHook();
  const { firstLevelDepts, getFirstLevelDepts } = useDeptInfoHook();

  const { ruleFormConfig, ruleFormData, formRules } = useFormConfigHook<LossReportItemFormData>(
    LOSS_ITEM_FORM_OF_EMERGENCY_PROCEDURE,
    LOSS_ITEM_PARAM_OF_EMERGENCY_PROCEDURE,
    LOSS_ITEM_FORM_RULES_OF_EMERGENCY_PROCEDURE,
  );

  const emits = defineEmits(['submit', 'cancel']);

  const dialogVisible = ref(true);

  const handleSubmit = () => {
    const responsibleDeptName = firstLevelDepts.value.find(
      (dept) => dept.id === ruleFormData.responsibleDeptId,
    )?.deptName;
    emits('submit', { ...ruleFormData }, responsibleDeptName);
  };

  const handleCancel = () => {
    emits('cancel');
  };

  onMounted(() => {
    getSafetyLevelDict();
    getFirstLevelDepts();
  });
</script>

<style scoped lang="scss">
  :deep(.add-loss-item-dialog) {
    min-height: 500px;
    padding: 20px 30px;

    .el-dialog__header {
      padding-right: 0;
      padding-bottom: 40px;
    }
    .dialog-header {
      font-size: 20px;
      font-weight: bold;
      display: flex;
      justify-content: center;
    }

    .el-dialog__headerbtn {
      font-size: 30px;
      width: 60px;
      height: 60px;
      top: 8px;
      right: 8px;
    }

    .el-dialog__body {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .el-dialog__footer {
      padding-top: 40px;
    }
  }

  .affected-room-container {
    display: flex;
  }
</style>