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

package/src/basic/table/style/index.scss

@@ -3,20 +3,11 @@
 
   &.ant-form-item-has-error {
     .ant-form-item-explain {
-      position: relative;
-      height: 0;
-      min-height: 0;
-      overflow: inherit;
-
       .ant-form-item-explain-error {
-        position: absolute;
-        left: 0;
-        top: 2px;
         padding: var(--oio-padding-xs);
-        background-color: rgba(var(--oio-error-color-rgb), 0.1);
-        border-radius: var(--oio-border-radius);
-        font-size: var(--oio-font-size);
+        font-size: var(--oio-font-size-sm);
         color: var(--oio-error-color);
+        white-space: pre-wrap;
       }
     }
   }

package/src/basic/table-column/BaseTableColumnWidget.ts

@@ -1,7 +1,8 @@
-import { SubmitValue } from '@oinone/kunlun-engine';
+import { GroupingField, SubmitValue } from '@oinone/kunlun-engine';
 import { BooleanHelper, CallChaining, ObjectUtils, Optional } from '@oinone/kunlun-shared';
 import {
   ActiveEditorContext,
+  GROUP_TREE_KEY,
   OioTableInstance,
   RenderCellContext,
   RowContext,
@@ -15,6 +16,7 @@ import { isNil, isString, toString } from 'lodash-es';
 import { toRaw, VNode } from 'vue';
 import { fetchPopconfirmPlacement } from '../../typing';
 import { executeConfirm } from '../../util';
+import type { TableWidget } from '../../view';
 import { BaseDataWidget } from '../common';
 import { FieldWidgetComponentFunction } from '../types';
 import DefaultTableColumn from './DefaultTableColumn.vue';
@@ -74,7 +76,7 @@ export abstract class BaseTableColumnWidget<
   }
 
   @Widget.Reactive()
-  public get columnType(): string {
+  public get columnType(): string | undefined {
     return this.getDsl().columnType;
   }
 
@@ -120,17 +122,17 @@ export abstract class BaseTableColumnWidget<
 
   @Widget.Method()
   public className(context: RenderCellContext): string | string[] | undefined {
-    return this.getDsl().className;
+    return this.getDsl().className || this.getDsl().class;
   }
 
   @Widget.Method()
   public headerClassName(context: RenderCellContext): string | string[] | undefined {
-    return this.getDsl().headerClassName;
+    return this.getDsl().headerClassName || this.getDsl().class;
   }
 
   @Widget.Method()
   public footerClassName(context: RenderCellContext): string | string[] | undefined {
-    return this.getDsl().footerClassName;
+    return this.getDsl().footerClassName || this.getDsl().class;
   }
 
   @Widget.Reactive()
@@ -151,17 +153,47 @@ export abstract class BaseTableColumnWidget<
     return sortable;
   }
 
+  /**
+   * 当前视图使用分组结构展示
+   * 启动了分组并且有分组字段
+   *
+   * @see {@link BaseElementListViewWidget}
+   */
   @Widget.Reactive()
-  public get invisible() {
-    return this.clientInvisible || BooleanHelper.toBoolean(this.getDsl().invisible) || false;
-  }
+  @Widget.Inject()
+  protected enabledGroupView: boolean | undefined;
 
   /**
-   * @deprecated invalid prop in the table column
+   * 表格配置 -> 启用分组
+   * @see {@link BaseElementListViewWidget}
    */
   @Widget.Reactive()
-  public get readonly() {
-    return BooleanHelper.toBoolean(this.getDsl().readonly) || false;
+  @Widget.Inject('enableGrouping')
+  protected tableEnableGrouping!: boolean;
+
+  /**
+   * 分组字段
+   * @see {@link BaseElementListViewWidget}
+   */
+  @Widget.Reactive()
+  @Widget.Inject()
+  protected groupList: GroupingField[] | undefined;
+
+  /**
+   * 当前字段是否启动的分组
+   */
+  @Widget.Reactive()
+  public get enableGrouping(): boolean {
+    const enableGrouping = BooleanHelper.toBoolean(this.getDsl().enableGrouping);
+    if (enableGrouping == null) {
+      return this.tableEnableGrouping || false;
+    }
+    return enableGrouping;
+  }
+
+  @Widget.Reactive()
+  public get invisible() {
+    return this.clientInvisible || BooleanHelper.toBoolean(this.getDsl().invisible) || false;
   }
 
   @Widget.Reactive()
@@ -187,12 +219,12 @@ export abstract class BaseTableColumnWidget<
    */
   @Widget.Reactive()
   public get editable(): boolean {
-    if (this.tableForceEditable) {
-      return this.tableForceEditable;
-    }
     if (this.readonly) {
       return false;
     }
+    if (this.currentEditorContext?.forceEditable) {
+      return true;
+    }
     const { editable, independentlyEditable } = this.getDsl();
     const finalEditable = Optional.ofNullable(editable).orElse(independentlyEditable) as boolean | string | undefined;
     let value = BooleanHelper.toBoolean(finalEditable);
@@ -225,6 +257,19 @@ export abstract class BaseTableColumnWidget<
     return true;
   }
 
+  @Widget.Reactive()
+  public get editorAutofocus() {
+    return Optional.ofNullable(BooleanHelper.toBoolean(this.getDsl().editorAutofocus)).orElse(true);
+  }
+
+  @Widget.Method()
+  protected get editRender(): Record<string, unknown> | undefined {
+    if (this.editorAutofocus) {
+      return { autofocus: this.onAutofocus.bind(this) };
+    }
+    return undefined;
+  }
+
   @Widget.Reactive()
   @Widget.Inject()
   public editorTrigger: TableEditorTrigger | undefined;
@@ -364,9 +409,33 @@ export abstract class BaseTableColumnWidget<
     return true;
   }
 
