From a927dd412ebb06b45782afe24032d646ad7ea52d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E6=99=93=E4=B8=9C?= <763795151@qq.com>
Date: Sat, 22 Feb 2025 20:56:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B6=88=E8=B4=B9=E7=BB=84=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E6=A8=A1=E7=B3=8A=E8=BF=87=E6=BB=A4=E6=9F=A5=E8=AF=A2.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/views/group/Group.vue | 39 +++++++++++++++++++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/ui/src/views/group/Group.vue b/ui/src/views/group/Group.vue
index acc66ba..7857ee3 100644
--- a/ui/src/views/group/Group.vue
+++ b/ui/src/views/group/Group.vue
@@ -58,6 +58,22 @@
                 </a-form-item>
               </a-col>
             </a-row>
+            <hr class="hr" />
+            <a-row :gutter="24">
+              <a-col :span="24">
+                <a-form-item label="过滤消费组">
+                  <a-input
+                    placeholder="groupId 模糊过滤"
+                    class="input-w"
+                    v-decorator="['filterGroupId']"
+                    @change="onFilterGroupIdUpdate"
+                  />
+                  <span>
+                    仅过滤当前已查出来的消费组，如果要查询服务端最新消费组，请点击查询按钮</span
+                  >
+                </a-form-item>
+              </a-col>
+            </a-row>
           </a-form>
         </div>
         <div class="operation-row-button">
@@ -70,7 +86,7 @@
         </div>
         <a-table
           :columns="columns"
-          :data-source="data"
+          :data-source="filteredData"
           bordered
           row-key="groupId"
         >
@@ -169,6 +185,7 @@ export default {
     return {
       queryParam: {},
       data: [],
+      filteredData: [],
       columns,
       selectRow: {},
       form: this.$form.createForm(this, {
@@ -186,6 +203,7 @@ export default {
       showConsumerDetailDialog: false,
       showAddSubscriptionDialog: false,
       showOffsetPartitionDialog: false,
+      filterGroupId: "",
     };
   },
   methods: {
@@ -209,6 +227,7 @@ export default {
         this.loading = false;
         if (res.code == 0) {
           this.data = res.data.list;
+          this.filter();
         } else {
           notification.error({
             message: "error",
@@ -268,6 +287,19 @@ export default {
     closeOffsetPartitionDialog() {
       this.showOffsetPartitionDialog = false;
     },
+    onFilterGroupIdUpdate(input) {
+      this.filterGroupId = input.target.value;
+      this.filter();
+    },
+    filter() {
+      if (this.filterGroupId) {
+        this.filteredData = this.data.filter(
+          (e) => e.groupId.indexOf(this.filterGroupId) != -1
+        );
+      } else {
+        this.filteredData = this.data;
+      }
+    },
   },
   created() {
     this.getConsumerGroupList();
@@ -372,4 +404,9 @@ const columns = [
 .type-select {
   width: 200px !important;
 }
+.hr {
+  height: 1px;
+  border: none;
+  border-top: 1px dashed #0066cc;
+}
 </style>