修复表格组件watch分页数据的currentpage的逻辑错误;更新在不开启分页查询的时候的查询方式;修复queryTableData方法的逻辑错误;事件分析页面更新按事件名查询功能

src/components/Table.vue

@@ -2,7 +2,7 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-08-20 18:16:18
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-09-13 15:11:03
+ * @LastEditTime: 2024-09-13 18:07:38
  * @FilePath: \Game-Backstage-Management-System\src\components\Table.vue
  * @Description: 
  * 
@@ -12,6 +12,7 @@ import type { PropsParams, TablePaginationSetting } from '@/types/table'
 import type { ReqConfig } from '@/types/dataAnalysis'
 import { FilterType, FieldSpecialEffectType } from '@/types/table'
 import { initLoadResouce } from '@/utils/resource'
+import { fuzzySearch } from '@/utils/common'
 
 import { computed, onMounted, reactive, ref, toRaw, watch } from 'vue'
 import { useTable } from '@/hooks/useTable'
@@ -53,6 +54,9 @@ const loading = ref(false)
 // 表格数据
 const tableData: Array<any> = reactive([])
 
+// 备份表格数据，用于在不分页查询的时候，恢复数据
+const backupTableData: Array<any> = []
+
 // 查询表单的数据
 const queryFormData = reactive<{ [key: string]: any }>({})
 