+  @Widget.Method()
+  public onAutofocus(params: { cell: HTMLElement }) {
+    const { cell } = params;
+    if (!cell) {
+      return;
+    }
+    const input = cell.querySelector('input') as HTMLInputElement;
+    if (input) {
+      input.focus();
+    }
+  }
+
+  /**
+   * 修改分组配置
+   *  @see {@link BaseElementListViewWidget}
+   */
+  @Widget.Method()
+  @Widget.Inject()
+  public onGroupChange!: (list: GroupingField[]) => void;
+
   @Widget.Reactive()
   @Widget.Inject('expandTreeFieldColumn')
-  private tableExpandTreeFieldColumn: string | undefined;
+  protected tableExpandTreeFieldColumn: string | undefined;
+
+  @Widget.Reactive()
+  @Widget.Inject('groupTitleEmptyStyle')
+  protected tableGroupTitleEmptyStyle: string | undefined;
 
   @Widget.Reactive()
   protected get treeNode(): boolean | undefined {
@@ -377,6 +446,43 @@ export abstract class BaseTableColumnWidget<
     return treeNode;
   }
 
+  protected getColumnWidgets(): BaseTableColumnWidget[] {
+    return (this.getParentWidget() as TableWidget).getColumnWidgets();
+  }
+
+  protected renderGroupTitleEmptyStyle(context: RowContext): VNode[] | string {
+    return this.tableGroupTitleEmptyStyle || '';
+  }
+
+  @Widget.Method()
+  protected dynamicRenderDefaultSlot(context: RowContext): ((context: RowContext) => VNode[] | string) | undefined {
+    const groupProps = (context.data as Record<string, { field: string; value: unknown }>)[GROUP_TREE_KEY.PROPS_KEY];
+    const { tableExpandTreeFieldColumn } = this;
+    if (!groupProps || !tableExpandTreeFieldColumn) {
+      return undefined;
+    }
+    const { field, value } = groupProps;
+    if (!field || value == null || (typeof value === 'string' && !value)) {
+      return this.renderGroupTitleEmptyStyle.bind(this);
+    }
+    const column = this.getColumnWidgets().find((v) => v.itemData === field);
+    if (!column) {
+      return undefined;
+    }
+    const internalRender = (column.renderGroupTitleSlot || column.renderDefaultSlot)?.bind(column);
+    if (!internalRender) {
+      return undefined;
+    }
+    return (context: RowContext) => {
+      return internalRender({
+        ...context,
+        data: {
+          [field]: value
+        }
+      });
+    };
+  }
+
   public renderDefaultSlot?(context: RowContext): VNode[] | string;
 
   public renderEditSlot?(context: RowContext): VNode[] | string;
@@ -384,4 +490,14 @@ export abstract class BaseTableColumnWidget<
   public renderContentSlot?(context: RowContext): VNode[] | string;
 
   public renderHeaderSlot?(context: RowContext): VNode[] | string;
+
+  public renderGroupTitleSlot?(context: RowContext): VNode[] | string;
+
+  /**
+   * @deprecated invalid prop in the table column
+   */
+  @Widget.Reactive()
+  public get readonly() {
+    return BooleanHelper.toBoolean(this.getDsl().readonly) || false;
+  }
 }

package/src/basic/table-column/BaseTableFieldWidget.ts

@@ -1,4 +1,11 @@
-import { ActiveRecord, isRelatedField, isRelationField, RuntimeModelField } from '@oinone/kunlun-engine';
+import {
+  ActiveRecord,
+  GroupStatisticsEnum,
+  isAllowGrouping,
+  isAllowSortable,
+  isRelatedField,
+  RuntimeModelField
+} from '@oinone/kunlun-engine';
 import { FieldEventName, FieldEventNames, LifeCycleHeart, LifeCycleTypes } from '@oinone/kunlun-event';
 import { Expression, ExpressionKeyword, ExpressionRunParam } from '@oinone/kunlun-expression';
 import { isEmptyValue, ViewMode, ViewType } from '@oinone/kunlun-meta';
@@ -22,6 +29,7 @@ import {
   TableColumnMinWidthComputeConfigContext
 } from '../theme';
 import { BaseTableQuickOperationColumnWidget } from './BaseTableQuickOperationColumnWidget';
+import DefaultGroupCell from './DefaultGroupCell.vue';
 
 export type HandlerEvent = (field: BaseTableFieldWidget) => void;
 
