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