fix(修复Table组件): 修复表格查询时的BUG

表格查询时，如果切换页码后查询，请求参数会被重置，导致查询结果错误

src/components/Table.vue

@@ -2,8 +2,8 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-08-20 18:16:18
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-11-06 17:55:04
- * @FilePath: \Quantity-Creation-Management-Systemc:\Users\NINGMEI\Desktop\Game-Backstage-Management-System\src\components\Table.vue
+ * @LastEditTime: 2024-11-27
+ * @FilePath: \SqueezeTheBusc:\Users\NINGMEI\Desktop\Manage\Game-Backstage-Management-System\src\components\Table.vue
  * @Description: 
  * 
 -->
@@ -251,7 +251,7 @@ const queryTableData = () => {
       }
       return state
     })
-
+    paginationConfig.total = filteredTable.length
     tableData.splice(0, tableData.length, ...filteredTable)
   }
 }
@@ -260,23 +260,24 @@ const queryTableData = () => {
 const throttleQueryTableData = throttleFunc(queryTableData, throttleTime)
 
 /**
+ * 重置查询表单参数
+ */
+const resetQueryFormData = () => {
+  let data = JSON.parse(
+    JSON.stringify(backupQueryFormData, (_, v) => (typeof v === 'undefined' ? '' : v))
+  )
+  Object.assign(queryFormData, data)
+  reqconfig.otherOptions = backupReqOtherOptions // 要把请求的参数也重置一次，不然切换平台等操作，会带着原来的查询参数请求
+}
+
+/**
  * @description: 重置整个查询表单，重置后，再请求一次全部表格
  * @param {*} formEl  表单对象
  * @return {*}
  */
-const resetQueryForm = (neewQuery: boolean = true) => {
-  // 使用函数返回保存的备份信息，这样可以正确的给queryformdata赋值
-  // JSON.stringify()第二个参数可以用来处理undefined的情况，第一个参数设置为_可以避免ts检查
-  function resetFormData() {
-    let data = JSON.parse(
-      JSON.stringify(backupQueryFormData, (_, v) => (typeof v === 'undefined' ? '' : v))
-    )
-    return data
-  }
-  Object.assign(queryFormData, resetFormData())
-  reqconfig.otherOptions = backupReqOtherOptions // 要把请求的参数也重置一次，不然切换平台等操作，会带着原来的查询参数请求
-
-  if (neewQuery) queryTableData()
+const resetQueryForm = () => {
+  resetQueryFormData()
+  queryTableData()
 }
 
 // 把重置方法包装一下，节流
@@ -332,37 +333,56 @@ const tableCellStyle = (info: any) => {
  * 如果是limit的变化，则需要把当前页置为1
  * @return {*}
  */
-watch(
-  () => [paginationConfig.limit, paginationConfig.currentPage],
-  ([newLimit], [oldLimit]) => {
-    resetQueryForm(false)
+const watchLimit = watch(
+  () => paginationConfig.limit,
+  (newLimit, oldLimit) => {
+    // resetQueryForm(false)
 
-    if (newLimit != oldLimit) {
+    if (newLimit !== oldLimit) {
+      resetQueryFormData()
       // 需要给分页按钮加上:current-page.sync="current_page" 配置，不然不生效
       // 当改变每页大小时把之前的缓存全部清除，重新开始
-      paginationConfig.currentPage = 1
+      if (paginationConfig.currentPage !== 1) {
+        paginationConfig.currentPage = 1
+      } else {
+        getData()
+      }
     }
+  },
+  { deep: true }
+)
 
-    // 开启分页查询的情况下，改变limit或者没有这页的缓存的情况下，重新请求
-    if (
-      props.openPageQuery &&
-      (newLimit !== oldLimit || !tableData[paginationConfig.currentPage])
-    ) {
+/**
+ * 监听currentpage的变化，如果开启了分页查询，并且当前页发生变化，并且当前页的数据不存在，则重新请求数据
+ */
+const watchCurPage = watch(
+  () => paginationConfig.currentPage,
+  (newPage, oldPage) => {
+    if (newPage !== oldPage && !tableData[newPage]) {
       getData()
     }
   },
-  { deep: true }
+  {
+    deep: true
+  }
 )
 
+// 如果没有开启分页查询，直接关闭这两个监听
+if (!props.openPageQuery) {
+  watchLimit()
+  watchCurPage()
+}
+
 /**
- * @description: 监听gid的变化，重新请求数据，这里很奇怪，跟上面的limit和page放到一起不起作用
+ * @description: 监听gid的变化，重新请求数据
  * @return {*}
  */
 watch(
   () => props.requestConfig?.otherOptions.gid,
   (newGid, oldGid) => {
     if (newGid != oldGid) {
-      resetQueryForm(false)
+      // resetQueryForm(false)
+      resetQueryFormData()
       reqconfig.otherOptions.gid = newGid
 
       getData()
@@ -376,7 +396,8 @@ const watchPf = watch(
   () => props.requestConfig?.otherOptions.pf,
   (newPf, oldPf) => {
     if (newPf != oldPf) {
-      resetQueryForm(false)
+      // resetQueryForm(false)
+      resetQueryFormData()
       reqconfig.otherOptions.pf = newPf
       getData()
     }
@@ -388,7 +409,8 @@ const watchPf = watch(
 const changeDataList = watch(
   () => [props.dataList],
   () => {
-    resetQueryForm(false)
+    // resetQueryForm(false)
+    resetQueryFormData()
     getData()
   },
   {
@@ -400,7 +422,8 @@ const changeDataList = watch(
 const watchDateChange = watch(
   () => [props.requestConfig?.otherOptions.startTime, props.requestConfig?.otherOptions.endTime],
   () => {
-    resetQueryForm(false)
+    // resetQueryForm(false)
+    resetQueryFormData()
     getData()
   },
   { deep: true }
@@ -462,7 +485,8 @@ const initFormData = () => {
  * @return {*}
  */
 const tableSortChange = (data: { column: any; prop: string; order: any }) => {
-  resetQueryForm(false)
+  // resetQueryForm(false)
+  resetQueryFormData()
   let { order } = { ...data }
   if (order === 'ascending') order = 'asc'
   else if (order === 'descending') order = 'desc'
@@ -482,7 +506,8 @@ const deleteRow = (url: string, filedsInfo: any) => {
     .post(url, { ...filedsInfo })
     .then((data) => {
       analysisResCode(data).then(() => {
-        resetQueryForm(false)
+        // resetQueryForm(false)
+        resetQueryFormData()
         getData()
       })
     })
@@ -565,10 +590,14 @@ onMounted(() => {
             <el-form-item
               @keyup.enter.native="throttleQueryTableData"
               :label="item.label"
-              v-if="item.valueType === 'string' || item.valueType === 'float'"
+              v-if="item.valueType !== 'int'"
               class="filterItem"
             >
-              <el-input clearable v-model="queryFormData[item.name]" />
+              <el-input
+                clearable
+                :placeholder="item.placeholder"
+                v-model="queryFormData[item.name]"
+              />
             </el-form-item>
             <el-form-item
               @keyup.enter.native="throttleQueryTableData"
@@ -580,6 +609,7 @@ onMounted(() => {
                 clearable
                 v-model="queryFormData[item.name]"
                 @input="numberInput(item.name)"
+                :placeholder="item.placeholder"
               />
             </el-form-item>
           </template>

src/components/dataAnalysis/HeaderCard.vue

@@ -146,7 +146,6 @@ const watchRoute = watch(
   () => [router.currentRoute.value],
   () => {
     clearBreadcrumb()
-    console.log('值')
   },
   { deep: true }
 )
@@ -165,7 +164,6 @@ onMounted(() => {
     title: props.title,
     pathName: router.currentRoute.value.name as string
   })
-  console.log(breadcrumbList)
 })
 </script>
 

src/views/Home/Analysis/EventAnalysisTable.vue

@@ -101,7 +101,7 @@ const requestConfig = reactive<ReqConfig>({
 const eventTableFilterInfo: Array<QueryInfo> = [
   {
     name: 'actionName',
-    label: '',
+    label: '事件名',
     type: FilterType.INPUT,
     placeholder: '输入事件名查询'
   }