fix: form data that is not submitted by the form should not be carried when switching paging (#4847)
							parent
							
								
									5e44aa9283
								
							
						
					
					
						commit
						546c0928fb
					
				|  | @ -1,3 +1,4 @@ | ||||||
|  | import type { Recordable } from '@vben-core/typings'; | ||||||
| import type { | import type { | ||||||
|   FormState, |   FormState, | ||||||
|   GenericObject, |   GenericObject, | ||||||
|  | @ -41,11 +42,14 @@ function getDefaultState(): VbenFormProps { | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| export class FormApi { | export class FormApi { | ||||||
|  |   // 最后一次点击提交时的表单值
 | ||||||
|  |   private latestSubmissionValues: null | Recordable<any> = null; | ||||||
|   private prevState: null | VbenFormProps = null; |   private prevState: null | VbenFormProps = null; | ||||||
|  | 
 | ||||||
|   // private api: Pick<VbenFormProps, 'handleReset' | 'handleSubmit'>;
 |   // private api: Pick<VbenFormProps, 'handleReset' | 'handleSubmit'>;
 | ||||||
|   public form = {} as FormActions; |   public form = {} as FormActions; | ||||||
| 
 |  | ||||||
|   isMounted = false; |   isMounted = false; | ||||||
|  | 
 | ||||||
|   public state: null | VbenFormProps = null; |   public state: null | VbenFormProps = null; | ||||||
| 
 | 
 | ||||||
|   stateHandler: StateHandler; |   stateHandler: StateHandler; | ||||||
|  | @ -110,6 +114,10 @@ export class FormApi { | ||||||
|     this.store.batch(cb); |     this.store.batch(cb); | ||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
|  |   getLatestSubmissionValues() { | ||||||
|  |     return this.latestSubmissionValues || {}; | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|   getState() { |   getState() { | ||||||
|     return this.state; |     return this.state; | ||||||
|   } |   } | ||||||
|  | @ -164,6 +172,7 @@ export class FormApi { | ||||||
|     if (!this.isMounted) { |     if (!this.isMounted) { | ||||||
|       Object.assign(this.form, formActions); |       Object.assign(this.form, formActions); | ||||||
|       this.stateHandler.setConditionTrue(); |       this.stateHandler.setConditionTrue(); | ||||||
|  |       this.setLatestSubmissionValues({ ...toRaw(this.form.values) }); | ||||||
|       this.isMounted = true; |       this.isMounted = true; | ||||||
|     } |     } | ||||||
|   } |   } | ||||||
|  | @ -207,6 +216,10 @@ export class FormApi { | ||||||
|     form.setFieldValue(field, value, shouldValidate); |     form.setFieldValue(field, value, shouldValidate); | ||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
|  |   setLatestSubmissionValues(values: null | Recordable<any>) { | ||||||
|  |     this.latestSubmissionValues = { ...toRaw(values) }; | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|   setState( |   setState( | ||||||
|     stateOrFn: |     stateOrFn: | ||||||
|       | ((prev: VbenFormProps) => Partial<VbenFormProps>) |       | ((prev: VbenFormProps) => Partial<VbenFormProps>) | ||||||
|  | @ -249,12 +262,14 @@ export class FormApi { | ||||||
|     await form.submitForm(); |     await form.submitForm(); | ||||||
|     const rawValues = toRaw(form.values || {}); |     const rawValues = toRaw(form.values || {}); | ||||||
|     await this.state?.handleSubmit?.(rawValues); |     await this.state?.handleSubmit?.(rawValues); | ||||||
|  | 
 | ||||||
|     return rawValues; |     return rawValues; | ||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
|   unmount() { |   unmount() { | ||||||
|     this.form?.resetForm?.(); |     this.form?.resetForm?.(); | ||||||
|     // this.state = null;
 |     // this.state = null;
 | ||||||
|  |     this.latestSubmissionValues = null; | ||||||
|     this.isMounted = false; |     this.isMounted = false; | ||||||
|     this.stateHandler.reset(); |     this.stateHandler.reset(); | ||||||
|   } |   } | ||||||
|  |  | ||||||
|  | @ -66,11 +66,13 @@ const slots = useSlots(); | ||||||
| const [Form, formApi] = useTableForm({ | const [Form, formApi] = useTableForm({ | ||||||
|   handleSubmit: async () => { |   handleSubmit: async () => { | ||||||
|     const formValues = formApi.form.values; |     const formValues = formApi.form.values; | ||||||
|  |     formApi.setLatestSubmissionValues(toRaw(formValues)); | ||||||
|     props.api.reload(formValues); |     props.api.reload(formValues); | ||||||
|   }, |   }, | ||||||
|   handleReset: async () => { |   handleReset: async () => { | ||||||
|     await formApi.resetForm(); |     await formApi.resetForm(); | ||||||
|     const formValues = formApi.form.values; |     const formValues = formApi.form.values; | ||||||
|  |     formApi.setLatestSubmissionValues(formValues); | ||||||
|     props.api.reload(formValues); |     props.api.reload(formValues); | ||||||
|   }, |   }, | ||||||
|   commonConfig: { |   commonConfig: { | ||||||
|  | @ -225,7 +227,9 @@ async function init() { | ||||||
|   } |   } | ||||||
|   props.api?.setState?.({ gridOptions: defaultGridOptions }); |   props.api?.setState?.({ gridOptions: defaultGridOptions }); | ||||||
|   // form 由 vben-form 代替,所以需要保证query相关事件可以拿到参数 |   // form 由 vben-form 代替,所以需要保证query相关事件可以拿到参数 | ||||||
|   extendProxyOptions(props.api, defaultGridOptions, () => formApi.form.values); |   extendProxyOptions(props.api, defaultGridOptions, () => | ||||||
|  |     formApi.getLatestSubmissionValues(), | ||||||
|  |   ); | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| // formOptions支持响应式 | // formOptions支持响应式 | ||||||
|  |  | ||||||
		Loading…
	
		Reference in New Issue
	
	 Vben
						Vben