From b92c6c40fa17465e4463c571082f5eb400d4472e Mon Sep 17 00:00:00 2001
From: xachary <179740385@qq.com>
Date: Wed, 27 Dec 2023 09:15:15 +0800
Subject: [PATCH] Fix the demo /comp/table/formTable about selection cross
 pages (#3468)

* fix: keep rowSelection onChange call outside

* fix: demo FormTable about seletion
---
 src/views/demo/table/FormTable.vue | 111 +++++++++++++++++++----------
 1 file changed, 74 insertions(+), 37 deletions(-)

diff --git a/src/views/demo/table/FormTable.vue b/src/views/demo/table/FormTable.vue
index a70492b8..2300d867 100644
--- a/src/views/demo/table/FormTable.vue
+++ b/src/views/demo/table/FormTable.vue
@@ -1,14 +1,12 @@
 <template>
-  <BasicTable @register="registerTable">
+  <BasicTable @register="registerTable" @fetch-success="checkedRecordsUpdate">
     <template #form-custom> custom-slot </template>
     <template #headerTop>
       <Alert type="info" show-icon>
         <template #message>
-          <template v-if="state.selectedRowKeys.length > 0">
-            <span>已选中{{ state.selectedRowKeys.length }}条记录(可跨页)</span>
-            <a-button type="link" @click="state.selectedRowKeys.splice(0)" size="small"
-              >清空</a-button
-            >
+          <template v-if="checkedRecords.length > 0">
+            <span>已选中{{ checkedRecords.length }}条记录(可跨页)</span>
+            <a-button type="link" @click="tableSelectBarClear" size="small">清空</a-button>
           </template>
           <template v-else>
             <span>未选中任何项目</span>
@@ -22,21 +20,83 @@
   </BasicTable>
 </template>
 <script lang="ts" setup>
-  import { reactive } from 'vue';
+  import { ref, nextTick } from 'vue';
   import { BasicTable, useTable } from '@/components/Table';
   import { getBasicColumns, getFormConfig } from './tableData';
   import { Alert } from 'ant-design-vue';
   import type { Key } from 'ant-design-vue/lib/table/interface';
+  import type { TableRowSelection } from '@/components/Table/src/types/table';
 
   import { demoListApi } from '@/api/demo/table';
 
-  const state = reactive<{
-    selectedRowKeys: Key[];
-  }>({
-    selectedRowKeys: [],
-  });
+  const checkedRecords = ref<Key[]>([]);
+  const checkedPageRecords = ref<Key[]>([]);
 
-  const [registerTable, { getForm }] = useTable({
+  const rowSelectionOnChange: TableRowSelection['onChange'] = (selectedRowKeys) => {
+    // 本页新出现的
+    const adds = selectedRowKeys.filter((key) => !checkedPageRecords.value.includes(key));
+    // 本页已消失的
+    const removes = checkedPageRecords.value.filter((key) => !selectedRowKeys.includes(key));
+
+    // 添加/更新到全部
+    for (const k of adds) {
+      const index = checkedRecords.value.findIndex((key) => key === k);
+      if (index > -1) {
+        checkedRecords.value.splice(index, 1, k);
+      } else {
+        checkedRecords.value.push(k);
+      }
+    }
+
+    // 从全部删除
+    for (const k of removes) {
+      const index = checkedRecords.value.findIndex((key) => key === k);
+      if (index > -1) {
+        checkedRecords.value.splice(index, 1);
+      }
+    }
+
+    // 刷新本页记录
+    checkedPageRecords.value = [...selectedRowKeys];
+  };
+
+  // 清空选择
+  const tableSelectBarClear = () => {
+    checkedRecords.value = [];
+    setSelectedRowKeys([]);
+  };
+
+  // 移除记录（如果存在删除记录的操作）
+  // const checkedRecordsRemove = (ids: (string | number)[]) => {
+  //   for (const id of ids) {
+  //     const index = checkedRecords.value.findIndex((o) => o.id === id);
+  //     if (index > -1) {
+  //       checkedRecords.value.splice(index, 1);
+  //     }
+  //   }
+  // };
+
+  const checkedRecordsUpdate = () => {
+    // 当前页数据
+    const dataSourceKeys = getDataSource().map((o) => o.id) as Array<Key>;
+    for (const record of getDataSource()) {
+      const index = checkedRecords.value.findIndex((key) => key === record.id);
+      if (index > -1) {
+        // 如果全部里存在，就更新它
+        checkedRecords.value.splice(index, 1, record.id as Key);
+      }
+    }
+    // 当前页存在全部里的
+    const pageRecords = checkedRecords.value.filter((key) => dataSourceKeys.includes(key));
+    // 刷新
+    checkedPageRecords.value = pageRecords;
+    nextTick(() => {
+      // 选中
+      setSelectedRowKeys(pageRecords);
+    });
+  };
+
+  const [registerTable, { getForm, setSelectedRowKeys, getDataSource }] = useTable({
     title: '开启搜索区域',
     api: demoListApi,
     columns: getBasicColumns(),
@@ -48,34 +108,11 @@
     rowKey: 'id',
     rowSelection: {
       type: 'checkbox',
-      selectedRowKeys: state.selectedRowKeys,
-      onSelect: onSelect,
-      onSelectAll: onSelectAll,
+      onChange: rowSelectionOnChange,
     },
   });
 
   function getFormValues() {
     console.log(getForm().getFieldsValue());
   }
-
-  function onSelect(record, selected) {
-    if (selected) {
-      state.selectedRowKeys.push(record.id);
-      return;
-    }
-    const delIdx = state.selectedRowKeys.indexOf(record.id);
-
-    if (delIdx !== -1) {
-      state.selectedRowKeys.splice(delIdx, 1);
-    }
-  }
-
-  function onSelectAll(selected, selectedRows, changeRows) {
-    const changeIds = changeRows.map((item) => item.id);
-    if (selected) {
-      state.selectedRowKeys.push(...changeIds);
-    } else {
-      state.selectedRowKeys.splice(0);
-    }
-  }
 </script>