👣 重构底层

kicc-ui/src/views/system/config/index.vue

@@ -58,6 +58,8 @@
               scrollToFirstRowOnChange: true
             }"
             :rowSelection="getRowSelectionRef"
+            :pagination="getPaginationInfo"
+            @change="handleTablePaginationChange"
     >
       <template #title>
         <div style="width: 100%">
@@ -135,6 +137,7 @@
    * 当vben的BasicTable跟BasicForm组件不能满足一些特殊需求时,需要写原生ant-design-vue组件时,请严格参考此处代码
    * 当前原生ant-design-vue表格表单组件模板,目前已经与系统项目配置高度集成,系统配置发生修改时组件也会产生对应的变化
    * 目前是基于vben的BasicTable跟BasicForm组件重写出一套ant-design-vue原生表格表单组件模板
+   * 注意:不会强依赖vben的BasicTable跟BasicForm组件,只会依赖一些简单容易逻辑不复杂的功能,复杂的功能不会依赖,降低耦合,提升此模板的可扩展性
    * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
    * author entfrm开发团队-王翔
    */
@@ -142,7 +145,7 @@
   import { RedoOutlined, ColumnHeightOutlined, FullscreenOutlined, FullscreenExitOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
   import {ref, onMounted, watchEffect, ComputedRef, computed, watch} from 'vue';
   import { Table, Form, Row, Col, Divider, Tooltip, Dropdown, Menu, Select, DatePicker } from 'ant-design-vue';
-  import {BasicTableProps, SizeType} from '/@/components/Table';
+  import {BasicTableProps, PaginationProps, SizeType, SorterResult} from '/@/components/Table';
   import { listConfig, delConfig } from '/@/api/platform/system/controller/config';
   import ConfigModal from './ConfigModal.vue';
   import { columns } from './config.data';
@@ -157,20 +160,20 @@
   import { useTimeoutFn } from "/@/hooks/core/useTimeout";
   import {useRowSelection} from "/@/components/Table/src/hooks/useRowSelection";
   import {basicProps} from "/@/components/Table/src/props";
+  import {usePagination} from "/@/components/Table/src/hooks/usePagination";
+  import {PAGE_SIZE} from "/@/components/Table/src/const";
+  import {isFunction} from "/@/utils/is";
 
   /** 类型规范统一声明定义区域 */
   interface TableState {
     loading: boolean;
     single: boolean;
     multiple: boolean;
-    total: number;
     tableHeight: number;
     tableInstance: ComponentRef;
     queryFormInstance: ComponentRef | any;
     selectedKeys: SizeType[];
     queryParams: {
-      current: number;
-      size: number;
       name: string | undefined;
       key: string | undefined;
       isSys: string | undefined;
@@ -213,8 +216,6 @@
     single: true,
     // 非多个禁用
     multiple: true,
-    // 总条数
-    total: 0,
     // 手动设置表格高度
     tableHeight: 588,
     // a-table表格实例
@@ -225,8 +226,6 @@
     selectedKeys: ['middle'],
     // 查询参数
     queryParams: {
-      current: 1,
-      size: 10,
       name: undefined,
       key: undefined,
       isSys: undefined
@@ -240,17 +239,7 @@
       // 表格ID
       rowKey: 'id',
       // 表格行配置
-      rowSelection: { type: 'checkbox' },
-      // 表格分页配置
-      pagination: {
-        current: 1,
-        pageSize: 10,
-        size: 'small',
-        defaultPageSize: 10,
-        showTotal: (total) => t('component.table.total', { total }),
-        showSizeChanger: true,
-        showQuickJumper: true,
-      }
+      rowSelection: { type: 'checkbox' }
     }
   });
   // 基于vben-table扩展rowSelection,实现勾选数据自主可控
@@ -269,6 +258,14 @@
     deleteSelectRowByKey,
     setSelectedRowKeys
   } = useRowSelection(basicTableProps, ref(state.dataSource), noop);
+  // 基于vben-table扩展分页
+  const {
+    getPaginationInfo,
+    getPagination,
+    setPagination,
+    setShowPagination,
+    getShowPagination
+  } = usePagination(basicTableProps);
 
   /** 生命周期钩子回调处理区域 */
   onMounted(() => {
@@ -297,16 +294,17 @@
   /** 查询列表数据 */
   function getList() {
     state.loading = true;
-    listConfig(convertDateRange(state.queryParams, state.dateRange)).then(response => {
+    const { current = 1, pageSize = 10 } = getPagination() as PaginationProps;
+    listConfig(convertDateRange({ ...state.queryParams, current, size: pageSize }, state.dateRange)).then(response => {
       state.dataSource = response.data;
-      state.total = response.total;
+      setPagination({ total: response.total });
       state.loading = false;
     });
   }
 
   /** 搜索按钮操作 */
   function handleQuery() {
-    state.queryParams.current = 1;
+    setPagination({ current: 1 });
     clearSelectedRowKeys();
     getList();
   }
@@ -324,11 +322,11 @@
     state.multiple = !selectedRowKeys.length;
   }
 
-
-
-
-
-
+  /** 处理表格分页 */
+  function handleTablePaginationChange(pagination: PaginationProps) {
+    setPagination(pagination);
+    getList();
+  }