| 提交 | 用户 | age | ||
| 2f6253 | 1 | <template> |
| 陈 | 2 | <Form v-bind="$attrs" ref="formElRef" :model="formModel"> |
| 3 | <Row :class="getProps.compact ? 'compact-form-row' : ''"> | |
| 4 | <slot name="formHeader" /> | |
| 5 | <template v-for="schema in getSchema" :key="schema.field"> | |
| 6 | <FormItem | |
| 5832ee | 7 | :tableAction="tableAction" |
| 1d4561 | 8 | :formActionType="formActionType" |
| 2f6253 | 9 | :schema="schema" |
| 陈 | 10 | :formProps="getProps" |
| 1c075a | 11 | :allDefaultValues="defaultValueRef" |
| 2f6253 | 12 | :formModel="formModel" |
| 陈 | 13 | > |
| faf3f4 | 14 | <template #[item]="data" v-for="item in Object.keys($slots)"> |
| 陈 | 15 | <slot :name="item" v-bind="data" /> |
| 2f6253 | 16 | </template> |
| 陈 | 17 | </FormItem> |
| 18 | </template> | |
| 19 | <FormAction | |
| 20 | v-bind="{ ...getActionPropsRef, ...advanceState }" | |
| 21 | @toggle-advanced="handleToggleAdvanced" | |
| 22 | /> | |
| 23 | <slot name="formFooter" /> | |
| 24 | </Row> | |
| 25 | </Form> | |
| 26 | </template> | |
| 27 | <script lang="ts"> | |
| 28 | import type { FormActionType, FormProps, FormSchema } from './types/form'; | |
| 84c9d7 | 29 | import type { AdvanceState } from './types/hooks'; |
| V | 30 | import type { Ref } from 'vue'; |
| 84b830 | 31 | import type { ValidateFields } from 'ant-design-vue/lib/form/interface'; |
| 2f6253 | 32 | |
| 1db72c | 33 | import { defineComponent, reactive, ref, computed, unref, toRef, onMounted, watch } from 'vue'; |
| 2f6253 | 34 | import { Form, Row } from 'ant-design-vue'; |
| 陈 | 35 | import FormItem from './FormItem'; |
| 36 | import { basicProps } from './props'; | |
| 37 | import FormAction from './FormAction'; | |
| 38 | ||
| 39 | import { dateItemType } from './helper'; | |
| 40 | import moment from 'moment'; | |
| 41 | import { cloneDeep } from 'lodash-es'; | |
| 84b830 | 42 | import { deepMerge } from '/@/utils'; |
| V | 43 | |
| 2f6253 | 44 | import { useFormValues } from './hooks/useFormValues'; |
| 84c9d7 | 45 | import useAdvanced from './hooks/useAdvanced'; |
| V | 46 | import { useFormAction } from './hooks/useFormAction'; |
| 2f6253 | 47 | |
| 陈 | 48 | export default defineComponent({ |
| 49 | name: 'BasicForm', | |
| 50 | components: { FormItem, Form, Row, FormAction }, | |
| 1c075a | 51 | inheritAttrs: false, |
| 2f6253 | 52 | props: basicProps, |
| 陈 | 53 | emits: ['advanced-change', 'reset', 'submit', 'register'], |
| 54 | setup(props, { emit }) { | |
| 84c9d7 | 55 | const formModel = reactive({}); |
| V | 56 | |
| 57 | const actionState = reactive({ | |
| 94bf85 | 58 | resetAction: () => {}, |
| V | 59 | submitAction: () => {}, |
| 84c9d7 | 60 | }); |
| V | 61 | |
| 62 | const advanceState = reactive<AdvanceState>({ | |
| 2f6253 | 63 | isAdvanced: true, |
| 陈 | 64 | hideAdvanceBtn: false, |
| 65 | isLoad: false, | |
| 66 | actionSpan: 6, | |
| 67 | }); | |
| 84c9d7 | 68 | |
| 1c075a | 69 | const defaultValueRef = ref<any>({}); |
| 2f6253 | 70 | const propsRef = ref<Partial<FormProps>>({}); |
| 陈 | 71 | const schemaRef = ref<FormSchema[] | null>(null); |
| 84b830 | 72 | const formElRef = ref<Nullable<FormActionType>>(null); |
| 2f6253 | 73 | |
| 陈 | 74 | const getMergePropsRef = computed( |
| 75 | (): FormProps => { | |
| 349d19 | 76 | return deepMerge(cloneDeep(props), unref(propsRef)); |
| 2f6253 | 77 | } |
| 陈 | 78 | ); |
| 84c9d7 | 79 | |
| 2f6253 | 80 | // 获取表单基本配置 |
| 陈 | 81 | const getProps = computed( |
| 82 | (): FormProps => { | |
| 83 | return { | |
| 84 | ...unref(getMergePropsRef), | |
| 85 | resetButtonOptions: deepMerge( | |
| 84c9d7 | 86 | actionState.resetAction, |
| 2f6253 | 87 | unref(getMergePropsRef).resetButtonOptions || {} |
| 84c9d7 | 88 | ), |
| 2f6253 | 89 | submitButtonOptions: deepMerge( |
| 84c9d7 | 90 | actionState.submitAction, |
| 2f6253 | 91 | unref(getMergePropsRef).submitButtonOptions || {} |
| 84c9d7 | 92 | ), |
| 2f6253 | 93 | }; |
| 陈 | 94 | } |
| 95 | ); | |
| 96 | ||
| 97 | const getSchema = computed((): FormSchema[] => { | |
| 98 | const schemas: FormSchema[] = unref(schemaRef) || (unref(getProps).schemas as any); | |
| 99 | for (const schema of schemas) { | |
| 100 | const { defaultValue, component } = schema; | |
| 101 | if (defaultValue && dateItemType.includes(component!)) { | |
| 102 | schema.defaultValue = moment(defaultValue); | |
| 103 | } | |
| 104 | } | |
| 105 | return schemas as FormSchema[]; | |
| 106 | }); | |
| 107 | ||
| 84c9d7 | 108 | const { getActionPropsRef, handleToggleAdvanced } = useAdvanced({ |
| V | 109 | advanceState, |
| 110 | emit, | |
| 111 | getMergePropsRef, | |
| 112 | getProps, | |
| 113 | getSchema, | |
| 114 | formModel, | |
| 115 | defaultValueRef, | |
| 2f6253 | 116 | }); |
| 陈 | 117 | |
| 84c9d7 | 118 | const { handleFormValues, initDefault } = useFormValues({ |
| V | 119 | transformDateFuncRef: toRef(props, 'transformDateFunc') as Ref<Fn<any>>, |
| 120 | fieldMapToTimeRef: toRef(props, 'fieldMapToTime'), | |
| 121 | defaultValueRef, | |
| 122 | getSchema, | |
| 123 | formModel, | |
| 124 | }); | |
| 1c075a | 125 | |
| 84c9d7 | 126 | const { |
| V | 127 | // handleSubmit, |
| 128 | setFieldsValue, | |
| 129 | clearValidate, | |
| 130 | validate, | |
| 131 | validateFields, | |
| 132 | getFieldsValue, | |
| 133 | updateSchema, | |
| 134 | appendSchemaByField, | |
| 135 | removeSchemaByFiled, | |
| 136 | resetFields, | |
| 137 | } = useFormAction({ | |
| 138 | emit, | |
| 139 | getProps, | |
| 140 | formModel, | |
| 141 | getSchema, | |
| 142 | defaultValueRef, | |
| 143 | formElRef: formElRef as any, | |
| 144 | schemaRef: schemaRef as any, | |
| 145 | handleFormValues, | |
| 146 | actionState, | |
| 147 | }); | |
| 1c075a | 148 | |
| 1db72c | 149 | watch( |
| V | 150 | () => unref(getMergePropsRef).model, |
| 151 | () => { | |
| 152 | if (!unref(getMergePropsRef).model) return; | |
| 153 | setFieldsValue(unref(getMergePropsRef).model); | |
| 154 | }, | |
| 155 | { | |
| 156 | immediate: true, | |
| 157 | } | |
| 158 | ); | |
| 1c075a | 159 | |
| 2f6253 | 160 | /** |
| 陈 | 161 | * @description:设置表单 |
| 162 | */ | |
| 163 | function setProps(formProps: Partial<FormProps>): void { | |
| 164 | const mergeProps = deepMerge(unref(propsRef) || {}, formProps); | |
| 165 | propsRef.value = mergeProps; | |
| 166 | } | |
| 167 | ||
| 1d4561 | 168 | const formActionType: Partial<FormActionType> = { |
| 2f6253 | 169 | getFieldsValue, |
| 陈 | 170 | setFieldsValue, |
| 171 | resetFields, | |
| 172 | updateSchema, | |
| 173 | setProps, | |
| 174 | removeSchemaByFiled, | |
| 175 | appendSchemaByField, | |
| 176 | clearValidate, | |
| 177 | validateFields: validateFields as ValidateFields, | |
| 178 | validate: validate as ValidateFields, | |
| 179 | }; | |
| 1c075a | 180 | |
| 2f6253 | 181 | onMounted(() => { |
| 1c075a | 182 | initDefault(); |
| 1d4561 | 183 | emit('register', formActionType); |
| 2f6253 | 184 | }); |
| 1c075a | 185 | |
| 2f6253 | 186 | return { |
| 陈 | 187 | handleToggleAdvanced, |
| 188 | formModel, | |
| 189 | getActionPropsRef, | |
| 1c075a | 190 | defaultValueRef, |
| 2f6253 | 191 | advanceState, |
| 陈 | 192 | getProps, |
| 193 | formElRef, | |
| 194 | getSchema, | |
| 1d4561 | 195 | formActionType, |
| V | 196 | ...formActionType, |
| 2f6253 | 197 | }; |
| 陈 | 198 | }, |
| 199 | }); | |
| 200 | </script> | |
