@nokecy/qc-ui 1.1.87 → 1.1.89

package/dist/esm/array-table/hooks.js

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 // setSelectionRange 仅 textarea 与 text/search/url/tel/password 类型 input 支持;
 // checkbox/number/date 等调用会抛 InvalidStateError,故用白名单守卫。@author nokecy
 var supportsSelectionRange = function supportsSelectionRange(el) {
@@ -7,94 +7,125 @@ var supportsSelectionRange = function supportsSelectionRange(el) {
     !el.closest('.ant-picker') && (el.tagName === 'TEXTAREA' || /^(text|search|url|tel|password)$/i.test(el.type || 'text'))
   );
 };
+/** 点击、键盘导航和字段挂载共用一次聚焦意图，新交互使旧任务失效。@author nokecy */
+var useCellFocusRequests = function useCellFocusRequests() {
+  var enabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  var generation = useRef(0);
+  var mounted = useRef(true);
+  var timers = useRef(new Set());
+  var pendingCell = useRef();
+  var cancel = useCallback(function () {
+    generation.current += 1;
+    pendingCell.current = undefined;
+    timers.current.forEach(clearTimeout);
+    timers.current.clear();
+  }, []);
+  useEffect(function () {
+    mounted.current = true;
+    if (!enabled) return;
+    var onFocus = function onFocus(event) {
+      if (!pendingCell.current) return;
+      var cell = pendingCell.current();
+      if (!(cell !== null && cell !== void 0 && cell.isConnected) || !(event.target instanceof Node) || !cell.contains(event.target)) cancel();
+    };
+    document.addEventListener('pointerdown', cancel, true);
+    document.addEventListener('keydown', cancel, true);
+    document.addEventListener('focusin', onFocus, true);
+    window.addEventListener('blur', cancel);
+    return function () {
+      mounted.current = false;
+      cancel();
+      document.removeEventListener('pointerdown', cancel, true);
+      document.removeEventListener('keydown', cancel, true);
+      document.removeEventListener('focusin', onFocus, true);
+      window.removeEventListener('blur', cancel);
+    };
+  }, [cancel, enabled]);
+  return useCallback(function (resolveCell) {
+    var isTargetCurrent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
+      return true;
+    };
+    cancel();
+    var requestGeneration = generation.current;
+    pendingCell.current = resolveCell;
+    var isCurrent = function isCurrent() {
+      return mounted.current && generation.current === requestGeneration && isTargetCurrent();
+    };
+    return {
+      isCurrent: isCurrent,
+      schedule: function schedule(callback, delay) {
+        if (!isCurrent()) return;
+        var timer = setTimeout(function () {
+          timers.current.delete(timer);
+          if (isCurrent()) callback();
+        }, delay);
+        timers.current.add(timer);
+      }
+    };
+  }, [cancel]);
+};
 
