fix: form submission broken when using nested form

packages/app/src/components/actions/Create.tsx

@@ -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;
   }
 

packages/app/src/components/form.fields/sub-table/Form.tsx

@@ -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 => {
+        if (changed) {
-          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);
           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 onClick={() => {
-            <Button type={'primary'} onClick={async () => {
-              const { values = {} } = await actions.submit();
               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>
   );

packages/app/src/components/form.fields/sub-table/Table.tsx

@@ -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}) => {

packages/app/src/components/views/Field/index.tsx

@@ -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'}}/>}</>
   );

packages/app/src/components/views/Form/DrawerForm.tsx

@@ -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 => {
+        if (changed) {
-          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);
           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 () => {
+        <Button loading={state.submitting} type={'primary'} onClick={async () => {
-          const { values = {} } = await actions.submit();
+          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>

packages/app/src/components/views/Form/FilterForm.tsx

@@ -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);
         }}