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,27 +51,23 @@ 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; Modal.success({
if (typeof onSuccess === 'function') { title: onSuccess?.successMessage,
onSuccess({ form }); onOk: async () => {
} else { await form.reset();
Modal.success({ if (onSuccess?.redirecting && onSuccess?.redirectTo) {
title: onSuccess?.successMessage || t('Submitted successfully!'), if (isURL(onSuccess.redirectTo)) {
onOk: async () => { window.location.href = onSuccess.redirectTo;
await form.reset(); } else {
if (onSuccess?.redirecting && onSuccess?.redirectTo) { history.push(onSuccess.redirectTo);
if (isURL(onSuccess.redirectTo)) {
window.location.href = onSuccess.redirectTo;
} else {
history.push(onSuccess.redirectTo);
}
} }
}, }
}); },
} });
}, },
}; };
}; };
@ -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 }}',