feat: 前端分页和条件过滤

src/store/caseFlow.ts

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia'
 import { CaseFlowData } from './types'
+import { ListItem } from '@/types/list'
 
 export const useCaseFlowData = defineStore('case-flow-data', {
   state: (): CaseFlowData => ({
@@ -11,7 +12,7 @@ export const useCaseFlowData = defineStore('case-flow-data', {
     getFlowData: state => state.flowData
   },
   actions: {
-    setCaseList(data: Record<string, string>[]) {
+    setCaseList(data: ListItem[]) {
       this.caseList = data
     },
     setFlowData(data: Record<string, string>) {

src/store/types.ts

@@ -1,3 +1,5 @@
+import { ListItem } from '@/types/list'
+
 export type IndexType = {
   showGrid: boolean
   type: string
@@ -48,6 +50,6 @@ export type IndexType = {
 }
 
 export type CaseFlowData = {
-  caseList: Record<string, string>[]
+  caseList: ListItem[]
   flowData: Record<string, string>
 }

src/types/pagination.ts → src/types/list.ts

@@ -9,3 +9,14 @@ export interface PaginationResult<T> {
   total: number
   data: T[]
 }
+
+export interface FilterConditions {
+  name?: string
+  type?: string
+}
+
+export interface ListItem {
+  id: string
+  name: string
+  type: string
+}

src/utils/list.ts

@@ -0,0 +1,24 @@
+import { FilterConditions, ListItem } from '@/types/list'
+
+export function frontendPaginate<T>(items: T[], pageNum: number, pageSize: number): T[] {
+  const startIndex = (pageNum - 1) * pageSize
+  return items.slice(startIndex, startIndex + pageSize)
+}
+
+// 条件过滤
+export function filterItems(items: ListItem[], conditions: FilterConditions): ListItem[] {
+  console.log('items', items.length)
+
+  return items.filter(item => {
+    // 名称筛选 (模糊匹配)
+    if (conditions.name && !item.name.toLowerCase().includes(conditions.name.toLowerCase())) {
+      return false
+    }
+
+    // 状态筛选
+    if (conditions.type && item.type !== conditions.type) {
+      return false
+    }
+    return true
+  })
+}

src/utils/pagination.ts

@@ -1,19 +0,0 @@
-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

@@ -3,22 +3,26 @@
     <div class="card table-search">
       <el-form :model="formInline" label-width="120">
         <el-row :gutter="10">
-          <el-col :span="10">
+          <el-col :span="8">
             <el-form-item label="用例名称">
               <el-input v-model="formInline.name" placeholder="请输入用例名称" clearable />
             </el-form-item>
           </el-col>
-          <el-col :span="10">
+          <el-col :span="8">
             <el-form-item label="用例类型">
-              <el-select v-model="formInline.type" placeholder="请选择类型" clearable>
+              <el-input v-model="formInline.type" placeholder="请输入用例类型" clearable />
+              <!-- <el-select v-model="formInline.type" placeholder="请选择类型" clearable>
                 <el-option label="故障注入" value="1" />
                 <el-option label="普通测试" value="2" />
-              </el-select>
+              </el-select> -->
             </el-form-item>
           </el-col>
-          <el-col :span="4">
+          <el-col :span="8">
             <el-form-item>
-              <el-button type="primary" @click="onSubmit">查询</el-button>
+              <div style="display: flex">
+                <el-button type="primary" @click="handleSearch">查询</el-button>
+                <el-button @click="handleReset">重置</el-button>
+              </div>
             </el-form-item>
           </el-col>
         </el-row>
@@ -69,10 +73,9 @@ import { CaseVO } from '@/api/interface/case'
 import AddDialog from './components/index.vue'
 import { wsClient, wsStatus, useWebSocketManager } from '@/utils/webSocket'
 import { useCaseFlowData } from '@/store/caseFlow'
-import { PaginationParams } from '@/types/pagination'
-import { frontendPaginate } from '@/utils/pagination'
+import { PaginationParams } from '@/types/list'
+import { filterItems, frontendPaginate } from '@/utils/list'
 const { sendMessage } = useWebSocketManager()
-
 const useStoreCaseFlowData = useCaseFlowData()
 // 组件加载完成后发送初始消息
 onMounted(() => {
@@ -99,9 +102,14 @@ const pagination = ref<PaginationParams>({
   pageSize: 10
 })
 
+// 过滤后的数据
+const filteredData = computed(() => {
+  return filterItems(caseList.value, formInline)
+})
+
 // 获取分页后的数据
 const paginatedData = computed(() => {
-  return frontendPaginate(caseList.value, pagination.value.pageNum, pagination.value.pageSize).data
+  return frontendPaginate(filteredData.value, pagination.value.pageNum, pagination.value.pageSize)
 })
 
 /**
@@ -124,7 +132,7 @@ const handleCurrentChange = (val: number) => {
 }
 
 // 总数
-const total = computed(() => caseList.value.length)
+const total = computed(() => filteredData.value.length)
 
 // 保存数据时发送消息
 const saveData = () => {
@@ -147,10 +155,13 @@ const formInline = reactive({
   type: ''
 })
 
-const onSubmit = () => {
-  console.log('submit!')
+const handleSearch = () => {
+  pagination.value.pageNum = 1
+}
+const handleReset = () => {
+  formInline.name = ''
+  formInline.type = ''
 }
-// const tableData: CaseVO[] = caseData.list
 
 // 打开 dialog(新增、查看、编辑)
 const dialogRef = ref<InstanceType<typeof AddDialog> | null>(null)