@nocobase/client-v2 2.1.0-alpha.24 → 2.1.0-alpha.26

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/SubTableField.tsx

@@ -14,12 +14,11 @@ import { useTranslation } from 'react-i18next';
 import { PlusOutlined } from '@ant-design/icons';
 import React, { useEffect, useMemo, useState } from 'react';
 import { ActionWithoutPermission } from '../../../base/ActionModel';
-import { getRowKey } from '../../../blocks/table/utils';
+import { getSubTableRowIdentity, normalizeSubTableRows } from './rowIdentity';
 
 export function SubTableField(props) {
   const { t } = useTranslation();
   const {
-    value = [],
     onChange,
     columns,
     disabled,
@@ -39,12 +38,25 @@ export function SubTableField(props) {
   } = props;
   const [currentPage, setCurrentPage] = useState(1);
   const [currentPageSize, setCurrentPageSize] = useState(pageSize);
+  const rawCurrentValue = getCurrentValue();
+  const currentValue = useMemo(() => normalizeSubTableRows(rawCurrentValue), [rawCurrentValue]);
+  const getRecordIdentity = React.useCallback(
+    (record: any) => getSubTableRowIdentity(record, filterTargetKey),
+    [filterTargetKey],
+  );
   useEffect(() => {
     setCurrentPageSize(pageSize);
   }, [pageSize]);
   useEffect(() => {
     resetPage && setCurrentPage(1);
   }, [resetPage]);
+  const applyValue = React.useCallback((nextValue: any) => onChange?.(normalizeSubTableRows(nextValue)), [onChange]);
+  const getLatestValue = React.useCallback(() => normalizeSubTableRows(getCurrentValue()), [getCurrentValue]);
+  useEffect(() => {
+    if (currentValue !== rawCurrentValue) {
+      applyValue(currentValue);
+    }
+  }, [applyValue, currentValue, rawCurrentValue]);
 
   // 前端分页
   const pagination = useMemo(() => {
@@ -56,7 +68,7 @@ export function SubTableField(props) {
       },
       current: currentPage,
       pageSize: currentPageSize,
-      total: value?.length,
+      total: currentValue.length,
       onChange: (page, size) => {
         setCurrentPage(page);
         setCurrentPageSize(size);
@@ -66,38 +78,36 @@ export function SubTableField(props) {
         return t('Total {{count}} items', { count: total });
       },
     } as any;
-  }, [currentPage, currentPageSize, value]);
+  }, [currentPage, currentPageSize, currentValue.length]);
 
   // 新增一行
   const handleAdd = () => {
     if (allowCreate === false) return;
 
-    const currentValue = getCurrentValue();
     const newRow = {
       __is_new__: true,
     };
     columns.forEach((col) => {
       newRow[col.dataIndex] = undefined;
     });
-    const newValue = [...currentValue, newRow];
+    const newValue = [...getLatestValue(), newRow];
     setCurrentPage(Math.ceil(newValue.length / currentPageSize));
-    onChange?.(newValue);
+    applyValue(newValue);
   };
 
   // 删除行
   const handleDelete = (index: number) => {
-    const newValue = [...getCurrentValue()];
+    const newValue = [...getLatestValue()];
     newValue.splice(index, 1);
     const lastPage = Math.ceil(newValue.length / currentPageSize);
     setCurrentPage(currentPage > lastPage ? lastPage : currentPage);
-    onChange?.(newValue);
+    applyValue(newValue);
   };
 
   // 编辑单元格
   const handleCellChange = (rowIdx, dataIndex, cellValue) => {
-    const currentValue = getCurrentValue();
-    const newData = currentValue.map((row, idx) => (idx === rowIdx ? { ...row, [dataIndex]: cellValue } : row));
-    onChange?.(newData);
+    const newData = getLatestValue().map((row, idx) => (idx === rowIdx ? { ...row, [dataIndex]: cellValue } : row));
+    applyValue(newData);
   };
 
   // 渲染可编辑单元格
@@ -106,20 +116,25 @@ export function SubTableField(props) {
       ...col,
       render: (text, record, rowIdx) => {
         const pageRowIdx = (currentPage - 1) * currentPageSize + rowIdx;
+        const rowIdentity = getRecordIdentity(record) ?? `row:${pageRowIdx}`;
+        // row identity keeps logical rows stable, while binding key still follows
+        // the current array index so Form.Item can rebind after reordering/removal.
+        const rowBindingKey = `${rowIdentity}:${pageRowIdx}`;
+        const columnKey = col.dataIndex ?? col.key ?? 'cell';
         if (!col.render) {
           return;
         }
-        return col?.render({
+        return col.render({
           record,
           rowIdx: pageRowIdx,
-          id: `field-${col.dataIndex}-${rowIdx}`,
+          id: `field-${String(columnKey)}-${rowBindingKey}`,
           value: text,
           parentFieldIndex,
           parentItem,
           onChange: (value) => {
-            handleCellChange(pageRowIdx, col.dataIndex, value?.target?.value || value);
+            handleCellChange(pageRowIdx, col.dataIndex, value?.target?.value ?? value);
           },
-          ['aria-describedby']: `field-${col.dataIndex}-${rowIdx}`,
+          ['aria-describedby']: `field-${String(columnKey)}-${rowBindingKey}`,
         });
       },
     }))
