fix(合并master分支，修复Table组件查询BUG): 合并分支，修复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-26
- * @FilePath: \SqueezeTheBus c:\Users\NINGMEI\Desktop\Manage\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: 
  * 
 -->
@@ -174,6 +174,7 @@ const loadTableData = async (): Promise<boolean> => {
   console.trace()
   return new Promise(async (resolve, reject) => {
     loading.value = true
+    // 如果是直接传入的数据
     if (props.dataList) {
       tableData.splice(0, tableData.length, ...props.dataList)
 
@@ -182,6 +183,7 @@ const loadTableData = async (): Promise<boolean> => {
 
       resolve(true)
     } else {
+      // 如果是需要表格自己请求数据的
       if (props.requestConfig) {
         try {
           // 如果开启了分页查询，那么要计算出需要展示的页码位置所对应的偏移量
@@ -193,6 +195,7 @@ const loadTableData = async (): Promise<boolean> => {
           }
           // console.log(reqconfig.otherOptions)
           await getTableData(reqconfig.url, reqconfig.otherOptions, props.openPageQuery)
+
           backupTableData.splice(0, backupTableData.length, ...tableData)
           resolve(true)
         } catch (err) {
@@ -284,6 +287,9 @@ const queryTableData = () => {
     // console.log(props.requestConfig.otherOptions, queryFormData)
     // console.log('-----------')
     reqconfig.otherOptions = { ...props.requestConfig.otherOptions, ...queryFormData }
+    // 需要在查询前清除掉目前的数据，不然会导致之前缓存的数据混入
+    //  比如第一页已经缓存了，在第二页重新查询，在切回第一页，还是显示查询前的数据，因为缓存没被清除
+    tableData.splice(0, tableData.length)
     getData()
   } else {
     let filteredTable: any[]
@@ -299,7 +305,7 @@ const queryTableData = () => {
       }
       return state
     })
-
+    paginationConfig.total = filteredTable.length
     tableData.splice(0, tableData.length, ...filteredTable)
   }
 }
@@ -308,24 +314,24 @@ const queryTableData = () => {
 const throttleQueryTableData = throttleFunc(queryTableData, throttleTime)
 
 /**
- * @description: 重置整个查询表单，重置后，再请求一次全部表格
- * @param needQuery 是否需要重新查询，默认为true，如果为false，则不重新查询
+ * 重置查询表单参数
  */
-const resetQueryForm = (needQuery: boolean = true) => {
-  // 重置自定义筛选字段的值
-  initCustomFilterInfo(customFieldsList)
-  // 使用函数返回保存的备份信息，这样可以正确的给queryformdata赋值
-  // JSON.stringify()第二个参数可以用来处理undefined的情况，第一个参数设置为_可以避免ts检查
-  function resetFormData() {
-    return JSON.parse(
-      JSON.stringify(backupQueryFormData, (_, v) => (typeof v === 'undefined' ? '' : v))
-    )
-  }
-
-  Object.assign(queryFormData, resetFormData())
+const resetQueryFormData = () => {
+  let data = JSON.parse(
+    JSON.stringify(backupQueryFormData, (_, v) => (typeof v === 'undefined' ? '' : v))
+  )
+  Object.assign(queryFormData, data)
   reqconfig.otherOptions = backupReqOtherOptions // 要把请求的参数也重置一次，不然切换平台等操作，会带着原来的查询参数请求
+}
 
-  if (needQuery) queryTableData()
+/**
+ * @description: 重置整个查询表单，重置后，再请求一次全部表格
+ * @param {*} formEl  表单对象
+ * @return {*}
+ */
+const resetQueryForm = () => {
+  resetQueryFormData()
+  queryTableData()
 }
 
 // 把重置方法包装一下，节流
@@ -388,37 +394,56 @@ const tableCellStyle = (info: any) => {
  * 如果是limit的变化，则需要把当前页置为1
 
  */
-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()
@@ -432,7 +457,8 @@ const watchPf = watch(
   () => props.requestConfig?.otherOptions.pf,
   (newPf, oldPf) => {
     if (newPf != oldPf) {
-      resetQueryForm(false)
+      // resetQueryForm(false)
+      resetQueryFormData()
       reqconfig.otherOptions.pf = newPf
       getData()
     }
@@ -444,7 +470,8 @@ const watchPf = watch(
 const changeDataList = watch(
   () => [props.dataList],
   () => {
-    resetQueryForm(false)
+    // resetQueryForm(false)
+    resetQueryFormData()
     getData()
   },
   {
@@ -456,7 +483,8 @@ const changeDataList = watch(
 const watchDateChange = watch(
   () => [props.requestConfig?.otherOptions.startTime, props.requestConfig?.otherOptions.endTime],
   () => {
-    resetQueryForm(false)
+    // resetQueryForm(false)
+    resetQueryFormData()
     getData()
   },
   { deep: true }
@@ -513,7 +541,8 @@ const initFormData = () => {
  * @param {*} data 获取到的数据
  */
 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'
@@ -532,7 +561,8 @@ const deleteRow = (url: string, fieldsInfo: any) => {
     .post(url, { ...fieldsInfo })
     .then((data) => {
       analysisResCode(data).then(() => {
-        resetQueryForm(false)
+        // resetQueryForm(false)
+        resetQueryFormData()
         getData()
       })
     })
@@ -623,8 +653,8 @@ onMounted(() => {
               class="filterItem"
             >
               <el-input
-                :placeholder="item.placeholder"
                 clearable
+                :placeholder="item.placeholder"
                 v-model="queryFormData[item.name]"
               />
             </el-form-item>
@@ -639,6 +669,7 @@ onMounted(() => {
                 :placeholder="item.placeholder"
                 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>