sl-sfy-safety/src/views/traffic/regulation/components/NoticeEdit.vue

<template>
  <main class="safety-platform-container__main">
    <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
      <template #noticeFiles>
        <UploadFiles label="上传附件" ref="uploadFilesRef" @uploadSuccess="handleUploadSuccess" />
      </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 === IS_PUSH.PUSH"
          ref="selectGroupRef"
          :userGroupList="ruleFormData.userGroupList || []"
          @userGroupListChange="handleUserGroupListChange"
        />
      </template>
    </BasicForm>
  </main>
  <footer class="safety-platform-container__footer">
    <el-button @click="router.back()">取消</el-button>
    <el-button type="primary" @click="handleSubmit">提交</el-button>
  </footer>
  <UploadLoading :form-loading="formLoading" v-if="formLoading" />
</template>

<script setup lang="ts">
  import BasicForm from '@/components/BasicForm.vue';
  import UploadFiles from '@/views/disaster/components/UploadFiles.vue';
  import SelectGroup from '@/components/PersonGroup/SelectGroup.vue';
  import { useFormConfigHook } from '@/hooks/useFormConfigHook';
  import { IS_PUSH } from '../constants';
  import { NOTICE_FORM_CONFIG, NOTICE_FORM_DATA, NOTICE_FORM_RULES } from '../configs/form';
  import { FileItem, NoticeRuleForm } from '../types';
  import { onMounted, ref } from 'vue';
  import UploadLoading from '@/components/UploadLoading.vue';
  import { useRouter } from 'vue-router';

  const props = defineProps<{
    id: number;
  }>();
  const getNoticeDetail = async () => {
    // TODO 获取详情并写入表单
  };

  const { ruleFormData, formRules, ruleFormConfig, cloneRuleFormData, beforeRouteLeave } =
    useFormConfigHook<NoticeRuleForm>(NOTICE_FORM_CONFIG, NOTICE_FORM_DATA, NOTICE_FORM_RULES);

  const basicFormRef = ref<InstanceType<typeof BasicForm>>();
  const selectGroupRef = ref<InstanceType<typeof SelectGroup>>();

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

  const handleUploadSuccess = (fileList: FileItem[]) => {
    ruleFormData.noticeFiles = fileList;
  };

  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;
  };

  const formLoading = ref(false);
  const router = useRouter();
  const handleSubmit = () => {
    handleValidate();
  };

  // defineExpose({
  //   handleValidate,
  //   getFormData,
  // });

  onMounted(async () => {
    await getNoticeDetail();
    cloneRuleFormData();
    beforeRouteLeave();
  });
</script>

<style scoped lang="scss">
  @use '@/styles/page-details-layout.scss' as *;
</style>