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

package/src/view/table/TableWidget.ts

@@ -4,16 +4,24 @@ import {
   ActiveRecordExtendKeys,
   ActiveRecords,
   ActiveRecordsOperator,
+  ConditionWrapper,
   GenericFunctionService,
+  GroupingData,
+  GroupingField,
+  GroupStatisticsEnum,
   isM2MField,
   isRelation2OField,
   isRelationField,
   Pagination,
   QueryContext,
   QueryService,
+  QuerySort,
   QueryVariables,
   RuntimeModelField,
   RuntimeRelationField,
+  TableGroupingPageOptions,
+  TableGroupingQueryService,
+  TableGroupingWrapperOptions,
   translateValueByKey
 } from '@oinone/kunlun-engine';
 import { Entity, ViewType } from '@oinone/kunlun-meta';
@@ -21,19 +29,32 @@ import { Condition } from '@oinone/kunlun-request';
 import { DEFAULT_TRUE_CONDITION, ISort } from '@oinone/kunlun-service';
 import { BigNumber, BooleanHelper, NumberHelper, Optional, StringHelper } from '@oinone/kunlun-shared';
 import { SPI } from '@oinone/kunlun-spi';
-import { VxeTableHelper } from '@oinone/kunlun-vue-ui';
-import { StyleHelper } from '@oinone/kunlun-vue-ui-antd';
+import {
+  ActiveEditorContext,
+  GROUP_TREE_KEY,
+  TableEditorCloseTrigger,
+  TableEditorMode,
+  TableRowClickMode,
+  VxeTableHelper
+} from '@oinone/kunlun-vue-ui';
+import { EmptyStyle, StyleHelper } from '@oinone/kunlun-vue-ui-antd';
 import { DslDefinitionWidget, Widget } from '@oinone/kunlun-vue-widget';
-import { find, isBoolean, isNaN, isNil, isNumber, isPlainObject, isString, toString } from 'lodash-es';
+import { delay, find, isBoolean, isNaN, isNil, isNumber, isPlainObject, isString, toNumber, toString } from 'lodash-es';
 import { nextTick } from 'vue';
 import { VxeTableDefines } from 'vxe-table';
 import { ActionWidget } from '../../action/component/action';
 import { BaseElementListViewWidgetProps, BaseElementWidget, BaseTableColumnWidget, BaseTableWidget } from '../../basic';
 import { ExpandColumnWidgetNames } from '../../field';
-import { ActiveCountEnum, fetchPageSize, fetchPageSizeNullable, TABLE_WIDGET, UserTablePrefer } from '../../typing';
+import {
+  ActiveCountEnum,
+  fetchPageSize,
+  fetchPageSizeNullable,
+  TABLE_WIDGET,
+  TableLineHeightEnum,
+  UserTablePrefer
+} from '../../typing';
 import { TreeUtils } from '../../util';
 import DefaultTable from './DefaultTable.vue';
-import { TableRowClickMode } from './typing';
 
 const CLICK_SLOT_NAME = 'click';
 
@@ -58,6 +79,20 @@ export class TableWidget<Props extends TableWidgetProps = TableWidgetProps> exte
     return this;
   }
 
+  /**
+   * 表格底部开启「添加一行」操作
+   */
+  @Widget.Reactive()
+  @Widget.Inject()
+  protected showAddBtn = false;
+
+  /**
+   * 表格底部开启「快速填报」操作
+   */
+  @Widget.Reactive()
+  @Widget.Inject()
+  protected showQuickFill = false;
+
   @Widget.Provide()
   protected get cellWidth() {
     // fixme @zbh 20250723 请使用语义明确的dsl属性名称
@@ -76,23 +111,70 @@ export class TableWidget<Props extends TableWidgetProps = TableWidgetProps> exte
     }
   }
 
