clientManageSystem/src/views/userPrivilegeManagement/index.vue

<template>
    <div class="main_container">
        <div class="page_item end_item">
            <TabSearch :tabList="tabList" 
                tabType="line" 
                :defaultTabKey="defaultTabKey" 
                @tabChange="HandleTabChange"/>

            <div class="page_solid_line" />
            <div class="page_jg_20" />

            <!-- 用户管理 -->
            <UserManage  v-if="defaultTabKey == 'userManage'"/>
            <!-- 分组管理 -->
            <GroupManage  v-if="defaultTabKey == 'groupManage'"/>
            <!-- 分组列表 -->
            <GroupList  v-if="defaultTabKey == 'groupList'" />
            <!-- 权限管理 -->
            <PermissionManage v-if="defaultTabKey == 'permissionManage'" />
            

        </div>
    </div>
</template>


<script setup lang="ts">
import { ref } from 'vue';
import TabSearch from '@/baseComponents/TabSearch.vue';
import { tabList } from './tabSearch';

import UserManage from './userManage/index.vue';
import GroupManage from './groupManage/index.vue'
import GroupList from './groupList/index.vue'
import PermissionManage from './permissionManage/index.vue'
const defaultTabKey = ref('userManage')

const HandleTabChange = (val)=>{
    defaultTabKey.value = val
}
</script>


<style lang="scss" scoped>

</style>