feat: implement pagination for tags in TagDrawer component

Author: liuruibin

ui/src/views/document/tag/MulAddTagDialog.vue

@@ -30,6 +30,7 @@
                   v-model="tag.key"
                   @change="tagKeyChange(tag)"
                   filterable
+                  :filter-method="filterMethod"
                   :placeholder="$t('views.document.tag.requiredMessage1')"
                   :loading="optionLoading"
                 >
@@ -139,7 +140,8 @@ const optionLoading = ref<boolean>(false)
 const FormRef = ref()
 const dialogVisible = ref<boolean>(false)
 const tagList = ref<Array<any>>([])
-const keyOptions = ref()
+const keyOptions = ref([])
+const allKeyOptions = ref([])
 
 const add = () => {
   tagList.value.push({})
@@ -174,10 +176,15 @@ function getTags(Key?: string) {
   loadSharedApi({ type: 'knowledge', systemType: props.apiType, isShared: isShared.value })
     .getTags(id, {}, optionLoading)
     .then((res: any) => {
-      keyOptions.value = res.data
+      keyOptions.value = res.data.slice(0, 100)
+      allKeyOptions.value = res.data
     })
 }
 
+function filterMethod(val: string) {
+  keyOptions.value = allKeyOptions.value.filter((item: any) => item.key.indexOf(val) > -1).slice(0, 100)
+}
+
 const createTagDialogRef = ref()
 
 function openCreateTagDialog(row?: any) {

ui/src/views/document/tag/TagDrawer.vue

@@ -29,9 +29,10 @@
       />
     </div>
     <el-table
-      :data="tableData"
+      :data="pagedTableData"
       :span-method="spanMethod"
       v-loading="loading"
+      :max-height="tableMaxHeight"
       @selection-change="handleSelectionChange"
       @cell-mouse-enter="cellMouseEnter"
       @cell-mouse-leave="cellMouseLeave"
@@ -114,6 +115,15 @@
         </template>
       </el-table-column>
     </el-table>
+    <div class="app-table__pagination mt-16">
+      <el-pagination
+        v-model:current-page="pageNum"
+        v-model:page-size="pageSize"
+        :total="groupedByKey.length"
+        layout="total, prev, pager, next, sizes"
+        :page-sizes="[10, 20, 50, 100]"
+      />
+    </div>
   </el-drawer>
   <CreateTagDialog ref="createTagDialogRef" @refresh="getList" />
   <EditTagDialog ref="editTagDialogRef" @refresh="getList" />
@@ -159,6 +169,9 @@ const debugVisible = ref(false)
 const filterText = ref('')
 const tags = ref<Array<any>>([])
 const currentMouseId = ref<number | null>(null)
+const pageNum = ref(1)
+const pageSize = ref(20)
+const tableMaxHeight = computed(() => `calc(100vh - 260px)`)
 
 function cellMouseEnter(row: any) {
   currentMouseId.value = row.id
@@ -168,7 +181,7 @@ function cellMouseLeave() {
   currentMouseId.value = null
 }
 
-// 将原始数据转换为表格数据
+// 1) 仍然把后端全量 tags 转成“扁平行”，每行带上 keyIndex
 const tableData = computed(() => {
   const result: any[] = []
   tags.value.forEach((tag: any) => {
@@ -178,31 +191,46 @@ const tableData = computed(() => {
           id: value.id,
           key: tag.key,
           value: value.value,
-          keyIndex: index, // 用于判断是否为第一行
+          keyIndex: index, // 同一个 key 下第几行
         })
       })
     }
   })
   return result
 })
 
-// 合并单元格方法
-const spanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
+// 2) 按 key 分组（保持 key 的出现顺序）
+const groupedByKey = computed(() => {
+  const map = new Map<string, any[]>()
+  for (const row of tableData.value) {
+    if (!map.has(row.key)) map.set(row.key, [])
+    map.get(row.key)!.push(row)
+  }
+  // 每个元素代表一个 key 分组
+  return Array.from(map.entries()).map(([key, rows]) => ({ key, rows }))
+})
+
+// 3) 按“key 分组”做分页：每页 pageSize 个 key
+const pagedGroups = computed(() => {
+  const start = (pageNum.value - 1) * pageSize.value
+  const end = start + pageSize.value
+  return groupedByKey.value.slice(start, end)
+})
+
+// 4) 当前页表格数据：把当前页的若干个 key 分组展开为行
+const pagedTableData = computed(() => {
+  return pagedGroups.value.flatMap((g) => g.rows)
+})
+
+// 5) 合并单元格：只在当前页内合并，同一个 key 的第一行 rowspan=该 key 在当前页的行数
+const spanMethod = ({ row, columnIndex }: any) => {
+  // 注意：你现在有 selection 列，所以 key 列索引是 1；如需同时合并 value 列按需调整
   if (columnIndex === 0 || columnIndex === 1) {
-    // key列 (由于添加了选择列，索引变为1)
     if (row.keyIndex === 0) {
-      // 计算当前key有多少个值
-      const sameKeyCount = tableData.value.filter((item) => item.key === row.key).length
-      return {
-        rowspan: sameKeyCount,
-        colspan: 1,
-      }
-    } else {
-      return {
-        rowspan: 0,
-        colspan: 0,
-      }
+      const sameKeyCount = pagedTableData.value.filter((item) => item.key === row.key).length
+      return { rowspan: sameKeyCount, colspan: 1 }
     }
+    return { rowspan: 0, colspan: 0 }
   }
 }
 
@@ -281,12 +309,14 @@ function getList() {
     .getTags(id, params, loading)
     .then((res: any) => {
       tags.value = res.data
+      pageNum.value = 1
     })
 }
 
 const open = () => {
   filterText.value = ''
   debugVisible.value = true
+  pageNum.value = 1
   getList()
 }