分页查询

src/views/management/sort/index.vue

@@ -9,7 +9,7 @@
 							<icon-ic-round-plus class="mr-4px text-20px" />
 							新增
 						</n-button>
-						<n-button type="error" @click="deleteTableData" >
+						<n-button type="error" @click="deleteTableData">
 							<icon-ic-round-delete class="mr-4px text-20px" />
 							删除
 						</n-button>
@@ -25,13 +25,13 @@
 							<n-input :style="{ width: '98%', marginRight: '2%' }" :value="conditionParams.name"
 								@input="event => conditionParams.name = event" placeholder="请输入学科名称..." clearable />
 							<n-input :style="{ width: '98%', marginRight: '2%' }" :value="conditionParams.description"
-								@input="event => conditionParams.description = event" placeholder="请输入学科描述..." clearable  />
+								@input="event => conditionParams.description = event" placeholder="请输入学科描述..." clearable />
 							<n-input-number :style="{ width: '120%', marginRight: '2%' }" v-model:value="conditionParams.createUid"
 								placeholder="请输入用户ID..." clearable />
 							<n-input :style="{ width: '98%', marginRight: '2%' }" v-model:value="conditionParams.createTime"
 								@input="event => conditionParams.createTime = event" placeholder="请输入创建时间..." clearable />
 							<n-input :style="{ width: '98%', marginRight: '2%' }" v-model:value="conditionParams.modifyTime"
-								@input="event => conditionParams.modifyTime = event" placeholder="请输入修改时间..." clearable/>
+								@input="event => conditionParams.modifyTime = event" placeholder="请输入修改时间..." clearable />
 							<n-select :options="userStatusOptions" :style="{ width: '98%', marginRight: '2%' }"
 								v-model:value="conditionParams.disabled" @input="event => conditionParams.disabled = event"
 								placeholder="输入查询状态..." clearable />
@@ -47,9 +47,10 @@
 						</n-button>
 					</n-space>
 				</n-space>
-				<n-data-table :columns="columns" :data="tableData" :loading="loading" :row-key="rowKey" @update:checked-row-keys="handleCheck"
-					:pagination="pagination" />
-				<table-action-add  v-model:visible="visible"  :type="modalType" @searchCondition="searchCondition"
+				<n-data-table :columns="columns" :data="tableData" :loading="loading" :row-key="rowKey"
+					@update:checked-row-keys="handleCheck" />
+				<n-pagination v-model:page="pagination.page" v-model:page-size="pagination.pageSize" :item-count="pagination.itemCount"    show-size-picker :page-sizes="[10, 20, 30, 40]" @change="onChange" @page-size-change="onUpdatePageSize"/>
+				<table-action-add v-model:visible="visible" :type="modalType" @searchCondition="searchCondition"
 					:pagination="pagination" :edit-data="(editData as SelectByCondition_1Params)" />
 			</n-card>
 		</n-scrollbar>
@@ -58,7 +59,7 @@
 
 <script setup lang="tsx" >
 import { userStatusOptions } from '@/constants';
-import { ref, Ref, reactive ,watch} from 'vue'
+import { ref, Ref, reactive, watch } from 'vue'
 import { NButton, NSpace, NTag, NPopconfirm } from 'naive-ui';
 import type { DataTableColumns, PaginationProps } from 'naive-ui';
 import { useBoolean, useLoading } from '@/hooks';
@@ -66,8 +67,8 @@ import type { DataTableRowKey } from 'naive-ui'
 import TableActionAdd from './components/table-action-add.vue'
 import type { ModalType } from './components/table-action-add.vue';
 import { userStatusLabels } from '@/constants';
-import { deleteById,selectAll_1 } from '~/src/service/api/sort';
-import { selectByCondition_1} from '~/src/service/api/sort';
+import { deleteById } from '~/src/service/api/sort';
+import { selectByCondition_1 } from '~/src/service/api/sort';
 import type { SelectByCondition_1Params } from '~/src/service/api/sort';
 
 type RowData = {
@@ -98,57 +99,46 @@ const pagination: PaginationProps = ref({
 	page: 1,
 	pageSize: 10,
 	showSizePicker: true,
-	itemCount:1,
-	pageSizes: [10, 20, 50],
-	onChange: (page: number) => {
+	itemCount: 14,
+}).value;
+
+function onChange(page: number)  {
 		// 处理页码变化
 		pagination.page = page;
-	},
-	onUpdatePageSize: (pageSize: number) => {
+		selectByCondition_1(pagination.page as number, pagination.pageSize as number, conditionParams).then((res)=>{
+			tableData.value = res.data as [];
+			pagination.itemCount = Number(res.total);
+		})
+}
+
+function onUpdatePageSize(pageSize: number)  {
 		// 处理每页显示数量变化
 		pagination.pageSize = pageSize;
 		pagination.page = 1;
-	}
-}).value;
+		selectByCondition_1(pagination.page as number, pagination.pageSize as number, conditionParams).then((res)=>{
+		tableData.value = res.data as [];
+    pagination.itemCount = Number(res.total);
+	})
+}
 
 async function searchCondition() {
 	startLoading();
-	// 检查 conditionParams 对象中的值是否存在不为空的条件  some 检查数组中是否有至少一个元素满足指定的条件 检查每个值是否不为 null 且不为空字符串
-	const hasConditions = Object.values(conditionParams).some(value => value !== null && value !== '');
-	if(hasConditions){
-			const res = await selectByCondition_1(pagination.page as number, pagination.pageSize as number, conditionParams);
-			tableData.value = res.data as [];
-			pagination.itemCount = Number(res.total);
-			// 如果满足条件的数据超出当前页的数据范围，则重新查询所有满足条件的数据
-			if (pagination.itemCount > (pagination.page - 1) * pagination.pageSize + tableData.value.length) {
-					const allRes = await selectByCondition_1(1, pagination.itemCount, conditionParams);
-					tableData.value = allRes.data as [];
-					pagination.itemCount = Number(allRes.total);
-					// 调整分页参数
-					pagination.page = Math.ceil(allRes.total / pagination.pageSize);
-			} else {
-					const allRes = await selectByCondition_1(1, pagination.itemCount, conditionParams);
-					tableData.value = allRes.data as [];
-			}
-			endLoading();
-	}
-	else{
-		const res = await selectAll_1();
-    tableData.value = res.data as [];
-    pagination.itemCount = tableData.value.length;
-		endLoading();
-	}
+	const res = await selectByCondition_1(pagination.page as number, pagination.pageSize as number, conditionParams);
+	tableData.value = res.data as [];
+  pagination.itemCount = Number(res.total);
+	endLoading();
 }
+
 function init() {
 	searchCondition();
 }
 // 在条件改变时立即触发搜索
 watch(conditionParams, () => {
 	if (Object.values(conditionParams).every(value => value === '' || value === null)) {
-    // 如果所有条件参数都为空，则查询所有数据
-    searchCondition();
-  }
-	  searchCondition();
+		// 如果所有条件参数都为空，则查询所有数据
+		searchCondition();
+	}
+	searchCondition();
 });
 // 初始化
 init();
@@ -196,7 +186,7 @@ async function deleteTableData() {
 	s.value = checkedRowKeysRef.value
 	if (ids.length !== 0) {
 		for (const id of ids) {
-		await	deleteById(id as number).then((res)=>{
+			await deleteById(id as number).then((res) => {
 			})
 		}
 		window.$message?.success('删除成功!');