Knowledge_Test_Vue/src/views/UserStatistics.vue

<!-- UserStatistics.vue -->
<template>
  <div class="user-statistics">
    <!-- 用户统计数据搜索组件 -->
    <UserStatisticsSearch @search="handleSearch" />
    <!-- 用户统计数据表格组件 -->
    <UserStatisticsTable
        ref="userStatisticsTable"
        :users="userStatistics"
        @page-changed="handlePageChanged"
        @data-loaded="handleDataLoaded"
    />
  </div>
</template>

<script>
import UserStatisticsSearch from '@/components/UserStatistics/UserStatisticsSearch.vue'
import UserStatisticsTable from '@/components/UserStatistics/UserStatisticsTable.vue'

export default {
  name: 'UserStatistics',
  components: {
    UserStatisticsSearch,
    UserStatisticsTable
  },
  data() {
    return {
      userStatistics: [],
      filters: {
        type: '',
        startDate: '',
        endDate: '',
        userName: '',
        jingwangId: '',
        role: ''
      },
      page: 1,
      pageSize: 10,
      total: 0
    }
  },
  methods: {
    // 处理搜索事件
    handleSearch(filters) {
      this.filters = filters
      this.page = 1
      this.$refs.userStatisticsTable.fetchUserStatistics(1, filters);
    },
    // 处理分页变化
    handlePageChanged(page) {
      this.page = page;
      this.$refs.userStatisticsTable.fetchUserStatistics(page, this.filters);
    },
    // 处理数据加载完成事件
    handleDataLoaded(data) {
      this.userStatistics = data.list;
      this.total = data.total;
    }
  },

  async mounted() {
    // 页面加载时初始化数据
    await this.$refs.userStatisticsTable.fetchUserStatistics(1, this.filters);
  }
}
</script>

<style scoped>
.user-statistics {
  padding: 20px;
}
</style>