feat: 添加分页

src/api/jobuser.ts

@@ -42,16 +42,21 @@ export interface Refresh {
 export interface ListParams {
   black?: string;
   username?: string;
+  key:string
 }
 /**
  * 
  * @param data 获取列表
  * @returns 
  */
-export function lists(key:string,status:Number) {
+export function lists(params: ListParams) {
-  key=key?key:"";
+  params.key=params.key?params.key:"";
-  return axios.post<jobuser>('/admin/api/v1/jobuser/lists',{key,status});
+  return axios.post<jobuser>('/admin/api/v1/jobuser/lists',params);
 }
+// export function lists(key:string,status:Number) {
+//   key=key?key:"";
+//   return axios.post<jobuser>('/admin/api/v1/jobuser/lists',{key,status});
+// }
 
 /**
  * 

src/views/jobuser/index.vue

@@ -89,6 +89,19 @@
           </a-table-column>
         </template>
       </a-table>
+      <div class="pagination-container">
+                <a-pagination 
+                    v-model:current="pagination.current"
+                    v-model:page-size="pagination.pageSize"
+                    :total="pagination.total"
+                    :page-size-options="pagination.pageSizeOptions"
+                    :show-jumper="pagination.showJumper"
+                    :show-page-size="pagination.showPageSize"
+                    :show-total="pagination.showTotal"
+                    @change="handleTableChange"
+                    @page-size-change="handlePageSizeChange"
+                />
+            </div>
     </a-card>
     <!-- 下级成员展示 -->
     <!-- <a-modal v-model:visible="modal_visible" width="800px">
@@ -147,6 +160,7 @@
 
 <script lang="ts" setup>
 import { computed, ref, reactive, watch, nextTick, onMounted } from 'vue';
+import { PaginationProps,TableChangeExtra  } from '@arco-design/web-vue';
 import { lists, black, OutBlack, del, set_user_password, set_user_remark,get_user_withdraw, add_money } from '@/api/jobuser';
 import { Modal } from '@arco-design/web-vue';
 import { Message } from '@arco-design/web-vue';
@@ -160,6 +174,30 @@ interface DataItem {
   time: Date;
   money: string;
 }
+
+const pagination =  reactive<PaginationProps>({
+    current: 1, // 当前页码
+    pageSize: 10, // 每页显示的条数
+    total: 0, // 总条数（根据实际情况设置）
+    pageSizeOptions: [10, 20, 50, 100,10000],
+    showJumper: true,
+    showPageSize: true,
+    showTotal: true,
+})
+
+const handlePageSizeChange = (pageSize: number) => {
+    pagination.current = 1; 
+    pagination.pageSize = pageSize;
+    queryParams.value.current = 1;
+    queryParams.value.pageSize = pageSize;
+    getAll();
+}
+
+const handleTableChange = (page:number) => {
+    pagination.current = page;
+    queryParams.value.current = page;
+    getAll();
+};
 //设置备注弹窗
 const modal_visible_remark = ref(false)
 //用户提现记录弹窗
@@ -275,21 +313,24 @@ const handleBeforeOk_money=async ()=>{
 }
 const queryParams = ref({
   key: "",
-  status: 1
+  status: 1,
+  current: 1,
+  pageSize: 10,
 });
 
 const reset=()=>{
   queryParams.value.key=""
   queryParams.value.status=-1
+  getAll();
 }
-
 /**
  * 获取所有的用户列表
  */
 const getAll = async () => {
-  const res: any = await lists(queryParams.value.key, queryParams.value.status);
+  const res: any = await lists(queryParams.value);
   if (res.code == 200) {
-    data.value = res.data;
+    data.value = res.data.data;
+    pagination.total = res.data.total;
   }
 };
 onMounted(async () => {
@@ -386,4 +427,11 @@ onMounted(async () => {
     margin-top: 16px;
   }
 }
+.pagination-container {
+  display: flex;
+  justify-content: flex-end;
+  padding: 10px;
+  background-color: white;
+  border-top: 1px solid #e8e8e8;
+}
 </style>