@@ -150,6 +154,7 @@ const getData = () => {
         getTableData(reqconfig.url, reqconfig.otherOptions, props.openPageQuery)
           .then(() => {
             emits('loadSuccess', tableData)
+            backupTableData.splice(0, backupTableData.length, ...tableData)
             resolve(true)
           })
           .catch((err) => {
@@ -203,9 +208,22 @@ const resetTableData = () => {
 const queryTableData = () => {
   if (props.requestConfig) {
     reqconfig.otherOptions = { ...props.requestConfig.otherOptions, ...queryFormData }
-    getData()
-  } else {
-    throw new Error('no match requestConfig')
+  }
+  if (props.openPageQuery) getData()
+  else {
+    let filteredTable = []
+    filteredTable = backupTableData.filter((item) => {
+      let state = true
+      for (let [k, v] of Object.entries(queryFormData)) {
+        if (!fuzzySearch(v, item[k])) {
+          state = false
+          break
+        }
+      }
+      return state
+    })
+
+    tableData.splice(0, tableData.length, ...filteredTable)
   }
 }
 
@@ -268,34 +286,48 @@ const tableCellStyle = (info: any) => {
 // 根据分页大小的切换来更新数据
 // 这里将他赋值，用于根据传入的配置来选择是否开启该监听
 /**
- * @description: 监听litmit，currentpage，gid的变化，改变后去重新请求数据
+ * @description: 监听litmit，currentpage的变化，改变后去重新请求数据
  * 如果是limit的变化，则需要把当前页置为1
  *
  *  对于Gid需要去监听props的，而不是本地的，因为是外部的改变
  * @return {*}
  */
 const changePageLimit = watch(
-  () => [
-    paginationConfig2.limit,
-    props.requestConfig?.otherOptions.gid,
-    paginationConfig2.currentPage
-  ],
-  ([newLimit, newGid], [oldLimit, oldGid]) => {
+  () => [paginationConfig2.limit, paginationConfig2.currentPage],
+  ([newLimit, newCurPage], [oldLimit, oldCruPage]) => {
     if (newLimit != oldLimit) {
       // 需要给分页按钮加上:current-page.sync="current_page" 配置，不然不生效
       // 当改变每页大小时把之前的缓存全部清除，重新开始
       paginationConfig2.currentPage = 1
       // resetTableData()
     }
-    if (newGid != oldGid) reqconfig.otherOptions.gid = newGid
 
-    if (newLimit != oldLimit || !tableData[paginationConfig2.currentPage] || newGid != oldGid) {
+    if (newCurPage != oldCruPage) paginationConfig2.currentPage = newCurPage
+
+    // if (newGid != oldGid) reqconfig.otherOptions.gid = newGid
+    // || newGid != oldGid
+
+    if (newLimit != oldLimit || !tableData[paginationConfig2.currentPage]) {
       getData()
     }
   },
   { deep: true }
 )
 
+/**
+ * @description: 监听gid的变化，重新请求数据，这里很奇怪，跟上面的limit和page放到一起不起作用
+ * @return {*}
+ */
+watch(
+  () => props.requestConfig?.otherOptions.gid,
+  (newGid, oldGid) => {
+    if (newGid != oldGid) {
+      reqconfig.otherOptions.gid = newGid
+      getData()
+    }
+  }
+)
+
 // 监听传入的datalist的变化，然后去更新数据
 const changeDataList = watch(
   () => [props.dataList],
@@ -430,9 +462,9 @@ onMounted(() => {
   if (props.loadingState !== undefined) {
     loading.value = props.loadingState
   }
-  if (!props.openPageQuery) {
-    getData()
-  }
+  // if (!props.openPageQuery) {
+  //   getData()
+  // }
   // 去加载所有需要的资源
   initLoadResouce(resourceInfo).then((data) => {
     Object.assign(blobUrlInfo, data)

src/hooks/usePage.ts

@@ -20,6 +20,7 @@ export function usePage() {
 
     onActivated(() => {
       const currentData = watchData()
+
       if (!compareWatchData(bakcupData, currentData)) {
         cb(...currentData)
       }

src/hooks/useTable.ts

@@ -2,7 +2,7 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-08-20 17:15:49
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-09-11 16:13:14
+ * @LastEditTime: 2024-09-13 17:09:30
  * @FilePath: \Game-Backstage-Management-System\src\hooks\useTable.ts
  * @Description:
  *
@@ -29,7 +29,7 @@ export function useTable(tableData: Array<any>, paginationSetting: TablePaginati
           if (isPagination) {
             tableData[paginationSetting.currentPage] = data
           } else {
-            if (data.length > 0) tableData.splice(0, tableData.length, ...data)
+            if (data && data.length > 0) tableData.splice(0, tableData.length, ...data)
           }
 
           // 如果有的接口没有返回count属性，就需要自己写

src/utils/common/index.ts

@@ -2,7 +2,7 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-08-26 15:46:42
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-09-11 15:38:12
+ * @LastEditTime: 2024-09-13 17:35:33
  * @FilePath: \Game-Backstage-Management-System\src\utils\common\index.ts
  * @Description:
  *
@@ -147,3 +147,15 @@ export const saveWatchData = (data: any, store: any) => {
 export const compareWatchData = (data: any, store: any): boolean => {
   return JSON.stringify(data) === JSON.stringify(store)
 }
+
+/**
+ * @description:   模糊查询
+ * @param {string} pattern 需要匹配的模式，即正则表达式
+ * @param {string} text   需要被搜索的目标字符串
+ * @param {boolean} matchCase 是否区分大小写，默认为true，即不区分大小写
+ * @return {boolean} 返回匹配结果
+ */
+export const fuzzySearch = (pattern: string, text: string, matchCase: boolean = true): boolean => {
+  const regex = new RegExp(pattern, matchCase ? 'i' : '') // 'i' 标志表示忽略大小写
+  return regex.test(text)
+}

src/views/Home/Analysis/EventAnalysisTable.vue

@@ -7,7 +7,12 @@ import { useCommonStore } from '@/stores/useCommon'
 import { resetTimeToMidnight } from '@/utils/common'
 
 import type { ReqConfig } from '@/types/dataAnalysis'
-import { type TablePaginationSetting, type TableFieldInfo } from '@/types/table'
+import {
+  type TablePaginationSetting,
+  type TableFieldInfo,
+  type QueryInfo,
+  FilterType
+} from '@/types/table'
 import router from '@/router'
 
 import { usePage } from '@/hooks/usePage'
@@ -16,7 +21,7 @@ const { watchPageChange } = usePage()
 const { AllApi } = useRequest()
 const { selectInfo } = useCommonStore()
 
-const eventTable = ref()
+const eventTable = ref<InstanceType<typeof Table>>()
 
 // 主要为了给面包屑导航提供信息
 const emits = defineEmits(['enterDetail'])
@@ -89,6 +94,15 @@ const requestConfig = reactive<ReqConfig>({
   }
 })
 
+// 事件表格的上方查询字段信息
+const eventTableFilterInfo: Array<QueryInfo> = [
+  {
+    name: 'actionName',
+    label: '',
+    type: FilterType.INPUT,
+    placeholder: '输入事件名查询'
+  }
+]
 /**
  * @description: 查看详情
  * @param {*} row 行信息
@@ -108,11 +122,6 @@ const viewDetails = (row: any) => {
 }
 
 /**
- * @description: 监听事件变化，去重新请求数据
- * @return {*}
- */
-
-/**
  * @description: 更新时间
  * @param {*} startTime 开始时间
  * @param {*} endTime 结束时间
@@ -146,7 +155,9 @@ watchPageChange(() => [props.startTime, props.endTime], backupDate, updateDate)
         ref="eventTable"
         :need-rowindex="false"
         :request-config="requestConfig"
-        :open-page-query="true"
+        :open-page-query="false"
+        :open-filter-query="true"
+        :query-info="eventTableFilterInfo"
         :pagination-config="pagingConfig"
         :table-fields-info="tableFieldsInfo"
         :need-left-tools="false"
@@ -168,6 +179,8 @@ watchPageChange(() => [props.startTime, props.endTime], backupDate, updateDate)
 <style scoped>
 .eventTable {
   width: 100%;
+  box-sizing: border-box;
+  padding: 0 24px;
   background-color: white;
 }
 

src/views/Home/InfoManage/GameManageView.vue

@@ -13,7 +13,7 @@ import { useRequest } from '@/hooks/useRequest'
 
 const { AllApi } = useRequest()
 
-const gameTableRef = ref()
+const gameTableRef = ref<InstanceType<typeof Table>>()
 const gameDialogRef = ref()
 
 // 配置请求参数
@@ -225,8 +225,10 @@ const handleEdit = (row: any) => {
 }
 
 const formSub = () => {
-  gameTableRef.value.getData()
+  gameTableRef.value?.getData()
 }
+
+gameTableRef.value?.getData()
 </script>
 <template>
   <div class="gameMangeBox">