sl-sfy-safety/src/views/emergency/emergency-drill/components/DrillPlanCreateItem.vue

<template>
  <div>
    <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
      <template #drillScope>
        <el-select v-model="ruleFormData.drillScope" placeholder="请选择演练规模" filterable>
          <el-option
            v-for="item in drillScopeDice"
            :key="item.itemCode"
            :label="item.itemValue"
            :value="item.itemCode"
          />
        </el-select>
      </template>
      <template #responsibleDeptIdList>
        <el-cascader
          v-model="ruleFormData.responsibleDeptIdList"
          :options="deptTree"
          :props="cascaderProp"
          clearable
          collapse-tags
          :show-all-levels="false"
          :max-collapse-tags="3"
          placeholder="请选择责任部门"
        >
        </el-cascader>
      </template>
      <template #coordinateDeptIdList>
        <el-cascader
          v-model="ruleFormData.coordinateDeptIdList"
          :options="deptTree"
          :props="cascaderProp"
          clearable
          collapse-tags
          :show-all-levels="false"
          :max-collapse-tags="3"
          placeholder="请选择配合部门"
        >
        </el-cascader>
      </template>
      <template #preplanId>
        <el-select
          v-model="ruleFormData.preplanId"
          multiple
          collapse-tags
          collapse-tags-tooltip
          :max-collapse-tags="1"
          placeholder="请选择应急预案"
          filterable
          @change=""
          class="custom-select"
        >
          <!-- <el-option v-for="item in firstLevelDepts" :key="item.id" :label="item.deptName" :value="item.id" /> -->
        </el-select>
      </template>
      <template #approvalTemplateId>
        <el-select
          v-model="ruleFormData.approvalTemplateId"
          placeholder="请选择审批流程"
          class="custom-select"
          filterable
        >
          <el-option v-for="item in allApprovals" :key="item.id" :label="item.templateName" :value="item.id" />
        </el-select>
      </template>
    </BasicForm>
  </div>
</template>

<script setup lang="ts">
  import BasicForm from '@/components/BasicForm.vue';
  import { useFormConfigHook } from '@/hooks/useFormConfigHook';
  import { DRILL_CREATE_FORM_CONFIG, DRILL_CREATE_FORM_DATA, DRILL_CREATE_FORM_RULES } from '../configs/plan/form';
  import { CreateEmergencyDrillRuleForm } from '../types';
  import { onMounted, ref } from 'vue';
  import { DeptTree } from '@/types/dept/type';
  import { getAllDepartments } from '@/api/auth/dept';
  import { getAllApproval } from '@/api/approval/approval';
  import { ApprovalInstanceType } from '@/views/system/approval/types';
  import { useEmergencyDrillHook } from '../hook';

  // 表单配置初始化
  const basicFormRef = ref<InstanceType<typeof BasicForm>>();
  const { ruleFormConfig, ruleFormData, formRules, cloneRuleFormData, beforeRouteLeave } =
    useFormConfigHook<CreateEmergencyDrillRuleForm>(
      DRILL_CREATE_FORM_CONFIG,
      DRILL_CREATE_FORM_DATA,
      DRILL_CREATE_FORM_RULES,
    );
  const cascaderProp = { multiple: true, expandTrigger: 'hover', emitPath: false, value: 'id', label: 'deptName' };

  // 获取级联部门数据
  const deptTree = ref<DeptTree[]>();
  const loadDeptTreeData = async () => {
    const result = await getAllDepartments();
    deptTree.value = result;
  };

  // 获取所有审批流程
  const allApprovals = ref<ApprovalInstanceType[]>();
  const loadApprovalData = async () => {
    const result = await getAllApproval();
    allApprovals.value = result;
  };

  // 获取演练规模字典
  const { drillScopeDice, getDrillScopeDict } = useEmergencyDrillHook();

  onMounted(() => {
    getDrillScopeDict();
    loadDeptTreeData();
    loadApprovalData();
  });

  // 表单校验
  const formValidate = async () => {
    if (!basicFormRef.value) return;
    const parentValidateResult = await basicFormRef.value.validateForm();
    return parentValidateResult;
  };

  // 表单数据获取
  const getFormData = () => {
    cloneRuleFormData();
    return ruleFormData;
  };

  defineExpose({
    formValidate,
    getFormData,
  });
</script>

<style scoped></style>