feat: 分页逻辑处理
This commit is contained in:
@ -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 () => {
|
||||
|
||||
@ -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;
|
||||
});
|
||||
};
|
||||
|
||||
@ -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;
|
||||
});
|
||||
};
|
||||
|
||||
@ -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();
|
||||
},
|
||||
|
||||
@ -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;
|
||||
|
||||
Reference in New Issue
Block a user