From 5ff864146a9304b3d646af888f5c76055687801d Mon Sep 17 00:00:00 2001
From: lijisanxiong <1518062161@qq.com>
Date: Wed, 11 Dec 2024 21:16:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=20=E6=96=B0=E5=A2=9E=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E6=A0=8F=E8=A1=8C=E4=B8=BA=E9=A1=B9=E6=94=AF=E6=8C=81=E8=AE=A1?=
 =?UTF-8?q?=E6=95=B0=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                     |  4 ++++
 src/control/toolbar/toolbar.scss |  3 +++
 src/control/toolbar/toolbar.tsx  | 37 +++++++++++++++++++++++++-------
 3 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ed90e3a4..1b2758a1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@
 
 ## [Unreleased]
 
+### Added
+
+- 新增工具栏行为项支持计数器
+
 ### Fixed
 
 - 修复第三方内嵌登录时请求授权链接跳转异常的问题
diff --git a/src/control/toolbar/toolbar.scss b/src/control/toolbar/toolbar.scss
index 9ab4f2f3..9355ca6c 100644
--- a/src/control/toolbar/toolbar.scss
+++ b/src/control/toolbar/toolbar.scss
@@ -50,6 +50,9 @@ $control-toolbar-actions: (
       margin: getCssVar(control-toolbar, text-margin);
     }
   }
+  .#{bem(toolbar-item-counter)} {
+    margin-left: getCssVar('spacing', 'super-tight');
+  }
 }
 
 @include b(control-toolbar) {
diff --git a/src/control/toolbar/toolbar.tsx b/src/control/toolbar/toolbar.tsx
index 557f5d0f..b80b1b08 100644
--- a/src/control/toolbar/toolbar.tsx
+++ b/src/control/toolbar/toolbar.tsx
@@ -24,7 +24,13 @@ import { IBizExportExcel } from './export-excel/export-excel';
 import { IBizShortCutButton } from './short-cut-button/short-cut-button';
 import './toolbar.scss';
 
-const btnContent = (item: IDEToolbarItem): (string | VNode)[] => {
+const btnContent = (
+  item: IDEToolbarItem,
+  c: ToolbarController,
+): (string | VNode)[] => {
+  const counterNum = item.counterId
+    ? c.state.counterData[item.counterId]
+    : undefined;
   const image = item.sysImage;
   const result = [];
   const ns = useNamespace('toolbar-item');
@@ -38,6 +44,16 @@ const btnContent = (item: IDEToolbarItem): (string | VNode)[] => {
   if (item.showCaption && item.caption) {
     result.push(<span class={ns.b('text')}>{item.caption}</span>);
   }
+  if (counterNum) {
+    result.push(
+      <iBizBadge
+        class={ns.b('counter')}
+        value={counterNum}
+        counterMode={item.counterMode}
+      />,
+    );
+  }
+
   return result;
 };
 
@@ -88,6 +104,11 @@ export const ToolbarControl = defineComponent({
       await handleClick(tempItem as IDEToolbarItem, event, params);
     };
 
+    // 绘制按钮内容
+    const renderBtnContent = (item: IDEToolbarItem) => {
+      return btnContent(item, c);
+    };
+
     const renderExtraButtons = (extraButtons: IExtraButton[]): VNode[] => {
       return extraButtons.map(button => {
         return (
@@ -97,7 +118,7 @@ export const ToolbarControl = defineComponent({
               size={btnSize.value}
               onClick={(e: MouseEvent): Promise<void> => handleClick(button, e)}
             >
-              {btnContent(button)}
+              {renderBtnContent(button)}
             </el-button>
           </div>
         );
@@ -197,7 +218,7 @@ export const ToolbarControl = defineComponent({
                         ]}
                         mode='menu'
                         item={item2}
-                        btnContent={btnContent}
+                        btnContent={renderBtnContent}
                         size={btnSize.value}
                         controller={c}
                         onExportExcel={(e: MouseEvent, data: IData): void => {
@@ -226,7 +247,7 @@ export const ToolbarControl = defineComponent({
                       <el-button
                         loading={c.state.buttonsState[item2.id!].loading}
                       >
-                        {btnContent(item2)}
+                        {renderBtnContent(item2)}
                       </el-button>
                     </el-menu-item>
                   );
@@ -240,7 +261,7 @@ export const ToolbarControl = defineComponent({
             title: () => {
               return (
                 <el-button loading={ploading} disabled={pdisabled}>
-                  {btnContent(item)}
+                  {renderBtnContent(item)}
                 </el-button>
               );
             },
@@ -263,7 +284,7 @@ export const ToolbarControl = defineComponent({
               handleActionClick(detail, e)
             }
           >
-            {btnContent(detail)}
+            {renderBtnContent(detail)}
           </el-button>,
         ];
       }
@@ -455,7 +476,7 @@ export const ToolbarControl = defineComponent({
                 calcCssName(item),
               ]}
               item={item}
-              btnContent={btnContent}
+              btnContent={renderBtnContent}
               size={btnSize.value}
               controller={c}
               onExportExcel={(e: MouseEvent, data: IData): void => {
@@ -501,7 +522,7 @@ export const ToolbarControl = defineComponent({
               disabled={c.state.buttonsState[itemId].disabled}
               onClick={(e: MouseEvent): Promise<void> => handleClick(item, e)}
             >
-              {btnContent(item)}
+              {renderBtnContent(item)}
             </el-button>
           </div>
         );
-- 
Gitee