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?.();
setVisible?.(false);
if (visible !== undefined) {
const onSuccess = actionSchema?.['x-action-settings']?.onSuccess;
if (!onSuccess?.successMessage) {
return;
}
const onSuccess = field?.decoratorProps?.onSuccess;
if (typeof onSuccess === 'function') {
onSuccess({ form });
} else {
Modal.success({
title: onSuccess?.successMessage || t('Submitted successfully!'),
onOk: async () => {
await form.reset();
if (onSuccess?.redirecting && onSuccess?.redirectTo) {
if (isURL(onSuccess.redirectTo)) {
window.location.href = onSuccess.redirectTo;
} else {
history.push(onSuccess.redirectTo);
}
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);
}
},
});
}
}
},
});
},
};
};
@ -82,6 +78,7 @@ export const useUpdateActionProps = () => {
const { resource, __parent } = useBlockRequestContext();
const { setVisible } = useActionContext();
const actionSchema = useFieldSchema();
const history = useHistory();
return {
async onClick() {
const skipValidator = actionSchema?.['x-action-settings']?.skipValidator;
@ -101,6 +98,22 @@ export const useUpdateActionProps = () => {
__parent?.__parent?.service?.refresh?.();
}
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 React from 'react';
import { useTranslation } from 'react-i18next';
import { useDesignable } from '../..';
import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
@ -7,6 +8,7 @@ export const ActionDesigner = (props) => {
const field = useField();
const fieldSchema = useFieldSchema();
const { dn } = useDesignable();
const { t } = useTranslation();
const isPopupAction = ['create', 'update', 'view'].includes(fieldSchema['x-action'] || '');
return (
<GeneralSchemaDesigner {...props}>
@ -79,7 +81,7 @@ export const ActionDesigner = (props) => {
)}
{fieldSchema?.['x-action-settings'] && (
<SchemaSettings.SwitchItem
title={'跳过表单校验'}
title={'跳过必填校验'}
checked={!!fieldSchema?.['x-action-settings']?.skipValidator}
onChange={(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.Remove
removeParentsIfNoChildren
breakRemoveOn={(s) => {
return s['x-component'] === 'Space' || s['x-component'] === 'ActionBar';
return s['x-component'] === 'Space' || s['x-component'].endsWith('ActionBar');
}}
/>
</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 { useTranslation } from 'react-i18next';
import { useFormBlockContext } from '../../../block-provider';
@ -19,62 +19,6 @@ export const FormDesigner = () => {
const { visible } = useActionContext();
return (
<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.FormItemTemplate componentName={'FormItem'} collectionName={name} />
<SchemaSettings.Divider />

View File

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