fix: issues with deletion action , text ellipsis, and new data display in sub-table (#5523)

* fix: subtable issue * fix: bug * fix: bug * fix: bug * fix: bug * fix: bug * fix: bug
2025-07-01 18:52:20 +08:00 · 2024-10-29 18:12:48 +08:00 · 2024-10-29 18:12:48 +08:00 · 45810d0658
commit 45810d0658
parent 055b64ba0e
7 changed files with 23 additions and 62 deletions
--- a/packages/core/client/src/block-provider/TableSelectorProvider.tsx
+++ b/packages/core/client/src/block-provider/TableSelectorProvider.tsx
@ -297,7 +297,7 @@ export const useTableSelectorProps = () => {
      field.value = data;
      field?.setInitialValue?.(data);
      field.data = field.data || {};
-      field.data.selectedRowKeys = ctx?.field?.data?.selectedRowKeys;
+      field.data.selectedRowKeys = [];
      field.componentProps.pagination = field.componentProps.pagination || {};
      field.componentProps.pagination.pageSize = ctx?.service?.data?.meta?.pageSize;
      field.componentProps.pagination.total = ctx?.service?.data?.meta?.count;
--- a/packages/core/client/src/modules/fields/component/Input/inputComponentSettings.tsx
+++ b/packages/core/client/src/modules/fields/component/Input/inputComponentSettings.tsx
@ -54,6 +54,11 @@ export const ellipsisSettingsItem: SchemaSettingsItemType = {
          tableFieldInstanceList.forEach((fieldInstance) => {
            fieldInstance.componentProps.ellipsis = checked;
          });
+          schema['x-component-props']['ellipsis'] = checked;
+          const path = formField.path?.splice(formField.path?.length - 1, 1);
+          formField.form.query(`${path.concat(`*.` + fieldSchema.name)}`).forEach((f) => {
+            f.componentProps.ellipsis = checked;
+          });
        } else {
          formField.componentProps.ellipsis = checked;
        }
--- a/packages/core/client/src/modules/fields/component/Picker/recordPickerComponentFieldSettings.tsx
+++ b/packages/core/client/src/modules/fields/component/Picker/recordPickerComponentFieldSettings.tsx
@ -15,55 +15,9 @@ import { useFieldComponentName } from '../../../../common/useFieldComponentName'
 import { useCollectionField } from '../../../../data-source';
 import { useDesignable, useFieldModeOptions, useIsAddNewForm } from '../../../../schema-component';
 import { isSubMode } from '../../../../schema-component/antd/association-field/util';
-import {
-  allowAddNew,
-  useIsFieldReadPretty,
-  useTitleFieldOptions,
-} from '../../../../schema-component/antd/form-item/FormItem.Settings';
+import { allowAddNew, useIsFieldReadPretty } from '../../../../schema-component/antd/form-item/FormItem.Settings';
 import { useColumnSchema } from '../../../../schema-component/antd/table-v2/Table.Column.Decorator';
-
-export const titleField: any = {
-  name: 'titleField',
-  type: 'select',
-  useComponentProps() {
-    const { t } = useTranslation();
-    const field = useField<Field>();
-    const { uiSchema, fieldSchema: tableColumnSchema, collectionField: tableColumnField } = useColumnSchema();
-    const options = useTitleFieldOptions();
-    const schema = useFieldSchema();
-    const fieldSchema = tableColumnSchema || schema;
-    const targetCollectionField = useCollectionField();
-    const collectionField = tableColumnField || targetCollectionField;
-    const { dn } = useDesignable();
-    const fieldNames =
-      field?.componentProps?.fieldNames ||
-      fieldSchema?.['x-component-props']?.['fieldNames'] ||
-      uiSchema?.['x-component-props']?.['fieldNames'];
-    return {
-      title: t('Title field'),
-      options,
-      value: fieldNames?.label,
-      onChange(label) {
-        const schema = {
-          ['x-uid']: fieldSchema['x-uid'],
-        };
-        const fieldNames = {
-          ...collectionField?.uiSchema?.['x-component-props']?.['fieldNames'],
-          ...field.componentProps.fieldNames,
-          label,
-        };
-        fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
-        fieldSchema['x-component-props']['fieldNames'] = fieldNames;
-        schema['x-component-props'] = fieldSchema['x-component-props'];
-        field.componentProps.fieldNames = fieldSchema['x-component-props'].fieldNames;
-        dn.emit('patch', {
-          schema,
-        });
-        dn.refresh();
-      },
-    };
-  },
-};
+import { titleField } from '../Select/selectComponentFieldSettings';

 const allowMultiple: any = {
  name: 'allowMultiple',
--- a/packages/core/client/src/modules/fields/component/PopoverNester/subformPopoverComponentFieldSettings.tsx
+++ b/packages/core/client/src/modules/fields/component/PopoverNester/subformPopoverComponentFieldSettings.tsx
@ -17,7 +17,8 @@ import { useDesignable, useFieldModeOptions, useIsAddNewForm } from '../../../..
 import { isSubMode } from '../../../../schema-component/antd/association-field/util';
 import { useIsFieldReadPretty } from '../../../../schema-component/antd/form-item/FormItem.Settings';
 import { useColumnSchema } from '../../../../schema-component/antd/table-v2/Table.Column.Decorator';
-import { titleField } from '../Picker/recordPickerComponentFieldSettings';
+import { titleField } from '../Select/selectComponentFieldSettings';
+
 import { linkageRules } from '../SubTable/subTablePopoverComponentFieldSettings';
 import { schemaSettingsLabelLayout } from '../../../../schema-settings';

--- a/packages/core/client/src/modules/fields/component/Select/selectComponentFieldSettings.tsx
+++ b/packages/core/client/src/modules/fields/component/Select/selectComponentFieldSettings.tsx
@ -73,7 +73,7 @@ const enableLink = {
  },
 };

-const titleField: any = {
+export const titleField: any = {
  name: 'titleField',
  type: 'select',
  useComponentProps() {
--- a/packages/core/client/src/schema-component/antd/association-field/SubTable.tsx
+++ b/packages/core/client/src/schema-component/antd/association-field/SubTable.tsx
@ -147,6 +147,7 @@ export const SubTable: any = observer(
      setSelectedRows,
      collectionField,
    };
+
    const usePickActionProps = () => {
      const { setVisible } = useActionContext();
      const { selectedRows, setSelectedRows } = useContext(RecordPickerContext);
@ -176,8 +177,9 @@ export const SubTable: any = observer(
    }, [field.componentProps?.pageSize]);

    const paginationConfig = useMemo(() => {
+      const page = Math.ceil(field.value?.length / 10);
      return {
-        current: currentPage,
+        current: currentPage > page ? page : currentPage,
        pageSize: pageSize || 10,
        total: field?.value?.length,
        onChange: (page, pageSize) => {
--- a/packages/core/client/src/schema-component/antd/table-v2/Table.tsx
+++ b/packages/core/client/src/schema-component/antd/table-v2/Table.tsx
@ -84,7 +84,7 @@ export const useColumnsDeepMemoized = (columns: any[]) => {
  return oldObj.value;
 };

-const useTableColumns = (props: { showDel?: any; isSubTable?: boolean }) => {
+const useTableColumns = (props: { showDel?: any; isSubTable?: boolean }, paginationProps) => {
  const { token } = useToken();
  const field = useArrayField(props);
  const schema = useFieldSchema();
@ -98,7 +98,7 @@ const useTableColumns = (props: { showDel?: any; isSubTable?: boolean }) => {
    }
    return buf;
  }, []);
-
+  const { current, pageSize } = paginationProps;
  const hasChangedColumns = useColumnsDeepMemoized(columnsSchema);

  const schemaToolbarBigger = useMemo(() => {
@ -189,13 +189,13 @@ const useTableColumns = (props: { showDel?: any; isSubTable?: boolean }) => {
              <CloseOutlined
                style={{ cursor: 'pointer', color: 'gray' }}
                onClick={() => {
-                  action(() => {
-                    spliceArrayState(field as any, {
-                      startIndex: index,
+                  return action(() => {
+                    const fieldIndex = (current - 1) * pageSize + index;
+                    spliceArrayState(field, {
+                      startIndex: fieldIndex,
                      deleteCount: 1,
                    });
-                    field.value.splice(index, 1);
-                    field.initialValue?.splice(index, 1);
+                    field.value.splice(fieldIndex, 1);
                    return field.onInput(field.value);
                  });
                }}
@ -361,7 +361,7 @@ const usePaginationProps = (pagination1, pagination2) => {
  if (!pagination2 && pagination1 === false) {
    return false;
  }
-  return field.value?.length > 0 ? result : false;
+  return field.value?.length > 0 || result.total ? result : false;
 };

 const headerClass = css`
@ -616,7 +616,6 @@ export const Table: any = withDynamicSchemaProps(
      ...others
    } = { ...others1, ...others2 } as any;
    const field = useArrayField(others);
-    const columns = useTableColumns(others);
    const schema = useFieldSchema();
    const collection = useCollection();
    const isTableSelector = schema?.parent?.['x-decorator'] === 'TableSelectorProvider';
@ -624,12 +623,12 @@ export const Table: any = withDynamicSchemaProps(
    const { expandFlag, allIncludesChildren } = ctx;
    const onRowDragEnd = useMemoizedFn(others.onRowDragEnd || (() => {}));
    const paginationProps = usePaginationProps(pagination1, pagination2);
+    const columns = useTableColumns(others, paginationProps);
    const [expandedKeys, setExpandesKeys] = useState(() => (expandFlag ? allIncludesChildren : []));
    const [selectedRowKeys, setSelectedRowKeys] = useState<any[]>(field?.data?.selectedRowKeys || []);
    const [selectedRow, setSelectedRow] = useState([]);
    const isRowSelect = rowSelection?.type !== 'none';
    const defaultRowKeyMap = useRef(new Map());
-
    const highlightRowCss = useMemo(() => {
      return css`
        & > td {