fix: form submission broken when using nested form
This commit is contained in:
		
							parent
							
								
									dba1f1fbc6
								
							
						
					
					
						commit
						5f5bb0a258
					
				| @ -17,7 +17,8 @@ export function Create(props) { | ||||
|     params['associatedName'] = associatedName; | ||||
|     params['associatedKey'] = associatedKey; | ||||
|   } else { | ||||
|     params['resourceName'] = collection_name; | ||||
|     params['resourceName'] = props.resourceName; | ||||
|     params['resourceTarget'] = collection_name; | ||||
|     params['resourceKey'] = item.itemId; | ||||
|   } | ||||
| 
 | ||||
|  | ||||
| @ -6,6 +6,8 @@ import { | ||||
|   SchemaForm, | ||||
|   SchemaMarkupField as Field, | ||||
|   createFormActions, | ||||
|   FormSpy, | ||||
|   LifeCycleTypes, | ||||
|   createAsyncFormActions, | ||||
|   Submit, | ||||
|   Reset, | ||||
| @ -32,6 +34,9 @@ export default forwardRef((props: any, ref) => { | ||||
|   const { data: schema = {}, loading } = useRequest(() => api.resource(target).getView({ | ||||
|     resourceKey: 'form' | ||||
|   })); | ||||
|   const [state, setState] = useState<any>({}); | ||||
|   const [form, setForm] = useState<any>({}); | ||||
|   const [changed, setChanged] = useState(false); | ||||
|   const [visible, setVisible] = useState(false); | ||||
|   const [data, setData] = useState({}); | ||||
|   const [title, setTitle] = useState('创建子字段'); | ||||
| @ -55,31 +60,18 @@ export default forwardRef((props: any, ref) => { | ||||
|       className={'noco-drawer'} | ||||
|       width={'40%'} | ||||
|       onClose={() => { | ||||
|         actions.getFormState(state => { | ||||
|           const values = cleanDeep(state.values); | ||||
|           const others = Object.keys(data).length ? cleanDeep({...data}) : cleanDeep(state.initialValues); | ||||
|           if (isEqual(values, others)) { | ||||
|             setVisible(false); | ||||
|             return; | ||||
|           } | ||||
|           for (const key in values) { | ||||
|             if (Object.prototype.hasOwnProperty.call(values, key)) { | ||||
|               const value = values[key]; | ||||
|               const other = others[key]; | ||||
|               if (!isEqual(value, other)) { | ||||
|                 // console.log(value, other, values, others, state.initialValues);
 | ||||
|         if (changed) { | ||||
|           Modal.confirm({ | ||||
|             title: '表单内容发生变化,确定不保存吗?', | ||||
|             onOk() { | ||||
|               setChanged(false); | ||||
|               setVisible(false); | ||||
|             } | ||||
|           }); | ||||
|                 return; | ||||
|               } | ||||
|             } | ||||
|           } | ||||
|         } else { | ||||
|           setChanged(false); | ||||
|           setVisible(false); | ||||
|         }); | ||||
|         } | ||||
|       }} | ||||
|       title={title} | ||||
|       footer={( | ||||
| @ -89,11 +81,15 @@ export default forwardRef((props: any, ref) => { | ||||
|           }} | ||||
|         > | ||||
|           <Space> | ||||
|             <Button onClick={() => setVisible(false)}>取消</Button> | ||||
|             <Button type={'primary'} onClick={async () => { | ||||
|               const { values = {} } = await actions.submit(); | ||||
|             <Button onClick={() => { | ||||
|               setVisible(false); | ||||
|               onFinish && onFinish(values, index); | ||||
|               setChanged(false); | ||||
|             }}>取消</Button> | ||||
|             <Button type={'primary'} onClick={async () => { | ||||
|               await form.submit(); | ||||
|               // const { values = {} } = await actions.submit();
 | ||||
|               // setVisible(false);
 | ||||
|               // onFinish && onFinish(values, index);
 | ||||
|             }}>提交</Button> | ||||
|           </Space> | ||||
|         </div> | ||||
| @ -103,13 +99,50 @@ export default forwardRef((props: any, ref) => { | ||||
|         colon={true} | ||||
|         layout={'vertical'} | ||||
|         initialValues={data} | ||||
|         actions={actions} | ||||
|         onChange={(values) => { | ||||
|           setChanged(true); | ||||
|         }} | ||||
|         onSubmit={async (values) => { | ||||
|           setVisible(false); | ||||
|           setChanged(false); | ||||
|           onFinish && onFinish(values, index); | ||||
|         }} | ||||
|         // actions={actions}
 | ||||
|         schema={{ | ||||
|           type: 'object', | ||||
|           properties: fields, | ||||
|         }} | ||||
|         expressionScope={scopes} | ||||
|       > | ||||
|         <FormSpy | ||||
|           selector={[ | ||||
|             LifeCycleTypes.ON_FORM_MOUNT, | ||||
|             LifeCycleTypes.ON_FORM_SUBMIT_START, | ||||
|             LifeCycleTypes.ON_FORM_SUBMIT_END | ||||
|           ]} | ||||
|           reducer={(state, action) => { | ||||
|             switch (action.type) { | ||||
|               case LifeCycleTypes.ON_FORM_SUBMIT_START: | ||||
|                 return { | ||||
|                   ...state, | ||||
|                   submitting: true | ||||
|                 } | ||||
|               case LifeCycleTypes.ON_FORM_SUBMIT_END: | ||||
|                 return { | ||||
|                   ...state, | ||||
|                   submitting: false | ||||
|                 } | ||||
|               default: | ||||
|                 return state | ||||
|             } | ||||
|           }} | ||||
|         > | ||||
|           {({ state, form }) => { | ||||
|             setState(state) | ||||
|             setForm(form); | ||||
|             return <div/> | ||||
|           }} | ||||
|         </FormSpy> | ||||
|       </SchemaForm> | ||||
|     </Drawer> | ||||
|   ); | ||||
|  | ||||
| @ -101,7 +101,8 @@ export default function Table(props: SimpleTableProps) { | ||||
|           }, | ||||
|           mutate: (values) => { | ||||
|             onChange(values.list); | ||||
|             console.log(values); | ||||
|             setDataSource(values.list); | ||||
|             console.log('mutate', values); | ||||
|           }, | ||||
|           rowKey, | ||||
|           onMoved: async ({resourceKey, target}) => { | ||||
|  | ||||
| @ -110,7 +110,7 @@ export function BooleanField(props: any) { | ||||
|       // console.log(props);
 | ||||
|     }}/> | ||||
|   } | ||||
|   console.log(props); | ||||
|   // console.log(props);
 | ||||
|   return ( | ||||
|     <>{value ? <CheckOutlined style={{color: '#52c41a'}}/> : <CloseOutlined style={{color: '#f5222d'}}/>}</> | ||||
|   ); | ||||
|  | ||||
| @ -1,4 +1,4 @@ | ||||
| import React, { useState, useEffect, useImperativeHandle, forwardRef, useRef } from 'react'; | ||||
| import React, { useState, useEffect, useImperativeHandle, forwardRef, useRef, createRef } from 'react'; | ||||
| import { Button, Drawer, Modal } from 'antd'; | ||||
| import { Tooltip, Input } from 'antd'; | ||||
| import { | ||||
| @ -13,6 +13,8 @@ import { | ||||
|   FormValidator, | ||||
|   setValidationLanguage, | ||||
|   FormEffectHooks, | ||||
|   FormSpy, | ||||
|   LifeCycleTypes, | ||||
| } from '@formily/antd'; | ||||
| import { merge } from '@formily/shared'; | ||||
| import { QuestionCircleOutlined } from '@ant-design/icons'; | ||||
| @ -25,8 +27,6 @@ import get from 'lodash/get'; | ||||
| import cleanDeep from 'clean-deep'; | ||||
| import scopes from './scopes'; | ||||
| 
 | ||||
| const actions = createFormActions(); | ||||
| 
 | ||||
| export const DrawerForm = forwardRef((props: any, ref) => { | ||||
|   console.log(props); | ||||
|   const { | ||||
| @ -38,6 +38,9 @@ export const DrawerForm = forwardRef((props: any, ref) => { | ||||
|     associatedKey, | ||||
|     onFinish, | ||||
|   } = props; | ||||
|   const [state, setState] = useState<any>({}); | ||||
|   const [form, setForm] = useState<any>({}); | ||||
|   const [changed, setChanged] = useState(false); | ||||
|   console.log(associatedKey); | ||||
|   const { title, actionDefaultParams = {}, fields: properties ={} } = props.schema||{}; | ||||
|   const [resourceKey, setResourceKey] = useState(props.resourceKey); | ||||
| @ -58,7 +61,6 @@ export const DrawerForm = forwardRef((props: any, ref) => { | ||||
|     getData: run, | ||||
|   })); | ||||
| 
 | ||||
|   console.log({onFinish}); | ||||
|   return ( | ||||
|     <Drawer | ||||
|       {...props} | ||||
| @ -67,31 +69,19 @@ export const DrawerForm = forwardRef((props: any, ref) => { | ||||
|       width={'40%'} | ||||
|       className={'noco-drawer'} | ||||
|       onClose={() => { | ||||
|         actions.getFormState(state => { | ||||
|           const values = cleanDeep(state.values); | ||||
|           const others = Object.keys(data).length ? cleanDeep({...data, associatedKey, resourceKey}) : cleanDeep(state.initialValues); | ||||
|           if (isEqual(values, others)) { | ||||
|             setVisible(false); | ||||
|             return; | ||||
|           } | ||||
|           for (const key in values) { | ||||
|             if (Object.prototype.hasOwnProperty.call(values, key)) { | ||||
|               const value = values[key]; | ||||
|               const other = others[key]; | ||||
|               if (!isEqual(value, other)) { | ||||
|                 // console.log(value, other, values, others, state.initialValues);
 | ||||
|         if (changed) { | ||||
|           Modal.confirm({ | ||||
|             title: '表单内容发生变化,确定不保存吗?', | ||||
|             onOk() { | ||||
|               setChanged(false); | ||||
|               setVisible(false); | ||||
|                | ||||
|             } | ||||
|           }); | ||||
|                 return; | ||||
|               } | ||||
|             } | ||||
|           } | ||||
|         } else { | ||||
|           setChanged(false); | ||||
|           setVisible(false); | ||||
|         }); | ||||
|         } | ||||
|       }} | ||||
|       title={title} | ||||
|       footer={( | ||||
| @ -102,11 +92,34 @@ export const DrawerForm = forwardRef((props: any, ref) => { | ||||
|         > | ||||
|         <Button onClick={() => { | ||||
|           setVisible(false); | ||||
|           setChanged(false); | ||||
|         }}>取消</Button> | ||||
|         <span style={{display: 'inline-block', width: 8}}> </span> | ||||
|         <Button type={'primary'} onClick={async () => { | ||||
|           const { values = {} } = await actions.submit(); | ||||
|         <Button loading={state.submitting} type={'primary'} onClick={async () => { | ||||
|           await form.submit(); | ||||
|         }}>提交</Button> | ||||
|         </div> | ||||
|       )} | ||||
|     > | ||||
|       {loading ? <Spin/> : ( | ||||
|         <SchemaForm  | ||||
|           colon={true} | ||||
|           layout={'vertical'} | ||||
|           // 暂时先这么处理,如果有 associatedKey 注入表单里
 | ||||
|           initialValues={{associatedKey, resourceKey, ...data}} | ||||
|           // actions={actions}
 | ||||
|           schema={{ | ||||
|             type: 'object', | ||||
|             properties, | ||||
|           }} | ||||
|           autoComplete={'off'} | ||||
|           expressionScope={scopes} | ||||
|           onChange={(values) => { | ||||
|             setChanged(true); | ||||
|           }} | ||||
|           onSubmit={async (values) => { | ||||
|             console.log(values); | ||||
|             console.log('submitsubmitsubmit', values); | ||||
|             if (resourceKey) { | ||||
|               await api.resource(name).update({ | ||||
|                 resourceKey, | ||||
| @ -120,27 +133,41 @@ export const DrawerForm = forwardRef((props: any, ref) => { | ||||
|               }); | ||||
|             } | ||||
|             setVisible(false); | ||||
|             setChanged(false); | ||||
|             // @ts-ignore
 | ||||
|             window.routesReload && window.routesReload(); | ||||
|             onFinish && onFinish(values); | ||||
|         }}>提交</Button> | ||||
|         </div> | ||||
|       )} | ||||
|     > | ||||
|       {loading ? <Spin/> : ( | ||||
|         <SchemaForm  | ||||
|           colon={true} | ||||
|           layout={'vertical'} | ||||
|           // 暂时先这么处理,如果有 associatedKey 注入表单里
 | ||||
|           initialValues={{associatedKey, resourceKey, ...data}} | ||||
|           actions={actions} | ||||
|           schema={{ | ||||
|             type: 'object', | ||||
|             properties, | ||||
|           }} | ||||
|           autoComplete={'off'} | ||||
|           expressionScope={scopes} | ||||
|         > | ||||
|           <FormSpy | ||||
|             selector={[ | ||||
|               LifeCycleTypes.ON_FORM_MOUNT, | ||||
|               LifeCycleTypes.ON_FORM_SUBMIT_START, | ||||
|               LifeCycleTypes.ON_FORM_SUBMIT_END | ||||
|             ]} | ||||
|             reducer={(state, action) => { | ||||
|               switch (action.type) { | ||||
|                 case LifeCycleTypes.ON_FORM_SUBMIT_START: | ||||
|                   return { | ||||
|                     ...state, | ||||
|                     submitting: true | ||||
|                   } | ||||
|                 case LifeCycleTypes.ON_FORM_SUBMIT_END: | ||||
|                   return { | ||||
|                     ...state, | ||||
|                     submitting: false | ||||
|                   } | ||||
|                 default: | ||||
|                   return state | ||||
|               } | ||||
|             }} | ||||
|           > | ||||
|             {({ state, form }) => { | ||||
|               setState(state) | ||||
|               setForm(form); | ||||
|               return <div/> | ||||
|             }} | ||||
|           </FormSpy> | ||||
|         </SchemaForm> | ||||
|       )} | ||||
|     </Drawer> | ||||
|  | ||||
| @ -16,7 +16,7 @@ import { QuestionCircleOutlined } from '@ant-design/icons'; | ||||
| import scopes from './scopes'; | ||||
| 
 | ||||
| export function FilterForm(props: any) { | ||||
|   const actions = createAsyncFormActions(); | ||||
|   // const actions = createAsyncFormActions();
 | ||||
|   const { setVisible, onTrigger } = props; | ||||
|   const { title, fields: properties ={} } = props.schema||{}; | ||||
|   return ( | ||||
| @ -24,7 +24,7 @@ export function FilterForm(props: any) { | ||||
|         colon={true} | ||||
|         layout={'vertical'} | ||||
|         initialValues={{}} | ||||
|         actions={actions} | ||||
|         // actions={actions}
 | ||||
|         onReset={() => { | ||||
|           setVisible && setVisible(false); | ||||
|         }} | ||||
|  | ||||
		Loading…
	
		Reference in New Issue
	
	Block a user