refactor: reset form values after create action (#2905)

* refactor: reset form after create action

* fix: association select support reset

* fix: map field support form reset

* fix: formula field support form reset

* fix: josn field support form reset

* fix: attachement field support form reset

* fix: map field support form reset

* fix: map field support form reset

* fix: map field support form reset

* fix: console
This commit is contained in:
katherinehhh 2023-10-27 09:45:34 +08:00 committed by GitHub
parent 24c10a6f00
commit e35e4af5e7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 34 additions and 9 deletions

View File

@ -112,7 +112,7 @@ export const useCreateActionProps = () => {
const variables = useVariables(); const variables = useVariables();
const localVariables = useLocalVariables({ currentForm: form }); const localVariables = useLocalVariables({ currentForm: form });
const { getActiveFieldsName } = useFormActiveFields() || {}; const { getActiveFieldsName } = useFormActiveFields() || {};
const { t } = useTranslation();
const action = actionField.componentProps.saveMode || 'create'; const action = actionField.componentProps.saveMode || 'create';
const filterKeys = actionField.componentProps.filterKeys?.checked || []; const filterKeys = actionField.componentProps.filterKeys?.checked || [];
return { return {
@ -187,6 +187,8 @@ export const useCreateActionProps = () => {
__parent?.service?.refresh?.(); __parent?.service?.refresh?.();
setVisible?.(false); setVisible?.(false);
if (!onSuccess?.successMessage) { if (!onSuccess?.successMessage) {
message.success(t('Saved successfully'));
await form.reset();
return; return;
} }
if (onSuccess?.manualClose) { if (onSuccess?.manualClose) {
@ -205,6 +207,7 @@ export const useCreateActionProps = () => {
}); });
} else { } else {
message.success(compile(onSuccess?.successMessage)); message.success(compile(onSuccess?.successMessage));
await form.reset();
if (onSuccess?.redirecting && onSuccess?.redirectTo) { if (onSuccess?.redirecting && onSuccess?.redirectTo) {
if (isURL(onSuccess.redirectTo)) { if (isURL(onSuccess.redirectTo)) {
window.location.href = onSuccess.redirectTo; window.location.href = onSuccess.redirectTo;

View File

@ -58,6 +58,11 @@ const InternalAssociationSelect = observer((props: AssociationSelectProps) => {
const api = useAPIClient(); const api = useAPIClient();
const resource = api.resource(collectionField.target); const resource = api.resource(collectionField.target);
const linkageFields = filterAnalyses(field.componentProps?.service?.params?.filter); const linkageFields = filterAnalyses(field.componentProps?.service?.params?.filter);
useEffect(() => {
const initValue = isVariable(field.value) ? undefined : field.value;
const value = Array.isArray(initValue) ? initValue.filter(Boolean) : initValue;
setInnerValue(value);
}, [field.value]);
useEffect(() => { useEffect(() => {
const id = uid(); const id = uid();
form.addEffects(id, () => { form.addEffects(id, () => {
@ -111,7 +116,6 @@ const InternalAssociationSelect = observer((props: AssociationSelectProps) => {
</div> </div>
); );
}; };
return ( return (
<div key={fieldSchema.name}> <div key={fieldSchema.name}>
<Space.Compact style={{ display: 'flex', lineHeight: '32px' }}> <Space.Compact style={{ display: 'flex', lineHeight: '32px' }}>
@ -124,7 +128,6 @@ const InternalAssociationSelect = observer((props: AssociationSelectProps) => {
service={service} service={service}
onChange={(value) => { onChange={(value) => {
const val = value?.length !== 0 ? value : null; const val = value?.length !== 0 ? value : null;
setInnerValue(val);
props.onChange?.(val); props.onChange?.(val);
}} }}
CustomDropdownRender={addMode === 'quickAdd' && QuickAddContent} CustomDropdownRender={addMode === 'quickAdd' && QuickAddContent}

View File

@ -96,6 +96,8 @@ const InternalFileManager = (props) => {
}; };
}); });
setOptions(opts); setOptions(opts);
} else {
setOptions([]);
} }
}, [value, fieldNames?.label]); }, [value, fieldNames?.label]);

View File

@ -15,6 +15,8 @@ export const Json = React.forwardRef<typeof Input.TextArea, JSONTextAreaProps>(
try { try {
if (value != null) { if (value != null) {
setText(JSON.stringify(value, null, space)); setText(JSON.stringify(value, null, space));
} else {
setText(undefined);
} }
} catch (ex) { } catch (ex) {
// //

View File

@ -33,7 +33,6 @@ Upload.Attachment = connect((props: UploadProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const uploadProps = useUploadProps({ ...props }); const uploadProps = useUploadProps({ ...props });
const { wrapSSR, hashId, componentCls: prefixCls } = useStyles(); const { wrapSSR, hashId, componentCls: prefixCls } = useStyles();
const internalFileList = useRef([]); const internalFileList = useRef([]);
function closeIFrameModal() { function closeIFrameModal() {
@ -169,6 +168,7 @@ Upload.Attachment = connect((props: UploadProps) => {
onChange?.(toValue(list)); onChange?.(toValue(list));
} }
setFileList(list.map(toItem)); setFileList(list.map(toItem));
setSync(true);
} else { } else {
if (info.file.status === 'done') { if (info.file.status === 'done') {
// TODO(BUG): object 的联动有问题,不响应,折中的办法先置空再赋值 // TODO(BUG): object 的联动有问题,不响应,折中的办法先置空再赋值
@ -176,6 +176,7 @@ Upload.Attachment = connect((props: UploadProps) => {
onChange?.(info.file?.response?.data); onChange?.(info.file?.response?.data);
} }
setFileList([toItem(info.file)]); setFileList([toItem(info.file)]);
setSync(true);
} }
}} }}
showUploadList={false} showUploadList={false}
@ -229,6 +230,7 @@ Upload.Attachment = connect((props: UploadProps) => {
onCancel={closeIFrameModal} onCancel={closeIFrameModal}
footer={[ footer={[
<Button <Button
key="download"
style={{ style={{
textTransform: 'capitalize', textTransform: 'capitalize',
}} }}
@ -241,7 +243,7 @@ Upload.Attachment = connect((props: UploadProps) => {
> >
{t('download')} {t('download')}
</Button>, </Button>,
<Button onClick={closeIFrameModal} style={{ textTransform: 'capitalize' }}> <Button key="close" onClick={closeIFrameModal} style={{ textTransform: 'capitalize' }}>
{t('close')} {t('close')}
</Button>, </Button>,
]} ]}

View File

@ -1,4 +1,4 @@
import { onFormInputChange } from '@formily/core'; import { onFormValuesChange } from '@formily/core';
import { useField, useFieldSchema, useFormEffects } from '@formily/react'; import { useField, useFieldSchema, useFormEffects } from '@formily/react';
import { toJS } from '@formily/reactive'; import { toJS } from '@formily/reactive';
import type { CollectionOptions } from '@nocobase/client'; import type { CollectionOptions } from '@nocobase/client';
@ -82,7 +82,7 @@ export function Result(props) {
}, [value]); }, [value]);
useFormEffects(() => { useFormEffects(() => {
onFormInputChange((form) => { onFormValuesChange((form) => {
if ( if (
(fieldSchema.name as string).indexOf('.') >= 0 || (fieldSchema.name as string).indexOf('.') >= 0 ||
!formBlockContext?.form || !formBlockContext?.form ||
@ -100,7 +100,7 @@ export function Result(props) {
v = null; v = null;
} }
if (v == null && editingValue == null) { if (v == null && editingValue == null) {
return; setEditingValue(v);
} }
setEditingValue(v); setEditingValue(v);
}); });

View File

@ -1,7 +1,7 @@
import AMapLoader from '@amap/amap-jsapi-loader'; import AMapLoader from '@amap/amap-jsapi-loader';
import '@amap/amap-jsapi-types'; import '@amap/amap-jsapi-types';
import { SyncOutlined } from '@ant-design/icons'; import { SyncOutlined } from '@ant-design/icons';
import { useFieldSchema } from '@formily/react'; import { useField, useFieldSchema } from '@formily/react';
import { css, useCollection } from '@nocobase/client'; import { css, useCollection } from '@nocobase/client';
import { useMemoizedFn } from 'ahooks'; import { useMemoizedFn } from 'ahooks';
import { Alert, App, Button, Spin } from 'antd'; import { Alert, App, Button, Spin } from 'antd';
@ -293,6 +293,14 @@ export const AMapComponent = React.forwardRef<AMapForwardedRefProps, AMapCompone
// 当值变更时toggle mouseTool // 当值变更时toggle mouseTool
useEffect(() => { useEffect(() => {
if (!value && (mouseTool.current || editor.current)) {
toRemoveOverlay();
if (editor.current) {
editor.current.setTarget();
editor.current.close();
}
onChange?.(null);
}
if (!mouseTool.current || !editor.current) return; if (!mouseTool.current || !editor.current) return;
const target = editor.current.getTarget(); const target = editor.current.getTarget();
if (target) { if (target) {

View File

@ -268,6 +268,11 @@ export const GoogleMapsComponent = React.forwardRef<GoogleMapForwardedRefProps,
// edit mode // edit mode
useEffect(() => { useEffect(() => {
if (!value && map.current) {
toRemoveOverlay();
drawingManagerRef?.current?.setDrawingMode?.(drawingMode.current);
onChange?.(null);
}
if (!map.current) return; if (!map.current) return;
if (!value || (!readonly && overlayRef.current)) { if (!value || (!readonly && overlayRef.current)) {
return; return;