| 提交 | 用户 | age | ||
| 2f6253 | 1 | import type { FormProps, FormActionType, UseFormReturnType, FormSchema } from '../types/form'; |
| 2407b3 | 2 | import type { NamePath } from 'ant-design-vue/lib/form/interface'; |
| fcee7d | 3 | import type { DynamicProps } from '/#/utils'; |
| 305630 | 4 | import { ref, onUnmounted, unref, nextTick, watch } from 'vue'; |
| V | 5 | import { isProdMode } from '/@/utils/env'; |
| 6 | import { error } from '/@/utils/log'; | |
| 7 | import { getDynamicProps } from '/@/utils'; | |
| 2407b3 | 8 | |
| 4ff1c4 | 9 | export declare type ValidateFields = (nameList?: NamePath[]) => Promise<Recordable>; |
| 2f6253 | 10 | |
| a305e5 | 11 | type Props = Partial<DynamicProps<FormProps>>; |
| V | 12 | |
| 13 | export function useForm(props?: Props): UseFormReturnType { | |
| 4ff1c4 | 14 | const formRef = ref<Nullable<FormActionType>>(null); |
| V | 15 | const loadedRef = ref<Nullable<boolean>>(false); |
| 16 | ||
| 17 | async function getForm() { | |
| 2f6253 | 18 | const form = unref(formRef); |
| 陈 | 19 | if (!form) { |
| 4ff1c4 | 20 | error( |
| 56a966 | 21 | 'The form instance has not been obtained, please make sure that the form has been rendered when performing the form operation!', |
| 4ff1c4 | 22 | ); |
| 2f6253 | 23 | } |
| 4ff1c4 | 24 | await nextTick(); |
| 2f6253 | 25 | return form as FormActionType; |
| 陈 | 26 | } |
| a305e5 | 27 | |
| 2f6253 | 28 | function register(instance: FormActionType) { |
| 陈 | 29 | isProdMode() && |
| 30 | onUnmounted(() => { | |
| 31 | formRef.value = null; | |
| 32 | loadedRef.value = null; | |
| 33 | }); | |
| 34 | if (unref(loadedRef) && isProdMode() && instance === unref(formRef)) return; | |
| 4ff1c4 | 35 | |
| 2f6253 | 36 | formRef.value = instance; |
| 陈 | 37 | loadedRef.value = true; |
| a305e5 | 38 | |
| 83a346 | 39 | watch( |
| V | 40 | () => props, |
| 41 | () => { | |
| 42 | props && instance.setProps(getDynamicProps(props)); | |
| 43 | }, | |
| 44 | { | |
| 45 | immediate: true, | |
| 46 | deep: true, | |
| 56a966 | 47 | }, |
| 83a346 | 48 | ); |
| 2f6253 | 49 | } |
| 陈 | 50 | |
| 51 | const methods: FormActionType = { | |
| 4ff1c4 | 52 | scrollToField: async (name: NamePath, options?: ScrollOptions | undefined) => { |
| V | 53 | const form = await getForm(); |
| 54 | form.scrollToField(name, options); | |
| 2f6253 | 55 | }, |
| 4ff1c4 | 56 | setProps: async (formProps: Partial<FormProps>) => { |
| V | 57 | const form = await getForm(); |
| 58 | form.setProps(formProps); | |
| 2f6253 | 59 | }, |
| 4ff1c4 | 60 | |
| V | 61 | updateSchema: async (data: Partial<FormSchema> | Partial<FormSchema>[]) => { |
| 62 | const form = await getForm(); | |
| 63 | form.updateSchema(data); | |
| 2f6253 | 64 | }, |
| 4ff1c4 | 65 | |
| c639e4 | 66 | resetSchema: async (data: Partial<FormSchema> | Partial<FormSchema>[]) => { |
| Z | 67 | const form = await getForm(); |
| 68 | form.resetSchema(data); | |
| 69 | }, | |
| 70 | ||
| 4ff1c4 | 71 | clearValidate: async (name?: string | string[]) => { |
| V | 72 | const form = await getForm(); |
| 73 | form.clearValidate(name); | |
| 74 | }, | |
| 75 | ||
| 2f6253 | 76 | resetFields: async () => { |
| 4ff1c4 | 77 | getForm().then(async (form) => { |
| V | 78 | await form.resetFields(); |
| 79 | }); | |
| 2f6253 | 80 | }, |
| 4ff1c4 | 81 | |
| 768fad | 82 | removeSchemaByField: async (field: string | string[]) => { |
| J | 83 | unref(formRef)?.removeSchemaByField(field); |
| 2f6253 | 84 | }, |
| 4ff1c4 | 85 | |
| V | 86 | // TODO promisify |
| 87 | getFieldsValue: <T>() => { | |
| 88 | return unref(formRef)?.getFieldsValue() as T; | |
| 2f6253 | 89 | }, |
| 4ff1c4 | 90 | |
| 828933 | 91 | setFieldsValue: async <T extends Recordable<any>>(values: T) => { |
| 4ff1c4 | 92 | const form = await getForm(); |
| 828933 | 93 | form.setFieldsValue(values); |
| 2f6253 | 94 | }, |
| 4ff1c4 | 95 | |
| de5bf7 | 96 | appendSchemaByField: async ( |
| 098621 | 97 | schema: FormSchema | FormSchema[], |
| de5bf7 | 98 | prefixField: string | undefined, |
| 828933 | 99 | first?: boolean, |
| de5bf7 | 100 | ) => { |
| 4ff1c4 | 101 | const form = await getForm(); |
| de5bf7 | 102 | form.appendSchemaByField(schema, prefixField, first); |
| 2f6253 | 103 | }, |
| 4ff1c4 | 104 | |
| 2f6253 | 105 | submit: async (): Promise<any> => { |
| 4ff1c4 | 106 | const form = await getForm(); |
| V | 107 | return form.submit(); |
| 2f6253 | 108 | }, |
| 4ff1c4 | 109 | |
| 828933 | 110 | validate: async (nameList?: NamePath[] | false): Promise<Recordable> => { |
| 4ff1c4 | 111 | const form = await getForm(); |
| V | 112 | return form.validate(nameList); |
| 113 | }, | |
| 114 | ||
| 115 | validateFields: async (nameList?: NamePath[]): Promise<Recordable> => { | |
| 116 | const form = await getForm(); | |
| 117 | return form.validateFields(nameList); | |
| 118 | }, | |
| 119 | }; | |
| 120 | ||
| 2f6253 | 121 | return [register, methods]; |
| 陈 | 122 | } |
