feat: 行为组工具栏支持按钮样式

app_Web/src/components/common/action-toolbar/action-toolbar.tsx

@@ -2,6 +2,7 @@ import { defineComponent, PropType } from 'vue';
 import { IPSUIActionGroup, IPSUIActionGroupDetail } from '@ibiz-template/model';
 import { useNamespace } from '@ibiz-template/vue-util';
 import { IButtonContainerState } from '@ibiz-template/controller';
+import { convertBtnType } from '@/util';
 import '@ibiz-template/theme/style/components/common/action-toolbar/action-toolbar.scss';
 
 export const ActionToolbar = defineComponent({
@@ -42,13 +43,17 @@ export const ActionToolbar = defineComponent({
             if (cssName) {
               btnClass.push(cssName);
             }
+            let buttonStyle = 'text';
+            if (detail.M.buttonStyle) {
+              buttonStyle = convertBtnType(detail.M.buttonStyle);
+            }
             if (action && this.actionsState[detail.name].visible) {
               return [
                 detail.addSeparator && (
                   <div class={this.ns.e('separator')}></div>
                 ),
                 <i-button
-                  type='text'
+                  type={buttonStyle}
                   size='small'
                   on-click={(e: MouseEvent) => this.handleClick(detail, e)}
                   disabled={this.actionsState[detail.name].disabled}

app_Web/src/util/button-util/button-util.ts

+/**
+ * 将按钮的模型样式类型转换为小写，适配ui框架按钮类型。
+ *
+ * @param {string | undefined} buttonStyle - 模型按钮样式类型
+ * @returns {string}
+ */
+export function convertBtnType(buttonStyle?: string): string {
+  let buttonType = 'default';
+  if (
+    buttonStyle &&
+    ['PRIMARY', 'SUCCESS', 'WARNING', 'INFO'].includes(buttonStyle)
+  )
+    buttonType = buttonStyle.toLowerCase();
+  if (buttonStyle && ['DANGER'].includes(buttonStyle)) {
+    buttonType = 'error';
+  }
+  if (buttonStyle && ['INVERSE'].includes(buttonStyle)) buttonType = 'text';
+  return buttonType;
+}

app_Web/src/util/index.ts

@@ -7,3 +7,4 @@ export { ErrorHandler } from './error-handler/error-handler';
 export { OverlayContainer } from './overlay-container/overlay-container';
 export { OverlayController } from './overlay-controller/overlay-controller';
 export { OverlayPopoverContainer } from './overlay-popover-container/overlay-popover-container';
+export { convertBtnType } from './button-util/button-util';