feat: 分页逻辑处理

This commit is contained in:
rd
2025-09-05 10:39:01 +08:00
parent 8b42a67e9f
commit 72dabf9a9e
18 changed files with 76 additions and 127 deletions

View File

@ -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">
<p class="name mr-4px">{{ item.name || '-' }}</p>
<Tooltip :title="item.title">
<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 } =
useTableSelectionWithPagination({
onSelectChange: () => {
updateFormQuery();
},
});
const { dataSource, selectedRowKeys, selectedRows, handleSelect, handleSelectAll } = useTableSelectionWithPagination({
onSelectChange: () => {
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 () => {

View File

@ -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 operatorIdMatch = operator_id === '' ? true : item.operator_id === operator_id;
const platformMatch = platform === undefined ? true : item.platform === platform;
const operatorIdMatch = operator_id === undefined ? true : item.operator_id === operator_id;
return nameMatch && platformMatch && operatorIdMatch;
});
};

View File

@ -48,9 +48,8 @@
:dataSource="dataSource"
rowKey="id"
:rowSelection="{
type: 'checkbox',
selectedRowKeys: selectedRowKeys,
onChange: handleSelect,
selectedRowKeys,
onSelect: 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 operatorIdMatch = operator_id === '' ? true : item.operator_id === operator_id;
const platformMatch = platform === undefined ? true : item.platform === platform;
const operatorIdMatch = operator_id === undefined ? true : item.operator_id === operator_id;
return nameMatch && platformMatch && operatorIdMatch;
});
};

View File

@ -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();
},

View File

@ -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 {
selectedRowKeys,
selectedRows,
dataSource,
pageInfo,
onPageChange,
rowSelection,
handleSelect,
handleSelectAll,
} = useTableSelectionWithPagination({
rowKey: ROW_KEY,
onPageChange: () => {
getData();
},
});
const { selectedRowKeys, selectedRows, dataSource, pageInfo, onPageChange, handleSelect, handleSelectAll } =
useTableSelectionWithPagination({
rowKey: ROW_KEY,
onPageChange: () => {
getData();
},
});
const open = (formData) => {
const { platform, account, password } = formData;