可信代码库-软件详情SBOM分页器添加

src/views/Jyh/Version/Detail/SBOM.vue

@@ -22,6 +22,23 @@
       </d-table>
       <NoData v-else :small="false"></NoData>
     </div>
+    <!-- 分页组件 -->
+    <div class="mt-8 flex justify-end">
+      <d-pagination
+        v-if="pager.total > 0"
+        size="md"
+        :page-size-options="[10, 20, 50]"
+        :total="pager.total"
+        v-model:pageSize="pager.pageSize"
+        v-model:pageIndex="pager.pageIndex"
+        :max-items="5"
+        :can-change-page-size="true"
+        :can-view-total="true"
+        total-item-text="总计"
+        @page-index-change="fetchDependencyTree"
+        @page-size-change="fetchDependencyTree"
+      />
+    </div>
   </Card>
   <d-drawer v-model="showDetail" style="width: 800px; padding: 20px">
     <SBOMDetail :selectRow="selectRow" @close="showDetail = false" />
@@ -42,6 +59,14 @@ const selectRow = ref({});
 const tableData = ref([]);
 const searchText = ref(''); // 搜索关键词
 
+// 分页状态
+const pager = ref({
+  total: 0,
+  pageIndex: 1,
+  pageSize: 10
+});
+
+
 const setSelectRow = (row) => {
   selectRow.value = row;
   showDetail.value = true;
@@ -98,17 +123,26 @@ const fetchDependencyTree = async () => {
     // softwareId: 47,
     softwareId: propsData.versionId,
     componentId: '',
-    current: 1,
+    current: pager.value.pageIndex,
-    size: 10
+    size: pager.value.pageSize
   });
   if (data.data.code === 200 && data?.data?.data?.components) {
     tableData.value = renameComponentsToChildren(data?.data?.data?.components);
+    pager.value.total = data?.data.data.total || 0;
     // pager.value.total = data?.data?.data?.total || [];
   } else {
     // tableData.value = baseTreeTableData1.value
   }
 };
 
+// 搜索处理
+const handleSearch = () => {
+  pager.value.pageIndex = 1; // 搜索后重置到第一页
+  fetchDependencyTree();
+};
+
+
+
 onMounted(() => {
   fetchDependencyTree();
 });