sl-sfy-safety/src/views/disaster/disaster-warning/src/components/CreateWarningInfoItem.vue

<template>
  <div class="info-container">
    <section>
      <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
        <template #disasterType>
          <el-select v-model="ruleFormData.disasterType" placeholder="请选择预警类型" filterable>
            <el-option
              v-for="item in warningTypeDice"
              :key="item.itemCode"
              :label="item.itemValue"
              :value="item.itemCode"
            />
          </el-select>
        </template>
        <template #disasterLevel>
          <el-select v-model="ruleFormData.disasterLevel" placeholder="请选择灾害等级">
            <el-option
              v-for="item in disasterLevelDice"
              :key="item.itemCode"
              :label="item.itemValue"
              :value="item.itemCode"
            />
          </el-select>
        </template>
        <template #isPush>
          <el-radio-group v-model="ruleFormData.isPush">
            <el-radio :value="IS_PUSH.PUSH">是</el-radio>
            <el-radio :value="IS_PUSH.NOT_PUSH">否</el-radio>
          </el-radio-group>
          <SelectGroup
            v-if="ruleFormData.isPush"
            ref="selectGroupRef"
            :userGroupList="ruleFormData.userGroupList || []"
            @userGroupListChange="handleUserGroupListChange"
          />
        </template>
      </BasicForm>
    </section>
  </div>
</template>

<script setup lang="ts">
  import BasicForm from '@/components/BasicForm.vue';
  import { useFormConfigHook } from '@/hooks/useFormConfigHook';
  import { WARNING_INFO_FROM_CONFIG, WARNING_INFO_FROM_DATA, WARNING_INFO_FROM_RULES } from '../config';
  import { onMounted, ref } from 'vue';
  import { WarningInfoRuleForm } from '../type';
  import SelectGroup from './SelectGroup.vue';
  import { useUserInfoHook } from '@/views/disaster/hooks/userInfo';
  import { useDisasterWarningHook } from '../hook';
  import { IS_PUSH } from '@/views/disaster/constant';

  const { realname } = useUserInfoHook();
  const basicFormRef = ref<InstanceType<typeof BasicForm>>();
  const selectGroupRef = ref<InstanceType<typeof SelectGroup>>();

  const { warningTypeDice, disasterLevelDice, getWarningInfoDict, getDisasterLevelDict } = useDisasterWarningHook();

  const { ruleFormConfig, ruleFormData, formRules, cloneRuleFormData, beforeRouteLeave } =
    useFormConfigHook<WarningInfoRuleForm>(WARNING_INFO_FROM_CONFIG, WARNING_INFO_FROM_DATA, WARNING_INFO_FROM_RULES);

  const handleUserGroupListChange = (userGroupList: number[]) => {
    ruleFormData.userGroupList = userGroupList;
  };

  const handleValidate = async () => {
    if (!basicFormRef.value) return;
    const parentValidateResult = await basicFormRef.value.validateForm();
    let childValidateResult = true;
    if (selectGroupRef.value) {
      childValidateResult = (await selectGroupRef.value.validateForm()) as boolean;
    }
    return parentValidateResult && childValidateResult;
  };
  const getFormData = () => {
    if (!ruleFormData.isPush) {
      ruleFormData.userGroupList = [];
    }
    cloneRuleFormData();
    return ruleFormData;
  };
  defineExpose({
    handleValidate,
    getFormData,
  });

  onMounted(() => {
    getWarningInfoDict();
    getDisasterLevelDict();
    ruleFormData.realname = realname;
    cloneRuleFormData();
    beforeRouteLeave();
  });
</script>

<style scoped lang="scss">
  @use '@/views/disaster/style/info-container.scss' as *;
  :deep(.el-date-editor) {
    --el-date-editor-width: 100%;
  }
</style>