增加分页

src/views/system/tenant/index.vue

@@ -24,32 +24,32 @@ const { getDict } = useDictStore();
 const { t } = useI18n();
 
 /**表格分页器参数 */
-// let tablePagination = reactive({
-//   /**当前页数 */
-//   current: 1,
-//   /**每页条数 */
-//   pageSize: 20,
-//   /**默认的每页条数 */
-//   defaultPageSize: 20,
-//   /**指定每页可以显示多少条 */
-//   pageSizeOptions: ['10', '20', '50', '100'],
-//   /**只有一页时是否隐藏分页器 */
-//   hideOnSinglePage: false,
-//   /**是否可以快速跳转至某页 */
-//   showQuickJumper: true,
-//   /**是否可以改变 pageSize */
-//   showSizeChanger: true,
-//   /**数据总数 */
-//   total: 0,
-//   showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
-//   onChange: (page: number, pageSize: number) => {
-//     tablePagination.current = page;
-//     tablePagination.pageSize = pageSize;
-//     queryParams.pageNum = page;
-//     queryParams.pageSize = pageSize;
-//     fnGetList();
-//   },
-// });
+let tablePagination = reactive({
+  /**当前页数 */
+  current: 1,
+  /**每页条数 */
+  pageSize: 20,
+  /**默认的每页条数 */
+  defaultPageSize: 20,
+  /**指定每页可以显示多少条 */
+  pageSizeOptions: ['10', '20', '50', '100'],
+  /**只有一页时是否隐藏分页器 */
+  hideOnSinglePage: false,
+  /**是否可以快速跳转至某页 */
+  showQuickJumper: true,
+  /**是否可以改变 pageSize */
+  showSizeChanger: true,
+  /**数据总数 */
+  total: 0,
+  showTotal: (total: number) => t('common.tablePaginationTotal', { total }),
+  onChange: (page: number, pageSize: number) => {
+    tablePagination.current = page;
+    tablePagination.pageSize = pageSize;
+    queryParams.pageNum = page;
+    queryParams.pageSize = pageSize;
+    fnGetList();
+  },
+});
 
 /**左侧导航是否可收起 */
 let collapsible = ref<boolean>(true);
@@ -297,7 +297,13 @@ function fnSelectNode(_: any, info: any) {
 }
 
 /**获取数据 */
-function fnGetList(parentId?: any, tableFlag?: any) {
+function fnGetList(parentId?: any, tableFlag?: any, pageNum?: number) {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+    tablePagination.current = pageNum;
+  }
   listTenant({ parentId }).then(res => {
     if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
       if (tableFlag === 'tree') {
@@ -316,7 +322,17 @@ function fnGetList(parentId?: any, tableFlag?: any) {
       } else if (tableFlag === 'table') {
         // 渲染右测表格
         tableState.data = res.data;
+        tablePagination.total = res.total;
+        if (
+          tablePagination.total <=
+            (queryParams.pageNum - 1) * tablePagination.pageSize &&
+          queryParams.pageNum !== 1
+        ) {
+          tableState.loading = false;
+          fnGetList(queryParams.pageNum - 1);
+        }
       }
+      tableState.loading = false;
     }
   });
 }
@@ -633,8 +649,8 @@ function fnTypeRecordDelete(record: any) {
 
 //选择租赁类型
 function fnTypeChange(value: any) {
- modalState.typeFrom.tenancyKey='';
- modalState.typeFrom.radioId='';
+  modalState.typeFrom.tenancyKey = '';
+  modalState.typeFrom.radioId = '';
   if (value === 'UPF') {
     listNeInfo({ neType: 'UPF', pageNum: 1, pageSize: 10000 }).then(res => {
       /** 查询最新的UPF的所有RMUID*/
@@ -659,8 +675,6 @@ function fnTypeChange(value: any) {
   keyTip.value = tipMapping[value];
 }
 
-
-
 //为后续批量请求使用
 let promises = ref<any[]>([]);
 let neCascaderOptions = ref<Record<string, any>[]>([]);
@@ -887,6 +901,7 @@ onMounted(() => {
             :columns="tableColumns"
             :loading="tableState.loading"
             :data-source="tableState.data"
+            :pagination="tablePagination"
             :size="tableState.size"
             :scroll="{ x: 1000, y: 400 }"
           >