renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 分页逻辑处理

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

23
src/hooks/useTableSelectionWithPagination.ts
View File

@ -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 select = selectedKeys.includes(rowKeyValue);
selectedRowKeys.value = selectedKeys;
console.log('handleSelect', selectedKeys, rowKeyValue, record);
const handleSelect = (record: any, select: boolean) => {
const _targetKey = record[rowKey];
if (select) {
if (!selectedRows.value.some((v) => v[rowKey] === record[rowKey])) {
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',

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

@ -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),
onSelectAll: (selected, rows, changeRows) => handleSelectAll(selected, rows, changeRows)
onSelect: handleSelect,
onSelectAll: handleSelectAll,
}}
pagination={false}
scroll={{ x: '100%', y: '100%' }}
@ -346,13 +339,7 @@ export default {
onClick={() => handleDelete(record)}
/>
{record.status !== enumTaskStatus.Exporting && (
<Button
type="primary"
ghost
size="small"
class="search-btn"
onClick={() => handleDownload(record)}
>
<Button 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>
)}

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

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

5
src/styles/components/ant-table.scss
View File

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

2
src/views/components/dataEngine/keyWord.vue
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,

16
src/views/material-center/components/finished-products/manuscript/check-list/components/manuscript-check-table/index.vue
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);
},
};

3
src/views/material-center/components/finished-products/manuscript/check-list/index.vue
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();

12
src/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/index.vue
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>
)}

2
src/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/style.scss
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;

10
src/views/material-center/components/raw-material/components/table/index.vue
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);
},
};

2
src/views/material-center/components/raw-material/index.vue
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}

24
src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepFour.vue
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({
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 () => {

12
src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepThree.vue
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;
});
};

11
src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepTwo.vue
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;
});
};

2
src/views/property-marketing/project-manage/project-list/index.vue
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();
},

20
src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/index.vue
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({
const { selectedRowKeys, selectedRows, dataSource, pageInfo, onPageChange, handleSelect, handleSelectAll } =
useTableSelectionWithPagination({
rowKey: ROW_KEY,
onPageChange: () => {
getData();
},
});
});
const open = (formData) => {
const { platform, account, password } = formData;

10
src/views/writer-material-center/components/finished-products/manuscript/check-list/components/manuscript-check-table/index.vue
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);
},
};

3
src/views/writer-material-center/components/finished-products/manuscript/check-list/index.vue
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();