85 lines
3.1 KiB
Vue
85 lines
3.1 KiB
Vue
<template>
|
|
<div class="flex mt-3">
|
|
<!-- <div class="mr-1 cursor-pointer leading-7 px-2.5 hover:bg-primary-light-9 hover:text-primary transition-all duration-300"
|
|
@click="menuClick(item.id)" v-for="(item, index) in menuList" v-show="item.paths != 'workbench'"
|
|
:class="menuName == item.name ? 'bg-primary-light-9 text-primary' : ''">
|
|
{{ item.name }}
|
|
</div> -->
|
|
|
|
<div class="mr-2 cursor-pointer flex items-center flex-col transition-all duration-300 px-[8px] hover:bg-primary-light-9 hover:text-primary "
|
|
@click=" menuClick(item)" v-for="(item, index) in menuList" v-show="item.paths != 'workbench'"
|
|
:style="menuName == item.name ? { 'transform': 'scale(1.1)' } : ''">
|
|
<div class="w-[40px] h-[40px] duration-300 mt-[5px] mb-[2px] !bg-[length:100%_100%]"
|
|
:style="menuName == item.name ? { background: `url(${getImgById(item.id)?.img})` } : { background: `url(${getImgById(item.id)?.actImg})` }">
|
|
</div>
|
|
<span :style="menuName == item.name ? { color: getImgById(item.id)?.color } : ''"> {{ item.name }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { getUserInfo } from "@/api/user"
|
|
import useUserStore from '@/stores/modules/user'
|
|
import { useWatchRoute } from '@/hooks/useWatchRoute'
|
|
|
|
const userStore = useUserStore()
|
|
const menuList = reactive([])
|
|
const menuName = ref('')
|
|
|
|
const menuClick = async (item) => {
|
|
userStore.getUserInfoByID(item.id)
|
|
localStorage.setItem('menuId', item.id);
|
|
await nextTick()
|
|
menuName.value = item.name
|
|
|
|
}
|
|
|
|
getUserInfo().then(res => {
|
|
res.menu.forEach(item => {
|
|
menuList.push(item)
|
|
});
|
|
userStore.getUserInfoByID(localStorage?.getItem('menuId') || menuList[1].id)
|
|
})
|
|
|
|
useWatchRoute((route) => {
|
|
menuName.value = route.matched[0]?.meta?.title || ''
|
|
if (menuList.length) {
|
|
let index = menuList.findIndex(item => item.name == menuName.value)
|
|
userStore.getUserInfoByID(menuList[index]?.id || 173)
|
|
}
|
|
})
|
|
|
|
const getImgById = (id: number) => {
|
|
if (id == 173) {
|
|
return { img: '/index/XTACT.png', actImg: "/index/XT.png", color: '#8FC814' }
|
|
}
|
|
else if (id == 174) {
|
|
return { img: '/index/SGGLACT.png', actImg: "/index/SGGL.png", color: '#4073FA' }
|
|
|
|
}
|
|
else if (id == 1046) {
|
|
return { img: '/index/ZJZXACT.png', actImg: "/index/ZJZX.png", color: '#F8BC23' }
|
|
|
|
}
|
|
else if (id == 1117) {
|
|
return { img: '/index/GCJLACT.png', actImg: "/index/GCJL.png", color: '#336DE8' }
|
|
|
|
}
|
|
else if (id == 1399) {
|
|
return { img: '/index/XMGLACT.png', actImg: "/index/XMGL.png", color: '#FF820C' }
|
|
|
|
}
|
|
else if (id == 1436) {
|
|
return { img: '/index/XMZXACT.png', actImg: "/index/XMZX.png", color: '#8FC814' }
|
|
|
|
}
|
|
else if (id == 1548) {
|
|
return { img: '/index/CWGLACT.png', actImg: "/index/CWGL.png", color: '#F7BB20' }
|
|
}
|
|
else if (id == 1808) {
|
|
return { img: '/index/RCBGACT.png', actImg: "/index/RCBG.png", color: '#F7BB20' }
|
|
}
|
|
else {
|
|
return { img: '/index/SCJYACT.png', actImg: "/index/SCJY.png", color: '#3A6EEF' }
|
|
}
|
|
}
|
|
</script> |