Selaa lähdekoodia

修复了在切换游戏、平台等操作时,表格的查询条件没有清空的BUG

fxs 7 kuukautta sitten
vanhempi
commit
4a5cbb03a4
3 muutettua tiedostoa jossa 34 lisäystä ja 31 poistoa
  1. 20 27
      src/components/Table.vue
  2. 2 2
      src/hooks/useTable.ts
  3. 12 2
      src/views/Home/InfoManage/GameManageView.vue

+ 20 - 27
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-10-15 11:49:12
- * @FilePath: \Game-Backstage-Management-System\src\components\Table.vue
+ * @LastEditTime: 2024-10-16 11:15:24
+ * @FilePath: \Quantity-Creation-Management-Systemc:\Users\NINGMEI\Desktop\Game-Backstage-Management-System\src\components\Table.vue
  * @Description: 
  * 
 -->
@@ -67,6 +67,9 @@ const queryFormData = reactive<{ [key: string]: any }>({})
 
 const backupQueryFormData = reactive<{ [key: string]: any }>({})
 
+// 备份其他的请求信息
+let backupReqOtherOptions = {}
+
 // 分页数据
 const paginationConfig = reactive<TablePaginationSetting>({
   currentPage: 1,
@@ -235,7 +238,6 @@ const queryTableData = () => {
     reqconfig.otherOptions = { ...props.requestConfig.otherOptions, ...queryFormData }
     getData()
   } else {
-    console.log('执行')
     let filteredTable = []
     // 过滤出来所有符合formData数据的条件
     filteredTable = backupTableData.filter((item) => {
@@ -262,9 +264,7 @@ const throttleQueryTableData = throttleFunc(queryTableData, throttleTime)
  * @param {*} formEl  表单对象
  * @return {*}
  */
-const resetQueryForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-
+const resetQueryForm = (neewQuery: boolean = true) => {
   // 使用函数返回保存的备份信息,这样可以正确的给queryformdata赋值
   // JSON.stringify()第二个参数可以用来处理undefined的情况,第一个参数设置为_可以避免ts检查
   function resetFormData() {
@@ -274,8 +274,9 @@ const resetQueryForm = (formEl: FormInstance | undefined) => {
     return data
   }
   Object.assign(queryFormData, resetFormData())
+  reqconfig.otherOptions = backupReqOtherOptions // 要把请求的参数也重置一次,不然切换平台等操作,会带着原来的查询参数请求
 
-  queryTableData()
+  if (neewQuery) queryTableData()
 }
 
 // 把重置方法包装一下,节流
@@ -334,7 +335,8 @@ const tableCellStyle = (info: any) => {
 watch(
   () => [paginationConfig.limit, paginationConfig.currentPage],
   ([newLimit], [oldLimit]) => {
-    console.log(newLimit, oldLimit)
+    resetQueryForm(false)
+
     if (newLimit != oldLimit) {
       // 需要给分页按钮加上:current-page.sync="current_page" 配置,不然不生效
       // 当改变每页大小时把之前的缓存全部清除,重新开始
@@ -360,6 +362,7 @@ watch(
   () => props.requestConfig?.otherOptions.gid,
   (newGid, oldGid) => {
     if (newGid != oldGid) {
+      resetQueryForm(false)
       reqconfig.otherOptions.gid = newGid
 
       getData()
@@ -373,6 +376,7 @@ const watchPf = watch(
   () => props.requestConfig?.otherOptions.pf,
   (newPf, oldPf) => {
     if (newPf != oldPf) {
+      resetQueryForm(false)
       reqconfig.otherOptions.pf = newPf
       getData()
     }
@@ -384,6 +388,7 @@ const watchPf = watch(
 const changeDataList = watch(
   () => [props.dataList],
   () => {
+    resetQueryForm(false)
     getData()
   },
   {
@@ -395,6 +400,7 @@ const changeDataList = watch(
 const watchDateChange = watch(
   () => [props.requestConfig?.otherOptions.startTime, props.requestConfig?.otherOptions.endTime],
   () => {
+    resetQueryForm(false)
     getData()
   },
   { deep: true }
@@ -456,6 +462,7 @@ const initFormData = () => {
  * @return {*}
  */
 const tableSortChange = (data: { column: any; prop: string; order: any }) => {
+  resetQueryForm(false)
   let { order } = { ...data }
   if (order === 'ascending') order = 'asc'
   else if (order === 'descending') order = 'desc'
@@ -475,6 +482,7 @@ const deleteRow = (url: string, filedsInfo: any) => {
     .post(url, { ...filedsInfo })
     .then((data) => {
       analysisResCode(data).then(() => {
+        resetQueryForm(false)
         getData()
       })
     })
@@ -499,32 +507,21 @@ const outGetTableData = () => {
   return toRaw(tableData).flat()
 }
 
-// const registerWatchProps = () => {
-//   props.watchReqProps?.forEach((item) => {
-//     watch(
-//       () => props.requestConfig?.otherOptions?.[item],
-//       () => {
-//         // getData()
-//         reqconfig.otherOptions[item] = props.requestConfig?.otherOptions?.[item]
-//       },
-//       { deep: true }
-//     )
-//   })
-// }
-
 // 定义暴露出去的方法
 defineExpose({
   getData,
   resetTableData,
   deleteRow,
   downLoadTable,
-  outGetTableData
+  outGetTableData,
+  resetQueryForm
 })
 
 onMounted(() => {
   initpageConfig()
   initReqConfig()
   initFormData()
+  backupReqOtherOptions = reqconfig.otherOptions // 备份一份请求参数
   // registerWatchProps()
   if (props.loadingState !== undefined) {
     loading.value = props.loadingState
@@ -600,11 +597,7 @@ onMounted(() => {
             <el-button class="queryBtn" color="#165dff" @click="throttleQueryTableData">
               <el-icon><Search /></el-icon>查询
             </el-button>
-            <el-button
-              class="refreshBtn"
-              color="#f2f3f5"
-              @click="throttleResetQueryForm(queryFormRef)"
-            >
+            <el-button class="refreshBtn" color="#f2f3f5" @click="throttleResetQueryForm()">
               <el-icon><RefreshRight /></el-icon>重置
             </el-button>
           </div>

+ 2 - 2
src/hooks/useTable.ts

@@ -2,8 +2,8 @@
  * @Author: fxs bjnsfxs@163.com
  * @Date: 2024-08-20 17:15:49
  * @LastEditors: fxs bjnsfxs@163.com
- * @LastEditTime: 2024-10-14 17:26:28
- * @FilePath: \Game-Backstage-Management-System\src\hooks\useTable.ts
+ * @LastEditTime: 2024-10-16 10:54:55
+ * @FilePath: \Quantity-Creation-Management-Systemc:\Users\NINGMEI\Desktop\Game-Backstage-Management-System\src\hooks\useTable.ts
  * @Description:
  *
  */

+ 12 - 2
src/views/Home/InfoManage/GameManageView.vue

@@ -6,14 +6,14 @@ import type { FormField } from '@/types/form'
 
 import { FormFieldType } from '@/types/form'
 import { FilterType } from '@/types/table'
-import { onMounted, reactive, ref } from 'vue'
+import { onMounted, reactive, ref, watch } from 'vue'
 import { useRequest } from '@/hooks/useRequest'
 import { useCommonStore } from '@/stores/useCommon'
 
 import Dialog from '@/components/common/Dialog.vue'
 import Table from '@/components/Table.vue'
 
-const { allGameInfo } = useCommonStore()
+const { allGameInfo, selectInfo } = useCommonStore()
 const { AllApi } = useRequest()
 
 const gameTableRef = ref<InstanceType<typeof Table>>()
@@ -255,6 +255,16 @@ const formSub = (formData: any, type: number) => {
   gameTableRef.value?.getData()
 }
 
+watch(
+  () => selectInfo.gid,
+  () => {
+    gameTableRef.value?.resetQueryForm(false)
+  },
+  {
+    deep: true
+  }
+)
+
 onMounted(() => {
   gameTableRef.value?.getData()
 })