fix(EventAnalysisDetail组件、Tbale组件): 修复更换游戏后数据显示错误的BUG，更新加载数据逻辑

在详情页组件中，更换游戏，会导致直接在页面内更新数据，而不是回到table页，这样会导致数据渲染错误。
现在更换游戏或者切换平台会直接回到table页。

Table组件的onMounted钩子中，取消了初始化的getData，完全由组件外和监听函数控制加载数据;
loadingState现在会有默认值，更新初始化逻辑;

src/components/Table.vue

@@ -63,7 +63,8 @@ const props = withDefaults(defineProps<PropsParams>(), {
   openPageQuery: false,
   needUpload: false,
   needDownLoad: false,
-  openRemoteQuery: false
+  openRemoteQuery: false,
+  loadingState: false
 })
 
 // 父组件触发的方法
@@ -603,12 +604,14 @@ onMounted(() => {
   initCustomFilterInfo(customFieldsList)
   backupReqOtherOptions = reqConfig.otherOptions // 备份一份请求参数
   // registerWatchProps()
-  if (props.loadingState !== undefined) {
-    loading.value = props.loadingState
-  }
+  // if (props.loadingState !== undefined) {
+  //   loading.value = props.loadingState
+  // }
+  loading.value = props.loadingState
   // 这里会造成有的table页第一次进来刷新两次，因为有的页面gid或者平台等数据会变化，导致请求第二次
   // 但是这里又必须请求一次，因为有的页面数据是没有变化的
-  getData()
+  // 可以直接在没有变化的页面，外部调用getData
+  // getData()
   // 去加载所有需要的资源
   initLoadResource(resourceInfo).then((data) => {
     Object.assign(blobUrlInfo, data)
@@ -661,7 +664,6 @@ onMounted(() => {
           </template>
 
           <!-- 所有选择框 -->
-          <!-- <el-config-provider :value-on-clear="null" :empty-values="[undefined, null]"> -->
           <el-form-item :label="item.label" v-for="item in selectFieldsList" class="filterItem">
             <el-select
               :empty-values="[undefined, null]"
@@ -672,7 +674,6 @@ onMounted(() => {
               <el-option v-for="val in item.otherOption" :label="val.cnName" :value="val.value" />
             </el-select>
           </el-form-item>
-          <!-- </el-config-provider> -->
 
           <!-- 所有日期选择框 -->
           <el-form-item :label="item.label" v-for="item in dateFieldsList" class="filterItem">

src/components/form/CustomFilter.vue

@@ -4,10 +4,11 @@ import { Minus, Plus } from '@element-plus/icons-vue'
 import { reactive } from 'vue'
 
 const props = defineProps<{
-  filter: CustomFilter
-  filterList: Array<FilterItem>
+  filter: CustomFilter // 当前过滤条件
+  filterList: Array<FilterItem> // 过滤条件的值列表
 }>()
 
+// 筛选条件
 const conditionOptions: Array<{
   label: string
   value: any
@@ -34,6 +35,7 @@ const conditionOptions: Array<{
   }
 ]
 
+// 筛选条件列表
 const filterList = reactive<
   Array<{
     filterCondition: string
@@ -41,15 +43,25 @@ const filterList = reactive<
   }>
 >([])
 
+/**
+ * 初始化过滤条件的列表
+ */
 const initFilterList = () => {
   console.log(props.filterList)
   filterList.splice(0, filterList.length, ...props.filterList)
 }
 
-const verifySub = () => {
+/**
+ * 校验提交条件
+ *
+ * 如果校验通过，则返回true
+ *
+ * 如果为空，或者不符合规则，则返回false
+ */
+const verifySub = (): boolean => {
   if (props.filter.valueType === CustomFilterValueType.INPUT && props.filter.valueValid) {
     const func = props.filter.valueValid
-    // 校验不通过或者为空，都视为无效数据
+    // 有任意一条不符合规则，则都不通过
     const result = filterList.find((item) => {
       // 是否有效
       return func(item.value)
@@ -66,21 +78,28 @@ const verifySub = () => {
   return true
 }
 
+/**
+ * 根据传入的格式化函数，对过滤条件的值进行格式化
+ */
 const valueFormat = () => {
   let backupList = JSON.parse(JSON.stringify(filterList)) as Array<{
     filterCondition: string
     value: any
   }>
   let format: any = null
-  if (props.filter.valueType === CustomFilterValueType.INPUT) {
+  // input框格式化
+  if (props.filter.valueType === CustomFilterValueType.INPUT && props.filter.valueFormat) {
     format = props.filter.valueFormat
   }
+  // 这里单独对日期格式的'X'进行处理
+  // 秒级时间戳会返回一个字符串，需要转为数字
   if (
     props.filter.valueType === CustomFilterValueType.DATEPICKER &&
     props.filter.valueFormat === 'X'
   ) {
     format = parseInt
   }
+  // 有格式化函数则进行格式化
   if (format) {
     backupList.map((item) => {
       item.value = format(item.value)
@@ -90,10 +109,16 @@ const valueFormat = () => {
   return backupList
 }
 
-const subCondition = () => {
+/**
+ * 获取格式化后的提交的筛选条件
+ */
+const getSubCondition = () => {
   return valueFormat()
 }
 
+/**
+ * 添加筛选条件
+ */
 const addFilter = () => {
   filterList.push({
     filterCondition: 'gt',
@@ -101,12 +126,16 @@ const addFilter = () => {
   })
 }
 
+/**
+ * 删除筛选条件
+ * @param index 删除的条件索引
+ */
 const delCondition = (index: number) => {
   filterList.splice(index, 1)
 }
 
 defineExpose({
-  subCondition,
+  getSubCondition,
   verifySub,
   initFilterList
 })

src/hooks/useCustomFilter.ts

@@ -127,7 +127,7 @@ export function useCustomFilter(customFilterRef: Ref<CustomFilterRef | undefined
   const confirmCustomFilter = (queryFormData: Reactive<Record<string, any>>) => {
     if (customFilterRef.value && customFilterRef.value.verifySub()) {
       customFilterDialog.value = false
-      let result = customFilterRef.value.subCondition()
+      let result = customFilterRef.value.getSubCondition()
       // 拿到数据后，需要转为查询参数
       queryFormData[activeCustomFilterKey.value] = conversionCustomFilter(result)
       // 保存筛选值

src/views/AppManage/UserConversionDetail.vue

@@ -273,9 +273,8 @@ const throttleReset = throttleFunc(resetForm, 1000)
 const goBack = () => {
   router.push('/appManage/userConversion')
 }
-initFormData()
 
-onMounted(() => {})
+initFormData()
 </script>
 
 <template>

src/views/Home/Analysis/EventAnalysisDetail.vue

@@ -186,15 +186,33 @@ const updateSelectInfo = (gid: string, pf: Array<string>, startTime: string, end
  * @return {*}
  */
 watch(
-  () => [selectInfo.gid, tempMultipleChoice.pf, props.startTime, props.endTime],
-  ([gid, pf, startTime, endTime]) => {
-    updateSelectInfo(gid as string, pf as Array<string>, startTime as string, endTime as string)
+  () => [props.startTime, props.endTime],
+  ([startTime, endTime]) => {
+    updateSelectInfo(
+      selectInfo.gid as string,
+      tempMultipleChoice.pf as Array<string>,
+      startTime as string,
+      endTime as string
+    )
   },
   {
     deep: true,
     immediate: true
   }
 )
+
+/**
+ * 在gid和pf改变的时候，应该回到table页重新加载数据
+ */
+watch(
+  () => [selectInfo.gid, tempMultipleChoice.pf],
+  () => {
+    router.replace({ name: 'EventAnalysisTable' })
+  },
+  {
+    deep: true
+  }
+)
 </script>
 <template>
   <div class="eventDetail">