github.com/e154/smart-home@v0.17.2-0.20240311175135-e530a6e5cd45/static_source/admin/src/hooks/web/useForm.ts (about)

     1  import type { Form, FormExpose } from '@/components/Form'
     2  import type { ElForm } from 'element-plus'
     3  import { ref, unref, nextTick } from 'vue'
     4  import type { FormProps } from '@/components/Form/src/types'
     5  import { FormSchema, FormSetPropsType } from '@/types/form'
     6  
     7  export const useForm = (props?: FormProps) => {
     8    // From实例
     9    const formRef = ref<typeof Form & FormExpose>()
    10  
    11    // ElForm实例
    12    const elFormRef = ref<ComponentRef<typeof ElForm>>()
    13  
    14    /**
    15     * @param ref Form实例
    16     * @param elRef ElForm实例
    17     */
    18    const register = (ref: typeof Form & FormExpose, elRef: ComponentRef<typeof ElForm>) => {
    19      formRef.value = ref
    20      elFormRef.value = elRef
    21    }
    22  
    23    const getForm = async () => {
    24      await nextTick()
    25      const form = unref(formRef)
    26      if (!form) {
    27        console.error('The form is not registered. Please use the register method to register')
    28      }
    29      return form
    30    }
    31  
    32    // 一些内置的方法
    33    const methods: {
    34      setProps: (props: Recordable) => void
    35      setValues: (data: Recordable) => void
    36      getFormData: <T = Recordable | undefined>() => Promise<T>
    37      setSchema: (schemaProps: FormSetPropsType[]) => void
    38      addSchema: (formSchema: FormSchema, index?: number) => void
    39      delSchema: (field: string) => void
    40    } = {
    41      setProps: async (props: FormProps = {}) => {
    42        const form = await getForm()
    43        form?.setProps(props)
    44        if (props.model) {
    45          form?.setValues(props.model)
    46        }
    47      },
    48  
    49      setValues: async (data: Recordable) => {
    50        const form = await getForm()
    51        form?.setValues(data)
    52      },
    53  
    54      /**
    55       * @param schemaProps 需要设置的schemaProps
    56       */
    57      setSchema: async (schemaProps: FormSetPropsType[]) => {
    58        const form = await getForm()
    59        form?.setSchema(schemaProps)
    60      },
    61  
    62      /**
    63       * @param formSchema 需要新增数据
    64       * @param index 在哪里新增
    65       */
    66      addSchema: async (formSchema: FormSchema, index?: number) => {
    67        const form = await getForm()
    68        form?.addSchema(formSchema, index)
    69      },
    70  
    71      /**
    72       * @param field 删除哪个数据
    73       */
    74      delSchema: async (field: string) => {
    75        const form = await getForm()
    76        form?.delSchema(field)
    77      },
    78  
    79      /**
    80       * @returns form data
    81       */
    82      getFormData: async <T = Recordable>(): Promise<T> => {
    83        const form = await getForm()
    84        return form?.formModel as T
    85      }
    86    }
    87  
    88    props && methods.setProps(props)
    89  
    90    return {
    91      register,
    92      elFormRef,
    93      methods
    94    }
    95  }