@oinone/kunlun-vue-admin-base 6.3.9 → 6.4.1

package/src/basic/table/BaseTableWidget.ts

@@ -1,28 +1,34 @@
-import { DEFAULT_SLOT_NAME } from '@oinone/kunlun-dsl';
+import { DEFAULT_SLOT_NAME, DslDefinition, DslDefinitionType } from '@oinone/kunlun-dsl';
 import {
   ActiveRecord,
   ActiveRecords,
+  activeRecordsClone,
   ActiveRecordsOperator,
   formValidateErrorProcess,
   FunctionCache,
   FunctionMetadata,
   FunctionService,
+  GroupingField,
   isRelation2MField,
+  KeyboardConfig,
   parseConfigs,
-  RelationUpdateType,
   RuntimeAction,
   RuntimeFunctionDefinition,
   RuntimeM2MField,
   RuntimeO2MField,
   SubmitCacheManager,
   SubmitValue,
+  TableKeyboardConfig,
   translateValueByKey
 } from '@oinone/kunlun-engine';
 import { Expression, ExpressionRunParam } from '@oinone/kunlun-expression';
 import { HttpClientError, MessageHub } from '@oinone/kunlun-request';
-import { BooleanHelper, CallChaining, Optional, ReturnPromise } from '@oinone/kunlun-shared';
+import { EDirection, ISort } from '@oinone/kunlun-service';
+import { BooleanHelper, Optional, ReturnPromise, StringHelper } from '@oinone/kunlun-shared';
 import {
   ActiveEditorContext,
+  CheckedChangeEvent,
+  GROUP_TREE_KEY,
   OioTableInstance,
   RowContext,
   TableEditorCloseTrigger,
@@ -31,41 +37,44 @@ import {
   VxeTableHelper
 } from '@oinone/kunlun-vue-ui';
 import { ListSelectMode, OioNotification, StyleHelper } from '@oinone/kunlun-vue-ui-antd';
-import { Widget } from '@oinone/kunlun-vue-widget';
-import { cloneDeep, isEmpty, isEqual, isNil, isPlainObject, omitBy } from 'lodash-es';
+import { isTableViewState, OioAnyViewState, OioTableViewState, Widget } from '@oinone/kunlun-vue-widget';
+import { cloneDeep, isEmpty, isEqual, isNil, isPlainObject, omitBy, toString } from 'lodash-es';
 import { nextTick } from 'vue';
-import { UserPreferEventManager, UserPreferService } from '../../service';
-import { UserTablePrefer } from '../../typing';
-import { TableRowEditMode } from '../../typing/action';
+import { VxeTablePropTypes } from 'vxe-table';
+import {
+  BaseTableEvent,
+  TableAddEvent,
+  TableCopyEvent,
+  TableEditEvent,
+  TableEventCallChaining,
+  TableEventType
+} from '../../typing';
 import { FetchUtil } from '../../util';
-import { BaseElementListViewWidget, BaseElementListViewWidgetProps } from '../element';
+import { BaseElementListViewWidget, BaseElementListViewWidgetProps, getSortFieldDirection } from '../element';
 import { BaseTableColumnWidget } from '../table-column';
-import { FieldWidgetComponentFunction, IFormSubviewListFieldWidget } from '../types';
+import { FieldWidgetComponentFunction, IFormSubviewListFieldWidget, UrlQueryParameters } from '../types';
 
 interface ColumnWidgetEntity {
   widget: BaseTableColumnWidget;
   index: number;
 }
 
-function isActiveRecordArray(value: ActiveRecords): value is ActiveRecord[] {
-  return Array.isArray(value);
+export interface TableBindingKeyboardConfig {
+  key: string;
+  ctrl: boolean;
+  shift: boolean;
+  alt: boolean;
+  fn: (e: KeyboardEvent) => void;
 }
 
+const URL_SPLIT_SEPARATOR = ',';
+const ORDERING_SEPARATOR = ',';
+
 export class BaseTableWidget<
   Props extends BaseElementListViewWidgetProps = BaseElementListViewWidgetProps
 > extends BaseElementListViewWidget<Props> {
   protected tableInstance: OioTableInstance | undefined;
 
-  protected tableRowEditMode: TableRowEditMode | undefined;
-
-  @Widget.Reactive()
-  @Widget.Provide('tableForceEditable')
-  protected createMode: boolean | undefined;
-
-  protected cachedEditActiveRecords: ActiveRecord | undefined;
-
-  protected currentTriggerCreateAction: RuntimeAction | undefined;
-
   public getTableInstance() {
     return this.tableInstance;
   }
@@ -75,6 +84,10 @@ export class BaseTableWidget<
     this.tableInstance = tableInstance;
   }
 
+  protected get tableConfig() {
+    return this.getMergeConfig('table');
+  }
+
   @Widget.Method()
   @Widget.Provide()
   protected getFieldWidgetComponent: FieldWidgetComponentFunction | undefined;
@@ -119,7 +132,7 @@ export class BaseTableWidget<
   protected get height(): string | undefined {
     let height = StyleHelper.px(this.getDsl().height);
     if (this.inline && !height) {
-      height = '300px';
+      height = '400px';
     }
     return height;
   }
@@ -137,7 +150,81 @@ export class BaseTableWidget<
   @Widget.Reactive()
   @Widget.Provide()
   protected get sortable() {
-    return super.sortable;
+    return Optional.ofNullable(BooleanHelper.toBoolean(this.tableConfig.sortable)).orElse(true);
+  }
+
+  @Widget.Reactive()
+  protected get enableViewControl() {
+    return BooleanHelper.toBoolean(this.tableConfig.enableViewControl);
+  }
+
+  /**
+   * 视图控制组，包含所有子组件
+   */
+  @Widget.Reactive()
+  protected get viewControlWidget(): DslDefinition | undefined {
+    if (this.enableViewControl === false) {
+      return undefined;
+    }
+    if (!this.viewControlChildren.length) {
+      return undefined;
+    }
+    return {
+      dslNodeType: DslDefinitionType.ELEMENT,
+      widget: 'ViewControl',
+      widgets: this.viewControlChildren
+    };
+  }
+
+  /**
+   * 视图控制相关的子组件, 可能包含（排序、分组、行高切换、全屏）
+   */
+  @Widget.Reactive()
+  protected get viewControlChildren(): DslDefinition[] {
+    const controls: { enabled: boolean; widget: string; props?: Record<string, unknown> }[] = [
+      {
+        enabled: this.sortable,
+        widget: 'SortControl'
+      },
+      {
+        enabled: this.enableGrouping,
+        widget: 'GroupControl'
+      },
+      {
+        enabled: this.enabledFullScreen,
+        widget: 'FullScreenControl'
+      },
+      {
+        enabled: this.switchLineHeight,
+        widget: 'LineHeightControl'
+      },
+      {
+        enabled: this.enabledKeyboard,
+        widget: 'KeyboardShortcut'
+      }
+    ];
+    return controls
+      .filter(({ enabled }) => enabled)
+      .map(({ widget, props }) => ({
+        dslNodeType: DslDefinitionType.ELEMENT,
+        ...props,
+        widget,
+        widgets: []
+      }));
+  }
+
+  /**
+   * 启用切换行高
+   * @protected
+   */
+  @Widget.Reactive()
+  protected get switchLineHeight() {
+    return Optional.ofNullable(BooleanHelper.toBoolean(this.tableConfig.switchLineHeight)).orElse(true);
+  }
+
+  @Widget.Reactive()
+  protected get enabledFullScreen(): boolean {
+    return Optional.ofNullable(BooleanHelper.toBoolean(this.tableConfig.enabledFullScreen)).orElse(true);
   }
 
   // region 行内编辑
@@ -149,7 +236,13 @@ export class BaseTableWidget<
   @Widget.Reactive()
   @Widget.Provide()
   protected get editable(): boolean | undefined {
-    return this.createMode || BooleanHelper.toBoolean(this.getDsl().editable);
+    if (this.currentEditorContext?.forceEditable) {
+      return true;
+    }
+    if (this.inline) {
+      return Optional.ofNullable(BooleanHelper.toBoolean(this.getDsl().editable)).orElse(true);
+    }
+    return BooleanHelper.toBoolean(this.getDsl().editable);
   }
 
   /**
@@ -182,34 +275,22 @@ export class BaseTableWidget<
   @Widget.Reactive()
   @Widget.Provide()
   protected get editorMode(): TableEditorMode {
-    return this.createMode
-      ? TableEditorMode.row
-      : ((this.getDsl().editorMode as string)?.toLowerCase?.() as TableEditorMode) || TableEditorMode.cell;
-  }
-
-  @Widget.Reactive()
-  @Widget.Inject()
-  protected editRowCallChaining: CallChaining | undefined;
-
-  protected async editRow(type: unknown, data: unknown) {
-    this.createMode = type !== TableRowEditMode.EXIST;
-    this.tableRowEditMode = type as TableRowEditMode;
-    const { record, action } = data as { record: ActiveRecord | undefined; action: RuntimeAction };
-    nextTick(() => {
-      this.tableInstance?.setEditRow(record);
-      this.cachedEditActiveRecords = cloneDeep(record);
-      this.currentTriggerCreateAction = action;
-    });
+    return (
+      this.currentEditorContext?.editorMode ||
+      ((this.getDsl().editorMode as string)?.toLowerCase?.() as TableEditorMode) ||
+      TableEditorMode.row
+    );
   }
 
   /**
-   * 行内触发关闭触发方式
+   * 行内编辑关闭触发方式
    * @protected
    */
   @Widget.Reactive()
   @Widget.Provide()
   protected get editorCloseTrigger(): TableEditorCloseTrigger {
     return (
+      this.currentEditorContext?.editorCloseTrigger ||
       ((this.getDsl().editorCloseTrigger as string)?.toLowerCase?.() as TableEditorCloseTrigger) ||
       TableEditorCloseTrigger.auto
     );
@@ -233,6 +314,20 @@ export class BaseTableWidget<
     return this.lastedCurrentEditorContext;
   }
 
+  protected isNewRow(row?: ActiveRecord): boolean | undefined {
+    const { currentEditorContext } = this;
+    if (currentEditorContext) {
+      if (currentEditorContext.new) {
+        return true;
+      }
+      if (currentEditorContext.rowIndex === -1) {
+        return !FetchUtil.generatorPksObject(this.model, row || currentEditorContext.row);
+      }
+      return false;
+    }
+    return undefined;
+  }
+
   /**
    * 激活编辑模式前的回调
    * @param context 激活编辑模式上下文
@@ -278,6 +373,14 @@ export class BaseTableWidget<
     return true;
   }
 
+  /**
+   * Vxe-Table 事件不支持异步，使用关闭后置执行队列保证异步执行有序。
+   * <br>在使用单元格级别的行内编辑时，切换单元格将快速执行 close -> active 事件
+   * <br>async/await 将打乱执行顺序，导致 currentEditorContext 变量异常，上下文出现混乱
+   * @protected
+   */
+  protected activeClosedAfterQueue: Function[] | undefined;
+
   /**
    * 激活编辑模式回调
    * @param context 激活编辑模式上下文
@@ -290,13 +393,33 @@ export class BaseTableWidget<
     this.getColumnWidgets(true).forEach((columnWidget, index) => {
       editableMap[columnWidget.path] = this.filterEditable(context, columnWidget, index);
     });
-    this.lastedCurrentEditorContext = context;
+    if (this.activeClosedAfterQueue) {
+      this.activeClosedAfterQueue.push(() => {
+        this.updateLastedCurrentEditorContext(context);
+      });
+    } else {
+      this.updateLastedCurrentEditorContext(context);
+    }
   }
 
-  protected async removeRecordFormDataSource(context: RowContext) {
-    const { data } = context;
-    const newActiveRecords = this.dataSource?.filter((v) => v.__draftId !== data.__draftId);
-    return this.reloadDataSource(newActiveRecords);
+  protected updateLastedCurrentEditorContext(context: ActiveEditorContext): void {
+    const { lastedCurrentEditorContext } = this;
+    if (lastedCurrentEditorContext) {
+      if (lastedCurrentEditorContext.prepare) {
+        this.lastedCurrentEditorContext = {
+          ...context,
+          ...this.lastedCurrentEditorContext,
+          prepare: false
+        };
+      } else {
+        if (this.editorMode !== TableEditorMode.cell) {
+          console.error('You must be clear lasted current editor context.');
+        }
+        this.lastedCurrentEditorContext = context;
+      }
+    } else {
+      this.lastedCurrentEditorContext = context;
+    }
   }
 
   /**
@@ -308,16 +431,13 @@ export class BaseTableWidget<
   @Widget.Provide()
   protected async rowEditorClosedBefore(context: RowContext): Promise<boolean> {
     // 新增时有可能会多出来一些空值key。 过滤后对比
-    const pureData = omitBy({ ...context.data }, isNil);
-    if (isEqual(pureData, this.cachedEditActiveRecords) && this.tableRowEditMode === TableRowEditMode.CREATE) {
-      if (context?.data) {
-        await this.removeRecordFormDataSource(context);
-      }
-      this.createMode = false;
-      this.cachedEditActiveRecords = undefined;
-      this.currentTriggerCreateAction = undefined;
-      return false;
-    }
+    // const pureData = omitBy({ ...context.data }, isNil);
+    // if (isEqual(pureData, this.currentEditorContext!.row) && this.tableRowEditMode === TableRowEditMode.CREATE) {
+    //   if (context?.data) {
+    //     await this.removeRecordFormDataSource(context);
+    //   }
+    //   return false;
+    // }
     const res = await this.rowEditorClosedForValidator(context);
     if (!res) {
       return false;
@@ -332,53 +452,85 @@ export class BaseTableWidget<
    */
   @Widget.Method()
   @Widget.Provide()
-  protected async rowEditorClosed(context: RowContext | undefined): Promise<boolean> {
-    if (!context) {
+  protected rowEditorClosed(context: RowContext | undefined): Promise<boolean> {
+    this.activeClosedAfterQueue = [];
+    return this.$rowEditorClosed(context)
+      .then((res) => {
+        this.activeClosedAfterQueue?.forEach((fn) => fn());
+        return res;
+      })
+      .finally(() => {
+        this.activeClosedAfterQueue = undefined;
+      });
+  }
+
+  protected async $rowEditorClosed(context: RowContext | undefined) {
+    if (!context || this.currentEditorContext?.prepare) {
+      return true;
+    }
+    if (!this.currentEditorContext?.submit) {
+      await this.rowEditorClosedAfterProcess(context);
+      this.lastedCurrentEditorContext = undefined;
       return true;
     }
-
     let res = await this.rowEditorClosedBefore(context);
     if (!res) {
       return false;
     }
     const data = await this.rowEditorClosedForSubmit(context);
-    const useDiffUpdate = [RelationUpdateType.diff, RelationUpdateType.batch].includes(this.relationUpdateType);
     if (this.inline) {
       if (res && data) {
-        if (this.createMode && useDiffUpdate) {
-          this.createSubviewFieldWidget(context, data);
+        if (this.isNewRow(data)) {
+          const newRow = omitBy(activeRecordsClone(data), isNil);
+          if (Object.keys(newRow).length > 0) {
+            context = { ...context, data: newRow };
+            this.$rowEditorComputeInvisibleColumns(context);
+            this.createSubviewFieldWidget(context, newRow);
+          } else {
+            this.currentEditorContext.submit = false;
+          }
         } else {
+          context = { ...context, data };
+          this.$rowEditorComputeInvisibleColumns(context);
           this.updateSubviewFieldWidget(context, data);
         }
       }
     } else if (data) {
       try {
-        if (this.createMode) {
-          res = await this.rowEditorClosedForCreate(context, data);
+        if (this.isNewRow(data)) {
+          const newRow = omitBy(activeRecordsClone(data), isNil);
+          if (Object.keys(newRow).length > 0) {
+            context = { ...context, data: newRow };
+            this.$rowEditorComputeInvisibleColumns(context);
+            res = await this.rowEditorClosedForCreate(context, newRow);
+          } else {
+            this.currentEditorContext.submit = false;
+          }
         } else {
+          context = { ...context, data };
+          this.$rowEditorComputeInvisibleColumns(context);
           res = await this.rowEditorClosedForUpdate(context, data);
         }
       } catch (e) {
-        console.error(e);
         res = false;
       }
     }
     if (res) {
       await this.rowEditorClosedAfterProcess(context);
-
       if (this.editorMode !== TableEditorMode.cell) {
         this.lastedCurrentEditorContext = undefined;
       }
     }
-    if (!res && context?.data) {
-      await this.removeRecordFormDataSource(context);
-    }
-    this.createMode = false;
-    this.cachedEditActiveRecords = undefined;
-    this.currentTriggerCreateAction = undefined;
     return res;
   }
 
+  protected $rowEditorComputeInvisibleColumns(context: RowContext) {
+    (this.viewState as OioTableViewState)?.fields
+      ?.map((v) => Widget.select<BaseTableColumnWidget>(v))
+      .filter((v) => v != null && v.invisible)
+      .forEach((v) => v?.compute(context));
+  }
+
   /**
    * 行内编辑关闭时的数据验证
    * @param context 行上下文
@@ -393,13 +545,25 @@ export class BaseTableWidget<
     return res;
   }
 
+  @Widget.Reactive()
+  protected get rowEditorSubmitAll() {
+    return Optional.ofNullable(BooleanHelper.toBoolean(this.tableConfig.rowEditorSubmitAll)).orElse(false);
+  }
+
   /**
    * 行内编辑关闭时的数据提交
    * @param context 行上下文
    * @protected
    */
   protected async rowEditorClosedForSubmit(context: RowContext): Promise<ActiveRecord | undefined> {
-    const { editorMode, editorCloseTrigger } = this;
+    const { rowEditorSubmitAll, editorMode, editorCloseTrigger } = this;
+    if (rowEditorSubmitAll) {
+      if (editorMode === TableEditorMode.row || editorMode === TableEditorMode.cell) {
+        return context.data;
+      }
+      console.error('Invalid editor mode.', editorMode);
+      return undefined;
+    }
     switch (editorMode) {
       case TableEditorMode.row: {
         switch (editorCloseTrigger) {
@@ -421,7 +585,7 @@ export class BaseTableWidget<
     return undefined;
   }
 
-  protected updateSubviewFieldWidget(context: RowContext, data: ActiveRecord) {
+  public updateSubviewFieldWidget(context: RowContext, data: ActiveRecords) {
     Optional.ofNullable(this.metadataRuntimeContext.field)
       .filter<RuntimeO2MField | RuntimeM2MField>((v) => isRelation2MField(v!))
       .ifPresent((field) => {
@@ -434,19 +598,18 @@ export class BaseTableWidget<
             const subviewSubmitCache = this.metadataRuntimeContext.extendData.subviewSubmitCache as SubmitCacheManager;
             if (showRecords) {
               if (submitCache) {
-                ActiveRecordsOperator.operator(showRecords, submitCache).updateByEntity(context.data);
+                ActiveRecordsOperator.operator(showRecords, submitCache).updateByEntity(context.data || data);
               }
               if (subviewSubmitCache) {
-                ActiveRecordsOperator.operator(showRecords, subviewSubmitCache).updateByEntity(context.data);
+                ActiveRecordsOperator.operator(showRecords, subviewSubmitCache).updateByEntity(context.data || data);
               }
             }
-
-            subviewFieldWidget.flushDataSource(false);
+            subviewFieldWidget.flushDataSource();
           });
       });
   }
 
-  protected createSubviewFieldWidget(context: RowContext, data: ActiveRecord) {
+  public createSubviewFieldWidget(context: RowContext, data: ActiveRecords) {
     Optional.ofNullable(this.metadataRuntimeContext.field)
       .filter<RuntimeO2MField | RuntimeM2MField>((v) => isRelation2MField(v!))
       .ifPresent((field) => {
@@ -458,15 +621,23 @@ export class BaseTableWidget<
             const { submitCache } = field;
             const subviewSubmitCache = this.metadataRuntimeContext.extendData.subviewSubmitCache as SubmitCacheManager;
             if (showRecords) {
+              const insertTo = this.lastedCurrentEditorContext?.insertTo;
               if (submitCache) {
-                ActiveRecordsOperator.operator(showRecords, submitCache).push(context.data);
+                ActiveRecordsOperator.operator(showRecords, submitCache).push(
+                  context.data || data,
+                  undefined,
+                  insertTo
+                );
               }
               if (subviewSubmitCache) {
-                ActiveRecordsOperator.operator(showRecords, subviewSubmitCache).push(context.data);
+                ActiveRecordsOperator.operator(showRecords, subviewSubmitCache).push(
+                  context.data || data,
+                  undefined,
+                  insertTo
+                );
               }
             }
-
-            subviewFieldWidget.flushDataSource(false);
+            subviewFieldWidget.flushDataSource();
           });
       });
   }
@@ -513,7 +684,7 @@ export class BaseTableWidget<
     if (!currentEditorContext) {
       return true;
     }
-    if (isActiveRecordArray(data)) {
+    if (Array.isArray(data)) {
       console.error('Invalid data format.', data);
       return true;
     }
@@ -541,7 +712,11 @@ export class BaseTableWidget<
       return false;
     }
     const res = await this.executeRowEditorUpdate(functionDefinition, data);
-    await this.refreshRowEditorUpdate(context, data, res);
+    this.refreshRowEditorUpdate(context, data, res);
+    if (this.editorMode !== TableEditorMode.cell) {
+      // 单元格编辑时，切换单元格就会触发更新操作，消息提示过于密集
+      MessageHub.success(translateValueByKey('更新成功'));
+    }
     return true;
   }
 
@@ -550,7 +725,7 @@ export class BaseTableWidget<
     if (!currentEditorContext) {
       return true;
     }
-    if (isActiveRecordArray(data)) {
+    if (Array.isArray(data)) {
       console.error('Invalid data format.', data);
       return true;
     }
@@ -573,14 +748,15 @@ export class BaseTableWidget<
       return false;
     }
     const res = await this.executeRowEditorUpdate(functionDefinition, data);
-    await this.refreshRowEditorUpdate(context, data, res);
+    this.refreshRowEditorUpdate(context, data, res);
+    MessageHub.success(translateValueByKey('创建成功'));
     return true;
   }
 
   protected async executeRowEditorUpdate(functionDefinition: RuntimeFunctionDefinition, data: ActiveRecord) {
     const { rootRuntimeContext, model } = this;
     const requestFields = rootRuntimeContext.getRequestModelFields();
-    const sessionPath = this.currentTriggerCreateAction?.sessionPath;
+    const sessionPath = (this.currentEditorContext?.triggerAction as unknown as RuntimeAction)?.sessionPath;
     try {
       if (sessionPath) {
         return await FunctionService.INSTANCE.simpleExecute<Record<string, unknown>>(
@@ -638,6 +814,10 @@ export class BaseTableWidget<
     if (currentEditorContext && !currentEditorContext.submit) {
       const $data = currentEditorContext.row;
       if (dataSource) {
+        if (this.isNewRow()) {
+          this.tableInstance?.removeInsertRow();
+          return;
+        }
         dataSource[currentEditorContext.rowIndex] = $data;
         this.reloadDataSource([...dataSource]);
       }
@@ -659,14 +839,392 @@ export class BaseTableWidget<
 
   // endregion
 
+  // region keyboard-config
+
+  /**
+   * 允许键盘快捷操作
+   * @protected
+   */
+  @Widget.Reactive()
+  protected get enabledKeyboard(): boolean {
+    return Optional.ofNullable(BooleanHelper.toBoolean(this.tableConfig.enabledKeyboard)).orElse(!!this.editable);
+  }
+
+  /**
+   * 表格单元格快捷键编辑
+   */
+  @Widget.Reactive()
+  @Widget.Provide()
+  protected get keyboardConfig(): TableKeyboardConfig {
+    return this.defaultKeyboardConfig;
+  }
+
+  protected get defaultKeyboardConfig(): TableKeyboardConfig {
+    let { keyboardConfig } = this.tableConfig;
+    if (!keyboardConfig) {
+      keyboardConfig = {};
+    }
+    keyboardConfig.left = keyboardConfig.left || { key: 'Tab', shift: true, desc: '向左移动单元格' };
+    keyboardConfig.right = keyboardConfig.right || { key: 'Tab', desc: '向右移动单元格' };
+    // fixme @zbh 20251218 暂未实现
+    // keyboardConfig.up = keyboardConfig.up || { key: 'Enter', ctrl: true, shift: true, desc: '向上移动单元格' };
+    // keyboardConfig.down = keyboardConfig.down || { key: 'Enter', ctrl: true, desc: '向下移动单元格' };
+    keyboardConfig.enter = keyboardConfig.enter || { key: 'Enter', desc: '提交数据' };
+    keyboardConfig.cancel = keyboardConfig.cancel || { key: 'Esc', desc: '取消编辑' };
+    return keyboardConfig;
+  }
+
+  @Widget.Reactive()
+  protected get bindingKeyboardConfig(): Record<string, TableBindingKeyboardConfig[]> {
+    const configs: Record<string, TableBindingKeyboardConfig[]> = {};
+    const pushConfig = (config: KeyboardConfig | undefined, fn: TableBindingKeyboardConfig['fn']) => {
+      if (!config) {
+        return;
+      }
+      const { key, ctrl, shift, alt } = config;
+      let bindingConfigs = configs[key];
+      if (!bindingConfigs) {
+        bindingConfigs = [];
+        configs[key] = bindingConfigs;
+      }
+      bindingConfigs.push({
+        key,
+        ctrl: ctrl || false,
+        shift: shift || false,
+        alt: alt || false,
+        fn
+      });
+    };
+    const { keyboardConfig } = this;
+    pushConfig(keyboardConfig.left, this.onKeyboardMoveToLeftCell);
+    pushConfig(keyboardConfig.right, this.onKeyboardMoveToRightCell);
+    pushConfig(keyboardConfig.up, this.onKeyboardMoveToUpCell);
+    pushConfig(keyboardConfig.down, this.onKeyboardMoveToDownCell);
+    pushConfig(keyboardConfig.enter, this.onKeyboardEnter);
+    pushConfig(keyboardConfig.cancel, this.onKeyboardCancel);
+    return configs;
+  }
+
+  protected matchKeyboardFunction(event: KeyboardEvent): ((e: KeyboardEvent) => void) | undefined {
+    const { bindingKeyboardConfig } = this;
+    const eventKey = event.key;
+    let bindingConfigs = bindingKeyboardConfig[eventKey];
+    if (bindingConfigs == null && eventKey === 'Escape') {
+      bindingConfigs = bindingKeyboardConfig.Esc;
+    }
+    if (!bindingConfigs) {
+      return undefined;
+    }
+    const { ctrlKey, metaKey, shiftKey, altKey } = event;
+    for (const bindingConfig of bindingConfigs) {
+      const { ctrl, shift, alt } = bindingConfig;
+      const isCtrlMatch = ctrlKey === ctrl || metaKey === ctrl;
+      const isShiftMatch = shiftKey === shift;
+      const isAltMatch = altKey === alt;
+      if (isCtrlMatch && isShiftMatch && isAltMatch) {
+        return bindingConfig.fn;
+      }
+    }
+    return undefined;
+  }
+
+  protected onKeyboardMoveToRightCell(event: KeyboardEvent) {}
+
+  protected onKeyboardMoveToLeftCell(event: KeyboardEvent) {}
+
+  protected onKeyboardMoveToDownCell(event: KeyboardEvent) {}
+
+  protected onKeyboardMoveToUpCell(event: KeyboardEvent) {}
+
+  protected onKeyboardEnter(event: KeyboardEvent) {}
+
+  protected onKeyboardCancel(event: KeyboardEvent) {}
+
+  // endregion
+
+  // region sort-config
+
+  @Widget.Reactive()
+  protected internalSortConfig: VxeTablePropTypes.SortConfig = {};
+
+  @Widget.Reactive()
+  protected multipleFieldSort = false;
+
+  @Widget.Reactive()
+  protected get sortConfig(): VxeTablePropTypes.SortConfig {
+    const sortConfig = {
+      ...this.internalSortConfig,
+      ...(this.getDsl().sortConfig || {})
+    };
+    if (sortConfig.multiple == null) {
+      sortConfig.multiple = this.multipleFieldSort;
+    }
+    return sortConfig;
+  }
+
+  protected initSortConfig() {
+    this.multipleFieldSort = (this.sortList?.length || 0) >= 2;
+    const sortConfig = this.internalSortConfig;
+    if (sortConfig.remote == null) {
+      sortConfig.remote = true;
+    }
+    if (sortConfig.defaultSort == null) {
+      const defaultSort: { field: string; order: VxeTablePropTypes.SortOrder }[] = [];
+      for (const { sortField, direction } of this.sortList || []) {
+        defaultSort.push({
+          field: sortField,
+          order: direction.toLowerCase() as VxeTablePropTypes.SortOrder
+        });
+      }
+      sortConfig.defaultSort = defaultSort;
+    }
+  }
+
+  // endregion
+
+  // region 数据分组
+
+  /**
+   * 启用分组
+   * @protected
+   */
+  @Widget.Reactive()
+  @Widget.Provide()
+  protected get enableGrouping(): boolean {
+    const enableGrouping = BooleanHelper.toBoolean(this.tableConfig.enableGrouping);
+    if (enableGrouping != null) {
+      return enableGrouping;
+    }
+    if (this.inline && !this.isDataSourceProvider) {
+      // fixme @zbh 20250925 子表格暂不支持分组
+      return false;
+    }
+    return true;
+  }
+
+  /**
+   * 分组视图数据源的总数量
+   */
+  @Widget.Reactive()
+  protected groupingExpandedAll: boolean | undefined;
+
+  /**
+   * 当前视图使用分组结构展示
+   *  启动了分组并且有分组字段
+   */
+  @Widget.Provide()
+  @Widget.Reactive()
+  protected get enabledGroupView(): boolean {
+    return this.enableGrouping && !!this.groupList?.length;
+  }
+
+  /**
+   * 分组视图底部展示「展开全部」操作
+   */
+  @Widget.Reactive()
+  protected get groupViewFooterExpandControl() {
+    if (this.enabledGroupView) {
+      return !!this.groupingExpandedAll;
+    }
+    return false;
+  }
+
+  /**
+   * 分组视图底部展示「收起全部」操作
+   */
+  @Widget.Reactive()
+  protected get groupViewFooterFoldControl() {
+    return true;
+  }
+
+  /**
+   * 分组参数
+   * @protected
+   */
+  @Widget.Provide()
+  @Widget.Reactive()
+  protected groupList: GroupingField[] | undefined = undefined;
+
+  /**
+   * 默认分组字段
+   * @protected
+   * @example "field00003,field00004"
+   * @returns [field00003 desc,field00004 desc]
+   */
+  @Widget.Reactive()
+  protected get grouping(): GroupingField[] | undefined {
+    const dsf: string = this.getDsl().grouping;
+    if (dsf) {
+      const dsfArr = dsf.split(ORDERING_SEPARATOR).filter((v) => !isEmpty(v));
+      return dsfArr.map((v: string) => {
+        const [field, direction] = getSortFieldDirection(v);
+        return { field, direction };
+      });
+    }
+    return undefined;
+  }
+
+  /**
+   * 修改分组配置
+   */
+  @Widget.Provide()
+  @Widget.Method()
+  public onGroupChange(groupList: GroupingField[]): void {
+    const finalGroupList = groupList.length ? groupList : [];
+    const groupParameters: UrlQueryParameters = {};
+    if (finalGroupList?.length) {
+      groupParameters.groupField = finalGroupList.map((v) => v.field).join(URL_SPLIT_SEPARATOR);
+      groupParameters.groupDirection = finalGroupList.map((v) => v.direction).join(URL_SPLIT_SEPARATOR);
+    } else {
+      groupParameters.groupField = null;
+      groupParameters.groupDirection = null;
+    }
+    let { pagination } = this;
+    if (pagination) {
+      pagination.current = 1;
+    } else {
+      pagination = this.generatorPagination();
+    }
+    groupParameters.currentPage = toString(pagination.current);
+    groupParameters.pageSize = toString(pagination.pageSize);
+
+    this.groupList = finalGroupList;
+
+    if (this.inline) {
+      this.refreshProcess();
+      return;
+    }
+
+    this.$router.push({
+      segments: [
+        {
+          path: 'page',
+          parameters: groupParameters,
+          extra: {
+            preserveParameter: true
+          }
+        }
+      ]
+    });
+    this.refreshProcess();
+  }
+
+  /**
+   * 初始化分组字段列表，优选取url上面的配置，如果没有就取设计器配置
+   */
+  protected initGroupList() {
+    const { groupField, groupDirection } = this.urlParameters;
+    let { groupList } = this;
+
+    if (!groupList && groupField && groupDirection) {
+      groupList = [];
+      const groupFields = StringHelper.convertArray(groupField);
+      const directions = StringHelper.convertArray(groupDirection);
+      if (groupFields.length && directions.length && groupFields.length === directions.length) {
+        for (let i = 0; i < groupFields.length; i++) {
+          groupList.push({ field: groupFields[i], direction: directions[i] as EDirection });
+        }
+      }
+      this.groupList = groupList;
+    } else if (!groupList && this.grouping?.length) {
+      this.groupList = this.grouping;
+    }
+  }
+
+  // endregion
+
+  // region 表格事件
+
+  @Widget.Reactive()
+  @Widget.Inject()
+  protected tableEventCallChaining: TableEventCallChaining | undefined;
+
+  protected async onAddRowEvent(e?: Omit<TableAddEvent, 'type'>) {
+    if (this.lastedCurrentEditorContext == null) {
+      this.lastedCurrentEditorContext = {
+        prepare: true,
+        new: true,
+        insertTo: e?.insertTo,
+        editorMode: TableEditorMode.row,
+        editorCloseTrigger: TableEditorCloseTrigger.auto,
+        forceEditable: true
+      } as ActiveEditorContext;
+    }
+    let target: ActiveRecord[] | undefined;
+    if (e?.activeRecords) {
+      target = e.activeRecords;
+    } else if (e?.activeRecord) {
+      target = [e.activeRecord];
+    } else {
+      target = [{}];
+    }
+    const records = ActiveRecordsOperator.repairRecords(target);
+    const { row: newRow } = await this.tableInstance?.insert(records, e?.insertTo);
+    nextTick(() => {
+      this.tableInstance?.setEditRow(newRow);
+    });
+  }
+
+  protected async onCopyRowEvent(e: Omit<TableCopyEvent, 'type'>) {
+    if (this.lastedCurrentEditorContext == null) {
+      this.lastedCurrentEditorContext = {
+        prepare: true,
+        editorMode: TableEditorMode.row,
+        editorCloseTrigger: TableEditorCloseTrigger.auto,
+        forceEditable: true
+      } as ActiveEditorContext;
+    }
+    let target: ActiveRecord[] | undefined;
+    if (e.activeRecords) {
+      target = e.activeRecords;
+    } else if (e.activeRecord) {
+      target = [e.activeRecord];
+    } else if (e.index != null) {
+      const t = this.dataSource?.[e.index];
+      if (t) {
+        target = [t];
+      }
+    }
+    if (!target?.length) {
+      console.error('Invalid copy records.', e);
+      return;
+    }
+    if (e.clone) {
+      target = activeRecordsClone(target);
+    }
+    const records = ActiveRecordsOperator.repairRecords(target);
+    const { row: newRow } = await this.tableInstance?.insert(records, e.copyTo);
+    nextTick(() => {
+      if (Array.isArray(newRow)) {
+        this.tableInstance?.setEditRow(newRow[0]);
+      } else {
+        this.tableInstance?.setEditRow(newRow);
+      }
+    });
+  }
+
+  protected onEditRowEvent(e: Omit<TableEditEvent, 'type'>) {
+    console.warn('Unsupported operation', e);
+  }
+
+  // endregion
+
   public executeExpression<T>(
-    activeRecord: ActiveRecord | undefined,
+    activeRecord: ActiveRecords | undefined,
     expression: string,
     errorValue?: T
   ): T | string | undefined {
+    let activeRecords: ActiveRecord[];
+    if (activeRecord == null) {
+      activeRecords = [{}];
+    } else if (Array.isArray(activeRecord)) {
+      activeRecords = activeRecord;
+    } else {
+      activeRecords = [activeRecord];
+    }
     return Expression.run(
       {
-        activeRecords: [activeRecord || {}],
+        activeRecords,
         rootRecord: this.rootData?.[0] || {},
         openerRecord: this.openerActiveRecords?.[0] || {},
         scene: this.scene
@@ -678,8 +1236,14 @@ export class BaseTableWidget<
 
   // region 列组件收集
 
+  /**
+   * @deprecated
+   */
   protected columnWidgetMap: Map<string, ColumnWidgetEntity> = new Map();
 
+  /**
+   * @deprecated
+   */
   @Widget.Method()
   @Widget.Provide()
   protected fieldWidgetMounted(widget: BaseTableColumnWidget) {
@@ -689,12 +1253,18 @@ export class BaseTableWidget<
     });
   }
 
+  /**
+   * @deprecated
+   */
   @Widget.Method()
   @Widget.Provide()
   protected fieldWidgetUnmounted(widget: BaseTableColumnWidget) {
     this.columnWidgetMap.delete(widget.path);
   }
 
+  /**
+   * @deprecated
+   */
   public getColumnWidgets(sort = false): BaseTableColumnWidget[] {
     const iterator = this.columnWidgetMap.values();
     let next = iterator.next();
@@ -716,59 +1286,61 @@ export class BaseTableWidget<
 
   // endregion
 
-  // region user prefer
-
-  protected userPreferEventManager: UserPreferEventManager | undefined;
-
-  @Widget.Reactive()
-  @Widget.Provide()
-  protected userPrefer?: UserTablePrefer;
+  @Widget.Method()
+  public onCheckedChange(data: ActiveRecords, event?: CheckedChangeEvent) {
+    const records =
+      this.enabledGroupView && Array.isArray(data)
+        ? data.filter((record) => !record[GROUP_TREE_KEY.CHILDREN_KEY])
+        : data;
+    super.onCheckedChange(records, event);
+  }
 
-  protected initUserPrefer() {
-    this.userPreferEventManager = UserPreferEventManager.get(this.rootHandle || this.currentHandle);
-    if (this.inline) {
-      this.userPrefer = {} as UserTablePrefer;
+  @Widget.Method()
+  public onCheckedAllChange(selected: boolean, data: ActiveRecord[], event?: CheckedChangeEvent) {
+    if (selected) {
+      const records =
+        this.enabledGroupView && Array.isArray(data)
+          ? data.filter((record) => !record[GROUP_TREE_KEY.CHILDREN_KEY])
+          : data;
+      super.onCheckedAllChange(selected, records, event);
     } else {
-      this.userPrefer = (UserPreferService.parsePreferForTable(
-        this.metadataRuntimeContext.view?.extension?.userPreference as Record<string, unknown>
-      ) || {}) as UserTablePrefer;
-      this.userPreferEventManager.onSave(this.$saveUserPrefer.bind(this));
+      super.onCheckedAllChange(selected, data, event);
     }
-    this.userPreferEventManager.setData(this.userPrefer);
-    this.userPreferEventManager.onReload(this.$reloadUserPrefer.bind(this), CallChaining.MAX_PRIORITY);
   }
 
-  /**
-   *
-   * @param userPrefer
-   * @deprecated 兼容原有逻辑 使用UserPreferEventManager.INSTANCE.reload方法替换
-   */
-  @Widget.Provide()
   @Widget.Method()
-  public reloadUserPrefer(userPrefer: UserTablePrefer) {
-    this.userPreferEventManager?.reload(userPrefer);
-  }
-
-  protected $reloadUserPrefer(userPrefer: Partial<UserTablePrefer>) {
-    this.userPrefer = { ...(this.userPrefer || {}), ...userPrefer } as UserTablePrefer;
-    this.userPreferEventManager?.setData(this.userPrefer);
+  @Widget.Provide()
+  public onSortChange(sortList: ISort[]) {
+    super.onSortChange(sortList);
+    this.multipleFieldSort = (this.sortList?.length || 0) >= 2;
+    nextTick(() => {
+      if (this.sortList?.length) {
+        (this.tableInstance?.getSortColumns() || [])
+          .filter((v) => !this.sortList?.find((vv) => vv.sortField === v.field))
+          .forEach((v) => this.tableInstance?.clearSort(v.field));
+        this.tableInstance?.sort(
+          this.sortList.map((sort) => ({
+            field: sort.sortField,
+            order: sort.direction.toLowerCase() as 'asc' | 'desc'
+          }))
+        );
+      } else {
+        (this.tableInstance?.getSortColumns() || []).forEach((v) => this.tableInstance?.clearSort(v.field));
+        this.tableInstance?.sort([]);
+      }
+    });
   }
 
-  protected async $saveUserPrefer(userPrefer: Partial<UserTablePrefer>) {
-    const viewName = userPrefer.viewName || this.metadataRuntimeContext.view.name;
-    if (viewName) {
-      const saveUserPrefer = {
-        ...userPrefer,
-        model: userPrefer.model || this.metadataRuntimeContext.model.model,
-        viewName
-      } as UserTablePrefer;
-      await UserPreferService.savePreferForTable(saveUserPrefer);
+  protected $$initViewState(state: OioAnyViewState): void {
+    if (isTableViewState(state) && !state.table) {
+      state.table = this.currentHandle;
     }
   }
 
   protected $$beforeMount() {
     super.$$beforeMount();
-    this.initUserPrefer();
+    this.initGroupList();
+    this.initSortConfig();
   }
 
   protected $$mounted() {
@@ -782,14 +1354,30 @@ export class BaseTableWidget<
       },
       { force: true, immutable: false }
     );
-    this.editRowCallChaining?.hook(this.path, (args) => {
-      return this.editRow(args?.[0], args?.[1]);
+    this.tableEventCallChaining?.hook(this.path, (args) => {
+      const e = args?.[0] as BaseTableEvent;
+      if (!e) {
+        return;
+      }
+      switch (e.type) {
+        case TableEventType.add:
+          this.onAddRowEvent(e);
+          break;
+        case TableEventType.copy:
+          this.onCopyRowEvent(e);
+          break;
+        case TableEventType.edit:
+          this.onEditRowEvent(e);
+          break;
+        default:
+          console.error(`Invalid event type: ${e.type}`, e);
+          break;
+      }
     });
   }
 
   protected $$unmounted() {
     super.$$unmounted();
-    this.userPreferEventManager?.dispose();
-    this.editRowCallChaining?.unhook(this.path);
+    this.tableEventCallChaining?.unhook(this.path);
   }
 }