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

package/src/action/component/action/ActionWidget.ts

@@ -5,12 +5,11 @@ import {
   ConfirmModal,
   FunctionCache,
   FunctionService,
-  GetRequestModelFieldsOptions,
-  ModelCache,
   parseConfigs,
   RequestModelField,
   resolveDynamicDomain,
   resolveDynamicExpression,
+  ROOT_HANDLE,
   RuntimeAction,
   RuntimeContext,
   RuntimeContextManager,
@@ -51,6 +50,10 @@ export class ActionWidget<
   Action extends RuntimeAction = RuntimeAction,
   Props extends ActionWidgetProps<Action> = ActionWidgetProps<Action>
 > extends BaseActionWidget<Action, Props> {
+  protected get actionConfig() {
+    return this.getMergeConfig('action');
+  }
+
   /**
    * 搜索数据
    * @protected
@@ -242,6 +245,11 @@ export class ActionWidget<
     return label || this.action?.name;
   }
 
+  @Widget.Reactive()
+  protected get labelInvisible(): boolean | undefined {
+    return BooleanHelper.toBoolean(this.getDsl().labelInvisible);
+  }
+
   @Widget.Reactive()
   @Widget.Provide('buttonType')
   protected nextButtonType: string | undefined;
@@ -258,6 +266,11 @@ export class ActionWidget<
   @Widget.Inject()
   protected operatorColumnButtonType: string | undefined;
 
+  @Widget.Reactive()
+  protected get actionBarBizStyle(): { type: ButtonType; bizStyle: ButtonBizStyle } | undefined {
+    return this.actionBarState?.getActionBarBizStyle?.(this.currentHandle);
+  }
+
   protected defaultType = ButtonType.primary;
 
   @Widget.Reactive()
@@ -265,17 +278,57 @@ export class ActionWidget<
     if (this.inline) {
       return this.buttonType?.toLowerCase?.() || ButtonType.link;
     }
-    return this.getDsl().type?.toLowerCase?.() || this.buttonType?.toLowerCase?.() || this.defaultType;
+    const type = this.getDsl().type?.toLowerCase?.() || this.buttonType?.toLowerCase?.();
+    if (type) {
+      return type;
+    }
+    const { actionBarBizStyle } = this;
+    if (actionBarBizStyle) {
+      return actionBarBizStyle.type;
+    }
+    return this.defaultType;
   }
 
   @Widget.Reactive()
   protected get bizStyle(): string {
-    return this.getDsl().bizStyle?.toLowerCase?.() || ButtonBizStyle.default;
+    const bizStyle = this.getDsl().bizStyle?.toLowerCase?.();
+    if (bizStyle) {
+      return bizStyle;
+    }
+    const { actionBarBizStyle } = this;
+    if (actionBarBizStyle) {
+      return actionBarBizStyle.bizStyle;
+    }
+    return ButtonBizStyle.default;
   }
 
   @Widget.Reactive()
   protected get icon(): string | undefined {
-    return this.getDsl().icon;
+    let { icon } = this.getDsl();
+    if (!icon && this.rootRuntimeContext.parentContext?.handle !== ROOT_HANDLE) {
+      icon = this.defaultIcon;
+    }
+    return icon;
+  }
+
+  @Widget.Reactive()
+  protected get defaultIcon(): string | undefined {
+    const showDefaultIcon = BooleanHelper.toBoolean(this.actionConfig.showDefaultIcon);
+    if (showDefaultIcon !== false) {
+      const { name } = this.action;
+      switch (name) {
+        case 'redirectCreatePage':
+          return 'oinone-plus-outlined';
+        case 'delete':
+          return 'oinone-delete-outlined';
+        case 'internalGotoListImportDialog':
+          return 'oinone-import-outlined';
+        case 'internalGotoListExportDialog':
+          return 'oinone-export-outlined';
+        case 'internalGotoPrintDialog':
+          return 'oinone-dayin';
+      }
+    }
   }
 
   protected seekSearchRuntimeContext(): RuntimeContext | undefined {
@@ -742,6 +795,32 @@ export class ActionWidget<
     return result;
   }
 
+  @Widget.Reactive()
+  public get actionProps() {
+    return {
+      label: this.label,
+      labelInvisible: this.labelInvisible,
+      bizStyle: this.bizStyle,
+      loading: this.loading,
+      invisible: this.invisible,
+      disabled: this.disabled,
+      help: this.help,
+      disabledTitle: this.disabledTitle,
+      icon: this.icon,
+      action: this.action,
+      enableConfirm: this.enableConfirm,
+      confirm: this.confirm,
+      confirmTitle: this.confirmTitle,
+      confirmPosition: this.confirmPosition,
+      enterText: this.enterText,
+      cancelText: this.cancelText,
+      visibleConfirm: this.visibleConfirm,
+      changeVisibleConfirm: this.changeVisibleConfirm,
+      validatorForm: this.validatorForm.bind(this),
+      validateAndClick: this.validateAndClick.bind(this)
+    };
+  }
+
   /**
    * 手动触发按钮点击方法
    * @param args 参数
@@ -1037,36 +1116,6 @@ export class ActionWidget<
     return result;
   }
 
-  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 seekPopupMainRuntimeContext(): RuntimeContext {
-    if (this.metadataHandle === this.rootHandle) {
-      const modelModel = this.model.model;
-      if (modelModel) {
-        const popupMainRuntimeContext = RuntimeContextManager.getOthers(this.rootHandle)?.find(
-          (v) => v.model.model === modelModel
-        );
-        if (popupMainRuntimeContext) {
-          return popupMainRuntimeContext;
-        }
-      }
-    }
-    return this.rootRuntimeContext;
-  }
-
   protected async submit(action: RuntimeServerAction): Promise<SubmitValue> {
     let records: ActiveRecords | undefined;
     let relationRecords: SubmitRelationValue[] | undefined;

package/src/action/component/action/DefaultAction.vue

@@ -4,8 +4,8 @@ import { ButtonType, OioButton, OioPopconfirm, PropRecordHelper } from '@oinone/
 import { MenuItem as AMenuItem } from 'ant-design-vue';
 import { computed, createVNode, defineComponent, VNode, vShow, withDirectives, withModifiers } from 'vue';
 import { useInjectActionContext, useProviderActionContext } from '../context';
-import { ActionProps, useAction } from './typing';
 import MenuItem from './MenuItem.vue';
+import { ActionProps, useAction } from './typing';
 
 export default defineComponent({
   name: 'DefaultAction',
@@ -39,11 +39,11 @@ export default defineComponent({
 
     const ButtonVNode = computed(() => {
       let contentVNode: VNode | undefined;
-      if (props.label) {
+      if (!props.labelInvisible && props.label) {
         contentVNode = createVNode('span', { class: `${DEFAULT_PREFIX}-action-content` }, props.label);
       }
 
-      const attrs = {
+      const attrs: Record<string, unknown> = {
         ref: 'origin',
         type: actionContext.isSelectItem.value ? ButtonType.link : props.type,
         bizStyle: props.bizStyle,
@@ -55,7 +55,7 @@ export default defineComponent({
       };
 
       if (!props.enableConfirm) {
-        attrs['onClick'] = () => props.validateAndClick?.(props.action, true);
+        attrs.onClick = () => props.validateAndClick?.(props.action, true);
       }
 
       return createVNode(OioButton, attrs, () => {
@@ -105,6 +105,7 @@ export default defineComponent({
         // 解决AMenuItem会导致dropdown内无法打开抽屉的问题
         MenuItem,
         {
+          ...PropRecordHelper.collectionBasicProps(this.$attrs, [`${DEFAULT_PREFIX}-more-action-item`]),
           disabled: this.disabled,
           title: this.disabled ? this.disabledTitle : this.label
         },

package/src/action/component/action/typing.ts

@@ -14,6 +14,10 @@ export const BaseActionProps = {
   label: {
     type: String
   },
+  labelInvisible: {
+    type: Boolean,
+    default: undefined
+  },
   help: {
     type: String
   },

package/src/action/component/action-bar/ActionBarWidget.ts

@@ -1,10 +1,27 @@
+import { DEFAULT_SLOT_NAME } from '@oinone/kunlun-dsl';
+import { isMinimalismTheme } from '@oinone/kunlun-engine';
 import { CallChaining, NumberHelper } from '@oinone/kunlun-shared';
 import { SPI } from '@oinone/kunlun-spi';
-import { FlexRowJustify, ListSelectMode, OioDropdownTrigger } from '@oinone/kunlun-vue-ui-common';
-import { ActiveRecordsWidgetProps, Widget } from '@oinone/kunlun-vue-widget';
+import {
+  ButtonBizStyle,
+  ButtonType,
+  FlexRowJustify,
+  ListSelectMode,
+  OioDropdownTrigger
+} from '@oinone/kunlun-vue-ui-common';
+import {
+  ActiveRecordsWidgetProps,
+  hasActionBarViewState,
+  isListViewState,
+  OioActionBarState,
+  OioAnyViewState,
+  useOioState,
+  Widget
+} from '@oinone/kunlun-vue-widget';
 import { isNil } from 'lodash-es';
 import { BaseActionGroupWidget, BaseElementWidget } from '../../../basic';
 import { ActiveCountEnum, MoreActionRender } from '../../../typing';
+import { ActionBarBizStyle } from '../typing';
 import DefaultActionBar from './DefaultActionBar.vue';
 
 export interface ActionBarWidgetProps extends ActiveRecordsWidgetProps {
@@ -32,6 +49,9 @@ export class ActionBarWidget<
   @Widget.Provide()
   protected inline: boolean | undefined;
 
+  @Widget.Reactive()
+  protected actionBarState: OioActionBarState | undefined;
+
   @Widget.Reactive()
   protected get isFloat(): boolean | undefined {
     const { isFloat } = this.getDsl();
@@ -61,7 +81,19 @@ export class ActionBarWidget<
   }
 
   @Widget.Reactive()
-  protected get justify(): string | undefined {
+  protected get bizStyle(): string | undefined {
+    const { viewState, inline } = this;
+    if (inline) {
+      // 行内动作不支持配置样式
+      return undefined;
+    }
+    if (viewState && hasActionBarViewState(viewState)) {
+      return viewState.actionBar?.bizStyle;
+    }
+  }
+
+  @Widget.Reactive()
+  public get justify(): string | undefined {
     if (this.popupScene != null) {
       return undefined;
     }
@@ -115,4 +147,99 @@ export class ActionBarWidget<
   protected onCheckboxAll(selected: boolean) {
     this.checkboxAllCallChaining?.call(selected);
   }
+
+  protected initBizStyle(): string | undefined {
+    const { viewState } = this;
+    let { bizStyle } = this.getDsl();
+    if (bizStyle == null) {
+      if (viewState && isListViewState(viewState) && isMinimalismTheme()) {
+        bizStyle = ActionBarBizStyle.style2;
+      }
+    }
+    return bizStyle;
+  }
+
+  protected $$initViewStatePosition(state: OioAnyViewState): void {
+    state.__position.push({ handle: this.currentHandle, slotName: this.getSlotName() });
+  }
+
+  protected $$clearViewStatePosition(state: OioAnyViewState): void {
+    const index = state.__position.findIndex((v) => v.handle === this.currentHandle);
+    if (index !== -1) {
+      state.__position.splice(index, 1);
+    }
+  }
+
+  protected $$initViewState(state: OioAnyViewState): void {
+    if (hasActionBarViewState(state)) {
+      const slotName = this.getSlotName();
+      if (!slotName || slotName === DEFAULT_SLOT_NAME) {
+        if (!state.actionBar) {
+          state.actionBar = this.createActionBarState(state);
+        }
+      } else {
+        let { actionBars } = state;
+        if (!actionBars) {
+          actionBars = {};
+          state.actionBars = actionBars;
+        }
+        if (!actionBars[slotName]) {
+          actionBars[slotName] = this.createActionBarState(state);
+        }
+      }
+    }
+  }
+
+  protected $$beforeMount() {
+    super.$$beforeMount();
+    let isInitStatePosition = !!this.viewState;
+    if (!this.viewState && this.popupScene) {
+      this.viewState = useOioState(this.seekPopupMainRuntimeContext().handle).viewState;
+      if (this.viewState) {
+        isInitStatePosition = true;
+        this.$$initViewStatePosition(this.viewState);
+        this.$$initViewState(this.viewState);
+      }
+    }
+    if (!this.actionBarState) {
+      this.actionBarState = this.viewState?.getActionBarState();
+    }
+    if (this.viewState && !isInitStatePosition) {
+      this.$$initViewStatePosition(this.viewState);
+    }
+  }
+
+  protected createActionBarState(state: OioAnyViewState): OioActionBarState {
+    const actionBarState = state.createActionBarState({
+      handle: this.currentHandle,
+      bizStyle: this.initBizStyle()
+    });
+    actionBarState.getActionBarBizStyle = this.createGetActionBarBizStyleMethod(this).bind(actionBarState);
+    return actionBarState;
+  }
+
+  protected createGetActionBarBizStyleMethod(self: ActionBarWidget): (
+    this: OioActionBarState,
+    actionHandle: string
+  ) =>
+    | {
+        type: ButtonType;
+        bizStyle: ButtonBizStyle;
+      }
+    | undefined {
+    return function getActionBarBizStyle(this: OioActionBarState, actionHandle: string) {
+      if (this.inline || self.popupScene) {
+        // 行内动作不支持配置样式
+        return undefined;
+      }
+      const { bizStyle, visibleActions } = this;
+      if (bizStyle === ActionBarBizStyle.style2) {
+        const index = visibleActions.findIndex((v) => v === actionHandle);
+        if (index === 0) {
+          return { type: ButtonType.primary, bizStyle: ButtonBizStyle.default };
+        }
+        return { type: ButtonType.text, bizStyle: ButtonBizStyle.default };
+      }
+    };
+  }
 }

package/src/action/component/action-bar/DefaultActionBar.vue

@@ -3,14 +3,24 @@ import { DownOutlined } from '@ant-design/icons-vue';
 import { ActiveRecord, translateValueByKey } from '@oinone/kunlun-engine';
 import { ViewType } from '@oinone/kunlun-meta';
 import { CastHelper, CSSStyle, StringHelper, uniqueKeyGenerator } from '@oinone/kunlun-shared';
-import { ButtonType, IconPlacement, OioButton, OioCheckbox, OioSwitch } from '@oinone/kunlun-vue-ui-antd';
+import {
+  ButtonBizStyle,
+  ButtonType,
+  IconPlacement,
+  OioButton,
+  OioCheckbox,
+  OioDropdown,
+  OioSwitch
+} from '@oinone/kunlun-vue-ui-antd';
 import { ListSelectMode, OioDropdownTrigger, PropRecordHelper, StyleHelper } from '@oinone/kunlun-vue-ui-common';
 import { DslRenderDefinition, onAllMounted } from '@oinone/kunlun-vue-widget';
+import { Menu as AMenu } from 'ant-design-vue';
 import { isNil } from 'lodash-es';
 import { computed, createVNode, defineComponent, PropType, VNode, vShow, withDirectives, withModifiers } from 'vue';
 import { ActiveCountEnum, MoreActionRender, OperationColumnDirection } from '../../../typing';
 import { CollectionActions } from '../../../util/collection-actions';
-import DefaultDropdown from '../dropdown/DefaultDropdown.vue';
+import { ActionBarBizStyle } from '../typing';
+import DefaultMoreActionItem from './DefaultMoreActionItem.vue';
 
 const actionBarClassName = 'action-bar';
 
@@ -20,17 +30,23 @@ function createMoreAction(
   vnodes: VNode[],
   inline: boolean,
   options: {
+    rowIndex?: number;
+    bizStyle?: string;
     buttonType?: string;
     operatorColumnDirection?: OperationColumnDirection;
     allMounted: Function | undefined;
     moreActionTriggers: OioDropdownTrigger[];
   }
-): VNode {
+): VNode | VNode[] {
   const classList = [moreActionSelectorClassName];
   let defaultButtonType = ButtonType.primary;
+  let defaultBizStyle: ButtonBizStyle | undefined;
   if (inline) {
     classList.push(`${moreActionSelectorClassName}-inline`);
     defaultButtonType = ButtonType.link;
+  } else if (options.bizStyle === ActionBarBizStyle.style2) {
+    defaultButtonType = ButtonType.text;
+    defaultBizStyle = ButtonBizStyle.default;
   }
   const { buttonType, allMounted } = options;
   const triggerVNode = createVNode(
@@ -38,6 +54,7 @@ function createMoreAction(
     {
       class: classList,
       type: buttonType || defaultButtonType,
+      bizStyle: defaultBizStyle,
       icon: 'oinone-menu-caidanxiala',
       iconPlacement: IconPlacement.AFTER,
       onClick: withModifiers(() => {}, ['prevent'])
@@ -46,17 +63,34 @@ function createMoreAction(
       default: () => translateValueByKey('更多')
     }
   );
-  return createVNode(
-    DefaultDropdown,
-    {
-      trigger: [OioDropdownTrigger.click, OioDropdownTrigger.hover],
-      allMounted
-    },
-    {
-      default: () => vnodes,
-      trigger: () => [triggerVNode]
-    }
+  const moreActionItems = vnodes.map((v) =>
+    createVNode(DefaultMoreActionItem, {
+      model: v.props?.model,
+      name: v.props?.name,
+      rowIndex: options.rowIndex
+    })
   );
+  return [
+    createVNode('div', { class: 'more-action-invisible-render-wrapper' }, vnodes),
+    createVNode(
+      OioDropdown,
+      {
+        overlayClassName: 'default-dropdown-overlay',
+        trigger: [OioDropdownTrigger.click, OioDropdownTrigger.hover]
+      },
+      {
+        default: () => [triggerVNode],
+        overlay: () =>
+          createVNode(
+            AMenu,
+            { class: 'default-dropdown-menu' },
+            {
+              default: () => moreActionItems
+            }
+          )
+      }
+    )
+  ];
 }
 
 export default defineComponent({
@@ -78,6 +112,9 @@ export default defineComponent({
     activeRecords: {
       type: Array as PropType<ActiveRecord[]>
     },
+    rowIndex: {
+      type: Number
+    },
     viewType: {
       type: String as PropType<ViewType>
     },
@@ -89,6 +126,9 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    bizStyle: {
+      type: String
+    },
     justify: {
       type: String
     },
@@ -185,6 +225,9 @@ export default defineComponent({
     const buttonType = this.buttonType?.toLowerCase?.() || ButtonType.link;
     classList.push(`${actionBarClassName}-${operatorColumnDirection}`);
     classList.push(`${actionBarClassName}-${buttonType}`);
+    if (this.bizStyle) {
+      classList.push(`${actionBarClassName}-${this.bizStyle}`);
+    }
     const collectionActions = new CollectionActions(this.showActionNames, this.activeCount);
     collectionActions.do(
       PropRecordHelper.collectionSlots(this.$slots, [{ origin: 'default', isNotNull: true }]).default()
@@ -198,6 +241,20 @@ export default defineComponent({
       moreActionFlags.some((v) => v)
     ) {
       const originMoreAction = showActions[showActions.length - 1];
+      let moreActionVNodes: VNode[] = [];
+      const renderResult = (this.moreActionRender || createMoreAction)(moreActions, this.inline, {
+        rowIndex: this.rowIndex,
+        bizStyle: this.bizStyle,
+        buttonType: this.buttonType,
+        operatorColumnDirection: operatorColumnDirection as OperationColumnDirection,
+        allMounted: this.allMounted,
+        moreActionTriggers: this.moreActionTriggers!
+      });
+      if (Array.isArray(renderResult)) {
+        moreActionVNodes = renderResult;
+      } else {
+        moreActionVNodes = [renderResult];
+      }
       showActions.push(
         createVNode(
           'div',
@@ -205,19 +262,11 @@ export default defineComponent({
             key: originMoreAction.props?.dslDefinition?.name || uniqueKeyGenerator(),
             class: 'more-action-item'
           },
-          [
-            ...otherVNodes,
-            (this.moreActionRender || createMoreAction)(moreActions, this.inline, {
-              buttonType: this.buttonType,
-              operatorColumnDirection: operatorColumnDirection as OperationColumnDirection,
-              allMounted: this.allMounted,
-              moreActionTriggers: this.moreActionTriggers!
-            })
-          ]
+          [...otherVNodes, ...moreActionVNodes]
         )
       );
     } else {
-      showActions = [...showActions, ...moreActions, ...otherVNodes];
+      showActions = [...showActions, ...otherVNodes, ...moreActions];
     }
     // fixme @zbh 20221102 使用SPI注册
     if (this.viewType === ViewType.Gallery && !this.inline) {
@@ -229,11 +278,11 @@ export default defineComponent({
           },
           [
             createVNode('div', { class: 'gallery-action-bar-batch-selected' }, [
-              createVNode('span', {}, translateValueByKey('批量管理')),
               createVNode(OioSwitch, {
                 checked: this.allowSelected,
                 'onUpdate:checked': this.updateValueAllowSelected
-              })
+              }),
+              createVNode('span', {}, translateValueByKey('批量管理'))
             ]),
             withDirectives(
               createVNode(