feat: onSuccess for action settings

This commit is contained in:
chenos 2022-04-14 16:01:29 +08:00
parent 6d917d36c2
commit 6b2d8fdd4a
4 changed files with 97 additions and 77 deletions

View File

@ -51,15 +51,12 @@ export const useCreateActionProps = () => {
}); });
__parent?.service?.refresh?.(); __parent?.service?.refresh?.();
setVisible?.(false); setVisible?.(false);
if (visible !== undefined) { const onSuccess = actionSchema?.['x-action-settings']?.onSuccess;
if (!onSuccess?.successMessage) {
return; return;
} }
const onSuccess = field?.decoratorProps?.onSuccess;
if (typeof onSuccess === 'function') {
onSuccess({ form });
} else {
Modal.success({ Modal.success({
title: onSuccess?.successMessage || t('Submitted successfully!'), title: onSuccess?.successMessage,
onOk: async () => { onOk: async () => {
await form.reset(); await form.reset();
if (onSuccess?.redirecting && onSuccess?.redirectTo) { if (onSuccess?.redirecting && onSuccess?.redirectTo) {
@ -71,7 +68,6 @@ export const useCreateActionProps = () => {
} }
}, },
}); });
}
}, },
}; };
}; };
@ -82,6 +78,7 @@ export const useUpdateActionProps = () => {
const { resource, __parent } = useBlockRequestContext(); const { resource, __parent } = useBlockRequestContext();
const { setVisible } = useActionContext(); const { setVisible } = useActionContext();
const actionSchema = useFieldSchema(); const actionSchema = useFieldSchema();
const history = useHistory();
return { return {
async onClick() { async onClick() {
const skipValidator = actionSchema?.['x-action-settings']?.skipValidator; const skipValidator = actionSchema?.['x-action-settings']?.skipValidator;
@ -101,6 +98,22 @@ export const useUpdateActionProps = () => {
__parent?.__parent?.service?.refresh?.(); __parent?.__parent?.service?.refresh?.();
} }
setVisible?.(false); setVisible?.(false);
const onSuccess = actionSchema?.['x-action-settings']?.onSuccess;
if (onSuccess?.successMessage) {
Modal.success({
title: onSuccess?.successMessage,
onOk: async () => {
await form.reset();
if (onSuccess?.redirecting && onSuccess?.redirectTo) {
if (isURL(onSuccess.redirectTo)) {
window.location.href = onSuccess.redirectTo;
} else {
history.push(onSuccess.redirectTo);
}
}
},
});
}
}, },
}; };
}; };

View File

