添加分页

src/views/property-marketing/assignment-management/components/draw-popup.vue

@@ -140,7 +140,14 @@
       class="task-drawer"
       style="right: 481px"
     >
-      <Table :data-source="materialData" bordered :columns="columns" :pagination="false" :row-selection="rowSelection">
+      <Table
+        :data-source="materialData"
+        bordered
+        :columns="columns"
+        :pagination="false"
+        :row-selection="true"
+        @onSelect="handleSelectRow"
+      >
         <template #name="{ record }">
           <div class="flex items-center">
             <img :src="record.cover" class="w-64px h-64px border-rounded-8px bg-#F0EDFF" />
@@ -166,6 +173,20 @@
           </div>
         </template>
       </Table>
+      <!-- 分页控件 -->
+      <div v-if="pageInfo.total > 0" class="pagination-box">
+        <a-pagination
+          :total="pageInfo.total"
+          size="mini"
+          show-total
+          show-jumper
+          show-page-size
+          :current="pageInfo.page"
+          :page-size="pageInfo.page_size"
+          @change="onPageChange"
+          @page-size-change="onPageSizeChange"
+        />
+      </div>
     </a-drawer>
   </a-drawer>
 </template>
@@ -208,11 +229,17 @@ const columns = ref([
 ]);
 
 // 表格分页逻辑
-const { pageInfo, onPageChange, onPageSizeChange, rowSelection } = useTableSelectionWithPagination({
+const { pageInfo, onPageChange, onPageSizeChange } = useTableSelectionWithPagination({
   onPageChange: () => handleSearch(),
   onPageSizeChange: () => handleSearch(),
 });
 
+const handleSelectRow = (selectedRowKeys, selectedRows) => {
+  console.log('选择++++++++++++++');
+  console.log(selectedRowKeys, selectedRows);
+  query.ids = selectedRowKeys;
+};
+
 // 定义props和emit
 const props = defineProps({
   operators: Array,
@@ -232,6 +259,7 @@ const query = reactive({
 const materialData = ref([]);
 const handleSearch = async () => {
   const res = await getRawMaterialsPage(query);
+  pageInfo.value.total = res.data.total;
   materialData.value = [...materialData.value, ...res.data.data];
 };
 const isActive = ref('ai');
@@ -497,4 +525,12 @@ defineExpose({
   height: 1px;
   margin-top: 16px;
 }
+/* 分页样式 */
+.pagination-box {
+  display: flex;
+  width: 100%;
+  padding: 16px 0;
+  justify-content: flex-end;
+  align-items: center;
+}
 </style>