|
@@ -20,20 +20,18 @@
|
|
</div>
|
|
</div>
|
|
<div class="menus-tabs">
|
|
<div class="menus-tabs">
|
|
<el-menu default-active="2" class="el-menu-vertical-demo">
|
|
<el-menu default-active="2" class="el-menu-vertical-demo">
|
|
- <div v-for="(item, index) in reactiveData.routes" :key="index">
|
|
|
|
- <el-sub-menu :index="String(index)" v-if="item.children">
|
|
|
|
- <template #title>
|
|
|
|
- <Icon :icon="item.icon" />
|
|
|
|
- <span>{{ item.name }}</span>
|
|
|
|
- </template>
|
|
|
|
- <el-menu-item @click="menuClick(item, i)" v-for="(l, i) in item.children" :key="i">{{
|
|
|
|
- l.name
|
|
|
|
- }}</el-menu-item>
|
|
|
|
- </el-sub-menu>
|
|
|
|
- <el-menu-item @click="menuClick(item, index)" :index="String(index)" v-else>
|
|
|
|
|
|
+ <div
|
|
|
|
+ v-for="(item, index) in reactiveData.routes"
|
|
|
|
+ :key="index"
|
|
|
|
+ class="menuDiv"
|
|
|
|
+ @mouseenter="handleMouseEnter(item, index)"
|
|
|
|
+ @mouseleave="handleMouseLeave(item, index)"
|
|
|
|
+ >
|
|
|
|
+ <el-menu-item @click="menuClick(item, index)" :index="String(index)">
|
|
<Icon :icon="item.icon" />
|
|
<Icon :icon="item.icon" />
|
|
<span>{{ item.name }}</span>
|
|
<span>{{ item.name }}</span>
|
|
</el-menu-item>
|
|
</el-menu-item>
|
|
|
|
+ <MenusActive :menuData="menuData" v-if="mouseenterIndex == index" />
|
|
</div>
|
|
</div>
|
|
</el-menu>
|
|
</el-menu>
|
|
</div>
|
|
</div>
|
|
@@ -44,11 +42,10 @@ import { Icon } from '@/components/Icon'
|
|
import { useRouter } from 'vue-router'
|
|
import { useRouter } from 'vue-router'
|
|
import { ElMessageBox } from 'element-plus'
|
|
import { ElMessageBox } from 'element-plus'
|
|
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
|
|
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
|
|
-import { useDesign } from '@/hooks/web/useDesign'
|
|
|
|
import avatarImg from '@/assets/imgs/avatar.gif'
|
|
import avatarImg from '@/assets/imgs/avatar.gif'
|
|
import { useUserStore } from '@/store/modules/user'
|
|
import { useUserStore } from '@/store/modules/user'
|
|
import { useTagsViewStore } from '@/store/modules/tagsView'
|
|
import { useTagsViewStore } from '@/store/modules/tagsView'
|
|
-import { useAppStore } from '@/store/modules/app'
|
|
|
|
|
|
+import MenusActive from './menusActive.vue'
|
|
defineOptions({ name: 'Header' })
|
|
defineOptions({ name: 'Header' })
|
|
const { t } = useI18n()
|
|
const { t } = useI18n()
|
|
|
|
|
|
@@ -57,19 +54,15 @@ const { wsCache } = useCache()
|
|
const { push, replace } = useRouter()
|
|
const { push, replace } = useRouter()
|
|
|
|
|
|
const userStore = useUserStore()
|
|
const userStore = useUserStore()
|
|
-const appStore = useAppStore()
|
|
|
|
const tagsViewStore = useTagsViewStore()
|
|
const tagsViewStore = useTagsViewStore()
|
|
|
|
|
|
-const { getPrefixCls } = useDesign()
|
|
|
|
-
|
|
|
|
-const prefixCls = getPrefixCls('user-info')
|
|
|
|
-
|
|
|
|
const user = wsCache.get(CACHE_KEY.USER)
|
|
const user = wsCache.get(CACHE_KEY.USER)
|
|
|
|
|
|
const avatar = user.user.avatar ? user.user.avatar : avatarImg
|
|
const avatar = user.user.avatar ? user.user.avatar : avatarImg
|
|
|
|
|
|
const userName = user.user.nickname ? user.user.nickname : 'Admin'
|
|
const userName = user.user.nickname ? user.user.nickname : 'Admin'
|
|
-const titleName = ref(appStore.title)
|
|
|
|
|
|
+
|
|
|
|
+const mouseenterIndex = ref(-1)
|
|
const loginOut = () => {
|
|
const loginOut = () => {
|
|
ElMessageBox.confirm(t('common.loginOutMessage'), t('common.reminder'), {
|
|
ElMessageBox.confirm(t('common.loginOutMessage'), t('common.reminder'), {
|
|
confirmButtonText: t('common.ok'),
|
|
confirmButtonText: t('common.ok'),
|
|
@@ -83,14 +76,10 @@ const loginOut = () => {
|
|
})
|
|
})
|
|
.catch(() => {})
|
|
.catch(() => {})
|
|
}
|
|
}
|
|
-const toProfile = async () => {
|
|
|
|
- push('/user/profile')
|
|
|
|
-}
|
|
|
|
|
|
|
|
const reactiveData: any = reactive({
|
|
const reactiveData: any = reactive({
|
|
routes: []
|
|
routes: []
|
|
})
|
|
})
|
|
-const headerTitleName: any = ref('') // 标题名称
|
|
|
|
const router = useRouter()
|
|
const router = useRouter()
|
|
|
|
|
|
const initMenus = async () => {
|
|
const initMenus = async () => {
|
|
@@ -98,20 +87,34 @@ const initMenus = async () => {
|
|
let locals: any = localStorage.getItem('roleRouters')
|
|
let locals: any = localStorage.getItem('roleRouters')
|
|
let roleRouters = JSON.parse(JSON.parse(locals).v)[0].children
|
|
let roleRouters = JSON.parse(JSON.parse(locals).v)[0].children
|
|
|
|
|
|
- let childName = uid.name
|
|
|
|
let childArr = roleRouters.slice(0, roleRouters.length)
|
|
let childArr = roleRouters.slice(0, roleRouters.length)
|
|
reactiveData.routes = childArr
|
|
reactiveData.routes = childArr
|
|
}
|
|
}
|
|
|
|
|
|
const menuClick = (item: any, idx: any) => {
|
|
const menuClick = (item: any, idx: any) => {
|
|
- if (item.children) {
|
|
|
|
- push('/oaSystem/' + item.path + '/' + item.children[idx].path)
|
|
|
|
- } else {
|
|
|
|
|
|
+ // if (item.children) {
|
|
|
|
+ // push('/oaSystem/' + item.path + '/' + item.children[idx].path)
|
|
|
|
+ // } else {
|
|
|
|
+ // push('/oaSystem/' + item.path)
|
|
|
|
+ // }
|
|
|
|
+ if (item.children == null) {
|
|
push('/oaSystem/' + item.path)
|
|
push('/oaSystem/' + item.path)
|
|
|
|
+ } else {
|
|
|
|
+ return
|
|
}
|
|
}
|
|
- // push(item.path)
|
|
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+const menuData = ref()
|
|
|
|
+const handleMouseEnter = (item: any, index: any) => {
|
|
|
|
+ if (item.children != null) {
|
|
|
|
+ mouseenterIndex.value = index
|
|
|
|
+ menuData.value = item
|
|
|
|
+ } else {
|
|
|
|
+ mouseenterIndex.value = -1
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+const handleMouseLeave = (item: any, index: any) => {
|
|
|
|
+ mouseenterIndex.value = -1
|
|
|
|
+}
|
|
/** 初始化 **/
|
|
/** 初始化 **/
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
initMenus()
|
|
initMenus()
|
|
@@ -125,11 +128,13 @@ onMounted(() => {
|
|
|
|
|
|
.menus-user {
|
|
.menus-user {
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: 200px;
|
|
|
|
|
|
+ height: 180px;
|
|
display: flex;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
padding-top: 40px;
|
|
padding-top: 40px;
|
|
|
|
+ border-bottom: 1px solid #5383bd;
|
|
|
|
+ margin-bottom: 20px;
|
|
.userImg {
|
|
.userImg {
|
|
width: 60px;
|
|
width: 60px;
|
|
height: 60px;
|
|
height: 60px;
|
|
@@ -164,7 +169,7 @@ onMounted(() => {
|
|
}
|
|
}
|
|
.userInfo {
|
|
.userInfo {
|
|
width: 100%;
|
|
width: 100%;
|
|
- margin-top: -25px;
|
|
|
|
|
|
+ margin-top: 0px;
|
|
h4 {
|
|
h4 {
|
|
text-align: center;
|
|
text-align: center;
|
|
color: #fff;
|
|
color: #fff;
|
|
@@ -206,6 +211,9 @@ onMounted(() => {
|
|
.menus-tabs {
|
|
.menus-tabs {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: calc(100% - 250px);
|
|
height: calc(100% - 250px);
|
|
|
|
+ .menuDiv {
|
|
|
|
+ position: relative;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -215,6 +223,14 @@ onMounted(() => {
|
|
background-color: transparent;
|
|
background-color: transparent;
|
|
span {
|
|
span {
|
|
color: #fff;
|
|
color: #fff;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .is-active {
|
|
|
|
+ background-color: transparent;
|
|
|
|
+ }
|
|
|
|
+ .el-menu-item:hover {
|
|
|
|
+ background-color: #113468;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|