feat: 实现前端分页

src/types/pagination.ts

@@ -0,0 +1,11 @@
+export interface PaginationParams {
+  pageNum: number
+  pageSize: number
+}
+
+export interface PaginationResult<T> {
+  pageNum: number
+  pageSize: number
+  total: number
+  data: T[]
+}

src/utils/pagination.ts

@@ -0,0 +1,19 @@
+import { PaginationResult } from '@/types/pagination'
+
+export function frontendPaginate<T>(
+  items: T[],
+  pageNum: number,
+  pageSize: number
+): PaginationResult<T> {
+  const total = items.length
+  const startIndex = (pageNum - 1) * pageSize
+  const endIndex = startIndex + pageSize
+  const paginatedData = items.slice(startIndex, endIndex)
+
+  return {
+    pageNum,
+    pageSize,
+    total,
+    data: paginatedData
+  }
+}

src/views/test/index.vue

@@ -32,7 +32,7 @@
           <el-button type="danger" icon="Delete" plain> 删除 </el-button>
         </div>
       </div>
-      <el-table :data="caseList" border ref="tableRef" show-overflow-tooltip>
+      <el-table :data="paginatedData" border ref="tableRef" show-overflow-tooltip>
         <el-table-column type="index" label="序号" width="60" />
         <el-table-column prop="id" label="用例编号" width="300" />
         <el-table-column prop="name" label="用例名称" width="180" />
@@ -50,29 +50,28 @@
           </template>
         </el-table-column>
       </el-table>
-      <!-- <div> -->
       <!-- 分页组件 -->
       <el-pagination
         :background="true"
-        :current-page="pageable.pageNum"
-        :page-size="pageable.pageSize"
+        :current-page="pagination.pageNum"
+        :page-size="pagination.pageSize"
         :page-sizes="[10, 25, 50, 100]"
-        :total="pageable.total"
+        :total="total"
         layout="total, sizes, prev, pager, next, jumper"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange" />
     </div>
-    <!-- </div> -->
     <AddDialog ref="dialogRef" />
   </div>
 </template>
 <script setup lang="ts">
 import { CaseVO } from '@/api/interface/case'
 import AddDialog from './components/index.vue'
-// import caseData from '../data'
-import { wsClient, wsStatus, lastMessage, useWebSocketManager } from '@/utils/webSocket'
+import { wsClient, wsStatus, useWebSocketManager } from '@/utils/webSocket'
 import { useCaseFlowData } from '@/store/caseFlow'
-const { sendMessage, handlerReceiveMessage } = useWebSocketManager()
+import { PaginationParams } from '@/types/pagination'
+import { frontendPaginate } from '@/utils/pagination'
+const { sendMessage } = useWebSocketManager()
 
 const useStoreCaseFlowData = useCaseFlowData()
 // 组件加载完成后发送初始消息
@@ -94,6 +93,39 @@ const caseList = computed(() => {
   return useStoreCaseFlowData.getCaseList
 })
 
+// 分页参数
+const pagination = ref<PaginationParams>({
+  pageNum: 1,
+  pageSize: 10
+})
+
+// 获取分页后的数据
+const paginatedData = computed(() => {
+  return frontendPaginate(caseList.value, pagination.value.pageNum, pagination.value.pageSize).data
+})
+
+/**
+ * @description 每页条数改变
+ * @param {Number} val 当前条数
+ * @return void
+ * */
+const handleSizeChange = (val: number) => {
+  pagination.value.pageSize = val
+  pagination.value.pageNum = 1 // 重置到第一页
+}
+
+/**
+ * @description 当前页改变
+ * @param {Number} val 当前页
+ * @return void
+ * */
+const handleCurrentChange = (val: number) => {
+  pagination.value.pageNum = val
+}
+
+// 总数
+const total = computed(() => caseList.value.length)
+
 // 保存数据时发送消息
 const saveData = () => {
   if (wsClient.value) {
@@ -109,33 +141,12 @@ const saveData = () => {
 
 const router = useRouter()
 const tableRef = ref()
-const pageable = {
-  // 当前页数
-  pageNum: 1,
-  // 每页显示条数
-  pageSize: 10,
-  // 总条数
-  total: 0
-}
+
 const formInline = reactive({
   name: '',
   type: ''
 })
 
-/**
- * @description 每页条数改变
- * @param {Number} val 当前条数
- * @return void
- * */
-const handleSizeChange = (_val: number) => {}
-
-/**
- * @description 当前页改变
- * @param {Number} val 当前页
- * @return void
- * */
-const handleCurrentChange = (_val: number) => {}
-
 const onSubmit = () => {
   console.log('submit!')
 }