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

@ -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,

View File

@ -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) => {
console.log(selectedRows, record);
emits(
'select',
selectedRows.map((row) => row.id),
record.id,
record,
);
onSelect: (record, selected) => {
emits('select', record, selected);
},
onSelectAll: (selected, selectedRows, changeRows) => {
onSelectAll: (selected) => {
emits('selectAll', selected);
},
};

View File

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

View File

@ -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),
onSelectAll: (selected, rows, changeRows) => handleSelectAll(selected, rows, changeRows),
onSelect: handleSelect,
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>
)}

View File

@ -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;

View File

@ -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) => {
emits('select', selectedRows.map(row => row.id), record.id, record);
onSelect: (record, selected) => {
emits('select', record, selected);
},
onSelectAll: (selected, selectedRows, changeRows) => {
onSelectAll: (selected) => {
emits('selectAll', selected);
},
};

View File

@ -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}

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;

View File

@ -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) => {
emits('select', selectedRows.map(row => row.id), record.id, record);
onSelect: (record, selected) => {
emits('select', record, selected);
},
onSelectAll: (selected, selectedRows, changeRows) => {
onSelectAll: (selected) => {
emits('selectAll', selected);
},
};

View File

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