fix: action error when field deleted (#1849)

* fix: action error when field deleted

* fix: delete field cannot set dynamic value

packages/core/client/src/collection-manager/CollectionField.tsx

@@ -101,7 +101,7 @@ export const InternalFallbackField = () => {
 // 当字段被删除时，显示一个提示占位符
 const DeletedField = () => {
   const { t } = useTranslation();
-  return <div style={{ color: '#ccc' }}>{t('The field has bee deleted')}</div>;
+  return <div style={{ color: '#ccc' }}>{t('The field has been deleted')}</div>;
 };
 
 export const CollectionField = connect((props) => {

packages/core/client/src/collection-manager/CollectionFieldProvider.tsx

@@ -9,7 +9,7 @@ export const CollectionFieldProvider: React.FC<{
   field?: CollectionFieldOptions;
   fallback?: React.ReactElement;
 }> = (props) => {
-  const { name, field, children, fallback } = props;
+  const { name, field, children, fallback = null } = props;
   const fieldSchema = useFieldSchema();
   const { getField } = useCollection();
   const { getCollectionJoinField } = useCollectionManager();

packages/core/client/src/locale/en_US.ts

@@ -504,7 +504,7 @@ export default {
   "Skip required validation": "Skip required validation",
   "Form values": "Form values",
   "Fields values": "Fields values",
-  'The field has bee deleted': 'The field has bee deleted',
+  'The field has been deleted': 'The field has been deleted',
   "When submitting the following fields, the saved values are": "When submitting the following fields, the saved values are",
   "After successful submission": "After successful submission",
   "Then": "Then",

packages/core/client/src/locale/ja_JP.ts

@@ -421,7 +421,7 @@ export default {
   "Skip required validation": "必須のバリデーションをスキップ",
   "Form values": "フォームの値",
   "Fields values": "フィールドの値",
-  'The field has bee deleted': 'フィールドが削除されました',
+  'The field has been deleted': 'フィールドが削除されました',
   "When submitting the following fields, the saved values are": "次のフィールドを送信すると、保存された値は",
   "After successful submission": "送信が成功した後",
   "Then": "その後",

packages/core/client/src/locale/pt_BR.ts

@@ -461,7 +461,7 @@ export default {
   "Skip required validation": "Ignorar validação obrigatória",
   "Form values": "Valores do formulário",
   "Fields values": "campo removido",
-  'The field has bee deleted': 'O campo foi excluído',
+  'The field has been deleted': 'O campo foi excluído',
   "When submitting the following fields, the saved values are": "Ao enviar os seguintes campos, os valores salvos são",
   "After successful submission": "Depois do envio bem-sucedido",
   "Then": "Então",

packages/core/client/src/locale/ru_RU.ts

@@ -363,7 +363,7 @@ export default {
   "Skip required validation": "Пропустить обязатеьную проверку",
   "Form values": "Значения формы",
   "Fields values": "Значения полей",
-  'The field has bee deleted': 'Поле было удалено',
+  'The field has been deleted': 'Поле было удалено',
   "When submitting the following fields, the saved values are": "При отправке следующих полей, сохраненные значения такие",
   "After successful submission": "После удачной отправки",
   "Then": "Затем",

packages/core/client/src/locale/tr_TR.ts

@@ -362,7 +362,7 @@ export default {
   "Skip required validation": "Zorunlu alan kontrollerini atla",
   "Form values": "Form değerleri",
   "Fields values": "Alanların değerleri",
-  'The field has bee deleted': 'Alan silindi',
+  'The field has been deleted': 'Alan silindi',
   "When submitting the following fields, the saved values are": "Aşağıdaki alanlar gönderilirken kaydedilen değerler",
   "After successful submission": "Başarılı gönderimden sonra",
   "Then": "Then",

packages/core/client/src/locale/zh_CN.ts

@@ -543,7 +543,7 @@ export default {
   'Skip required validation': '跳过必填校验',
   'Form values': '表单值',
   'Fields values': '字段值',
-  'The field has bee deleted': '字段已删除',
+  'The field has been deleted': '字段已删除',
   'When submitting the following fields, the saved values are': '提交以下字段时，保存的值为',
   'After successful submission': '提交成功后',
   'Then': '然后',

packages/core/client/src/schema-initializer/buttons/TableActionColumnInitializers.tsx

@@ -191,7 +191,7 @@ export const TableActionColumnInitializers = (props: any) => {
               title: '{{t("Update record")}}',
               component: 'CustomizeActionInitializer',
               schema: {
-                title: '{{ t("Update record") }}',
+                title: '{{t("Update record")}}',
                 'x-component': 'Action.Link',
                 'x-action': 'customize:update',
                 'x-decorator': 'ACLActionProvider',

packages/core/client/src/schema-initializer/components/BulkEditField.tsx

@@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next';
 import { useFormBlockContext } from '../../block-provider';
 import { CollectionFieldProvider, useCollection, useCollectionField } from '../../collection-manager';
 import { useCompile, useComponent } from '../../schema-component';
+import { DeletedField } from './DeletedField';
 
 const InternalField: React.FC = (props) => {
   const field = useField<Field>();
@@ -65,7 +66,7 @@ const InternalField: React.FC = (props) => {
 const CollectionField = connect((props) => {
   const fieldSchema = useFieldSchema();
   return (
-    <CollectionFieldProvider name={fieldSchema.name}>
+    <CollectionFieldProvider name={fieldSchema.name} fallback={<DeletedField />}>
       <InternalField {...props} />
     </CollectionFieldProvider>
   );
@@ -85,7 +86,7 @@ export const BulkEditField = (props: any) => {
   const [type, setType] = useState<number>(BulkEditFormItemValueType.RemainsTheSame);
   const [value, setValue] = useState(null);
   const { getField } = useCollection();
-  const collectionField = getField(fieldSchema.name);
+  const collectionField = getField(fieldSchema.name) || {};
 
   useEffect(() => {
     field.value = { [type]: value };

packages/core/client/src/schema-initializer/components/DeletedField.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const DeletedField = () => {
+  const { t } = useTranslation();
+  return <div style={{ color: '#ccc' }}>{t('The field has bee deleted')}</div>;
+};

packages/core/client/src/schema-initializer/components/assigned-field/AssignedField.tsx

@@ -2,7 +2,7 @@ import { Field } from '@formily/core';
 import { connect, useField, useFieldSchema } from '@formily/react';
 import { merge } from '@formily/shared';
 import { Cascader, Select, Space } from 'antd';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useFormBlockContext } from '../../../block-provider';
 import {
@@ -12,6 +12,7 @@ import {
   useCollectionFilterOptions,
 } from '../../../collection-manager';
 import { useCompile, useComponent } from '../../../schema-component';
+import { DeletedField } from '../DeletedField';
 
 const DYNAMIC_RECORD_REG = /\{\{\s*currentRecord\.(.*)\s*\}\}/;
 const DYNAMIC_USER_REG = /\{\{\s*currentUser\.(.*)\s*\}\}/;
@@ -134,7 +135,6 @@ export const AssignedField = (props: any) => {
         name: 'currentTime',
         title: t('Current time'),
       });
-    } else {
     }
     setOptions(compile(opt));
   }, []);
@@ -178,16 +178,15 @@ export const AssignedField = (props: any) => {
   const userChangeHandler = (val) => {
     setUserValue(val);
   };
-  return (
-    <Space>
-      <Select defaultValue={type} value={type} style={{ width: 150 }} onChange={typeChangeHandler}>
-        <Select.Option value={AssignedFieldValueType.ConstantValue}>{t('Constant value')}</Select.Option>
-        <Select.Option value={AssignedFieldValueType.DynamicValue}>{t('Dynamic value')}</Select.Option>
-      </Select>
 
-      {type === AssignedFieldValueType.ConstantValue ? (
+  const useFieldMemo = useMemo(() => {
-        <CollectionField {...props} value={value} onChange={valueChangeHandler} style={{ minWidth: 150 }} />
+    if (!collectionField) {
-      ) : (
+      return <DeletedField />;
+    }
+    if (type === AssignedFieldValueType.ConstantValue) {
+      return <CollectionField {...props} value={value} onChange={valueChangeHandler} style={{ minWidth: 150 }} />;
+    } else {
+      return (
         <Select defaultValue={fieldType} value={fieldType} style={{ minWidth: 150 }} onChange={fieldTypeChangeHandler}>
           {options?.map((opt) => {
             return (
@@ -197,7 +196,19 @@ export const AssignedField = (props: any) => {
             );
           })}
         </Select>
-      )}
+      );
+    }
+  }, [collectionField, type, value, fieldType]);
+
+  return (
+    <Space>
+      <Select defaultValue={type} value={type} style={{ width: 150 }} onChange={typeChangeHandler}>
+        <Select.Option value={AssignedFieldValueType.ConstantValue}>{t('Constant value')}</Select.Option>
+        <Select.Option value={AssignedFieldValueType.DynamicValue}>{t('Dynamic value')}</Select.Option>
+      </Select>
+
+      {useFieldMemo}
+
       {fieldType === 'currentRecord' && (
         <Cascader
           fieldNames={{