@@ -50,7 +58,6 @@ export class BaseTableFieldWidget<
   @Widget.Provide()
   protected viewMode = ViewMode.Editor;
 
-  @Widget.Reactive()
   protected runtimeField: Field | undefined;
 
   @Widget.Reactive()
@@ -203,30 +210,31 @@ export class BaseTableFieldWidget<
       if (!this.tableSortable) {
         return false;
       }
-      const { field, relationSortFields } = this;
-      const { store } = field;
-      if (isRelationField(field)) {
-        const { relationStore } = field;
-        if (store) {
-          return false;
-        }
-        if (!relationStore) {
-          return false;
-        }
-        return !!relationSortFields && !!relationSortFields.length;
+      return this.defaultSortable;
+    }
+    return sortable;
+  }
+
+  @Widget.Reactive()
+  protected get defaultSortable() {
+    return isAllowSortable(this.field);
+  }
+
+  @Widget.Reactive()
+  public get enableGrouping(): boolean {
+    const enableGrouping = BooleanHelper.toBoolean(this.getDsl().enableGrouping);
+    if (enableGrouping == null) {
+      if (!this.tableEnableGrouping) {
+        return false;
       }
-      return store;
+      return this.defaultEnableGrouping;
     }
-    return sortable || false;
+    return enableGrouping || false;
   }
 
   @Widget.Reactive()
-  public get relationSortFields(): string[] | undefined {
-    // const { field } = this;
-    // if (isRelationField(field)) {
-    //   return field.sortFields || field.referencesModel?.labelFields;
-    // }
-    return undefined;
+  protected get defaultEnableGrouping() {
+    return isAllowGrouping(this.field);
   }
 
   @Widget.Reactive()
@@ -467,6 +475,7 @@ export class BaseTableFieldWidget<
 
   protected $$mounted() {
     super.$$mounted();
+    this.viewState?.pushField(this.currentHandle);
     this.fieldWidgetMounted?.(this);
     this.notify(LifeCycleTypes.ON_FIELD_MOUNTED);
   }
@@ -488,14 +497,21 @@ export class BaseTableFieldWidget<
 
   protected $$unmounted() {
     super.$$unmounted();
+    this.viewState?.popField(this.currentHandle);
     this.fieldWidgetUnmounted?.(this);
     this.notify(LifeCycleTypes.ON_FIELD_UNMOUNTED);
   }
 
+  /**
+   * @deprecated widget finder please this.viewState.fields
+   */
   @Widget.Method()
   @Widget.Inject()
   protected fieldWidgetMounted: ((widget: BaseTableFieldWidget) => void) | undefined;
 
+  /**
+   * @deprecated widget finder please this.viewState.fields
+   */
   @Widget.Method()
   @Widget.Inject()
   protected fieldWidgetUnmounted: ((widget: BaseTableFieldWidget) => void) | undefined;
@@ -570,7 +586,7 @@ export class BaseTableFieldWidget<
         LifeCycleHeart.publish<BaseTableFieldWidget>(type, `${view.name}:${field.name}`, this);
       }
     } catch (error) {
-      console.log(error);
+      console.error(error);
     }
   }
 
@@ -637,4 +653,47 @@ export class BaseTableFieldWidget<
   public renderDefaultSlot(context: RowContext): VNode[] | string {
     return toString(this.compute(context));
   }
+
+  // region 分组统计
+
+  /**
+   *
+   * @see {@link TableWidget#loadGroupStatistics}
+   */
+  @Widget.Method()
+  @Widget.Inject()
+  protected loadGroupStatistics!: (
+    row: ActiveRecord,
+    field: RuntimeModelField,
+    groupStatistics: GroupStatisticsEnum
+  ) => Promise<string | undefined>;
+
+  /**
+   * 渲染分组展开行的单元格
+   */
+  @Widget.Method()
+  protected renderGroupCellSlot(context: RowContext) {
+    return [
+      createVNode(DefaultGroupCell, {
+        context,
+        model: this.model,
+        field: this.field,
+        loadGroupStatistics: this.loadGroupStatistics
+      })
+    ];
+  }
+
+  // endregion
+
+  /**
+   * @deprecated invalid property
+   */
+  @Widget.Reactive()
+  public get relationSortFields(): string[] | undefined {
+    // const { field } = this;
+    // if (isRelationField(field)) {
+    //   return field.sortFields || field.referencesModel?.labelFields;
+    // }
+    return undefined;
+  }
 }

package/src/basic/table-column/BaseTableQuickOperationColumnWidget.ts

@@ -40,6 +40,9 @@ export abstract class BaseTableQuickOperationColumnWidget<
       table: (context as VxeTableRowContext).origin?.$table,
       column: (context as VxeTableRowContext).origin?.column,
       sortable: this.sortable,
+      enableGrouping: this.enableGrouping,
+      groupList: this.groupList,
+      onGroupChange: this.onGroupChange,
       handleOrderByASC: this.handleOrderByASC,
       handleOrderByDESC: this.handleOrderByDESC,
       handleClearOrder: this.handleClearOrder,