From ec51ddea077e6494310922063cf1d08d88ee5cb8 Mon Sep 17 00:00:00 2001
From: lq <121091329@qq.com>
Date: Sat, 20 Sep 2025 14:53:27 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=89=E4=B8=AD=E4=BA=8B=E4=BB=B6=E7=9A=84?=
 =?UTF-8?q?=E7=9B=91=E5=90=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useTableSelectionWithPagination.ts  | 16 ++++++++-
 .../components/draw-popup.vue                 | 36 +++++++++++++++----
 2 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/src/hooks/useTableSelectionWithPagination.ts b/src/hooks/useTableSelectionWithPagination.ts
index ebc6b22..0c30800 100644
--- a/src/hooks/useTableSelectionWithPagination.ts
+++ b/src/hooks/useTableSelectionWithPagination.ts
@@ -1,4 +1,6 @@
 import { ref, computed } from 'vue';
+import { merge } from 'lodash-es';
+import { cloneDeep } from 'lodash-es';
 
 interface UseTableSelectionWithPaginationOptions {
   rowKey?: string; // 主键字段名，默认 'id'
@@ -60,18 +62,27 @@ export function useTableSelectionWithPagination(options: UseTableSelectionWithPa
     options.onSelectChange?.();
   };
 
+  // 选择变更处理
+  const handleSelectChange = (keys: Array<string | number>, rows: Array<any>) => {
+    selectedRowKeys.value = keys;
+    selectedRows.value = rows;
+    options.onSelectChange?.();
+  };
+
   const onPageChange = (page: number, pageSize: number) => {
     // console.log('onPageChange', page, pageSize);
     pageInfo.value.page = page;
     pageInfo.value.page_size = pageSize;
     options.onPageChange?.(page);
   };
+  
   const onPageSizeChange = (current: number, size: number) => {
     // console.log('onPageSizeChange', current, size);
     // pageInfo.value.page_size = size;
     // pageInfo.value.page = 1;
     // options.onPageSizeChange?.(size);
   };
+  
   const resetPageInfo = () => {
     pageInfo.value = cloneDeep(DEFAULT_PAGE_INFO);
   };
@@ -80,6 +91,8 @@ export function useTableSelectionWithPagination(options: UseTableSelectionWithPa
     type: 'checkbox',
     showCheckedAll: true,
     width: 48,
+    selectedRowKeys: selectedRowKeys.value,
+    onChange: handleSelectChange
   }));
 
   return {
@@ -92,7 +105,8 @@ export function useTableSelectionWithPagination(options: UseTableSelectionWithPa
     rowSelection,
     handleSelect,
     handleSelectAll,
+    handleSelectChange,
     resetPageInfo,
     DEFAULT_PAGE_INFO,
   };
-}
+}
\ No newline at end of file
diff --git a/src/views/property-marketing/assignment-management/components/draw-popup.vue b/src/views/property-marketing/assignment-management/components/draw-popup.vue
index 63953c0..c8ac6d3 100644
--- a/src/views/property-marketing/assignment-management/components/draw-popup.vue
+++ b/src/views/property-marketing/assignment-management/components/draw-popup.vue
@@ -145,8 +145,8 @@
         bordered
         :columns="columns"
         :pagination="false"
-        :row-selection="true"
-        @onSelect="handleSelectRow"
+        row-key="id"
+        :row-selection="rowSelection"
       >
         <template #name="{ record }">
           <div class="flex items-center">
@@ -229,16 +229,30 @@ const columns = ref([
 ]);
 
 // 表格分页逻辑
-const { pageInfo, onPageChange, onPageSizeChange } = useTableSelectionWithPagination({
+const { 
+  pageInfo, 
+  onPageChange, 
+  onPageSizeChange, 
+  rowSelection, 
+  selectedRowKeys
+} = useTableSelectionWithPagination({
+  rowKey: 'id',
   onPageChange: () => handleSearch(),
   onPageSizeChange: () => handleSearch(),
 });
 
-const handleSelectRow = (selectedRowKeys, selectedRows) => {
+// 处理选择变更
+// const handleSelectChange = (selectedRowKeys, selectedRows) => {
+//   console.log('选择变更:', selectedRowKeys, selectedRows);
+//   query.ids = selectedRowKeys;
+// };
+
+// 监听选中项变化
+watch(selectedRowKeys, (newVal) => {
   console.log('选择++++++++++++++');
-  console.log(selectedRowKeys, selectedRows);
-  query.ids = selectedRowKeys;
-};
+  console.log(newVal);
+  query.ids = newVal;
+});
 
 // 定义props和emit
 const props = defineProps({
@@ -262,6 +276,14 @@ const handleSearch = async () => {
   pageInfo.value.total = res.data.total;
   materialData.value = [...materialData.value, ...res.data.data];
 };
+
+// 移除原来的 handleSelectRow 方法，因为我们现在使用 hook 提供的 handleSelect 方法
+// const handleSelectRow = (selectedRowKeys, selectedRows) => {
+//   console.log('选择++++++++++++++');
+//   console.log(selectedRowKeys, selectedRows);
+//   query.ids = selectedRowKeys;
+// };
+
 const isActive = ref('ai');
 
 // 发布类型选项