|
@@ -1,45 +1,71 @@
|
|
|
<template>
|
|
|
- <el-tabs v-model="activeTab" type="card" class="page-tab">
|
|
|
- <el-tab-pane name="course">
|
|
|
- <template #label>
|
|
|
- <el-button :type="activeTab === 'course' ? 'primary' : 'default'"
|
|
|
- >按科目统计</el-button
|
|
|
- >
|
|
|
- </template>
|
|
|
- <ScanCourseStats />
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane name="point">
|
|
|
- <template #label>
|
|
|
- <el-button :type="activeTab === 'point' ? 'primary' : 'default'"
|
|
|
- >按考点统计</el-button
|
|
|
- >
|
|
|
- </template>
|
|
|
- <ScanPointStats />
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane name="signPaper">
|
|
|
- <template #label>
|
|
|
- <el-button :type="activeTab === 'signPaper' ? 'primary' : 'default'"
|
|
|
- >签到表统计</el-button
|
|
|
- >
|
|
|
- </template>
|
|
|
- <SignPaperStats />
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
+ <div class="scan-manage">
|
|
|
+ <!-- 顶部标签导航 -->
|
|
|
+ <el-tabs
|
|
|
+ v-model="activeMenu"
|
|
|
+ type="card"
|
|
|
+ class="page-tab"
|
|
|
+ @tab-click="handleTabClick"
|
|
|
+ >
|
|
|
+ <el-tab-pane v-for="tab in tabs" :key="tab.name" :name="tab.name">
|
|
|
+ <template #label>
|
|
|
+ <el-button :type="activeMenu === tab.name ? 'primary' : 'default'">{{
|
|
|
+ tab.label
|
|
|
+ }}</el-button>
|
|
|
+ </template>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+
|
|
|
+ <!-- 子页面内容区域 -->
|
|
|
+ <router-view />
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
- import { ref } from 'vue';
|
|
|
- import { useRoute } from 'vue-router';
|
|
|
-
|
|
|
- import ScanCourseStats from './ScanCourseStats.vue';
|
|
|
- import ScanPointStats from './ScanPointStats.vue';
|
|
|
- import SignPaperStats from './SignPaperStats.vue';
|
|
|
+ import { ref, watch, onMounted } from 'vue';
|
|
|
+ import { useRoute, useRouter } from 'vue-router';
|
|
|
|
|
|
defineOptions({
|
|
|
name: 'ScanManage',
|
|
|
});
|
|
|
|
|
|
const route = useRoute();
|
|
|
- // 从路由参数获取tab值,默认为course
|
|
|
- const activeTab = ref((route.query.tab as string) || 'course');
|
|
|
+ const router = useRouter();
|
|
|
+
|
|
|
+ // 标签页配置
|
|
|
+ const tabs = [
|
|
|
+ { name: 'ScanCourseStats', label: '按科目统计' },
|
|
|
+ { name: 'ScanPointStats', label: '按考点统计' },
|
|
|
+ { name: 'SignPaperStats', label: '签到表统计' },
|
|
|
+ ];
|
|
|
+
|
|
|
+ // 当前激活的菜单项
|
|
|
+ const activeMenu = ref<string>('');
|
|
|
+
|
|
|
+ // 标签点击处理
|
|
|
+ function handleTabClick(tab: any) {
|
|
|
+ const tabName = tab.paneName || tab.props.name;
|
|
|
+ if (tabName !== route.name) {
|
|
|
+ router.push({ name: tabName });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 监听路由变化,更新激活菜单
|
|
|
+ watch(
|
|
|
+ () => route.name,
|
|
|
+ (newName) => {
|
|
|
+ activeMenu.value = newName as string;
|
|
|
+ },
|
|
|
+ { immediate: true }
|
|
|
+ );
|
|
|
+
|
|
|
+ // 组件挂载时初始化
|
|
|
+ onMounted(() => {
|
|
|
+ // 如果当前路径是父路由,默认跳转到按科目统计
|
|
|
+ if (route.name === 'ScanManage') {
|
|
|
+ router.replace({ name: 'ScanCourseStats' });
|
|
|
+ } else {
|
|
|
+ activeMenu.value = route.name as string;
|
|
|
+ }
|
|
|
+ });
|
|
|
</script>
|