👣 重构底层

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

@@ -46,7 +46,7 @@
       </AFormItem>
     </AForm>
     <ATable ref="tableElRef"
-            rowKey="id"
+            v-bind="state.tableProps"
             :loading="state.loading"
             :size="state.selectedKeys[0]"
             :dataSource="state.dataSource"
@@ -57,19 +57,7 @@
               y: state.tableHeight,
               scrollToFirstRowOnChange: true
             }"
-            :rowSelection="{
+            :rowSelection="getRowSelectionRef"
-              type: 'checkbox',
-              onChange: handleSelectionChange
-            }"
-            :pagination="{
-              current: 1,
-              pageSize: 10,
-              size: 'small',
-              defaultPageSize: 10,
-              showTotal: (total) => t('component.table.total', { total }),
-              showSizeChanger: true,
-              showQuickJumper: true,
-            }"
     >
       <template #title>
         <div style="width: 100%">
@@ -152,9 +140,9 @@
    */
   import { BasicTitle } from '/@/components/Basic';
   import { RedoOutlined, ColumnHeightOutlined, FullscreenOutlined, FullscreenExitOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
-  import { ref, onMounted, watchEffect } from '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 { SizeType } from '/@/components/Table';
+  import {BasicTableProps, SizeType} from '/@/components/Table';
   import { listConfig, delConfig } from '/@/api/platform/system/controller/config';
   import ConfigModal from './ConfigModal.vue';
   import { columns } from './config.data';
@@ -165,13 +153,14 @@
   import { useI18n } from '/@/hooks/web/useI18n';
   import { convertDateRange } from "/@/utils/dateUtil";
   import { useFullscreen } from "@vueuse/core";
-  import { getPopupContainer } from '/@/utils';
+  import { getPopupContainer, noop } from '/@/utils';
   import { useTimeoutFn } from "/@/hooks/core/useTimeout";
+  import {useRowSelection} from "/@/components/Table/src/hooks/useRowSelection";
+  import {basicProps} from "/@/components/Table/src/props";
 
   /** 类型规范统一声明定义区域 */
   interface TableState {
     loading: boolean;
-    ids: string[];
     single: boolean;
     multiple: boolean;
     total: number;
@@ -188,6 +177,7 @@
     };
     dataSource: any[];
     dateRange: string[];
+    tableProps: Recordable;
   }
 
   /** 通用变量统一声明区域 */
@@ -219,8 +209,6 @@
   const state = reactive<TableState>({
     // 遮罩层
     loading: true,
-    // 选中数组
-    ids: [],
     // 非单个禁用
     single: true,
     // 非多个禁用
@@ -246,8 +234,41 @@
     // 数据列表
     dataSource: [],
     // 日期范围
-    dateRange: []
+    dateRange: [],
+    // 表格api
+    tableProps: {
+      // 表格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,
+      }
+    }
+  });
+  // 基于vben-table扩展rowSelection,实现勾选数据自主可控
+  const basicTableProps = computed(() => {
+    return {
+      ...basicProps,
+      ...state.tableProps
+    } as unknown as BasicTableProps;
   });
+  const {
+    getRowSelection,
+    getRowSelectionRef,
+    getSelectRows,
+    clearSelectedRowKeys,
+    getSelectRowKeys,
+    deleteSelectRowByKey,
+    setSelectedRowKeys
+  } = useRowSelection(basicTableProps, ref(state.dataSource), noop);
 
   /** 生命周期钩子回调处理区域 */
   onMounted(() => {
@@ -259,6 +280,12 @@
     // 当数据不存在时清理表格高度
     handleTableHeightSetting(state.dataSource.length > 0 ? false : true);
   });
+  watch(getRowSelectionRef, ()=> {
+    handleSelectionChange(getSelectRowKeys());
+  },{
+    immediate: true,
+    deep: true
+  });
 
   /** 处理表格高度设置 */
   function handleTableHeightSetting(clean?: boolean) {
@@ -267,12 +294,6 @@
     bodyEl && (bodyEl.style.height = `${ clean ? 'unset' : state.tableHeight+'px' }`);
   }
 
-  /** 搜索按钮操作 */
-  function handleQuery() {
-    state.queryParams.current = 1;
-    getList();
-  }
-
   /** 查询列表数据 */
   function getList() {
     state.loading = true;
@@ -283,19 +304,34 @@
     });
   }
 
+  /** 搜索按钮操作 */
+  function handleQuery() {
+    state.queryParams.current = 1;
+    clearSelectedRowKeys();
+    getList();
+  }
+
   /** 重置按钮操作 */
   function resetQuery() {
     state.dateRange = [];
     state.queryFormInstance?.resetFields();
+    handleQuery();
   }
 
   /** 处理多选框选中数据 */
   function handleSelectionChange(selectedRowKeys: string[]) {
-    state.ids = selectedRowKeys;
     state.single = selectedRowKeys.length != 1;
     state.multiple = !selectedRowKeys.length;
   }
 
+
+
+
+
+
+
+
+
   /** 新增按钮操作,行内新增与工具栏局域新增通用 */
   function handleAdd() {
     openModal(true,{isUpdate: false });