|
|
@@ -0,0 +1,206 @@
|
|
|
+<template>
|
|
|
+ <div class="oa_menus">
|
|
|
+ <div class="menus-user">
|
|
|
+ <div class="userImg">
|
|
|
+ <ElAvatar :src="avatar" alt="" class="userIcon" />
|
|
|
+ </div>
|
|
|
+ <div class="userInfo">
|
|
|
+ <h4>{{ userName }}</h4>
|
|
|
+ <p>部门信息</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="menus-btns">
|
|
|
+ <div class="btn">
|
|
|
+ <img src="@/assets/imgs/OA/sudufaq.png" alt="" />
|
|
|
+ <p>快速发起</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="menus-tabs">
|
|
|
+ <el-menu
|
|
|
+ default-active="2"
|
|
|
+ class="el-menu-vertical-demo"
|
|
|
+ @open="handleOpen"
|
|
|
+ @close="handleClose"
|
|
|
+ >
|
|
|
+ <div v-for="(item, index) in reactiveData.routes" :key="index">
|
|
|
+ <el-sub-menu :index="index" v-if="item.children">
|
|
|
+ <template #title>
|
|
|
+ <el-icon><location /></el-icon>
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </template>
|
|
|
+ <el-menu-item @click="menuClick(l, i)" v-for="(l, i) in item.children" :key="i">{{
|
|
|
+ l.name
|
|
|
+ }}</el-menu-item>
|
|
|
+ </el-sub-menu>
|
|
|
+ <el-menu-item @click="menuBossClick(item, index)" :index="index" v-else>
|
|
|
+ <el-icon><location /></el-icon>
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </el-menu-item>
|
|
|
+ </div>
|
|
|
+ </el-menu>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup lang="ts">
|
|
|
+import { Icon } from '@/components/Icon'
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
+import { ElMessageBox } from 'element-plus'
|
|
|
+import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
|
|
|
+import { useDesign } from '@/hooks/web/useDesign'
|
|
|
+import avatarImg from '@/assets/imgs/avatar.gif'
|
|
|
+import { useUserStore } from '@/store/modules/user'
|
|
|
+import { useTagsViewStore } from '@/store/modules/tagsView'
|
|
|
+import { useAppStore } from '@/store/modules/app'
|
|
|
+defineOptions({ name: 'Header' })
|
|
|
+const { t } = useI18n()
|
|
|
+
|
|
|
+const { wsCache } = useCache()
|
|
|
+
|
|
|
+const { push, replace } = useRouter()
|
|
|
+
|
|
|
+const userStore = useUserStore()
|
|
|
+const appStore = useAppStore()
|
|
|
+const tagsViewStore = useTagsViewStore()
|
|
|
+
|
|
|
+const { getPrefixCls } = useDesign()
|
|
|
+
|
|
|
+const prefixCls = getPrefixCls('user-info')
|
|
|
+
|
|
|
+const user = wsCache.get(CACHE_KEY.USER)
|
|
|
+
|
|
|
+const avatar = user.user.avatar ? user.user.avatar : avatarImg
|
|
|
+
|
|
|
+const userName = user.user.nickname ? user.user.nickname : 'Admin'
|
|
|
+const titleName = ref(appStore.title)
|
|
|
+const loginOut = () => {
|
|
|
+ ElMessageBox.confirm(t('common.loginOutMessage'), t('common.reminder'), {
|
|
|
+ confirmButtonText: t('common.ok'),
|
|
|
+ cancelButtonText: t('common.cancel'),
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ .then(async () => {
|
|
|
+ await userStore.loginOut()
|
|
|
+ tagsViewStore.delAllViews()
|
|
|
+ replace('/login?redirect=/index')
|
|
|
+ })
|
|
|
+ .catch(() => {})
|
|
|
+}
|
|
|
+const toProfile = async () => {
|
|
|
+ push('/user/profile')
|
|
|
+}
|
|
|
+
|
|
|
+const reactiveData: any = reactive({
|
|
|
+ routes: []
|
|
|
+})
|
|
|
+const headerTitleName: any = ref('') // 标题名称
|
|
|
+const router = useRouter()
|
|
|
+
|
|
|
+const initMenus = async () => {
|
|
|
+ const uid = router.currentRoute.value
|
|
|
+ let locals: any = localStorage.getItem('roleRouters')
|
|
|
+ let roleRouters = JSON.parse(JSON.parse(locals).v)[0].children
|
|
|
+
|
|
|
+ let childName = uid.name
|
|
|
+ let childArr = roleRouters.slice(0, roleRouters.length)
|
|
|
+ console.log(childArr)
|
|
|
+ reactiveData.routes = childArr
|
|
|
+}
|
|
|
+
|
|
|
+const handleOpen = (key: string, keyPath: string[]) => {
|
|
|
+ console.log(key, keyPath)
|
|
|
+}
|
|
|
+const handleClose = (key: string, keyPath: string[]) => {
|
|
|
+ console.log(key, keyPath)
|
|
|
+}
|
|
|
+const menuClick = (item, index) => {
|
|
|
+ push(item.path)
|
|
|
+}
|
|
|
+const menuBossClick = (item, index) => {
|
|
|
+ push(item.path)
|
|
|
+}
|
|
|
+watch(() => {
|
|
|
+ initMenus()
|
|
|
+})
|
|
|
+/** 初始化 **/
|
|
|
+onMounted(() => {
|
|
|
+ initMenus()
|
|
|
+})
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.oa_menus {
|
|
|
+ width: calc(100%);
|
|
|
+ height: 100%;
|
|
|
+ // background: #183868;
|
|
|
+
|
|
|
+ .menus-user {
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: center;
|
|
|
+ padding-top: 40px;
|
|
|
+ .userImg {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 2px;
|
|
|
+ .userIcon {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .userInfo {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: -25px;
|
|
|
+ h4 {
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 18px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ text-align: center;
|
|
|
+ color: #bcd1f0;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .menus-btns {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ padding: 0 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: #05ce9e;
|
|
|
+ border-radius: 20px 20px 20px 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ p {
|
|
|
+ margin-left: 8px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .menus-tabs {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 250px);
|
|
|
+ .menuUl {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
wuhongbo
