You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

72 lines
1.7 KiB

<!-- 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>