From 5f5bb0a25816cddee506dd6a109efd6a1af827a0 Mon Sep 17 00:00:00 2001 From: chenos Date: Sat, 16 Jan 2021 17:25:19 +0800 Subject: [PATCH] fix: form submission broken when using nested form --- .../app/src/components/actions/Create.tsx | 3 +- .../components/form.fields/sub-table/Form.tsx | 89 +++++++++---- .../form.fields/sub-table/Table.tsx | 3 +- .../app/src/components/views/Field/index.tsx | 2 +- .../src/components/views/Form/DrawerForm.tsx | 123 +++++++++++------- .../src/components/views/Form/FilterForm.tsx | 4 +- 6 files changed, 143 insertions(+), 81 deletions(-) diff --git a/packages/app/src/components/actions/Create.tsx b/packages/app/src/components/actions/Create.tsx index f2fe3e609..c8ed9a756 100644 --- a/packages/app/src/components/actions/Create.tsx +++ b/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; } diff --git a/packages/app/src/components/form.fields/sub-table/Form.tsx b/packages/app/src/components/form.fields/sub-table/Form.tsx index b24470e49..58d3a47aa 100644 --- a/packages/app/src/components/form.fields/sub-table/Form.tsx +++ b/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({}); + const [form, setForm] = useState({}); + 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); - Modal.confirm({ - title: '表单内容发生变化，确定不保存吗？', - onOk() { - setVisible(false); - } - }); - return; - } + if (changed) { + Modal.confirm({ + title: '表单内容发生变化，确定不保存吗？', + onOk() { + setChanged(false); + setVisible(false); } - } + }); + } else { + setChanged(false); setVisible(false); - }); + } }} title={title} footer={( @@ -89,11 +81,15 @@ export default forwardRef((props: any, ref) => { }} > - - + @@ -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} > + { + 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
+ }} + ); diff --git a/packages/app/src/components/form.fields/sub-table/Table.tsx b/packages/app/src/components/form.fields/sub-table/Table.tsx index 4c5f3fb62..4edafc243 100644 --- a/packages/app/src/components/form.fields/sub-table/Table.tsx +++ b/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}) => { diff --git a/packages/app/src/components/views/Field/index.tsx b/packages/app/src/components/views/Field/index.tsx index f0890caba..ec1295b3c 100644 --- a/packages/app/src/components/views/Field/index.tsx +++ b/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 ? : } ); diff --git a/packages/app/src/components/views/Form/DrawerForm.tsx b/packages/app/src/components/views/Form/DrawerForm.tsx index ab12f03cd..672d1f60a 100644 --- a/packages/app/src/components/views/Form/DrawerForm.tsx +++ b/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({}); + const [form, setForm] = useState({}); + const [changed, setChanged] = useState(false); console.log(associatedKey); const { title, actionDefaultParams = {}, fields: properties ={} } = props.schema||{}; const [resourceKey, setResourceKey] = useState(props.resourceKey); @@ -57,8 +60,7 @@ export const DrawerForm = forwardRef((props: any, ref) => { setVisible, getData: run, })); - - console.log({onFinish}); + return ( { 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); - Modal.confirm({ - title: '表单内容发生变化，确定不保存吗？', - onOk() { - setVisible(false); - } - }); - return; - } + if (changed) { + Modal.confirm({ + title: '表单内容发生变化，确定不保存吗？', + onOk() { + setChanged(false); + setVisible(false); + } - } + }); + } else { + setChanged(false); setVisible(false); - }); + } }} title={title} footer={( @@ -102,27 +92,11 @@ export const DrawerForm = forwardRef((props: any, ref) => { > -
)} @@ -133,14 +107,67 @@ export const DrawerForm = forwardRef((props: any, ref) => { layout={'vertical'} // 暂时先这么处理，如果有 associatedKey 注入表单里 initialValues={{associatedKey, resourceKey, ...data}} - actions={actions} + // 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, + associatedKey, + values, + }); + } else { + await api.resource(name).create({ + associatedKey, + values, + }); + } + setVisible(false); + setChanged(false); + // @ts-ignore + window.routesReload && window.routesReload(); + onFinish && onFinish(values); + }} > + { + 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
+ }} + )} diff --git a/packages/app/src/components/views/Form/FilterForm.tsx b/packages/app/src/components/views/Form/FilterForm.tsx index 625b1427a..a307524bb 100644 --- a/packages/app/src/components/views/Form/FilterForm.tsx +++ b/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); }}