-/**
- * 单元格聚焦 Hook
- * 处理 Editable 包装和普通输入框的聚焦逻辑
- */
+/** 单元格聚焦；已获得焦点的控件保留用户光标，等待挂载的请求可被新操作取消。@author nokecy */
 export var useCellFocus = function useCellFocus() {
+  var beginFocusRequest = useCellFocusRequests();
   var focusInputInCell = useCallback(function (cell) {
-    // 焦点已经在本格的输入框里:用户直接点进去定位光标、双击选词、按住拖选,这些留下的光标/选区都是他的。
-    // 不能再 focus() 并把光标挪到末尾——那会把这些操作在 10ms 后全部抹掉。
-    // 首次点开、键盘导航进来时焦点还不在本格输入框里,不受影响。@author nokecy
+    var _ref, _cell$querySelector;
+    var isTargetCurrent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
+      return true;
+    };
+    var row = cell.closest('.ag-row');
+    var rowId = row === null || row === void 0 ? void 0 : row.getAttribute('row-id');
+    var rowIndex = row === null || row === void 0 ? void 0 : row.getAttribute('row-index');
+    var colId = cell.getAttribute('col-id');
+    var request = beginFocusRequest(function () {
+      return cell;
+    }, function () {
+      return cell.isConnected && isTargetCurrent() && (row === null || row === void 0 ? void 0 : row.getAttribute('row-id')) === rowId && (row === null || row === void 0 ? void 0 : row.getAttribute('row-index')) === rowIndex && cell.getAttribute('col-id') === colId;
+    });
+    if (!request.isCurrent()) return;
+    var focusElement = function focusElement(element) {
+      if (!(element !== null && element !== void 0 && element.isConnected) || !cell.contains(element) || !request.isCurrent()) return;
+      if (document.activeElement === element) return;
+      element.focus();
+      // 同步设置首次进入的光标，避免延迟任务覆盖用户随后选择的文字。@author nokecy
+      if (document.activeElement === element && element.matches('input, textarea') && supportsSelectionRange(element)) {
+        var input = element;
+        input.setSelectionRange(input.value.length, input.value.length);
+      }
+    };
     var active = document.activeElement;
-    if (active && cell.contains(active) && active.matches('input, textarea')) return;
-
-    // 首先查找Editable包装的元素
+    if (active && cell.contains(active) && active.matches('input, textarea, [contenteditable="true"]')) return;
+    var selector = 'input:not([readonly]):not([disabled]), textarea:not([readonly]):not([disabled])';
     var editableElement = cell.querySelector('.ant-formily-editable');
     if (editableElement) {
-      // 检查Editable是否已经处于编辑状态
-      var isEditing = editableElement.getAttribute('data-editable-state') === 'editing';
-      if (isEditing) {
-        // 如果已经处于编辑状态,查找输入框并直接聚焦
-        var existingInput = editableElement.querySelector('input:not([readonly]):not([disabled]), textarea:not([readonly]):not([disabled])');
-        if (existingInput) {
-          existingInput.focus();
-          if (supportsSelectionRange(existingInput)) {
-            var _existingInput$value;
-            var length = ((_existingInput$value = existingInput.value) === null || _existingInput$value === void 0 ? void 0 : _existingInput$value.length) || 0;
-            setTimeout(function () {
-              existingInput.setSelectionRange(length, length);
-            }, 10);
-          }
-        }
+      var focusEditor = function focusEditor() {
+        return focusElement(editableElement.querySelector(selector));
+      };
+      if (editableElement.dataset.editableState === 'editing') {
+        focusEditor();
       } else {
-        // 如果还没有进入编辑状态,触发编辑状态
         editableElement.click();
-        var focusEvent = new Event('focus', {
+        if (!request.isCurrent()) return;
+        editableElement.dispatchEvent(new Event('focus', {
           bubbles: true
-        });
-        editableElement.dispatchEvent(focusEvent);
-
-        // 延迟查找输入框并设置光标
-        setTimeout(function () {
-          var newInput = editableElement.querySelector('input:not([readonly]):not([disabled]), textarea:not([readonly]):not([disabled])');
-          if (newInput) {
-            newInput.focus();
-            if (supportsSelectionRange(newInput)) {
-              var _newInput$value;
-              var _length = ((_newInput$value = newInput.value) === null || _newInput$value === void 0 ? void 0 : _newInput$value.length) || 0;
-              setTimeout(function () {
-                newInput.setSelectionRange(_length, _length);
-              }, 10);
-            }
-          }
-        }, 150);
-      }
-    } else {
-      // 如果没有Editable包装,尝试多种选择器查找输入框
-      var inputElement = cell.querySelector('input:not([readonly]):not([disabled]), textarea:not([readonly]):not([disabled])');
-      if (!inputElement) {
-        // 尝试更宽泛的选择器
-        inputElement = cell.querySelector('input, textarea');
-      }
-      if (!inputElement) {
-        // 尝试查找Ant Design的输入框
-        inputElement = cell.querySelector('.ant-input');
-      }
-      if (!inputElement) {
-        // 查找任何可聚焦的元素
-        inputElement = cell.querySelector('[contenteditable="true"], [tabindex]');
-      }
-      if (inputElement) {
-        inputElement.focus();
-
-        // 将光标定位到末尾
-        if (supportsSelectionRange(inputElement)) {
-          var _inputElement$value;
-          var _length2 = ((_inputElement$value = inputElement.value) === null || _inputElement$value === void 0 ? void 0 : _inputElement$value.length) || 0;
-          setTimeout(function () {
-            inputElement.setSelectionRange(_length2, _length2);
-          }, 10);
-        }
-      } else {
-        // 尝试直接聚焦到单元格本身
-        cell.focus();
+        }));
+        request.schedule(focusEditor, 150);
       }
+      return;
     }
-  }, []);
+    focusElement((_ref = (_cell$querySelector = cell.querySelector(selector)) !== null && _cell$querySelector !== void 0 ? _cell$querySelector : cell.querySelector('input:not([disabled]), textarea:not([disabled]), [contenteditable="true"], [tabindex]:not([disabled])')) !== null && _ref !== void 0 ? _ref : cell);
+  }, [beginFocusRequest]);
+  var scheduleCellFocus = useCallback(function (resolveCell, delay, isTargetCurrent) {
+    var request = beginFocusRequest(resolveCell, isTargetCurrent);
+    request.schedule(function () {
+      var cell = resolveCell();
+      if (cell !== null && cell !== void 0 && cell.isConnected) focusInputInCell(cell, isTargetCurrent);
+    }, delay);
+  }, [beginFocusRequest, focusInputInCell]);
   return {
-    focusInputInCell: focusInputInCell
+    focusInputInCell: focusInputInCell,
+    scheduleCellFocus: scheduleCellFocus,
+    beginFocusRequest: beginFocusRequest
   };
 };
 
