index.vue 2.23 KB
<script lang="ts" setup>
  import { onMounted, ref, toRaw, unref, watch } from 'vue';
  import { getFormSchemas, RelationsQueryFormFieldsEnum, ValueType } from './config';
  import { BasicForm, useForm } from '/@/components/Form';
  import { CorrelationFilters } from '../CorrelationFilters';
  import { FormFieldsEnum as CorrelationFiltersFormFieldsEnum } from '../CorrelationFilters/config';

  const props = withDefaults(
    defineProps<{
      value?: ValueType;
      allowAddFilters?: boolean;
    }>(),
    {
      value: () => ({}),
      allowAddFilters: true,
    }
  );

  const correlationFiltersElRef = ref<Nullable<InstanceType<typeof CorrelationFilters>>>();

  const [register, formactionType] = useForm({
    showActionButtonGroup: false,
    schemas: getFormSchemas(props.allowAddFilters),
  });

  watch(
    () => props.value,
    (target) => {
      setFieldsValue(toRaw(unref(target)));
    }
  );

  onMounted(() => {
    setFieldsValue(toRaw(unref(props.value)));
  });

  const getFieldsValue = () => {
    const value = formactionType.getFieldsValue();
    const correlationValue = unref(correlationFiltersElRef)?.getFieldsValue();
    return {
      ...value,
      [RelationsQueryFormFieldsEnum.FILTERS]: correlationValue?.map((item) => ({
        [CorrelationFiltersFormFieldsEnum.ENTITY_TYPES]:
          item[CorrelationFiltersFormFieldsEnum.ENTITY_TYPES],
        [CorrelationFiltersFormFieldsEnum.RELATION_TYPE]:
          item[CorrelationFiltersFormFieldsEnum.RELATION_TYPE],
      })),
    };
  };

  const setFieldsValue = (value?: ValueType) => {
    formactionType.setFieldsValue(value);
    unref(correlationFiltersElRef)?.setFieldsValue(
      value?.[RelationsQueryFormFieldsEnum.FILTERS] || []
    );
  };

  const validate = async () => {
    await formactionType.validate();
    await unref(correlationFiltersElRef)?.validate();

    return getFieldsValue();
  };

  defineExpose({
    getFieldsValue,
    setFieldsValue,
    validate,
  });
</script>

<template>
  <BasicForm @register="register">
    <template #filters="{ field, model }">
      <CorrelationFilters
        ref="correlationFiltersElRef"
        v-model:value="model[field]"
        :allowAddFilters="allowAddFilters"
      />
    </template>
  </BasicForm>
</template>