From 01132e6b8a28f291e899a64e60a1487b92a6a9d6 Mon Sep 17 00:00:00 2001
From: Cano1997 <1978141412@qq.com>
Date: Wed, 27 Aug 2025 20:09:44 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=96=B0=E5=A2=9E=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E6=A0=8F=E8=AE=A1=E6=95=B0=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |  1 +
 src/control/search-bar/search-bar.tsx         | 41 ++++++++++++++++++-
 .../search-groups/search-groups.tsx           | 14 +++++++
 3 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 388081b78..8b8b5d688 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
 
 - 表单新增在多数据部件表单模式下，记录当前表单的数据索引
 - 新增电子签名编辑器样式，基于文本框编辑器进行扩展，编辑器样式代码名称为：SIGNATURE
+- 新增支持搜索栏计数器
 
 ### Changed
 
diff --git a/src/control/search-bar/search-bar.tsx b/src/control/search-bar/search-bar.tsx
index f4e94f02d..61e7f2683 100644
--- a/src/control/search-bar/search-bar.tsx
+++ b/src/control/search-bar/search-bar.tsx
@@ -3,7 +3,14 @@ import {
   useNamespace,
   useLocalCacheKey,
 } from '@ibiz-template/vue3-util';
-import { computed, defineComponent, PropType, ref } from 'vue';
+import {
+  computed,
+  defineComponent,
+  onUnmounted,
+  PropType,
+  Ref,
+  ref,
+} from 'vue';
 import { ISearchBar, ISearchBarGroup } from '@ibiz/model-core';
 import './search-bar.scss';
 import {
@@ -42,6 +49,22 @@ export const SearchBarControl = defineComponent({
       (...args) => new SearchBarController(...args),
     );
 
+    const counterData: Ref<IData> = ref({});
+
+    const fn = (counter: IData) => {
+      counterData.value = counter;
+    };
+
+    c.evt.on('onCreated', () => {
+      if (c.counter) {
+        c.counter.onChange(fn, true);
+      }
+    });
+
+    onUnmounted(() => {
+      c.counter?.offChange(fn);
+    });
+
     // 修复非路由情况搜索栏部件启用缓存时构建缓存key异常
     c.setStorageKeyFn(
       useLocalCacheKey(
@@ -167,6 +190,7 @@ export const SearchBarControl = defineComponent({
       ns,
       cssVars,
       filterButtonRef,
+      counterData,
       onClear,
       onSearch,
       onKeydown,
@@ -185,10 +209,17 @@ export const SearchBarControl = defineComponent({
       >
         {this.c.model.enableGroup &&
           (this.c.isBackendSearchGroup ? (
-            <iBizSearchGroups controller={this.c}></iBizSearchGroups>
+            <iBizSearchGroups
+              controller={this.c}
+              counterData={this.counterData}
+            ></iBizSearchGroups>
           ) : (
             <div class={this.ns.b('quick-group')}>
               {this.c.model.searchBarGroups?.map(groupItem => {
+                const visible = this.c.calcCountVisible(groupItem);
+                if (!visible) {
+                  return null;
+                }
                 return (
                   <span
                     class={[
@@ -201,6 +232,12 @@ export const SearchBarControl = defineComponent({
                     onClick={() => this.onGroupClick(groupItem)}
                   >
                     {groupItem.caption}
+                    {groupItem.counterId && (
+                      <iBizBadge
+                        value={this.counterData[groupItem.counterId]}
+                        counterMode={groupItem.counterMode}
+                      />
+                    )}
                   </span>
                 );
               })}
diff --git a/src/control/search-bar/search-groups/search-groups.tsx b/src/control/search-bar/search-groups/search-groups.tsx
index b737326c0..ed3ffc2a9 100644
--- a/src/control/search-bar/search-groups/search-groups.tsx
+++ b/src/control/search-bar/search-groups/search-groups.tsx
@@ -21,6 +21,10 @@ export const SearchGroups = defineComponent({
       type: Object as PropType<SearchBarController>,
       required: true,
     },
+    counterData: {
+      type: Object as PropType<IData>,
+      default: () => {},
+    },
   },
   setup(props) {
     const ns = useNamespace('search-groups');
@@ -246,6 +250,10 @@ export const SearchGroups = defineComponent({
     return (
       <div class={this.ns.b()}>
         {this.showGroups?.map(groupItem => {
+          const visible = this.c.calcCountVisible(groupItem);
+          if (!visible) {
+            return null;
+          }
           return (
             <span
               class={[
@@ -258,6 +266,12 @@ export const SearchGroups = defineComponent({
               onClick={() => this.onGroupClick(groupItem)}
             >
               {groupItem.caption || groupItem.name}
+              {groupItem.counterId && (
+                <iBizBadge
+                  value={this.counterData[groupItem.counterId]}
+                  counterMode={groupItem.counterMode}
+                />
+              )}
             </span>
           );
         })}
-- 
Gitee