@ -1,5 +1,6 @@
import { ISchema, useField, useFieldSchema } from '@formily/react'; import { ISchema, useField, useFieldSchema } from '@formily/react';
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next';
import { useDesignable } from '../..'; import { useDesignable } from '../..';
import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings'; import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
@ -7,6 +8,7 @@ export const ActionDesigner = (props) => {
const field = useField(); const field = useField();
const fieldSchema = useFieldSchema(); const fieldSchema = useFieldSchema();
const { dn } = useDesignable(); const { dn } = useDesignable();
const { t } = useTranslation();
const isPopupAction = ['create', 'update', 'view'].includes(fieldSchema['x-action'] || ''); const isPopupAction = ['create', 'update', 'view'].includes(fieldSchema['x-action'] || '');
return ( return (
<GeneralSchemaDesigner {...props}> <GeneralSchemaDesigner {...props}>
@ -79,7 +81,7 @@ export const ActionDesigner = (props) => {
)} )}
{fieldSchema?.['x-action-settings'] && ( {fieldSchema?.['x-action-settings'] && (
<SchemaSettings.SwitchItem <SchemaSettings.SwitchItem
title={'跳过表单校验'} title={'跳过必填校验'}
checked={!!fieldSchema?.['x-action-settings']?.skipValidator} checked={!!fieldSchema?.['x-action-settings']?.skipValidator}
onChange={(value) => { onChange={(value) => {
fieldSchema['x-action-settings'].skipValidator = value; fieldSchema['x-action-settings'].skipValidator = value;
@ -127,11 +129,66 @@ export const ActionDesigner = (props) => {
}} }}
/> />
)} )}
{fieldSchema?.['x-action-settings'] && (
<SchemaSettings.ModalItem
title={t('After successful submission')}
initialValues={fieldSchema?.['x-action-settings']?.['onSuccess']}
schema={
{
type: 'object',
title: t('After successful submission'),
properties: {
successMessage: {
// default: t('Submitted successfully!'),
title: 'Pop-up message',
'x-decorator': 'FormItem',
'x-component': 'Input.TextArea',
'x-component-props': {},
},
redirecting: {
title: t('Then'),
default: false,
enum: [
{ label: t('Stay on current page'), value: false },
{ label: t('Redirect to'), value: true },
],
'x-decorator': 'FormItem',
'x-component': 'Radio.Group',
'x-component-props': {},
'x-reactions': {
target: 'redirectTo',
fulfill: {
state: {
visible: '{{!!$self.value}}',
},
},
},
},
redirectTo: {
title: t('Link'),
'x-decorator': 'FormItem',
'x-component': 'Input',
'x-component-props': {},
},
},
} as ISchema
}
onSubmit={(onSuccess) => {
fieldSchema['x-action-settings']['onSuccess'] = onSuccess;
dn.emit('patch', {
schema: {
['x-uid']: fieldSchema['x-uid'],
'x-action-settings': fieldSchema['x-action-settings'],
},
});
}}
/>
)}
<SchemaSettings.Divider /> <SchemaSettings.Divider />
<SchemaSettings.Remove <SchemaSettings.Remove
removeParentsIfNoChildren removeParentsIfNoChildren
breakRemoveOn={(s) => { breakRemoveOn={(s) => {
return s['x-component'] === 'Space' || s['x-component'] === 'ActionBar'; return s['x-component'] === 'Space' || s['x-component'].endsWith('ActionBar');
}} }}
/> />
</GeneralSchemaDesigner> </GeneralSchemaDesigner>

View File

@ -1,4 +1,4 @@
import { ISchema, useField, useFieldSchema } from '@formily/react'; import { useField, useFieldSchema } from '@formily/react';
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useFormBlockContext } from '../../../block-provider'; import { useFormBlockContext } from '../../../block-provider';
@ -19,62 +19,6 @@ export const FormDesigner = () => {
const { visible } = useActionContext(); const { visible } = useActionContext();
return ( return (
<GeneralSchemaDesigner template={template} title={title || name}> <GeneralSchemaDesigner template={template} title={title || name}>
<SchemaSettings.ModalItem
hidden={visible !== undefined}
title={t('After successful submission')}
initialValues={fieldSchema['x-decorator-props']?.['onSuccess']}
schema={
{
type: 'object',
title: t('After successful submission'),
properties: {
successMessage: {
default: t('Submitted successfully!'),
title: 'Pop-up message',
'x-decorator': 'FormItem',
'x-component': 'Input.TextArea',
'x-component-props': {},
},
redirecting: {
title: t('Then'),
default: false,
enum: [
{ label: t('Stay on current page'), value: false },
{ label: t('Redirect to'), value: true },
],
'x-decorator': 'FormItem',
'x-component': 'Radio.Group',
'x-component-props': {},
'x-reactions': {
target: 'redirectTo',
fulfill: {
state: {
visible: '{{!!$self.value}}',
},
},
},
},
redirectTo: {
title: t('Link'),
'x-decorator': 'FormItem',
'x-component': 'Input',
'x-component-props': {},
},
},
} as ISchema
}
onSubmit={(onSuccess) => {
field.decoratorProps.onSuccess = onSuccess;
fieldSchema['x-decorator-props'] = fieldSchema['x-decorator-props'] || {};
fieldSchema['x-decorator-props']['onSuccess'] = onSuccess;
dn.emit('patch', {
schema: {
['x-uid']: fieldSchema['x-uid'],
'x-decorator-props': fieldSchema['x-decorator-props'],
},
});
}}
/>
{/* <SchemaSettings.Template componentName={'FormItem'} collectionName={name} /> */} {/* <SchemaSettings.Template componentName={'FormItem'} collectionName={name} /> */}
<SchemaSettings.FormItemTemplate componentName={'FormItem'} collectionName={name} /> <SchemaSettings.FormItemTemplate componentName={'FormItem'} collectionName={name} />
<SchemaSettings.Divider /> <SchemaSettings.Divider />

View File

@ -14,6 +14,9 @@ export const FormActionInitializers = {
schema: { schema: {
'x-action-settings': { 'x-action-settings': {
initialValues: {}, initialValues: {},
onSuccess: {
successMessage: 'Submitted successfully!',
},
}, },
}, },
}, },
@ -36,6 +39,9 @@ export const FormActionInitializers = {
'x-designer': 'Action.Designer', 'x-designer': 'Action.Designer',
'x-action-settings': { 'x-action-settings': {
initialValues: {}, initialValues: {},
onSuccess: {
successMessage: 'Submitted successfully!',
},
}, },
'x-component-props': { 'x-component-props': {
useProps: '{{ useCreateActionProps }}', useProps: '{{ useCreateActionProps }}',