123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 |
- <template>
- <el-container class="hc-layout-box">
- <el-aside :class="[isCollapse?'is-collapse':'']" :width="isCollapse?'90px':'200px'"
- class="hc-aside-box">
- <div class="hc-aside-user-info">
- <img :alt="userInfo['account']" :src="userInfo['avatar'] || avatarPng" class="user-avatar" @click="toUserInfo">
- <div class="user-name" @click="toUserInfo">{{ userInfo['real_name'] }}</div>
- </div>
- <div class="hc-aside-menu-box">
- <el-scrollbar>
- <MenuBar :collapse="isCollapse" :cur="MenuBarKey" :datas="MenuBarData" @change="MenuBarChange"/>
- </el-scrollbar>
- </div>
- </el-aside>
- <el-container class="hc-container-view">
- <el-header class="hc-header-view">
- <div id="hc-header-page-name" class="hc-header-page-name">
- <span class="collapse-menu-icon" @click="collapseChange(false)" v-if="isCollapse">
- <HcIcon name="menu-unfold"/>
- </span>
- <span class="collapse-menu-icon" @click="collapseChange(true)" v-else>
- <HcIcon name="menu-fold"/>
- </span>
- <span class="project-name">项目管控平台</span>
- </div>
- <div class="hc-header-top-menu-bar">
- <TopMenuBar/>
- </div>
- <div class="hc-header-content">
- <UserInfoBar/>
- </div>
- </el-header>
- <el-main id="hc-main-box" class="hc-main-box">
- <router-view v-if="reloadRouter" v-slot="{Component}">
- <transition name="fade-transform">
- <keep-alive :max="10" :exclude="[]">
- <component :is="Component"/>
- </keep-alive>
- </transition>
- </router-view>
- </el-main>
- </el-container>
- </el-container>
- </template>
- <script setup>
- import {nextTick, onMounted, ref, watch} from "vue";
- import {useRouter, useRoute} from 'vue-router'
- import {useAppStore} from "~src/store";
- import avatarPng from '~src/assets/images/avatar.png';
- import MenuBar from "./modules/MenuBar.vue"
- import UserInfoBar from "./modules/UserInfoBar.vue"
- import TopMenuBar from "./modules/TopMenuBar.vue"
- import {setImageColorStyle} from "js-fast-way";
- import {initButtons} from "~sto/app";
- //初始组合式
- const router = useRouter()
- const useRoutes = useRoute()
- const useAppState = useAppStore()
- //路由参数
- const reloadRouter = ref(true)
- const BarMenuKey = useRoutes?.name ?? 'home-index';
- //主题和色调变量
- const AppColor = ref(useAppState.getColor);
- //顶部菜单数据和相关处理
- const MenuBarKey = ref(BarMenuKey);
- const MenuBarData = ref(useAppState.getMenus)
- const isCollapse = ref(useAppState.getCollapse)
- const userInfo = ref(useAppState.getUserInfo);
- //渲染完成
- onMounted(() => {
- initButtons()
- setLogoImageColor()
- setRouteParentMenu(useRoutes?.meta?.parentMenu)
- })
- //监听
- watch(() => [
- useAppState.getMenus,
- useRoutes?.name,
- useAppState.getCollapse,
- ], ([userMenus, RouteName, collapse]) => {
- MenuBarData.value = userMenus
- MenuBarKey.value = RouteName ?? 'home-index'
- isCollapse.value = collapse
- })
- //监听
- watch(() => [
- useAppState.getColor,
- ], ([ColorVal]) => {
- AppColor.value = ColorVal
- setLogoImageColor()
- })
- //监听
- watch(() => [
- useRoutes?.meta,
- ], ([meta]) => {
- setRouteParentMenu(meta?.parentMenu)
- }, {deep: true})
- //设置路由选中父级菜单
- const setRouteParentMenu = (parentMenu) => {
- if (parentMenu) {
- nextTick(() => {
- MenuBarKey.value = parentMenu;
- })
- }
- }
- //设置Logo图片颜色
- const setLogoImageColor = () => {
- setImageColorStyle('logo-icon', AppColor.value?.color)
- }
- //是否折叠
- const collapseChange = (bool) => {
- isCollapse.value = bool
- useAppState.setCollapse(bool)
- }
- //菜单被点击
- const MenuBarChange = (item) => {
- MenuBarKey.value = item?.code;
- router.push({name: item?.code});
- }
- //跳转到个人中心
- const toUserInfo = () => {
- router.push({name: 'user-index'});
- }
- </script>
- <style lang="scss" scoped>
- @import "./layout.scss";
- </style>
|