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

package/src/basic/table-column/DefaultGroupCell.vue

@@ -0,0 +1,431 @@
+<template>
+  <div class="default-group-cell" ref="groupCellRef">
+    <a-dropdown
+      overlay-class-name="default-group-cell-dropdown"
+      trigger="click"
+      :visible="visible"
+      :placement="placement"
+      :get-popup-container="getPopupContainer"
+      @visible-change="onVisibleChange"
+    >
+      <div
+        class="default-group-cell-content"
+        :class="[selectValue === GroupStatisticsEnum.NONE && 'default-group-cell-content-hide']"
+      >
+        <div class="default-group-cell-stander">
+          <oio-spin :loading="state.loading" size="small">
+            {{ statisticsValue }}
+          </oio-spin>
+          <oio-icon icon="oinone-caret-down-filled" />
+        </div>
+      </div>
+
+      <template #overlay>
+        <a-menu :selected-keys="[selectValue]">
+          <a-menu-item v-for="option in dropdownOptions" :key="option.value" @click="onChangeValue(option.value)">
+            {{ option.displayName }}
+          </a-menu-item>
+        </a-menu>
+      </template>
+    </a-dropdown>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  ActiveRecord,
+  getRealTtype,
+  GroupStatisticsEnum,
+  IResourceDateTimeFormat,
+  isDateField,
+  isDateTimeField,
+  isNumberField,
+  isTimeField,
+  isYearField,
+  queryResourceDateTimeFormat,
+  RuntimeModel,
+  RuntimeModelField,
+  translateValueByKey
+} from '@oinone/kunlun-engine';
+import { VxeTableRowContext } from '@oinone/kunlun-vue-ui';
+import {
+  DateTimeFormatMap,
+  DateUtil,
+  defaultDateFormatKey,
+  defaultTimeFormatKey,
+  ObjectUtils,
+  OioIcon,
+  OioSpin
+} from '@oinone/kunlun-vue-ui-antd';
+import { Dropdown as ADropdown, Menu as AMenu, MenuItem as AMenuItem } from 'ant-design-vue';
+import dayjs from 'dayjs';
+import { computed, defineComponent, nextTick, onMounted, PropType, reactive, ref } from 'vue';
+
+export default defineComponent({
+  inheritAttrs: false,
+  name: 'DefaultGroupCell',
+  props: {
+    context: {
+      type: Object as PropType<VxeTableRowContext>,
+      default: () => ({})
+    },
+    model: {
+      type: Object as PropType<RuntimeModel>,
+      default: () => ({})
+    },
+    field: {
+      type: Object as PropType<RuntimeModelField>,
+      default: () => ({})
+    },
+    loadGroupStatistics: {
+      type: Function as PropType<
+        (
+          row: ActiveRecord,
+          field: RuntimeModelField,
+          groupStatistics: GroupStatisticsEnum
+        ) => Promise<string | undefined>
+      >
+    }
+  },
+  components: {
+    OioIcon,
+    OioSpin,
+    ADropdown,
+    AMenu,
+    AMenuItem
+  },
+  setup(props) {
+    const state = reactive({
+      loading: false
+    });
+
+    const dropdownOptions = computed(() => {
+      const defaultOptions = [
+        { displayName: translateValueByKey('不展示'), value: GroupStatisticsEnum.NONE },
+        { displayName: translateValueByKey('记录总数'), value: GroupStatisticsEnum.COUNT },
+        { displayName: translateValueByKey('未填写'), value: GroupStatisticsEnum.NULL },
+        { displayName: translateValueByKey('已填写'), value: GroupStatisticsEnum.NOT_NULL },
+        { displayName: translateValueByKey('唯一值'), value: GroupStatisticsEnum.UNIQUE },
+        { displayName: translateValueByKey('未填写占比'), value: GroupStatisticsEnum.NULL_PERCENT },
+        { displayName: translateValueByKey('已填写占比'), value: GroupStatisticsEnum.NOT_NULL_PERCENT },
+        { displayName: translateValueByKey('唯一值占比'), value: GroupStatisticsEnum.UNIQUE_PERCENT }
+      ];
+
+      if (
+        (isDateTimeField(props.field) ||
+          isDateField(props.field) ||
+          isTimeField(props.field) ||
+          isYearField(props.field)) &&
+        !props.field.multi
+      ) {
+        const timeIOptions = [
+          { displayName: translateValueByKey('最早时间'), value: GroupStatisticsEnum.EARLIEST_TIME },
+          { displayName: translateValueByKey('最晚时间'), value: GroupStatisticsEnum.LATEST_TIME }
+        ];
+        defaultOptions.push(...timeIOptions);
+
+        if ((isDateTimeField(props.field) || isDateField(props.field)) && !props.field.multi) {
+          const timeIOptions = [
+            { displayName: translateValueByKey('时间范围(日)'), value: GroupStatisticsEnum.TIME_RANGE_DAY },
+            { displayName: translateValueByKey('时间范围(月)'), value: GroupStatisticsEnum.TIME_RANGE_MONTH },
+            { displayName: translateValueByKey('时间范围(年)'), value: GroupStatisticsEnum.TIME_RANGE_YEAR }
+          ];
+          defaultOptions.push(...timeIOptions);
+        }
+
+        if (isYearField(props.field) && !props.field.multi) {
+          const timeIOptions = [
+            { displayName: translateValueByKey('时间范围(年)'), value: GroupStatisticsEnum.TIME_RANGE_YEAR }
+          ];
+          defaultOptions.push(...timeIOptions);
+        }
+      }
+
+      if (isNumberField(props.field) && !props.field.multi) {
+        const timeIOptions = [
+          {
+            displayName: translateValueByKey('求和'),
+            value: GroupStatisticsEnum.SUM
+          },
+          { displayName: translateValueByKey('平均值'), value: GroupStatisticsEnum.AVERAGE },
+          { displayName: translateValueByKey('中位数'), value: GroupStatisticsEnum.MEDIAN },
+          { displayName: translateValueByKey('最大值'), value: GroupStatisticsEnum.MAX },
+          { displayName: translateValueByKey('最小值'), value: GroupStatisticsEnum.MIN }
+        ];
+
+        defaultOptions.push(...timeIOptions);
+      }
+
+      return defaultOptions;
+    });
+
+    const resourceDateTimeFormat = ref({} as IResourceDateTimeFormat);
+    const placement = ref('bottom');
+    const groupCellRef = ref<HTMLElement>();
+    const visible = ref(false);
+    const selectValue = ref(GroupStatisticsEnum.NONE);
+
+    const normalizeDateTime = (v: string | number) => {
+      if (typeof v === 'number') {
+        return v;
+      }
+      // 只有年份
+      if (/^\d{4}$/.test(v)) {
+        return dayjs(`${v}-01-01 00:00:00`).valueOf();
+      }
+      // 年月
+      if (/^\d{4}-\d{2}$/.test(v)) {
+        return dayjs(`${v}-01 00:00:00`).valueOf();
+      }
+      // 只有日期
+      if (/^\d{4}-\d{2}-\d{2}$/.test(v)) {
+        return dayjs(`${v} 00:00:00`).valueOf();
+      }
+      // 只有时间
+      if (/^\d{2}:\d{2}:\d{2}$/.test(v)) {
+        return dayjs(`1970-01-01 ${v}`).valueOf();
+      }
+
+      return dayjs(v).valueOf();
+    };
+
+    const dateFormat = computed(() => {
+      const hasDateFormat = isDateTimeField(props.field) || isDateField(props.field);
+      const hasTimeFormat = isDateTimeField(props.field) || isTimeField(props.field);
+
+      let dateFormat: string | undefined;
+      if (hasDateFormat) {
+        const dateFormatKey = props.field.template?.dateFormat || defaultDateFormatKey;
+        dateFormat =
+          ObjectUtils.toUpperSnakeCase(
+            resourceDateTimeFormat.value.resourceDateFormat as unknown as Record<string, string>
+          )[dateFormatKey] ||
+          props.field.template?.dateFormat ||
+          defaultDateFormatKey;
+      }
+
+      let timeFormat: string | undefined;
+      if (hasTimeFormat) {
+        const timeFormatKey = props.field.template?.timeFormat || defaultTimeFormatKey;
+        timeFormat =
+          ObjectUtils.toUpperSnakeCase(
+            resourceDateTimeFormat.value.resourceTimeFormat as unknown as Record<string, string>
+          )[timeFormatKey] ||
+          props.field.template?.timeFormat ||
+          defaultTimeFormatKey;
+      }
+
+      let format = DateUtil.fetchDatetimeFormat(
+        { hasDateFormat, hasTimeFormat },
+        props.field.template?.format,
+        dateFormat,
+        timeFormat,
+        undefined,
+        undefined,
+        undefined
+      );
+      if (!format) {
+        format = DateTimeFormatMap.get(getRealTtype(props.field));
+      }
+      return format;
+    });
+
+    const statisticsValue = ref(translateValueByKey('统计'));
+
+    const convertStatisticsValue = (value: string | number): string => {
+      switch (selectValue.value) {
+        case GroupStatisticsEnum.COUNT:
+          // 总数量
+          return `${value} ${translateValueByKey('条记录')}`;
+        case GroupStatisticsEnum.NOT_NULL:
+          // 已填写
+          return `${translateValueByKey('已填写')} ${value}`;
+        case GroupStatisticsEnum.NULL:
+          // 未填写
+          return `${translateValueByKey('未填写')} ${value}`;
+        case GroupStatisticsEnum.UNIQUE:
+          // 唯一值
+          return `${translateValueByKey('唯一值')} ${value}`;
+        case GroupStatisticsEnum.NOT_NULL_PERCENT:
+          // 已填写占比
+          return `${translateValueByKey('已填写占比')} ${value}%`;
+        case GroupStatisticsEnum.NULL_PERCENT:
+          // 未填写占比
+          return `${translateValueByKey('未填写占比')} ${value}%`;
+        case GroupStatisticsEnum.UNIQUE_PERCENT:
+          // 唯一值占比
+          return `${translateValueByKey('唯一值占比')} ${value}%`;
+        case GroupStatisticsEnum.EARLIEST_TIME: {
+          const v = dayjs(normalizeDateTime(value));
+          console.log(v, dateFormat.value);
+          return `${translateValueByKey('最早时间')} ${dayjs(normalizeDateTime(value)).format(dateFormat.value)}`;
+        }
+        case GroupStatisticsEnum.LATEST_TIME:
+          return `${translateValueByKey('最晚时间')} ${dayjs(normalizeDateTime(value)).format(dateFormat.value)}`;
+        case GroupStatisticsEnum.TIME_RANGE_DAY:
+          return `${translateValueByKey('时间范围')} ${value} ${translateValueByKey('天')}`;
+        case GroupStatisticsEnum.TIME_RANGE_MONTH:
+          return `${translateValueByKey('时间范围')} ${value} ${translateValueByKey('月')}`;
+        case GroupStatisticsEnum.TIME_RANGE_YEAR:
+          return `${translateValueByKey('时间范围')} ${value}  ${translateValueByKey('年')}`;
+        case GroupStatisticsEnum.SUM:
+          // 求和
+          return `${translateValueByKey('求和')} ${value}`;
+        case GroupStatisticsEnum.AVERAGE:
+          // 平均值
+          return `${translateValueByKey('平均值')} ${value}`;
+        case GroupStatisticsEnum.MEDIAN:
+          // 中位数
+          return `${translateValueByKey('中位数')} ${value}`;
+        case GroupStatisticsEnum.MAX:
+          // 最大值
+          return `${translateValueByKey('最大值')} ${value}`;
+        case GroupStatisticsEnum.MIN:
+          // 最小值
+          return `${translateValueByKey('最小值')} ${value}`;
+        default:
+          return translateValueByKey('统计');
+      }
+    };
+
+    const onVisibleChange = (val: boolean) => {
+      const rect = groupCellRef.value?.getBoundingClientRect() || { bottom: 0 };
+
+      if (val) {
+        if (window.innerHeight - rect.bottom < 430) {
+          placement.value = 'top';
+        } else {
+          placement.value = 'bottom';
+        }
+      }
+
+      visible.value = val;
+    };
+
+    const onChangeValue = (val: GroupStatisticsEnum) => {
+      visible.value = false;
+      nextTick(async () => {
+        selectValue.value = val;
+        if (val === GroupStatisticsEnum.NONE) {
+          statisticsValue.value = translateValueByKey('统计');
+          return;
+        }
+        try {
+          state.loading = true;
+          const result = await props.loadGroupStatistics?.(props.context.data, props.field, val);
+          if (result) {
+            statisticsValue.value = convertStatisticsValue(`${result}`);
+          } else {
+            statisticsValue.value = translateValueByKey('统计');
+          }
+        } finally {
+          state.loading = false;
+        }
+      });
+    };
+
+    const getPopupContainer = (target: HTMLElement) => {
+      return document.body;
+    };
+
+    onMounted(async () => {
+      await nextTick();
+      resourceDateTimeFormat.value = await queryResourceDateTimeFormat();
+    });
+
+    return {
+      state,
+      dropdownOptions,
+      placement,
+      statisticsValue,
+      groupCellRef,
+      visible,
+      selectValue,
+      GroupStatisticsEnum,
+      getPopupContainer,
+      onVisibleChange,
+      onChangeValue
+    };
+  }
+});
+</script>
+
+<style lang="scss">
+.oio-column {
+  &:has(.default-group-cell) {
+    .vxe-cell--tree-node,
+    .vxe-tree-cell {
+      height: 100%;
+    }
+
+    .vxe-cell,
+    .oio-column-wrapper {
+      height: 100%;
+      padding-right: 0;
+      display: block;
+    }
+  }
+}
+
+.default-group-compose-cell {
+  height: 100%;
+  display: flex;
+  align-items: center;
+
+  .default-group-compose-cell-content {
+    flex: 1;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  &:hover {
+    .default-group-cell-content {
+      display: block;
+    }
+  }
+}
+
+.default-group-cell-dropdown {
+  .ant-dropdown-menu-item-selected,
+  .ant-dropdown-menu-submenu-title-selected {
+    background: var(--oio-dropdown-background-hover);
+    color: var(--oio-dropdown-color-hover);
+  }
+}
+
+.default-group-cell {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  .default-group-cell-content {
+    padding: var(--oio-padding-md);
+  }
+
+  .default-group-cell-content-hide {
+    display: none;
+  }
+
+  &:hover {
+    .default-group-cell-content-hide {
+      display: block;
+    }
+  }
+
+  .default-group-cell-stander {
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+    column-gap: 5px;
+
+    .oio-spin,
+    .oio-spin-loading {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+</style>

package/src/basic/table-column/DefaultQuickOperationColumn.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
-import { translateValueByKey } from '@oinone/kunlun-engine';
+import { GroupingField, translateValueByKey } from '@oinone/kunlun-engine';
+import { EDirection } from '@oinone/kunlun-service';
 import { TableFixed } from '@oinone/kunlun-vue-ui';
 import { OioIcon, ReturnPromise, StringHelper } from '@oinone/kunlun-vue-ui-antd';
 import { PropRecordHelper } from '@oinone/kunlun-vue-ui-common';
@@ -38,6 +39,17 @@ export default defineComponent({
       type: Boolean,
       default: undefined
     },
+    enableGrouping: {
+      type: Boolean,
+      default: false
+    },
+    groupList: {
+      type: Array as PropType<GroupingField[]>,
+      default: () => []
+    },
+    onGroupChange: {
+      type: Function
+    },
     handleOrderByASC: {
       type: Function as PropType<TableOperatorHandlerFn>
     },
@@ -134,6 +146,8 @@ export default defineComponent({
 
       column,
       sortable,
+      enableGrouping,
+      groupList,
 
       visible,
       onUpdateVisible,
@@ -145,7 +159,8 @@ export default defineComponent({
       handleFreezeRight,
       handleClearFreeze,
       handleClearAllFreeze,
-      handleHide
+      handleHide,
+      onGroupChange
     } = this;
     const { trigger: triggerSlot } = PropRecordHelper.collectionSlots($slots, ['trigger']);
     let triggerChildren: VNode[];
@@ -171,7 +186,7 @@ export default defineComponent({
       {
         default: () => triggerChildren,
         content: () => {
-          const { fixed, order } = column;
+          const { fixed, order, field } = column;
           const options: VNode[] = [];
           if (sortable) {
             if (order === 'asc') {
@@ -201,6 +216,28 @@ export default defineComponent({
             );
           }
           options.push(createOperationItem('隐藏此列', 'oinone-yincangcilie', handleHide));
+
+          if (enableGrouping) {
+            if (groupList?.length && groupList.some((item) => item.field === field)) {
+              options.push(
+                createOperationItem('取消分组', 'oinone-ungroup-outlined', () => {
+                  const list = groupList || [];
+                  const index = list?.findIndex((item) => item.field === field);
+                  list.splice(index, 1);
+                  onGroupChange?.(list);
+                })
+              );
+            } else {
+              options.push(
+                createOperationItem('以此字段分组', 'oinone-group-outlined', () => {
+                  const list = groupList || [];
+                  list.push({ field, direction: EDirection.ASC });
+                  onGroupChange?.(list);
+                })
+              );
+            }
+          }
+
           return [createVNode('div', { class: `${classNamePrefix}-wrapper` }, options)];
         }
       }

package/src/basic/table-column/DefaultTableColumn.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 import { DslDefinition } from '@oinone/kunlun-dsl';
 import {
+  GROUP_TREE_KEY,
   OioColumn,
   OioColumnAppearanceProps,
   OioColumnEditorProps,
@@ -8,7 +9,8 @@ import {
   OioTableInstance,
   RowContext,
   TableEditorMode,
-  useInjectOioTableInstance
+  useInjectOioTableInstance,
+  VxeTableRowContext
 } from '@oinone/kunlun-vue-ui';
 import { computed, createVNode, defineComponent, onMounted, PropType, VNode } from 'vue';
 import { ManualWidget } from '../mixin';
@@ -54,6 +56,15 @@ export default defineComponent({
     existExpandRow: {
       type: Boolean
     },
+    enabledGroupView: {
+      type: Boolean
+    },
+    enableGrouping: {
+      type: Boolean
+    },
+    tableExpandTreeFieldColumn: {
+      type: String
+    },
     treeNode: {
       type: Boolean,
       default: undefined
@@ -76,10 +87,32 @@ export default defineComponent({
       return [createVNode('span', { class: 'oio-column-header-title' }, props.label)];
     };
 
-    const renderDefaultSlot = (context: RowContext) => {
+    const renderDefaultSlot = (context: VxeTableRowContext) => {
+      /**
+       * 当前视图启动了分组 & 当前字段允许分许 & 当前是展开行 & 当前单元格不是展开字段
+       * 则渲染分组单元格
+       */
+      if (props.enabledGroupView && props.enableGrouping && context.data[GROUP_TREE_KEY.CHILDREN_KEY]) {
+        // 非展开行字段
+        if (context.origin?.column?.field !== props.tableExpandTreeFieldColumn) {
+          return props.renderGroupCellSlot?.(context);
+        }
+
+        // 展开行字段
+        return [
+          createVNode('span', { class: 'default-group-compose-cell' }, [
+            createVNode('span', { class: 'default-group-compose-cell-content' }, [
+              (props.dynamicRenderDefaultSlot?.(context) || props.renderDefaultSlot)?.(context)
+            ]),
+            props.renderGroupCellSlot?.(context)
+          ])
+        ];
+      }
+
       if (props.editorMode === TableEditorMode.table && props.editable) {
         return props.renderEditSlot?.(context);
       }
+
       const vNodes = props.renderDefaultSlot?.(context);
       if (vNodes == null) {
         return [];
@@ -87,6 +120,10 @@ export default defineComponent({
       return props.wrapperToFieldAction?.(vNodes, context);
     };
 
+    const renderContentSlot = (context: VxeTableRowContext) => {
+      return props.renderContentSlot?.(context);
+    };
+
     onMounted(() => {
       props.setTableInstance?.(table);
     });
@@ -94,7 +131,8 @@ export default defineComponent({
     return {
       fixed,
       defaultRenderHeaderSlot,
-      renderDefaultSlot
+      renderDefaultSlot,
+      renderContentSlot
     };
   },
   render() {
@@ -120,6 +158,7 @@ export default defineComponent({
       editorTrigger,
       editorMode,
       editorCloseTrigger,
+      editRender,
       rowEditorClosedByEnter,
       rowEditorClosedByCancel,
       editorConfirm,
@@ -165,6 +204,7 @@ export default defineComponent({
       editorTrigger,
       editorMode: isEditTable ? TableEditorMode.row : editorMode,
       editorCloseTrigger,
+      editRender,
       rowEditorClosedByEnter,
       rowEditorClosedByCancel,
       editorConfirm,

package/src/basic/token/BaseActionWidget.ts

@@ -1,10 +1,25 @@
-import { baseActionTokenSymbol, RelationUpdateType, RuntimeAction, SubmitType, SubmitValue } from '@oinone/kunlun-engine';
+import {
+  baseActionTokenSymbol,
+  GetRequestModelFieldsOptions,
+  ModelCache,
+  RelationUpdateType,
+  RequestModelField,
+  RuntimeAction,
+  SubmitType,
+  SubmitValue
+} from '@oinone/kunlun-engine';
 import { ActionType, ViewActionTarget, ViewMode, ViewType } from '@oinone/kunlun-meta';
 import { Matched, Router, useMatched } from '@oinone/kunlun-router';
 import { CallChaining, Constructor } from '@oinone/kunlun-shared';
 import { SPI, SPIOptions, SPISingleSelector, SPITokenFactory } from '@oinone/kunlun-spi';
 import { useRouter } from '@oinone/kunlun-vue-router';
-import { ActiveRecordsWidgetProps, InnerWidgetType, Widget } from '@oinone/kunlun-vue-widget';
+import {
+  ActiveRecordsWidgetProps,
+  InnerWidgetType,
+  OioActionBarState,
+  useOioState,
+  Widget
+} from '@oinone/kunlun-vue-widget';
 import { PopupScene } from '../../typing';
 import { BaseRuntimePropertiesWidget } from '../common';
 
@@ -119,6 +134,13 @@ export class BaseActionWidget<
     return this.popupScene === PopupScene.inner;
   }
 
+  @Widget.Inject()
+  @Widget.Reactive()
+  public rowIndex: number | undefined;
+
+  @Widget.Reactive()
+  protected actionBarState: OioActionBarState | undefined;
+
   /**
    * 数据提交
    * @protected
@@ -156,8 +178,32 @@ export class BaseActionWidget<
     return fn(...args);
   }
 
+  protected async getRequestModelFields(options?: GetRequestModelFieldsOptions): Promise<RequestModelField[]> {
+    const { viewType } = this;
+    if (viewType === ViewType.Tree) {
+      const runtimeModel = await ModelCache.get(this.model.model);
+      if (runtimeModel) {
+        return runtimeModel.modelFields.map((field) => ({ field }));
+      }
+      return [];
+    }
+    if (this.popupScene) {
+      return this.seekPopupMainRuntimeContext().getRequestModelFields(options);
+    }
+    return this.rootRuntimeContext.getRequestModelFields(options);
+  }
+
   protected $$beforeMount() {
     super.$$beforeMount();
+    if (!this.viewState && this.popupScene) {
+      this.viewState = useOioState(this.seekPopupMainRuntimeContext().handle).viewState;
+      if (this.viewState) {
+        this.$$initViewState(this.viewState);
+      }
+    }
+    if (!this.actionBarState) {
+      this.actionBarState = this.viewState?.getActionBarState(this.rowIndex);
+    }
     if (!this.$matched) {
       const { matched } = useMatched();
       this.$matched = matched;
@@ -166,4 +212,14 @@ export class BaseActionWidget<
       this.$router = useRouter().router as Router;
     }
   }
+
+  protected $$mounted() {
+    super.$$mounted();
+    this.viewState?.pushAction(this.currentHandle, this.rowIndex);
+  }
+
+  protected $$unmounted() {
+    super.$$unmounted();
+    this.viewState?.popAction(this.currentHandle, this.rowIndex);
+  }
 }