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