feat: 处理切换刷新问题

apps/bigmember_pc/src/router/routers.js

@@ -45,6 +45,9 @@ export default [
     path: '/data_pack',
     name: 'data_pack',
     component: () => import('@/views/datapack/Home.vue'),
+    meta: {
+      skip: true
+    },
     children: [
       {
         path: '',
@@ -54,13 +57,19 @@ export default [
       {
         path: 'index',
         name: 'data_pack_index',
-        component: () => import('@/views/datapack/pages/Home.vue')
+        component: () => import('@/views/datapack/pages/Home.vue'),
+        meta: {
+          skip: true
+        },
       },
       // 数据导出记录
       {
         path: 'history',
         name: 'data_pack_history',
-        component: () => import('@/views/datapack/pages/History.vue')
+        component: () => import('@/views/datapack/pages/History.vue'),
+        meta: {
+          skip: true
+        },
       },
     ]
   },

apps/bigmember_pc/src/views/datapack/Home.vue

@@ -1,6 +1,6 @@
 <script setup>
 
-import { getCurrentInstance, onMounted, watch, ref } from 'vue'
+import { getCurrentInstance, onMounted, watch, ref, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router/composables'
 import { TabPane, Tabs} from 'element-ui'
 import { initPageModel } from '@/views/datapack/model/home'
@@ -9,6 +9,9 @@ const router = useRouter()
 const route = useRoute()
 
 const activeTab = ref('')
+const activeKey = computed(() => {
+  return activeTab.value + '_' + Date.now()
+})
 const tabs = [
   { path: 'index', label: '我的数据流量包' },
   { path: 'history', label: '数据导出记录' }
@@ -23,6 +26,7 @@ function handleTabClick(tab) {
 // 监听路由变化，更新激活标签
 watch(route, (to) => {
   activeTab.value = to.path.replace('/data_pack/', '')
+  initPageModel()
 })
 
 // 在组件挂载时初始化激活标签
@@ -44,7 +48,7 @@ onMounted(() => {
           :label="tab.label"
           :name="tab.path"
         ></el-tab-pane>
-        <router-view></router-view>
+        <router-view :key='activeKey'></router-view>
       </el-tabs>
     </div>
   </div>

apps/bigmember_pc/src/views/datapack/model/history.js

@@ -6,11 +6,20 @@ import SelectSelector from '@/components/filter-items/SelectSelector.vue'
 import PersonStaffsSelector from '@/components/filter-items/PersonStaffsSelector.vue'
 import TimeDropdown from '@/components/selector/timeDropdown.vue'
 
-const filters = ref({
+// 定义默认值
+const defaultFilters = {
   staffs: '',
   type: '',
   selectTime: ''
-})
+}
+
+// 创建 ref
+const filters = ref({ ...defaultFilters })
+
+// 重置值的方法
+const resetFilters = () => {
+  filters.value = { ...defaultFilters }
+}
 
 const computedFilters = computed(() => {
   const isExactTime = /^\d+/.test(filters.value.selectTime)
@@ -178,5 +187,6 @@ export {
   onChangePageSize,
   onChangePageNum,
   usePowerRef,
-  openDistribute
+  openDistribute,
+  resetFilters
 }

apps/bigmember_pc/src/views/datapack/model/home-filter.js

@@ -6,12 +6,21 @@ import SelectSelector from '@/components/filter-items/SelectSelector.vue'
 import PersonStaffsSelector from '@/components/filter-items/PersonStaffsSelector.vue'
 import TimeDropdown from '@/components/selector/timeDropdown.vue'
 
-const filters = ref({
+// 定义默认值
+const defaultFilters = {
   staffs: '',
   account: '',
   type: '',
   selectTime: ''
-})
+}
+
+// 创建 ref
+const filters = ref({ ...defaultFilters })
+
+// 重置值的方法
+const resetFilters = () => {
+  filters.value = { ...defaultFilters }
+}
 
 const computedFilters = computed(() => {
   const isExactTime = /^\d+/.test(filters.value.selectTime)
@@ -207,5 +216,6 @@ export {
   onChangePageSize,
   onChangePageNum,
   usePowerRef,
-  openDistribute
+  openDistribute,
+  resetFilters
 }

apps/bigmember_pc/src/views/datapack/model/home.js

@@ -101,7 +101,7 @@ async function chargeDetail(params = {}) {
     }
     chargeList.value.isAdmin = res.isAdmin || false
     chargeList.value.list =
-      res.list.map((v) => {
+      (res.list || []).map((v) => {
         return Object.assign(
           {
             operator: '-'

apps/bigmember_pc/src/views/datapack/pages/History.vue

@@ -20,8 +20,15 @@ import {
   onChangePageSize,
   onChangePageNum,
   usePowerRef,
-  openDistribute
+  openDistribute,
+  resetFilters
 } from '@/views/datapack/model/history'
+import { onMounted } from 'vue'
+
+
+onMounted(() => {
+  resetFilters()
+})
 </script>
 
 <template>

apps/bigmember_pc/src/views/datapack/pages/Home.vue

@@ -19,15 +19,21 @@ import {
   onChangePageSize,
   onChangePageNum,
   usePowerRef,
-  openDistribute
+  openDistribute,
+  resetFilters
 } from '@/views/datapack/model/home-filter'
-import { getCurrentInstance } from 'vue'
+import { getCurrentInstance, onMounted } from 'vue'
 
 // 联系客服
 const that = getCurrentInstance().proxy
 function openCustomer() {
   that?.contactCustomer(that)
 }
+
+onMounted(() => {
+  resetFilters()
+})
+
 </script>
 
 <template>