@@ -137,8 +152,17 @@ export function SubTableField(props) {
           }
           return (
             <div
+              onMouseDown={(event) => {
+                const activeElement = document.activeElement as HTMLElement | null;
+                if (!activeElement || event.currentTarget.contains(activeElement)) {
+                  return;
+                }
+                activeElement.blur?.();
+              }}
               onClick={() => {
-                handleDelete(pageRowIdx);
+                setTimeout(() => {
+                  handleDelete(pageRowIdx);
+                });
               }}
             >
               <CloseOutlined style={{ cursor: 'pointer', color: 'gray' }} />
@@ -150,17 +174,17 @@ export function SubTableField(props) {
     .filter(Boolean);
 
   const pagedDataSource = useMemo(() => {
-    if (!value?.length) return [];
+    if (!currentValue.length) return [];
 
     const start = (currentPage - 1) * currentPageSize;
-    return value.slice(start, start + currentPageSize);
-  }, [value, currentPage, currentPageSize]);
+    return currentValue.slice(start, start + currentPageSize);
+  }, [currentValue, currentPage, currentPageSize]);
   return (
     <Form.Item>
       <Table
         dataSource={pagedDataSource}
         columns={editableColumns}
-        rowKey={(record) => getRowKey(record, filterTargetKey)}
+        rowKey={(record) => getRecordIdentity(record) ?? ''}
         tableLayout="fixed"
         scroll={{ x: 'max-content' }}
         pagination={pagination}
@@ -179,7 +203,7 @@ export function SubTableField(props) {
             </span>
           ),
         }}
-        components={components || {}}
+        components={components ?? {}}
         className={css`
           .ant-table-cell-ellipsis.ant-table-cell-fix-right-first .ant-table-cell-content {
             display: inline;

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/rowIdentity.ts

@@ -0,0 +1,70 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { uid } from '@formily/shared';
+
+type FilterTargetKey = string | string[] | null | undefined;
+type SubTableRow = {
+  __is_new__?: boolean;
+  id?: any;
+  [key: string]: any;
+};
+
+export const SUB_TABLE_TEMP_ROW_KEY = '__index__';
+
+function getPersistedRowKey(record: SubTableRow, filterTargetKey: FilterTargetKey) {
+  if (!filterTargetKey) return null;
+
+  if (Array.isArray(filterTargetKey)) {
+    const values = filterTargetKey.map((k) => record?.[k]);
+    if (values.some((v) => v == null)) return null;
+    return values.map((v) => String(v)).join('__');
+  }
+
+  const value = record?.[filterTargetKey];
+  return value == null ? null : String(value);
+}
+
+export function getSubTableRowIdentity(record: SubTableRow, filterTargetKey: FilterTargetKey) {
+  const tempKey = record?.[SUB_TABLE_TEMP_ROW_KEY];
+  if (record?.__is_new__ && tempKey != null && tempKey !== '') {
+    return `tmp:${String(tempKey)}`;
+  }
+
+  const persistedKey = getPersistedRowKey(record, filterTargetKey);
+  if (persistedKey != null) {
+    return `pk:${persistedKey}`;
+  }
+
+  if (tempKey != null && tempKey !== '') {
+    return `tmp:${String(tempKey)}`;
+  }
+
+  return null;
+}
+
+export function normalizeSubTableRows(rows: SubTableRow[]) {
+  if (!rows.length) return rows;
+
+  let changed = false;
+  const normalized = rows.map((row) => {
+    const tempKey = row?.[SUB_TABLE_TEMP_ROW_KEY];
+    if (!row.__is_new__ || (tempKey != null && tempKey !== '')) {
+      return row;
+    }
+
+    changed = true;
+    return {
+      ...row,
+      [SUB_TABLE_TEMP_ROW_KEY]: uid(),
+    };
+  });
+
+  return changed ? normalized : rows;
+}

package/src/flow/models/fields/AssociationFieldModel/__tests__/SubTableRowIdentity.test.ts

@@ -0,0 +1,45 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { describe, expect, it } from 'vitest';
+import {
+  getSubTableRowIdentity,
+  normalizeSubTableRows,
+  SUB_TABLE_TEMP_ROW_KEY,
+} from '../SubTableFieldModel/rowIdentity';
+
+describe('SubTable row identity', () => {
+  it('keeps temp identity for unsaved rows and fills it when missing', () => {
+    const rows = [
+      {
+        __is_new__: true,
+        [SUB_TABLE_TEMP_ROW_KEY]: 'tmp-1',
+        name: 'admin',
+      },
+      {
+        __is_new__: true,
+        [SUB_TABLE_TEMP_ROW_KEY]: 'tmp-existing',
+        title: 'kept',
+      },
+      {
+        __is_new__: true,
+        title: 'needs-temp-key',
+      },
+    ];
+
+    expect(getSubTableRowIdentity(rows[0], 'name')).toBe('tmp:tmp-1');
+
+    const normalized = normalizeSubTableRows(rows);
+
+    expect(normalized[1]).toBe(rows[1]);
+    expect(normalized[2]).not.toBe(rows[2]);
+    expect(normalized[2][SUB_TABLE_TEMP_ROW_KEY]).toBeTruthy();
+    expect(getSubTableRowIdentity(normalized[2], 'id')).toMatch(/^tmp:/);
+  });
+});