-  protected get tableConfig() {
-    return this.getMergeConfig('table');
-  }
-
   @Widget.Reactive()
   protected get checkbox(): boolean {
     return Optional.ofNullable(this.getDsl().checkbox).map(BooleanHelper.toBoolean).orElse(true)!;
   }
 
   @Widget.Reactive()
-  protected get lineHeight(): number | undefined {
-    return NumberHelper.toNumber(this.tableConfig.lineHeight) as number | undefined;
+  protected get lineHeight(): string | number | undefined {
+    const { lineHeight } = this.tableConfig;
+    if (lineHeight != null) {
+      return this.computeLineHeight(lineHeight);
+    }
+    return this.computeLineHeight(this.defaultBasicLineHeight);
+  }
+
+  /**
+   * 默认基准行高，切换行高时以该值作为计算基准
+   * @protected
+   */
+  @Widget.Reactive()
+  protected get defaultBasicLineHeight(): number {
+    return Optional.ofNullable(this.getDsl().defaultBasicLineHeight).map(NumberHelper.toNumber).orElse(48);
+  }
+
+  /**
+   * 根据行高类型计算行高
+   * @param lineHeight 行高
+   * @protected
+   */
+  protected computeLineHeight(lineHeight: number | string): string | number | undefined {
+    if (typeof lineHeight === 'string' && lineHeight.endsWith('px')) {
+      lineHeight = lineHeight.substring(0, lineHeight.length - 2);
+    }
+    const basicLineHeight = NumberHelper.toNumber(lineHeight);
+    if (basicLineHeight == null) {
+      return StyleHelper.px(lineHeight) as string;
+    }
+    const { lineHeightType } = this;
+    if (lineHeightType == null) {
+      return basicLineHeight;
+    }
+    switch (lineHeightType) {
+      case TableLineHeightEnum.SMALL:
+        return basicLineHeight - this.computeLineHeightOffset(TableLineHeightEnum.SMALL);
+      case TableLineHeightEnum.MIDDLE:
+        return basicLineHeight;
+      case TableLineHeightEnum.LARGE:
+        return basicLineHeight + this.computeLineHeightOffset(TableLineHeightEnum.LARGE);
+      case TableLineHeightEnum.AUTO:
+        return undefined;
+    }
+    return basicLineHeight;
+  }
+
+  /**
+   * 计算行高偏移量，切换行高时通过类型获取偏移量
+   * @protected
+   */
+  protected computeLineHeightOffset(lineHeightType: TableLineHeightEnum.SMALL | TableLineHeightEnum.LARGE): number {
+    return 8;
   }
 
   @Widget.Reactive()
   protected get minLineHeight(): number | undefined {
-    return NumberHelper.toNumber(this.tableConfig.minLineHeight) as number | undefined;
+    return Optional.ofNullable(this.tableConfig.minLineHeight).map(NumberHelper.toNumber).orElse(undefined);
   }
 
   @Widget.Reactive()
@@ -120,13 +202,35 @@ export class TableWidget<Props extends TableWidgetProps = TableWidgetProps> exte
    */
   @Widget.Reactive()
   protected get autoLineHeight(): boolean {
-    const { autoLineHeight } = this.tableConfig;
-    return Optional.ofNullable(autoLineHeight).map(BooleanHelper.toBoolean).orElse(true)!;
+    const { lineHeightType } = this;
+    if (lineHeightType === TableLineHeightEnum.AUTO) {
+      return true;
+    }
+    if (!lineHeightType || lineHeightType === TableLineHeightEnum.DEFAULT) {
+      const { autoLineHeight } = this.tableConfig;
+      return Optional.ofNullable(autoLineHeight).map(BooleanHelper.toBoolean).orElse(true);
+    }
+    return false;
+  }
+
+  @Widget.Reactive()
+  protected get lineHeightType(): TableLineHeightEnum | undefined {
+    return this.viewState?.lineHeightType as TableLineHeightEnum | undefined;
   }
 
   @Widget.Reactive()
   protected get enableSequence(): boolean {
-    return Optional.ofNullable(this.getDsl().enableSequence).map(BooleanHelper.toBoolean).orElse(false)!;
+    return Optional.ofNullable(this.getDsl().enableSequence)
+      .map(BooleanHelper.toBoolean)
+      .orElse(this.defaultEnableSequence);
+  }
+
+  protected get defaultEnableSequence() {
+    const { enableSequence } = this.tableConfig;
+    if (enableSequence == null) {
+      return false;
+    }
+    return enableSequence;
   }
 
   @Widget.Reactive()
@@ -174,11 +278,47 @@ export class TableWidget<Props extends TableWidgetProps = TableWidgetProps> exte
 
   @Widget.Reactive()
   protected get allowChecked(): string | boolean | undefined {
-    return this.getDsl().allowChecked;
+    const val = this.getDsl().allowChecked;
+    if (val == null) {
+      return true;
+    }
+    const booleanCheckbox = BooleanHelper.toBoolean(val);
+    if (booleanCheckbox != null) {
+      return booleanCheckbox;
+    }
+    return val as string;
+  }
+
+  @Widget.Reactive()
+  protected get allowAllChecked() {
+    if (this.readyToAllCheckedCount > 200) {
+      return '表格最多支持勾选200条';
+    }
+    return true;
+  }
+
+  @Widget.Reactive()
+  protected get isAllCheckedIndeterminate(): boolean | undefined {
+    const total = this.readyToAllCheckedCount;
+    if (total === -1) {
+      return undefined;
+    }
+    const checkedCount = this.activeRecords?.length || 0;
+    if (checkedCount > 0 && checkedCount < total) {
+      return true;
+    }
+    return undefined;
   }
 
   @Widget.Method()
-  protected checkMethod({ row }: { row: ActiveRecord }) {
+  protected checkMethod(params: { row: ActiveRecord }): boolean | string | undefined {
+    const { row } = params;
+    if (this.enabledGroupView) {
+      const res = this.checkMethodByGroup(params);
+      if (res != null) {
+        return res;
+      }
+    }
     const { allowChecked } = this;
     if (isNil(allowChecked)) {
       return true;
@@ -192,6 +332,71 @@ export class TableWidget<Props extends TableWidgetProps = TableWidgetProps> exte
     return true;
   }
 
+  protected checkMethodByGroup({ row }: { row: ActiveRecord }): boolean | string | undefined {
+    const children = row[GROUP_TREE_KEY.CHILDREN_KEY] as object[];
+    if (children) {
+      if (!!children.length) {
+        if (row[GROUP_TREE_KEY.IS_LEAF_KEY]) {
+          if (children.length > 200) {
+            return '表格最多支持勾选200条';
+          }
+          return true;
+        }
+        if (this.hasExpandedGroupNode(children)) {
+          if (this.computeReadyToCheckedCount(children) > 200) {
+            return '表格最多支持勾选200条';
+          }
+          return true;
+        }
+      }
+      return '请展开分组后再批量勾选';
+    }
+  }
+
+  protected hasExpandedGroupNode(children: object[]): boolean {
+    return children.some((v) => {
+      const cc = v[GROUP_TREE_KEY.CHILDREN_KEY] as object[];
+      if (cc) {
+        if (!!cc.length) {
+          if (v[GROUP_TREE_KEY.IS_LEAF_KEY]) {
+            return true;
+          }
+          if (this.hasExpandedGroupNode(cc)) {
+            return true;
+          }
+        }
+        return false;
+      }
+      return true;
+    });
+  }
+
+  @Widget.Reactive()
+  protected get readyToAllCheckedCount(): number {
+    if (this.enabledGroupView) {
+      return this.computeReadyToCheckedCount(this.dataSource || []);
+    }
+    return -1;
+  }
+
+  protected computeReadyToCheckedCount(children: object[]): number {
+    let total = 0;
+    for (const child of children) {
+      const cc = child[GROUP_TREE_KEY.CHILDREN_KEY] as object[];
+      if (cc) {
+        const ccNext = cc[GROUP_TREE_KEY.CHILDREN_KEY] as object[];
+        if (ccNext) {
+          total += this.computeReadyToCheckedCount(cc);
+        } else {
+          total += cc.length;
+        }
+        continue;
+      }
+      break;
+    }
+    return total;
+  }
+
   @Widget.Reactive()
   @Widget.Provide()
   protected get operatorColumnDirection() {
@@ -217,11 +422,19 @@ export class TableWidget<Props extends TableWidgetProps = TableWidgetProps> exte
   }
 
   @Widget.Method()
+  @Widget.Provide()
   public onSortChange(sortList: ISort[]): void {
     super.onSortChange(sortList);
     this.resetExpandRowAttr();
   }
 
+  @Widget.Method()
+  @Widget.Provide()
+  public onGroupChange(groupList: GroupingField[]): void {
+    super.onGroupChange(groupList);
+    this.resetExpandRowAttr();
+  }
+
   protected resetExpandRowAttr() {
     if (!this.existingExpandElement) {
       return;
@@ -243,7 +456,7 @@ export class TableWidget<Props extends TableWidgetProps = TableWidgetProps> exte
    */
   @Widget.Reactive()
   protected get mergeCells() {
-    return [];
+    return undefined;
   }
 
   /**
@@ -356,12 +569,40 @@ export class TableWidget<Props extends TableWidgetProps = TableWidgetProps> exte
   }
 
   @Widget.Reactive()
-  protected get usingSimpleUserPrefer(): boolean | undefined {
-    return BooleanHelper.toBoolean(this.getDsl().usingSimpleUserPrefer);
+  protected get allowExpand(): string | boolean | undefined {
+    return BooleanHelper.toBoolean(this.getDsl().allowExpand);
+  }
+
+  @Widget.Method()
+  protected expandMethod({ row }: { row: ActiveRecord }) {
+    if (this.enabledGroupView) {
+      if (!!row[GROUP_TREE_KEY.CHILDREN_KEY]) {
+        return false;
+      }
+    }
+    const { allowExpand } = this;
+    if (isNil(allowExpand)) {
+      return true;
+    }
+    if (isBoolean(allowExpand)) {
+      return allowExpand;
+    }
+    if (isString(allowExpand)) {
+      return this.executeExpression<boolean>(row, allowExpand, false);
+    }
+    return true;
   }
 
   @Widget.Method()
   protected onToggleRowExpand({ expanded, rowIndex }) {
+    if (this.treeConfig) {
+      if (expanded) {
+        this.expandRowIndexes = [0];
+      } else {
+        this.expandRowIndexes = [...RESET_EXPAND_ROW_INDEXES];
+      }
+      return;
+    }
     const expandIndex = this.expandRowIndexes.findIndex((v) => v === rowIndex);
     if (expanded) {
       if (this.expandAccordion) {
@@ -640,6 +881,14 @@ export class TableWidget<Props extends TableWidgetProps = TableWidgetProps> exte
     return StringHelper.convertArray(this.getDsl().rowClickMode)?.map((v) => v.toLowerCase()) as TableRowClickMode[];
   }
 
+  /**
+   * 添加一行
+   */
+  @Widget.Method()
+  protected onAddRow() {
+    this.onAddRowEvent({ insertTo: 0 });
+  }
+
   @Widget.Method()
   protected onCurrentChange(e) {
     if (this.currentRow) {
@@ -649,6 +898,17 @@ export class TableWidget<Props extends TableWidgetProps = TableWidgetProps> exte
     }
   }
 
+  /**
+   * 整行、全表编辑开启时，点击单元格需要记录最新的行+单元格数据
+   */
+  @Widget.Method()
+  protected onCellClick(context: ActiveEditorContext) {
+    if (this.lastedCurrentEditorContext && [TableEditorMode.row, TableEditorMode.table].includes(this.editorMode)) {
+      this.lastedCurrentEditorContext.column = context.column;
+      this.lastedCurrentEditorContext.columnIndex = context.columnIndex;
+    }
+  }
+
   @Widget.Method()
   protected async onRowClick({ column, row }) {
     if (!column?.field || !this.allowRowClick) {
@@ -699,6 +959,7 @@ export class TableWidget<Props extends TableWidgetProps = TableWidgetProps> exte
 
   protected treeRelationField: RuntimeRelationField | undefined;
 
+  @Widget.Reactive()
   protected expandTreeField: RuntimeModelField | undefined;
 
   @Widget.Reactive()
@@ -778,7 +1039,7 @@ export class TableWidget<Props extends TableWidgetProps = TableWidgetProps> exte
 
   @Widget.Reactive()
   protected get treeConfig() {
-    if (this.enabledTreeConfig) {
+    if (this.enabledTreeConfig && !this.enabledGroupView) {
       return {
         transform: true,
         rowField: ActiveRecordExtendKeys.DRAFT_ID,
@@ -791,6 +1052,19 @@ export class TableWidget<Props extends TableWidgetProps = TableWidgetProps> exte
         }
       };
     }
+    if (this.enableGrouping) {
+      return {
+        rowField: ActiveRecordExtendKeys.DRAFT_ID,
+        parentField: ActiveRecordExtendKeys.PARENT_DRAFT_ID,
+        hasChild: GROUP_TREE_KEY.IS_LEAF_KEY,
+        expandAll: this.groupViewFooterExpandControl,
+        children: GROUP_TREE_KEY.CHILDREN_KEY,
+        lazy: !this.groupViewFooterExpandControl,
+        loadMethod: async ({ row }) => {
+          return this.loadGroupData(row);
+        }
+      };
+    }
     return undefined;
   }
 
@@ -941,14 +1215,390 @@ export class TableWidget<Props extends TableWidgetProps = TableWidgetProps> exte
     return content;
   }
 
+  // endregion
+
+  // region 数据分组
+
+  @Widget.Reactive()
+  @Widget.Provide()
+  protected get enableGrouping() {
+    return super.enableGrouping;
+  }
+
+  /**
+   * 展开、关闭所有的分组
+   *
+   */
+  @Widget.Method()
+  protected setAllGroupExpand(expand: boolean) {
+    if (!this.enabledGroupView) {
+      return;
+    }
+
+    // 如果全部展开，但是展开全部功能未启动，则不处理
+    if (expand && !this.groupViewFooterExpandControl) {
+      return;
+    }
+
+    this.tableInstance?.getOrigin().setAllTreeExpand(expand);
+  }
+
+  protected getGroupFieldValues(list: ActiveRecord[], targetRow: ActiveRecord, index = 0): GroupingField[] {
+    for (const item of list) {
+      if (item === targetRow) {
+        return [this.getGroupFieldValue(item, index)];
+      }
+      const children = item[GROUP_TREE_KEY.CHILDREN_KEY] as ActiveRecord[];
+      if (children?.length) {
+        const nextFields = this.getGroupFieldValues(children, targetRow, index + 1);
+        if (nextFields.length) {
+          return [this.getGroupFieldValue(item, index), ...nextFields];
+        }
+      }
+    }
+    return [];
+  }
+
+  protected getGroupFieldValue(row: ActiveRecord, index: number): GroupingField {
+    const field = this.groupList?.[index];
+    if (!field || !this.expandTreeFieldColumn) {
+      throw new Error('Invalid group field.');
+    }
+    return {
+      ...field,
+      value: row[this.expandTreeFieldColumn]
+    };
+  }
+
+  /**
+   * 初始化分组展开字段
+   */
+  protected initGroupTreeField() {
+    if (this.enableGrouping) {
+      this.expandTreeField = this.model.modelFields.find((v) => !v.invisible);
+    }
+  }
+
+  protected generatorGroupQueryCondition(condition?: Condition): Record<string, unknown> {
+    const variables = this.generatorQueryVariables();
+    const context = this.generatorQueryContext();
+    const searchBody = this.generatorSearchBody();
+    const finalCondition = this.generatorCondition(condition, this.usingSearchCondition);
+    const orders: QuerySort[] | undefined = this.sortList?.map((item) => ({
+      field: item.sortField,
+      direction: item.direction
+    }));
+    let sort: { orders: QuerySort[] } | undefined;
+    if (orders) {
+      sort = { orders };
+    }
+
+    const queryWrapper: ConditionWrapper = {
+      model: this.model.model,
+      rsql: finalCondition.toString(),
+      sort,
+      queryData: searchBody
+    };
+
+    return {
+      fields: this.groupList || [],
+      queryWrapper,
+      sort: this.sortList,
+      variables,
+      context
+    };
+  }
+
+  /**
+   * 查询分组下对应的数据源（懒加载）
+   */
+  @Widget.Provide()
+  @Widget.Method()
+  protected async loadGroupData(row: ActiveRecord) {
+    const fields = this.getGroupFieldValues(this.dataSource || [], row);
+    if (fields.length) {
+      const requestFields = this.generatorRequestFields();
+      return TableGroupingQueryService.queryGroupingDataByWrapper(this.model, {
+        requestFields,
+        responseFields: requestFields,
+        ...this.generatorGroupQueryCondition(),
+        fields
+      } as TableGroupingWrapperOptions);
+    }
+    return [];
+  }
+
+  @Widget.Provide()
+  @Widget.Method()
+  protected async loadGroupStatistics(
+    row: ActiveRecord,
+    field: RuntimeModelField,
+    groupStatistics: GroupStatisticsEnum
+  ): Promise<string | undefined> {
+    const fields = this.getGroupFieldValues(this.dataSource || [], row);
+    if (fields.length) {
+      const requestFields = this.generatorRequestFields();
+      return TableGroupingQueryService.queryGroupingStatistic(this.model, {
+        requestFields,
+        responseFields: [],
+        ...this.generatorGroupQueryCondition(),
+        fields,
+        statisticField: {
+          field: field.data,
+          statisticMethod: groupStatistics
+        }
+      });
+    }
+  }
+
+  /**
+   * 查询分组分页数据
+   */
+  protected async loadGroupPage(condition?: Condition) {
+    const pagination = this.generatorPagination();
+    const responseFields = this.generatorRequestFields();
+    const result = await TableGroupingQueryService.queryGroupingPage(this.model, {
+      currentPage: this.pagination?.current || 1,
+      pageSize: this.showPagination ? pagination.pageSize : -1,
+      responseFields,
+      ...this.generatorGroupQueryCondition(condition)
+    } as TableGroupingPageOptions);
+    this.groupingExpandedAll = result.expandedAll;
+    pagination.total = toNumber(result?.totalElements);
+    pagination.totalPageSize = toNumber(result?.totalPages);
+    return this.generatorGroupTree(result?.groups);
+  }
+
+  protected generatorGroupTree(groups?: GroupingData[]) {
+    return (
+      groups?.map((g) => {
+        if (g.groups?.length) {
+          return {
+            [this.expandTreeFieldColumn as string]: this.parseGroupValue(g),
+            [GROUP_TREE_KEY.IS_LEAF_KEY]: g.isLeaf,
+            [GROUP_TREE_KEY.PROPS_KEY]: g,
+            [GROUP_TREE_KEY.CHILDREN_KEY]: this.generatorGroupTree(g.groups)
+          };
+        }
+
+        const children = g.data ? JSON.parse(g.data || '[]') : [];
+        return {
+          [this.expandTreeFieldColumn as string]: this.parseGroupValue(g),
+          [GROUP_TREE_KEY.IS_LEAF_KEY]: g.isLeaf,
+          [GROUP_TREE_KEY.PROPS_KEY]: g,
+          [GROUP_TREE_KEY.CHILDREN_KEY]: children
+        };
+      }) || []
+    );
+  }
+
+  protected parseGroupValue(groupingData: GroupingData): unknown {
+    const { isJsonValue, value } = groupingData;
+    if (isJsonValue && typeof value === 'string') {
+      const objectValue = JSON.parse(value);
+      groupingData.value = objectValue;
+      return objectValue;
+    }
+    return value;
+  }
+
+  @Widget.Reactive()
+  @Widget.Provide()
+  protected get groupTitleEmptyStyle() {
+    return this.getDsl().groupTitleEmptyStyle || EmptyStyle.empty;
+  }
+
+  // endregion
+
+  // region 合并单元格
+
+  @Widget.Method()
+  protected spanMethod({ row }: { row: ActiveRecord }): { rowspan: number; colspan: number } | undefined {
+    return undefined;
+  }
+
+  // endregion
+
+  // region 快捷键操作
+
+  /**
+   * 键盘事件处理
+   */
+  @Widget.Method()
+  protected onKeydown({ $event: event }: { $event: KeyboardEvent }) {
+    if (!this.currentEditorContext) {
+      return;
+    }
+    const fn = this.matchKeyboardFunction(event);
+    if (fn) {
+      fn.bind(this)(event);
+    }
+  }
+
+  protected onKeyboardMoveToRightCell(event: KeyboardEvent) {
+    event.preventDefault();
+    this.onMoveColumnActiveEditor(event, 1);
+  }
+
+  protected onKeyboardMoveToLeftCell(event: KeyboardEvent) {
+    event.preventDefault();
+    this.onMoveColumnActiveEditor(event, -1);
+  }
+
+  protected onKeyboardMoveToDownCell(event: KeyboardEvent) {
+    event.preventDefault();
+    this.onMoveRowActiveEditor(event, 1);
+  }
+
+  protected onKeyboardMoveToUpCell(event: KeyboardEvent) {
+    event.preventDefault();
+    this.onMoveRowActiveEditor(event, -1);
+  }
+
+  protected onKeyboardEnter(event: KeyboardEvent) {
+    // const activeRow = this.getTableInstance()?.getActiveEditorRecord();
+    // if (activeRow) {
+    //   const input = (activeRow.origin as { cell?: HTMLElement }).cell?.querySelector('input');
+    //   if (input) {
+    //     if (input !== document.activeElement) {
+    //       return;
+    //     }
+    //   }
+    // }
+    event.preventDefault();
+    this.tableInstance?.clearEditor();
+  }
+
+  protected onKeyboardCancel(event: KeyboardEvent) {
+    event.preventDefault();
+    this.currentEditorContext!.submit = false;
+    this.tableInstance?.clearEditor();
+  }
+
+  protected getCellEditable(field: string, row: ActiveRecord, rowIndex: number) {
+    let isEnabled = false;
+    const columnWidget = this.getColumnWidgets().find((v) => v.itemData === field);
+    if (columnWidget && columnWidget.editable) {
+      isEnabled = columnWidget.cellEditable({
+        key: VxeTableHelper.getKey(row),
+        data: row,
+        index: rowIndex,
+        origin: row
+      });
+    }
+    return isEnabled;
+  }
+
+  /**
+   * 单元格左右移动
+   */
+  protected async onMoveColumnActiveEditor(event: KeyboardEvent, offset: number) {
+    const { lastedCurrentEditorContext } = this;
+    if (!lastedCurrentEditorContext) {
+      return;
+    }
+    const { rowIndex, columnIndex } = lastedCurrentEditorContext;
+    const allColumns = this.tableInstance?.getAllColumns() || [];
+    let nextColumnIndex = columnIndex + offset;
+    let nextColumn = allColumns[nextColumnIndex];
+    if (!nextColumn) {
+      return;
+    }
+
+    while (!nextColumn.field || nextColumn.field === '$$internalOperator' || !nextColumn.visible) {
+      nextColumnIndex += offset;
+      nextColumn = allColumns[nextColumnIndex % allColumns.length];
+    }
+
+    let row = await this.tableInstance?.getTableData(rowIndex);
+    if (nextColumnIndex < 0 || nextColumnIndex >= allColumns.length) {
+      let nextRow = await this.tableInstance?.getTableData(rowIndex + Math.sign(offset));
+      if (!nextRow) {
+        // fixme @zbh 20251024 创建新行并激活编辑态
+        // const records = ActiveRecordsOperator.repairRecords([{}]);
+        // await this.tableInstance?.clearEditor();
+        // const { row: newRow } = await this.tableInstance?.insert(records);
+        // nextRow = newRow;
+      }
+      row = nextRow;
+    }
+    const isEnabled =
+      row &&
+      nextColumn &&
+      nextColumn.field &&
+      this.getCellEditable(nextColumn.field, row, rowIndex + (row ? offset : 0));
+    if (!isEnabled) {
+      return this.onMoveColumnActiveEditor(event, offset + offset);
+    }
+
+    if (
+      !lastedCurrentEditorContext.editorMode &&
+      this.editorMode === TableEditorMode.cell &&
+      this.editorCloseTrigger === TableEditorCloseTrigger.auto
+    ) {
+      lastedCurrentEditorContext.editorMode = TableEditorMode.row;
+    }
+
+    lastedCurrentEditorContext.column = nextColumn;
+    lastedCurrentEditorContext.columnIndex = nextColumnIndex;
+
+    // 如果是换行编辑，那么需要下一行可编辑项的第一个默认选中，并且修改激活行的数据
+    nextTick(async () => {
+      await this.tableInstance?.activeCellEditor(row, nextColumn.field);
+    });
+  }
+
+  /**
+   * 上下移动
+   */
+  protected async onMoveRowActiveEditor(event: KeyboardEvent, offset: 1 | -1) {
+    const { column, rowIndex } = this.lastedCurrentEditorContext!;
+    const { field } = column;
+    if (field) {
+      const currentIndex = rowIndex + offset;
+      const currentRow = this.showDataSource![currentIndex];
+      const isEnabled = this.getCellEditable(field, currentRow, currentIndex);
+      if (!currentRow || !isEnabled) {
+        return;
+      }
+
+      await this.tableInstance?.activeCellEditor(currentRow, field);
+
+      delay(() => {
+        const context = this.getTableInstance()?.getActiveEditorRecord()?.origin as ActiveEditorContext;
+
+        if (context) {
+          this.activeEditor({ ...context, editableMap: {} });
+        }
+      }, 200);
+    }
+  }
+
+  // endregion
+
   public async fetchData(condition?: Condition): Promise<ActiveRecord[]> {
     const searchBody = this.generatorSearchBody();
     this.internalEnabledTreeConfig =
       this.getEnabledTreeConfig() && (!(searchBody && Object.keys(searchBody).length) || !this.showPagination);
     const { enabledTreeConfig } = this;
+
+    /**
+     * 分组请求
+     */
+    if (this.enabledGroupView) {
+      return this.load(() => this.loadGroupPage(condition));
+    }
+
+    /**
+     * 树行表格
+     */
     if (enabledTreeConfig) {
       return this.load(() => this.loadTreeNodes(condition));
     }
+
+    /**
+     * 默认请求
+     */
     return super.fetchData(condition);
   }
 
@@ -962,6 +1612,7 @@ export class TableWidget<Props extends TableWidgetProps = TableWidgetProps> exte
     this.resetExpandRowIndexes();
     this.refreshStatistics();
     this.refreshTree();
+    this.setAllGroupExpand(true);
   }
 
   protected refreshTree() {
@@ -982,5 +1633,8 @@ export class TableWidget<Props extends TableWidgetProps = TableWidgetProps> exte
     super.$$beforeCreated();
   }
 
-  // endregion
+  protected $$beforeMount() {
+    super.$$beforeMount();
+    this.initGroupTreeField();
+  }
 }