@fe6/water-pro/components/table-pro/src/hooks/use-table-form.ts

An enterprise-class UI design language and Vue-based implementation

/** @format */

import type { ComputedRef, Slots } from 'vue';
import type { TableProProps, FetchParams } from '../types/table';

import { unref, computed } from 'vue';
import { isFunction } from '@fe6/shared';

import type { FormProps } from '../../../form-pro';

export function useTableForm(
  propsRef: ComputedRef<TableProProps>,
  slots: Slots,
  fetch: (opt?: FetchParams | undefined) => any,
) {
  const getFormProps = computed((): Partial<FormProps> => {
    const { formConfig } = unref(propsRef);
    return {
      showAdvancedButton: true,
      ...formConfig,
      compact: true,
      // FIX 表单筛选自动清空
      submitOnReset: formConfig.submitOnReset !== undefined ? formConfig.submitOnReset : false,
      // FIX 表单重置自动执行提交
      resetOnSubmit: formConfig.resetOnSubmit !== undefined ? formConfig.resetOnSubmit : true,
    };
  });

  const getFormSlotKeys = computed(() => {
    const keys = Object.keys(slots);
    return keys.map((item) => (item.startsWith('form-') ? item : null)).filter(Boolean);
  });

  function replaceFormSlotKey(key: string) {
    if (!key) {
      return '';
    }
    return key?.replace?.(/form\-/, '') ?? '';
  }

  function handleSearchInfoChange(info: Recordable) {
    const { handleSearchInfoFn } = unref(propsRef);
    if (handleSearchInfoFn && isFunction(handleSearchInfoFn)) {
      info = handleSearchInfoFn(info) || info;
    }
    fetch({ searchInfo: info, page: 1 });
  }

  return {
    getFormProps,
    replaceFormSlotKey,
    getFormSlotKeys,
    handleSearchInfoChange,
  };
}