feat: 分页逻辑处理

src/hooks/useTableSelectionWithPagination.ts

@@ -22,31 +22,28 @@ export function useTableSelectionWithPagination(options: UseTableSelectionWithPa
   const rowKey = options.rowKey || 'id';
 
   const selectedRowKeys = ref<Array<string | number>>([]);
-  const selectedRows = ref<any[]>([]);
+  const selectedRows = ref<Array<any>>([]);
 
   const pageInfo = ref(merge({}, DEFAULT_PAGE_INFO, options.pageInfo));
 
   const dataSource = ref<any[]>([]);
 
   // 单行选择
-  const handleSelect = (selectedKeys: (string | number)[], rowKeyValue: string | number, record: any) => {
+  const handleSelect = (record: any, select: boolean) => {
-    const select = selectedKeys.includes(rowKeyValue);
+    const _targetKey = record[rowKey];
-    selectedRowKeys.value = selectedKeys;
-
-    console.log('handleSelect', selectedKeys, rowKeyValue, record);
     if (select) {
-      if (!selectedRows.value.some((v) => v[rowKey] === record[rowKey])) {
+      selectedRows.value.push(record);
-        selectedRows.value.push(record);
+      selectedRowKeys.value.push(_targetKey);
-      }
     } else {
-      selectedRows.value = selectedRows.value.filter((v) => v[rowKey] !== record[rowKey]);
+      selectedRows.value = selectedRows.value.filter((v) => v[rowKey] !== _targetKey);
+      selectedRowKeys.value = selectedRowKeys.value.filter((key) => key !== _targetKey);
     }
+
     options.onSelectChange?.();
   };
 
   // 全选/取消全选
   const handleSelectAll = (checked: boolean) => {
-    console.log('handleSelectAll', checked)
     const currentPageRows = dataSource.value;
     const currentPageKeys = currentPageRows.map((v) => v[rowKey]);
 
@@ -63,7 +60,7 @@ export function useTableSelectionWithPagination(options: UseTableSelectionWithPa
     options.onSelectChange?.();
   };
 
-  const onPageChange = (page: number, pageSize:number) => {
+  const onPageChange = (page: number, pageSize: number) => {
     // console.log('onPageChange', page, pageSize);
     pageInfo.value.page = page;
     pageInfo.value.page_size = pageSize;
@@ -76,8 +73,8 @@ export function useTableSelectionWithPagination(options: UseTableSelectionWithPa
     // options.onPageSizeChange?.(size);
   };
   const resetPageInfo = () => {
-    pageInfo.value = cloneDeep(DEFAULT_PAGE_INFO)
+    pageInfo.value = cloneDeep(DEFAULT_PAGE_INFO);
-  }
+  };
 
   const rowSelection = computed(() => ({
     type: 'checkbox',

src/layouts/components/navbar/components/task-center-modal/components/export-task/index.vue

@@ -15,8 +15,6 @@ import DeleteTaskModal from './delete-task-modal.vue';
 import icon1 from '@/assets/img/media-account/icon-delete.png';
 import { showExportNotification, showFailExportNotification } from '@/utils/arcoD';
 
-
-
 export default {
   setup(props, { emit, expose }) {
     const {
@@ -25,8 +23,6 @@ export default {
       dataSource,
       pageInfo,
       onPageChange,
-      onPageSizeChange,
-      rowSelection,
       handleSelect,
       handleSelectAll,
       DEFAULT_PAGE_INFO,
@@ -34,9 +30,6 @@ export default {
       onPageChange: () => {
         getData();
       },
-      onPageSizeChange: () => {
-        getData();
-      },
     });
     let queryTaskTimer = null;
 
@@ -281,8 +274,8 @@ export default {
           rowKey="id"
           rowSelection={{
             selectedRowKeys: selectedRowKeys.value,
-            onChange: (keys, rows) => handleSelect(keys, rows),
+            onSelect: handleSelect,
-            onSelectAll: (selected, rows, changeRows) => handleSelectAll(selected, rows, changeRows)
+            onSelectAll: handleSelectAll,
           }}
           pagination={false}
           scroll={{ x: '100%', y: '100%' }}
@@ -346,13 +339,7 @@ export default {
                   onClick={() => handleDelete(record)}
                 />
                 {record.status !== enumTaskStatus.Exporting && (
-                  <Button
+                  <Button type="primary" ghost size="small" class="search-btn" onClick={() => handleDownload(record)}>
-                    type="primary"
-                    ghost
-                    size="small"
-                    class="search-btn"
-                    onClick={() => handleDownload(record)}
-                  >
                     {record.status === enumTaskStatus.Failed ? '重新导出' : '下载'}
                   </Button>
                 )}
@@ -373,7 +360,6 @@ export default {
               current={pageInfo.value.page}
               pageSize={pageInfo.value.page_size}
               onChange={onPageChange}
-              onShowSizeChange={onPageSizeChange}
             />
           </div>
         )}

src/layouts/components/navbar/components/task-center-modal/components/import-task/index.vue

@@ -21,8 +21,6 @@ export default {
       dataSource,
       pageInfo,
       onPageChange,
-      onPageSizeChange,
-      rowSelection,
       handleSelect,
       handleSelectAll,
       DEFAULT_PAGE_INFO,
@@ -30,9 +28,6 @@ export default {
       onPageChange: () => {
         getData();
       },
-      onPageSizeChange: () => {
-        getData();
-      },
     });
 
     const query = ref({ ...INITIAL_FORM });
@@ -126,8 +121,8 @@ export default {
           rowKey="id"
           rowSelection={{
             selectedRowKeys: selectedRowKeys.value,
-            onChange: (keys, rows) => handleSelect(keys, rows),
+            onSelect: handleSelect,
-            onSelectAll: (selected, rows, changeRows) => handleSelectAll(selected, rows, changeRows)
+            onSelectAll: handleSelectAll,
           }}
           pagination={false}
           scroll={{ x: '100%', y: '100%' }}
@@ -212,7 +207,6 @@ export default {
               current={pageInfo.value.page}
               pageSize={pageInfo.value.page_size}
               onChange={onPageChange}
-              onShowSizeChange={onPageSizeChange}
             />
           </div>
         )}

src/styles/components/ant-table.scss

@@ -1,4 +1,9 @@
 .ant-table-wrapper {
+  .ant-spin-nested-loading,
+  .ant-spin-container,
+  .ant-table{
+    height: 100%;
+  }
   .ant-table {
     border-radius: 0;
     font-family: $font-family-regular;

src/views/components/dataEngine/keyWord.vue

@@ -269,7 +269,7 @@
 
 <script setup>
 import topHeader from './topHeader.vue';
-import { Checkbox, Modal, Button, Tooltip, Space } from 'ant-design-vue';
+import { Checkbox, Modal, Button, Tooltip, Space, Table } from 'ant-design-vue';
 import {
   fetchKeywordTrendsList,
   fetchIndustryEmotions,

src/views/material-center/components/finished-products/manuscript/check-list/components/manuscript-check-table/index.vue

@@ -150,10 +150,6 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
-  rowSelection: {
-    type: Object,
-    default: () => {},
-  },
   selectedRowKeys: {
     type: Array,
     default: () => [],
@@ -174,16 +170,10 @@ const handleTableChange = (pagination, filters, sorter) => {
 
 const rowSelection = {
   selectedRowKeys: computed(() => props.selectedRowKeys),
-  onSelect: (record, selected, selectedRows, nativeEvent) => {
+  onSelect: (record, selected) => {
-    console.log(selectedRows, record);
+    emits('select', record, selected);
-    emits(
-      'select',
-      selectedRows.map((row) => row.id),
-      record.id,
-      record,
-    );
   },
-  onSelectAll: (selected, selectedRows, changeRows) => {
+  onSelectAll: (selected) => {
     emits('selectAll', selected);
   },
 };

src/views/material-center/components/finished-products/manuscript/check-list/index.vue

@@ -36,7 +36,6 @@
       <ManuscriptCheckTable
         :key="query.audit_status"
         :tableColumns="tableColumns"
-        :rowSelection="rowSelection"
         :selectedRowKeys="selectedRowKeys"
         :dataSource="dataSource"
         :audit_status="query.audit_status"
@@ -85,14 +84,12 @@ const props = defineProps({
 const {
   dataSource,
   pageInfo,
-  rowSelection,
   onPageChange,
   resetPageInfo,
   selectedRowKeys,
   selectedRows,
   handleSelect,
   handleSelectAll,
-  DEFAULT_PAGE_INFO,
 } = useTableSelectionWithPagination({
   onPageChange: () => {
     getData();

src/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/index.vue

@@ -24,8 +24,6 @@ export default {
       dataSource,
       pageInfo,
       onPageChange,
-      onPageSizeChange,
-      rowSelection,
       handleSelect,
       handleSelectAll,
       DEFAULT_PAGE_INFO,
@@ -33,9 +31,6 @@ export default {
       onPageChange: () => {
         getData();
       },
-      onPageSizeChange: () => {
-        getData();
-      },
     });
     const visible = ref(false);
     const query = ref(cloneDeep(INITIAL_FORM));
@@ -168,8 +163,8 @@ export default {
               rowKey="id"
               rowSelection={{
                 selectedRowKeys: selectedRowKeys.value,
-                onChange: (keys, rows) => handleSelect(keys, rows),
+                onSelect: handleSelect,
-                onSelectAll: (selected, rows, changeRows) => handleSelectAll(selected, rows, changeRows),
+                onSelectAll: handleSelectAll,
               }}
               pagination={false}
               scroll={{ x: '100%', y: '100%' }}
@@ -251,13 +246,12 @@ export default {
                 <Pagination
                   total={pageInfo.value.total}
                   size="small"
-                  showTotal={(total, range) => `共 ${total} 条记录`}
+                  showTotal={(total, range) => `共 ${total} 条`}
                   showQuickJumper
                   showSizeChanger
                   current={pageInfo.value.page}
                   pageSize={pageInfo.value.page_size}
                   onChange={onPageChange}
-                  onShowSizeChange={onPageSizeChange}
                 />
               </div>
             )}

src/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/style.scss

@@ -34,7 +34,7 @@
       }
       .ant-table-body {
         .ant-table-cell {
-          padding: 6px 16px;
+          padding: 6px 16px !important;
           .ant-table-cell-content {
             font-size: 12px;
             line-height: 20px;

src/views/material-center/components/raw-material/components/table/index.vue

@@ -105,10 +105,6 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
-  rowSelection: {
-    type: Object,
-    default: () => {},
-  },
   selectedRowKeys: {
     type: Array,
     default: () => [],
@@ -125,10 +121,10 @@ const handleTableChange = (pagination, filters, sorter) => {
 
 const rowSelection = {
   selectedRowKeys: computed(() => props.selectedRowKeys),
-  onSelect: (record, selected, selectedRows, nativeEvent) => {
+  onSelect: (record, selected) => {
-    emits('select', selectedRows.map(row => row.id), record.id, record);
+    emits('select', record, selected);
   },
-  onSelectAll: (selected, selectedRows, changeRows) => {
+  onSelectAll: (selected) => {
     emits('selectAll', selected);
   },
 };

src/views/material-center/components/raw-material/index.vue

@@ -14,7 +14,6 @@ export default defineComponent({
     const {
       dataSource,
       pageInfo,
-      rowSelection,
       onPageChange,
       selectedRowKeys,
       selectedRows,
@@ -116,7 +115,6 @@ export default defineComponent({
 
           <RawMaterialTable
             tableColumns={TABLE_COLUMNS}
-            rowSelection={rowSelection}
             selectedRowKeys={selectedRowKeys.value}
             dataSource={dataSource.value}
             onSorterChange={handleSorterChange}

src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepFour.vue

@@ -44,13 +44,16 @@
         ref="tableRef"
         :dataSource="dataSource"
         rowKey="id"
-        :rowSelection="rowSelection"
+        :rowSelection="{
+          selectedRowKeys,
+          onSelect: handleSelect,
+          onSelectAll: handleSelectAll,
+        }"
         :pagination="false"
         :scroll="{ x: '100%', y: '100%' }"
         class="flex-1 overflow-hidden"
         bordered
         :showSorterTooltip="false"
-        @change="(pagination, filters, sorter) => {}"
       >
         <Table.Column
           v-for="column in TABLE_COLUMNS"
@@ -94,8 +97,8 @@
       <div class="flex-1 overflow-y-auto overflow-x-hidden">
         <template v-if="selectedRows?.length">
           <div class="tag-item mb-8px" v-for="item in selectedRows" :key="item.id">
-            <Tooltip :title="item.name">
+            <Tooltip :title="item.title">
-              <p class="name mr-4px">{{ item.name || '-' }}</p>
+              <p class="name mr-4px">{{ item.title || '-' }}</p>
             </Tooltip>
             <icon-close size="12" class="color-#3C4043 cursor-pointer flex-shrink-0" @click="onDelete(item)" />
           </div>
@@ -146,12 +149,11 @@ const props = defineProps({
   },
 });
 
-const { dataSource, selectedRowKeys, selectedRows, rowSelection, handleSelect, handleSelectAll } =
+const { dataSource, selectedRowKeys, selectedRows, handleSelect, handleSelectAll } = useTableSelectionWithPagination({
-  useTableSelectionWithPagination({
+  onSelectChange: () => {
-    onSelectChange: () => {
+    updateFormQuery();
-      updateFormQuery();
+  },
-    },
+});
-  });
 
 const query = ref({
   uid: '',
@@ -172,7 +174,7 @@ const handleSearch = () => {
   dataSource.value = allData.value.filter((item) => {
     const uinMatch = uid === '' ? true : item.uid.includes(uid);
     const titleMatch = title === '' ? true : item.title === title;
-    const operatorIdMatch = uploader_id === '' ? true : item.uploader?.id === uploader_id;
+    const operatorIdMatch = uploader_id === undefined ? true : item.uploader?.id === uploader_id;
     return uinMatch && titleMatch && operatorIdMatch;
   });
 };
@@ -180,12 +182,10 @@ const handleSearch = () => {
 const getUsers = async () => {
   const { code, data } = await getUserList();
   if (code === 200) {
-    uploaders.value = data.map( v => ({
+    uploaders.value = data.map((v) => ({
       ...v,
-      name: v.name || v.mobile
+      name: v.name || v.mobile,
     }));
-
-    console.log(uploaders.value);
   }
 };
 const getTableData = async () => {

src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepThree.vue

@@ -47,7 +47,11 @@
         ref="tableRef"
         :dataSource="dataSource"
         rowKey="id"
-        :rowSelection="rowSelection"
+        :rowSelection="{
+          selectedRowKeys,
+          onSelect: handleSelect,
+          onSelectAll: handleSelectAll,
+        }"
         :pagination="false"
         :scroll="{ x: '100%', y: '100%' }"
         class="flex-1 overflow-hidden"
@@ -143,7 +147,7 @@ const props = defineProps({
   },
 });
 
-const { dataSource, selectedRowKeys, selectedRows, rowSelection, handleSelect, handleSelectAll } =
+const { dataSource, selectedRowKeys, selectedRows, handleSelect, handleSelectAll } =
   useTableSelectionWithPagination({
     onSelectChange: () => {
       updateFormQuery();
@@ -168,8 +172,8 @@ const handleSearch = () => {
   const { name, platform, operator_id } = query.value;
   dataSource.value = allData.value.filter((item) => {
     const nameMatch = name === '' ? true : item.name.includes(name);
-    const platformMatch = platform === '' ? true : item.platform === platform;
+    const platformMatch = platform === undefined ? true : item.platform === platform;
-    const operatorIdMatch = operator_id === '' ? true : item.operator_id === operator_id;
+    const operatorIdMatch = operator_id === undefined ? true : item.operator_id === operator_id;
     return nameMatch && platformMatch && operatorIdMatch;
   });
 };

src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepTwo.vue

@@ -48,9 +48,8 @@
         :dataSource="dataSource"
         rowKey="id"
         :rowSelection="{
-          type: 'checkbox',
+          selectedRowKeys,
-          selectedRowKeys: selectedRowKeys,
+          onSelect: handleSelect,
-          onChange: handleSelect,
           onSelectAll: handleSelectAll,
         }"
         :pagination="false"
@@ -144,7 +143,7 @@ const props = defineProps({
   },
 });
 
-const { dataSource, selectedRowKeys, selectedRows, rowSelection, handleSelect, handleSelectAll } =
+const { dataSource, selectedRowKeys, selectedRows, handleSelect, handleSelectAll } =
   useTableSelectionWithPagination({
     onSelectChange: () => {
       updateFormQuery();
@@ -169,8 +168,8 @@ const handleSearch = () => {
   const { name, platform, operator_id } = query.value;
   dataSource.value = allData.value.filter((item) => {
     const nameMatch = name === '' ? true : item.name.includes(name);
-    const platformMatch = platform === '' ? true : item.platform === platform;
+    const platformMatch = platform === undefined ? true : item.platform === platform;
-    const operatorIdMatch = operator_id === '' ? true : item.operator_id === operator_id;
+    const operatorIdMatch = operator_id === undefined ? true : item.operator_id === operator_id;
     return nameMatch && platformMatch && operatorIdMatch;
   });
 };

src/views/property-marketing/project-manage/project-list/index.vue

@@ -51,7 +51,7 @@ import ProjectTable from './components/project-table';
 import AddProjectModal from './components/add-project-modal';
 import DeleteProjectModal from './components/project-table/delete-project-modal.vue';
 
-const { dataSource, pageInfo, onPageChange, onPageSizeChange, resetPageInfo } = useTableSelectionWithPagination({
+const { dataSource, pageInfo, onPageChange, resetPageInfo } = useTableSelectionWithPagination({
   onPageChange: () => {
     getData();
   },

src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/index.vue

@@ -45,7 +45,11 @@
     <Table
       ref="tableRef"
       :dataSource="dataSource"
-      :rowSelection="rowSelection"
+      :rowSelection="{
+        selectedRowKeys,
+        onSelect: handleSelect,
+        onSelectAll: handleSelectAll,
+      }"
       :rowKey="ROW_KEY"
       :pagination="false"
       :scroll="{ x: '100%', y: '100%' }"
@@ -125,21 +129,13 @@ const query = ref(cloneDeep(INITIAL_FORM));
 const form = ref(null);
 
 const ROW_KEY = 'account_id';
-const {
+const { selectedRowKeys, selectedRows, dataSource, pageInfo, onPageChange, handleSelect, handleSelectAll } =
-  selectedRowKeys,
+  useTableSelectionWithPagination({
-  selectedRows,
+    rowKey: ROW_KEY,
-  dataSource,
+    onPageChange: () => {
-  pageInfo,
+      getData();
-  onPageChange,
+    },
-  rowSelection,
+  });
-  handleSelect,
-  handleSelectAll,
-} = useTableSelectionWithPagination({
-  rowKey: ROW_KEY,
-  onPageChange: () => {
-    getData();
-  },
-});
 
 const open = (formData) => {
   const { platform, account, password } = formData;

src/views/writer-material-center/components/finished-products/manuscript/check-list/components/manuscript-check-table/index.vue

@@ -156,10 +156,6 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
-  rowSelection: {
-    type: Array,
-    default: () => [],
-  },
   selectedRowKeys: {
     type: Array,
     default: () => [],
@@ -182,10 +178,10 @@ const handleTableChange = (pagination, filters, sorter) => {
 
 const rowSelection = {
   selectedRowKeys: computed(() => props.selectedRowKeys),
-  onSelect: (record, selected, selectedRows, nativeEvent) => {
+  onSelect: (record, selected) => {
-    emits('select', selectedRows.map(row => row.id), record.id, record);
+    emits('select', record, selected);
   },
-  onSelectAll: (selected, selectedRows, changeRows) => {
+  onSelectAll: (selected) => {
     emits('selectAll', selected);
   },
 };

src/views/writer-material-center/components/finished-products/manuscript/check-list/index.vue

@@ -34,7 +34,6 @@
       <ManuscriptCheckTable
         :key="query.audit_status"
         :tableColumns="tableColumns"
-        :rowSelection="rowSelection"
         :selectedRowKeys="selectedRowKeys"
         :dataSource="dataSource"
         :audit_status="query.audit_status"
@@ -85,14 +84,12 @@ const props = defineProps({
 const {
   dataSource,
   pageInfo,
-  rowSelection,
   onPageChange,
   resetPageInfo,
   selectedRowKeys,
   selectedRows,
   handleSelect,
   handleSelectAll,
-  DEFAULT_PAGE_INFO,
 } = useTableSelectionWithPagination({
   onPageChange: () => {
     getData();