<template>
|
<div class="app-container">
|
<div class="tabs-wrapper">
|
<el-tabs
|
v-model="activeTab"
|
class="meeting-tabs"
|
@tab-change="handleTabChange"
|
>
|
<el-tab-pane label="会议设置" name="setting" />
|
<el-tab-pane label="会议列表" name="index" />
|
<el-tab-pane label="会议申请" name="application" />
|
<el-tab-pane label="会议审批" name="examine" />
|
<el-tab-pane label="会议发布" name="publish" />
|
<el-tab-pane label="会议总结" name="summary" />
|
</el-tabs>
|
</div>
|
|
<div class="tab-content">
|
<keep-alive>
|
<component :is="currentComponent" />
|
</keep-alive>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, computed } from 'vue'
|
import MeetSetting from '../notificationManagement/meetSetting/index.vue'
|
import MeetIndex from '../notificationManagement/meetIndex/index.vue'
|
import MeetApplication from '../notificationManagement/meetApplication/index.vue'
|
import MeetExamine from '../notificationManagement/meetExamine/index.vue'
|
import MeetPublish from '../notificationManagement/meetPublish/index.vue'
|
import MeetSummary from '../notificationManagement/summary/index.vue'
|
|
const activeTab = ref('setting')
|
|
const tabComponentMap = {
|
setting: MeetSetting,
|
index: MeetIndex,
|
application: MeetApplication,
|
examine: MeetExamine,
|
publish: MeetPublish,
|
summary: MeetSummary
|
}
|
|
const currentComponent = computed(() => tabComponentMap[activeTab.value] || MeetSetting)
|
|
function handleTabChange(name) {
|
activeTab.value = name
|
}
|
</script>
|
|
<style scoped lang="scss">
|
|
.tabs-wrapper {
|
margin-bottom: 10px;
|
}
|
|
.tab-content {
|
min-height: 400px;
|
}
|
</style>
|