@@ -102,7 +133,9 @@ export var useCellFocus = function useCellFocus() {
  * 键盘导航 Hook
  * 处理方向键在表格单元格间的导航
  */
-export var useKeyboardNavigation = function useKeyboardNavigation(ref, dataSource, focusInputInCell, activateCell) {
+export var useKeyboardNavigation = function useKeyboardNavigation(ref, dataSource, focusInputInCell, activateCell, beginSharedFocusRequest) {
+  var beginLocalFocusRequest = useCellFocusRequests(!beginSharedFocusRequest);
+  var beginFocusRequest = beginSharedFocusRequest !== null && beginSharedFocusRequest !== void 0 ? beginSharedFocusRequest : beginLocalFocusRequest;
   var handleCellKeyDown = useCallback(function (event) {
     var _nativeKeyDecisions$g;
     var keyEvent = event.event,
@@ -155,13 +188,31 @@ export var useKeyboardNavigation = function useKeyboardNavigation(ref, dataSourc
       // 检查目标位置是否有效
       var isValidTarget = keyEvent.key === 'ArrowLeft' || keyEvent.key === 'ArrowRight' || targetRowIndex >= 0 && targetRowIndex < dataSource.length;
       if (isValidTarget) {
+        var _api$getDisplayedRowA;
+        var targetNode = (_api$getDisplayedRowA = api.getDisplayedRowAtIndex) === null || _api$getDisplayedRowA === void 0 ? void 0 : _api$getDisplayedRowA.call(api, targetRowIndex);
+        var navigated = false;
+        var resolveTarget = function resolveTarget() {
+          var _ref$current;
+          return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector(".ag-row[row-index=\"".concat(targetRowIndex, "\"] .ag-cell[col-id=\"").concat(targetColId, "\"]"));
+        };
+        var _isTargetCurrent = function _isTargetCurrent() {
+          var _ref$current2, _api$isDestroyed, _api$getDisplayedRowA2;
+          if (!((_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && _ref$current2.isConnected) || (_api$isDestroyed = api.isDestroyed) !== null && _api$isDestroyed !== void 0 && _api$isDestroyed.call(api)) return false;
+          if (targetNode && ((_api$getDisplayedRowA2 = api.getDisplayedRowAtIndex) === null || _api$getDisplayedRowA2 === void 0 ? void 0 : _api$getDisplayedRowA2.call(api, targetRowIndex)) !== targetNode) return false;
+          if (navigated && api.getFocusedCell) {
+            var _focused$column;
+            var focused = api.getFocusedCell();
+            return (focused === null || focused === void 0 ? void 0 : focused.rowIndex) === targetRowIndex && ((_focused$column = focused.column) === null || _focused$column === void 0 ? void 0 : _focused$column.getColId()) === targetColId;
+          }
+          return true;
+        };
+        var request = beginFocusRequest(resolveTarget, _isTargetCurrent);
         // 延迟执行以确保当前编辑完成
-        setTimeout(function () {
-          var _api$getDisplayedRowA;
+        request.schedule(function () {
           api.setFocusedCell(targetRowIndex, targetColId);
+          navigated = true;
 
           // 懒挂载:目标格若是懒列存量格,先激活挂树(refreshCells),下方 150ms 内完成挂载再聚焦 @author nokecy
-          var targetNode = (_api$getDisplayedRowA = api.getDisplayedRowAtIndex) === null || _api$getDisplayedRowA === void 0 ? void 0 : _api$getDisplayedRowA.call(api, targetRowIndex);
           if (activateCell && targetNode) {
             activateCell(api, targetNode, targetColId);
           }
@@ -169,11 +220,10 @@ export var useKeyboardNavigation = function useKeyboardNavigation(ref, dataSourc
           // 不使用原生startEditingCell,而是手动触发编辑状态
           // v33 themeQuartz 容器不再有 .ag-theme-alpine 类;且行虚拟化下 DOM 顺序与 rowIndex 不一致,
           // 改为直接在 ref 容器内按 row-index + col-id 属性定位目标单元格 @author nokecy
-          setTimeout(function () {
-            var _ref$current;
-            var targetCell = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector(".ag-row[row-index=\"".concat(targetRowIndex, "\"] .ag-cell[col-id=\"").concat(targetColId, "\"]"));
-            if (targetCell) {
-              focusInputInCell(targetCell);
+          request.schedule(function () {
+            var targetCell = resolveTarget();
+            if (targetCell !== null && targetCell !== void 0 && targetCell.isConnected) {
+              focusInputInCell(targetCell, _isTargetCurrent);
             }
           }, 150);
         }, 10);
@@ -181,7 +231,7 @@ export var useKeyboardNavigation = function useKeyboardNavigation(ref, dataSourc
       keyEvent.preventDefault();
       keyEvent.stopPropagation();
     }
-  }, [dataSource, focusInputInCell, ref, activateCell]);
+  }, [dataSource, focusInputInCell, ref, activateCell, beginFocusRequest]);
   return {
     handleCellKeyDown: handleCellKeyDown
   };
@@ -262,8 +312,8 @@ export var isNativeInputKey = function isNativeInputKey(event) {
 var nativeKeyDecisions = new WeakMap();
 
 /** AG-Grid 的 suppressKeyboardEvent:让 AG-Grid 不再拦截输入框自己处理的按键,并记下这次按键的判定 */
-export var suppressNativeInputKeys = function suppressNativeInputKeys(_ref) {
-  var event = _ref.event;
+export var suppressNativeInputKeys = function suppressNativeInputKeys(_ref2) {
+  var event = _ref2.event;
   var native = isNativeInputKey(event);
   nativeKeyDecisions.set(event, native);
   return native;

package/dist/esm/array-table/index.d.ts

@@ -1,6 +1,12 @@
 import React from "react";
-import { AgGridReactProps } from "ag-grid-react";
-declare const _default: React.ForwardRefExoticComponent<Partial<AgGridReactProps<any> & {
+declare const _default: React.ForwardRefExoticComponent<Partial<import("ag-grid-react").AgGridReactProps<any> & {
+    height?: string | number | undefined;
+    gridKey: string;
+    onRowDrag?: boolean | undefined;
+    disabled?: boolean | undefined;
+    batchRemove?: boolean | undefined;
+    onRemove?: ((index: number) => void) | undefined;
+} & {
     children?: React.ReactNode;
 }> & React.RefAttributes<unknown>>;
 export default _default;

package/dist/esm/array-table/index.js

@@ -18,9 +18,11 @@ import { useFieldSchema } from "@formily/react";
 import { connect, mapProps, mapReadPretty } from "@formily/react";
 import uniqueId from "lodash/uniqueId";
 import { localeText } from "../ag-grid-plus/locale";
+import { useArrayTableBatchRemove } from "./batchRemove";
 import { useAddition, buildArrayTableColumns, useArrayTableSources, useArrayTableActions, isColumnComponent, collectLazyDefaults, applyLazyDefaults } from "./utils";
 import { groupColumnDefs } from "./columnGroup";
 import { ARRAY_TABLE_INDEX_FIELD, hasOwnIndexColumn, makeIndexColumn } from "./indexColumn";
+import { ensureArrayTableRowIds, getArrayTableRowId } from "./rowIdentity";
 import { useCellFocus, useKeyboardNavigation, useRowDrag, suppressNativeInputKeys } from "./hooks";
 import ArrayBase from "./arrayBase";
 import ArrayAddBtn from "./arrayAddBtn";
@@ -52,7 +54,7 @@ var ArrayTableInner = observer(function (props) {
   // 懒挂载激活态:存放当前挂着真控件的单元格 key(`rowId:colId`),供 LazyAgField 经 context 读写:
   // 点击/导航进来时这里写入,必填且为空的格自己写入,焦点离开且校验通过后自己删除。@author nokecy
   var activeCellsRef = useRef(new Set());
-  // 无 _id/id 的外部数据按对象引用分配稳定 rowId(避免 getRowId 返回 undefined)。@author nokecy
+  // 首次渲染先缓存无标识行的 rowId，effect 再补入行数据，供业务克隆时保留。@author nokecy
   var rowIdMapRef = useRef(new WeakMap());
   var ref = useRef();
   var field = useField();
@@ -94,10 +96,15 @@ var ArrayTableInner = observer(function (props) {
     onMoveDown = props.onMoveDown,
     onMoveUp = props.onMoveUp;
   var addition = useAddition();
+  var batchRemove = useArrayTableBatchRemove(field, sources, props, apiRef, function (row) {
+    return getArrayTableRowId(row, rowIdMapRef.current);
+  });
 
   // 使用自定义 hooks
   var _useCellFocus = useCellFocus(),
-    focusInputInCell = _useCellFocus.focusInputInCell;
+    focusInputInCell = _useCellFocus.focusInputInCell,
+    scheduleCellFocus = _useCellFocus.scheduleCellFocus,
+    beginFocusRequest = _useCellFocus.beginFocusRequest;
   var _useRowDrag = useRowDrag(field),
     handleRowDragMove = _useRowDrag.handleRowDragMove;
 
@@ -134,7 +141,7 @@ var ArrayTableInner = observer(function (props) {
     var _buildArrayTableColum;
     // 只依赖 sources，不依赖 dataSource 和 field.value
     var cols = (_buildArrayTableColum = buildArrayTableColumns([], field, sources)) !== null && _buildArrayTableColum !== void 0 ? _buildArrayTableColum : [];
-    // 默认在最左加序号列;schema 里已经放了 ArrayTable.Index 的不再加。@author nokecy
+    // 默认在业务列之前加序号列，勾选列由网格放在其左侧；schema 自带序号时不重复加。@author nokecy
     if (cols.length > 0 && !hasOwnIndexColumn(sources)) {
       cols.unshift(makeIndexColumn());
     }
@@ -155,6 +162,11 @@ var ArrayTableInner = observer(function (props) {
     if (lazyDefaults.length > 0) applyLazyDefaults(field, lazyDefaults, defaultedRowsRef.current);
   });
 
+  // 默认值先补齐，再持久化行身份；覆盖初始行及程序追加行，不在渲染/getRowId 中写表单。@author nokecy
+  useEffect(function () {
+    ensureArrayTableRowIds(field, rowIdMapRef.current);
+  });
+
   // 交给 AgGridReact 的列定义:按 x-component-props.headerGroup 把相邻同组的列合并成列组(多级表头)。
   // stableColumnDefs 保持扁平,懒列识别、列方案还原等内部逻辑仍用它;只有喂给 AG-Grid 的这一份带分组。@author nokecy
   var gridColumnDefs = useMemo(function () {
@@ -199,7 +211,7 @@ var ArrayTableInner = observer(function (props) {
   }, [lazyColIds]);
 
   // 键盘导航 hook 需要 activateCell(导航进懒列时先挂载再聚焦),故置于其后。@author nokecy
-  var _useKeyboardNavigatio = useKeyboardNavigation(ref, dataSource, focusInputInCell, activateCell),
+  var _useKeyboardNavigatio = useKeyboardNavigation(ref, dataSource, focusInputInCell, activateCell, beginFocusRequest),
     handleCellKeyDown = _useKeyboardNavigatio.handleCellKeyDown;
 
   /**
@@ -348,13 +360,17 @@ var ArrayTableInner = observer(function (props) {
       name: key,
       onlyRenderProperties: true
     });
-  })), /*#__PURE__*/React.createElement(Setting, {
+  })), /*#__PURE__*/React.createElement(Space, {
+    style: {
+      marginBottom: 5
+    }
+  }, batchRemove.toolbar, /*#__PURE__*/React.createElement(Setting, {
     gridKey: props.gridKey,
     gridApi: apiRef.current,
     gridApiState: gridApiState,
     allColDefs: stableColumnDefs,
     showQueryScheme: false
-  })), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement("div", {
     style: {
       flex: 1,
       minHeight: 0
@@ -364,9 +380,11 @@ var ArrayTableInner = observer(function (props) {
     localeText: localeText,
     context: gridContext,
     onGridReady: function onGridReady(params) {
+      var _props$onGridReady;
       params.api.hidePopupMenu();
       apiRef.current = params.api;
       setGridApiState(params.api);
+      (_props$onGridReady = props.onGridReady) === null || _props$onGridReady === void 0 || _props$onGridReady.call(props, params);
     },
     suppressColumnVirtualisation: true,
     gridOptions: {
@@ -382,23 +400,30 @@ var ArrayTableInner = observer(function (props) {
     },
     onCellKeyDown: handleCellKeyDown,
     onCellClicked: function onCellClicked(event) {
-      var _event$colDef;
+      var _event$column$getColI, _event$column, _event$colDef, _event$event;
       // 懒挂载:点击懒列存量格时先激活挂树,等挂载完成再聚焦进编辑;否则沿用原即时聚焦。@author nokecy
       var node = event.node;
-      var colId = (_event$colDef = event.colDef) === null || _event$colDef === void 0 ? void 0 : _event$colDef.field;
+      var colId = (_event$column$getColI = (_event$column = event.column) === null || _event$column === void 0 ? void 0 : _event$column.getColId()) !== null && _event$column$getColI !== void 0 ? _event$column$getColI : (_event$colDef = event.colDef) === null || _event$colDef === void 0 ? void 0 : _event$colDef.field;
       var justActivated = activateCell(event.api, node, colId);
       var rowIndex = node === null || node === void 0 ? void 0 : node.rowIndex;
-      var focus = function focus() {
-        var _ref$current, _event$event;
+      var clickedCell = (_event$event = event.event) === null || _event$event === void 0 || (_event$event = _event$event.target) === null || _event$event === void 0 ? void 0 : _event$event.closest('.ag-cell');
+      var resolveCell = function resolveCell() {
+        var _ref$current;
         // 行虚拟化下 DOM 顺序与 rowIndex 不一致,按 row-index + col-id 属性精确定位刚渲染的格 @author nokecy
-        var gridCell = justActivated && rowIndex != null ? (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector(".ag-row[row-index=\"".concat(rowIndex, "\"] .ag-cell[col-id=\"").concat(colId, "\"]")) : (_event$event = event.event) === null || _event$event === void 0 || (_event$event = _event$event.target) === null || _event$event === void 0 ? void 0 : _event$event.closest('.ag-cell');
-        if (gridCell) focusInputInCell(gridCell);
+        return justActivated && rowIndex != null ? (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector(".ag-row[row-index=\"".concat(rowIndex, "\"] .ag-cell[col-id=\"").concat(colId, "\"]")) : clickedCell;
       };
-      // 新激活需等 AgField(RecursionField/Editable) 挂载完成,给足时间;否则原 10ms。@author nokecy
-      setTimeout(focus, justActivated ? 80 : 10);
+      // 点击、导航共用聚焦请求；旧格等待挂载期间用户已转移焦点或行已更新时，取消旧任务。@author nokecy
+      scheduleCellFocus(resolveCell, justActivated ? 80 : 10, function () {
+        var _ref$current2;
+        if (!((_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && _ref$current2.isConnected) || event.api.isDestroyed() || rowIndex == null) return false;
+        if (event.api.getDisplayedRowAtIndex(rowIndex) !== node) return false;
+        var focused = event.api.getFocusedCell();
+        return (focused === null || focused === void 0 ? void 0 : focused.rowIndex) === rowIndex && (focused === null || focused === void 0 ? void 0 : focused.column.getColId()) === colId;
+      });
     },
     onRowDragMove: handleRowDragMove,
     onRowDataUpdated: function onRowDataUpdated(e) {
+      var _props$onRowDataUpdat;
       // 增删行、拖动换行后行位置变了,未改动的行不会自己重算序号,统一刷新序号列 @author nokecy
       if (stableColumnDefs.some(function (c) {
         return (c === null || c === void 0 ? void 0 : c.field) === ARRAY_TABLE_INDEX_FIELD;
@@ -412,8 +437,12 @@ var ArrayTableInner = observer(function (props) {
         (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 || _apiRef$current2.ensureIndexVisible(dataSource.length - 1, "bottom");
         setIsAdd(false);
       }
+      (_props$onRowDataUpdat = props.onRowDataUpdated) === null || _props$onRowDataUpdat === void 0 || _props$onRowDataUpdat.call(props, e);
     },
     rowDragManaged: true,
+    rowSelection: batchRemove.rowSelection,
+    selectionColumnDef: batchRemove.selectionColumnDef,
+    onSelectionChanged: batchRemove.onSelectionChanged,
     suppressClipboardApi: true,
     suppressClipboardPaste: true,
     preventDefaultOnContextMenu: true,
@@ -432,32 +461,26 @@ var ArrayTableInner = observer(function (props) {
       }
     },
     getRowId: function getRowId(_ref2) {
-      var _data$_id;
       var data = _ref2.data;
-      var id = (_data$_id = data === null || data === void 0 ? void 0 : data._id) !== null && _data$_id !== void 0 ? _data$_id : data === null || data === void 0 ? void 0 : data.id;
-      if (id != null) return String(id);
-      // 既无 _id 也无 id 的外部数据:按对象引用从 WeakMap 取/分配稳定 id。
-      // 不能用 uniqueId 直返(每次调用都变会让 AG-Grid 行身份错乱),也不能改写 data(触发 Formily 反应)。@author nokecy
-      var gen = rowIdMapRef.current.get(data);
-      if (!gen) {
-        gen = uniqueId('row_');
-        rowIdMapRef.current.set(data, gen);
-      }
-      return gen;
+      return getArrayTableRowId(data, rowIdMapRef.current);
     }
     // rowDragEntireRow={true}
     // onRowDragEnd={(event) => {
     //   const { overIndex, node } = event;
     //   field.move(node.rowIndex!, overIndex);
     // }}
-    // onSortChanged={(event) => {
-    //   const columnStates = event.columnApi.getColumnState();
-    //   if (columnStates.filter((x) => x.sort).length > 0) {
-    //     const columnState = columnStates.filter((x) => x.sort)[0];
-    //     field.value = sortBy(field.value, columnState.colId);
-    //   }
-    // }}
     ,
+    onSortChanged: function onSortChanged(event) {
+      var _props$onSortChanged;
+      // 排序只调整显示顺序；表单数组及行身份保持不变，序号按新的显示位置刷新。@author nokecy
+      if (stableColumnDefs.some(function (c) {
+        return (c === null || c === void 0 ? void 0 : c.field) === ARRAY_TABLE_INDEX_FIELD;
+      })) event.api.refreshCells({
+        columns: [ARRAY_TABLE_INDEX_FIELD],
+        force: true
+      });
+      (_props$onSortChanged = props.onSortChanged) === null || _props$onSortChanged === void 0 || _props$onSortChanged.call(props, event);
+    },
     rowHeight: ARRAY_TABLE_ROW_HEIGHT,
     pagination: false,
     columnDefs: gridColumnDefs,

package/dist/esm/array-table/indexColumn.d.ts

@@ -11,7 +11,7 @@ export declare const hasOwnIndexColumn: (sources: Array<{
 }>) => boolean;
 /**
  * 默认序号列:按行在表格里的位置编号(1 起),不依赖业务行号或主键,与列表页的序号一致。
- * 固定在最左、不可隐藏/拖动/排序;合计等固定行不编号。
+ * 固定在左侧、位于勾选列之后，不可隐藏/拖动/排序;合计等固定行不编号。
  * 增删行、拖动换行后由 ArrayTable 在 onRowDataUpdated 里刷新本列,见 index.tsx。@author nokecy
  */
 export declare const makeIndexColumn: () => ColDef;

package/dist/esm/array-table/indexColumn.js

@@ -25,7 +25,7 @@ export var hasOwnIndexColumn = function hasOwnIndexColumn(sources) {
 
 /**
  * 默认序号列:按行在表格里的位置编号(1 起),不依赖业务行号或主键,与列表页的序号一致。
- * 固定在最左、不可隐藏/拖动/排序;合计等固定行不编号。
+ * 固定在左侧、位于勾选列之后，不可隐藏/拖动/排序;合计等固定行不编号。
  * 增删行、拖动换行后由 ArrayTable 在 onRowDataUpdated 里刷新本列,见 index.tsx。@author nokecy
  */
 export var makeIndexColumn = function makeIndexColumn() {
@@ -34,7 +34,8 @@ export var makeIndexColumn = function makeIndexColumn() {
     headerName: '序号',
     width: 60,
     pinned: 'left',
-    lockPosition: 'left',
+    // 勾选列拥有最左位置；序号保留固定和禁止拖动，避免恢复旧方案时抢到勾选列之前。@author nokecy
+    lockPosition: false,
     lockPinned: true,
     lockVisible: true,
     suppressMovable: true,

package/dist/esm/array-table/interface.d.ts

@@ -23,13 +23,25 @@ interface ArrayTableColumnProps {
     defaultHide?: boolean;
 }
 interface ObservableColumnSource {
+    /** 当前 SchemaField 的组件表，用于读取业务组件的展示规则。@author nokecy */
+    components?: Record<string, any>;
     field: GeneralField;
     columnProps: ArrayTableColumnProps & Record<string, any>;
     schema: Schema;
     display: FieldDisplayTypes;
     name: string;
 }
-type ComposedArrayTable = React.FC<React.PropsWithChildren<AgGridReactProps>> & ArrayBaseMixins & {
+/** 公共明细表格的业务属性。@author nokecy */
+export type ArrayTableProps = AgGridReactProps & {
+    height?: number | string;
+    gridKey: string;
+    onRowDrag?: boolean;
+    disabled?: boolean;
+    /** 默认对配置标准删除入口的可编辑明细开放批量删除；false 可显式关闭。 */
+    batchRemove?: boolean;
+    onRemove?: (index: number) => void;
+};
+type ComposedArrayTable = React.FC<React.PropsWithChildren<ArrayTableProps>> & ArrayBaseMixins & {
     Column?: any;
 };
 export { ComposedArrayTable, ObservableColumnSource, ArrayTableColumnProps };

package/dist/esm/array-table/preview.js

@@ -36,6 +36,14 @@ var ArrayTable = function ArrayTable(props) {
     theme: arrayTablePreviewTheme,
     rowHeight: ARRAY_TABLE_ROW_HEIGHT,
     pagination: false,
+    onSortChanged: function onSortChanged(event) {
+      var _props$onSortChanged;
+      if (showDefaultIndex) event.api.refreshCells({
+        columns: [ARRAY_TABLE_INDEX_FIELD],
+        force: true
+      });
+      (_props$onSortChanged = props.onSortChanged) === null || _props$onSortChanged === void 0 || _props$onSortChanged.call(props, event);
+    },
     onRowDataUpdated: function onRowDataUpdated(event) {
       // 阅读态明细替换或重排后刷新序号，不向表单写入编号。@author nokecy
       if (showDefaultIndex) {

package/dist/esm/array-table/readOnlyFormatters.d.ts

@@ -1,4 +1,12 @@
 import type { ReactNode } from 'react';
+/** 选择器的展示字段；只影响回显，不改变 labelInValue 的提交值。@author nokecy */
+export type SelectDisplayField = 'value' | 'label';
+/** 从选择值提取展示文字；编码展示不能因描述为空或过期而改变。@author nokecy */
+export declare const formatSelectDisplay: (value: any, displayField?: SelectDisplayField) => string;
+/** 给选择组件声明与其回显一致的表格格式化器，组件别名和不同页面各自生效。@author nokecy */
+export declare const withReadOnlyFormatter: <T>(component: T, formatter: ReadOnlyFormatter) => T & {
+    readOnlyFormatter: ReadOnlyFormatter;
+};
 export type ReadOnlyFormatterCtx = {
     /** 列的 x-component-props(headerName/width/options/format 等) */
     columnProps: any;
@@ -49,4 +57,4 @@ export declare const getReadOnlyRenderer: (component: string | undefined) => Rea
 /**
  * 取某组件类型的只读格式化器。命中返回函数,未命中返回 null(调用方回退 AgField)。
  */
-export declare const getReadOnlyFormatter: (component: string | undefined) => ReadOnlyFormatter | null;
+export declare const getReadOnlyFormatter: (component: string | undefined, components?: Record<string, any>) => ReadOnlyFormatter | null;