From be30a62a2dddf9ba36e69ade654513cbd7aa0c52 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期六, 14 九月 2024 11:56:31 +0800
Subject: [PATCH] 机构切换
---
src/layout/components/Navbar.vue | 247 +++++++++++++++++++++++++++---------------------
1 files changed, 139 insertions(+), 108 deletions(-)
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 53ce25c..8774f9e 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,24 +1,44 @@
<template>
- <div class="navbar">
- <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+ <div class="navbar">
+ <hamburger
+ :is-active="sidebar.opened"
+ class="hamburger-container"
+ @toggleClick="toggleSideBar"
+ />
- <breadcrumb class="breadcrumb-container" />
- <!-- 鍥哄畾鍙充笂瑙� -->
- <h3 style="position: fixed; top: 0; font-size: 16px; color: #5a5e66; " :style="'right:' + orgCss() ">{{ getOrgName() }}</h3>
- <div class="right-menu">
- <el-dropdown class="avatar-container" trigger="click">
- <div class="avatar-wrapper">
- {{ '浣犲ソ锛�' + getUserName() }}
- <i class="el-icon-caret-bottom"></i>
+ <breadcrumb class="breadcrumb-container" />
+ <!-- 鍥哄畾鍙充笂瑙� -->
+ <!-- <h3 style="position: fixed; top: 0; font-size: 16px; color: #5a5e66; " :style="'right:' + orgCss() ">{{ getOrgName() }}</h3> -->
+
+ <div class="right-menu">
+ <el-dropdown trigger="click" ref="eldrop" style="margin-right:20px">
+ <div class="avatar-wrapper" style="font-size:20px">
+ {{ selectStaff.org.name }}
+ <i class="el-icon-caret-bottom"></i>
+ </div>
+ <el-dropdown-menu slot="dropdown" align="center">
+ <el-dropdown-item
+ v-for="item in staffs"
+ @click.native="changeStaff(item)"
+ :key="item.id"
+ >
+ {{ item.org.name }}
+ </el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
+ <el-dropdown class="avatar-container" trigger="click">
+ <div class="avatar-wrapper">
+ {{ '鎮ㄥソ锛�' + getUserName() }}
+ <i class="el-icon-caret-bottom"></i>
+ </div>
+ <el-dropdown-menu slot="dropdown" class="user-dropdown">
+ <el-dropdown-item @click.native="logout">
+ <span style="display: block">閫�鍑虹櫥褰�</span>
+ </el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
</div>
- <el-dropdown-menu slot="dropdown" class="user-dropdown">
- <el-dropdown-item @click.native="logout">
- <span style="display:block;">閫�鍑虹櫥褰�</span>
- </el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
</div>
- </div>
</template>
<script>
@@ -27,113 +47,124 @@
import Hamburger from '@/components/Hamburger'
export default {
- components: {
- Breadcrumb,
- Hamburger
- },
- computed: {
- ...mapGetters([
- 'sidebar',
- 'avatar'
- ])
- },
- methods: {
- orgCss() {
- return JSON.parse(localStorage.getItem("user")).name.length * 20 + 100 + 'px';
+ data() {
+ return {
+ selectStaff: JSON.parse(localStorage.getItem("selectStaff")),
+ staffs: JSON.parse(localStorage.getItem("staffs"))
+ }
},
- getOrgName() {
- return JSON.parse(localStorage.getItem("user")).staffs[0].org.name;
+ components: {
+ Breadcrumb,
+ Hamburger
},
- getUserName() {
- return JSON.parse(localStorage.getItem("user")).name;
+ computed: {
+ ...mapGetters([
+ 'sidebar',
+ 'avatar'
+ ])
},
- toggleSideBar() {
- this.$store.dispatch('app/toggleSideBar')
- },
- async logout() {
- // await this.$store.dispatch('user/logout')
- this.$router.push(`/login`)
+ methods: {
+ changeStaff(item) {
+ this.selectStaff = item
+ localStorage.setItem("selectStaff", JSON.stringify(item))
+ this.$router.go(0)
+ },
+ orgCss() {
+ return JSON.parse(localStorage.getItem("user")).name.length * 20 + 100 + 'px';
+ },
+ getOrgName() {
+ return JSON.parse(localStorage.getItem("user")).staffs[0].org.name;
+ },
+ getUserName() {
+ return JSON.parse(localStorage.getItem("user")).name;
+ },
+ toggleSideBar() {
+ this.$store.dispatch('app/toggleSideBar')
+ },
+ async logout() {
+ // await this.$store.dispatch('user/logout')
+ this.$router.push(`/login`)
+ }
}
- }
}
</script>
<style lang="scss" scoped>
.navbar {
- height: 50px;
- overflow: hidden;
- position: relative;
- background: #fff;
- box-shadow: 0 1px 4px rgba(0,21,41,.08);
+ height: 50px;
+ overflow: hidden;
+ position: relative;
+ background: #fff;
+ box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
- .hamburger-container {
- line-height: 46px;
- height: 100%;
- float: left;
- cursor: pointer;
- transition: background .3s;
- -webkit-tap-highlight-color:transparent;
-
- &:hover {
- background: rgba(0, 0, 0, .025)
- }
- }
-
- .breadcrumb-container {
- float: left;
- }
-
- .right-menu {
- float: right;
- height: 100%;
- line-height: 50px;
-
- &:focus {
- outline: none;
- }
-
- .right-menu-item {
- display: inline-block;
- padding: 0 8px;
- height: 100%;
- font-size: 18px;
- color: #5a5e66;
- vertical-align: text-bottom;
-
- &.hover-effect {
+ .hamburger-container {
+ line-height: 46px;
+ height: 100%;
+ float: left;
cursor: pointer;
- transition: background .3s;
+ transition: background 0.3s;
+ -webkit-tap-highlight-color: transparent;
&:hover {
- background: rgba(0, 0, 0, .025)
+ background: rgba(0, 0, 0, 0.025);
}
- }
}
- .avatar-container {
- margin-right: 50px;
-
- .avatar-wrapper {
- margin-top: 5px;
- position: relative;
- cursor: pointer;
-
- .user-avatar {
- cursor: pointer;
- width: 40px;
- height: 40px;
- border-radius: 10px;
- }
-
- .el-icon-caret-bottom {
- cursor: pointer;
- position: absolute;
- right: -20px;
- top: 25px;
- font-size: 12px;
- }
- }
+ .breadcrumb-container {
+ float: left;
}
- }
+
+ .right-menu {
+ float: right;
+ height: 100%;
+ line-height: 50px;
+
+ &:focus {
+ outline: none;
+ }
+
+ .right-menu-item {
+ display: inline-block;
+ padding: 0 8px;
+ height: 100%;
+ font-size: 18px;
+ color: #5a5e66;
+ vertical-align: text-bottom;
+
+ &.hover-effect {
+ cursor: pointer;
+ transition: background 0.3s;
+
+ &:hover {
+ background: rgba(0, 0, 0, 0.025);
+ }
+ }
+ }
+
+ .avatar-container {
+ margin-right: 50px;
+
+ .avatar-wrapper {
+ margin-top: 5px;
+ position: relative;
+ cursor: pointer;
+
+ .user-avatar {
+ cursor: pointer;
+ width: 40px;
+ height: 40px;
+ border-radius: 10px;
+ }
+
+ .el-icon-caret-bottom {
+ cursor: pointer;
+ position: absolute;
+ right: -20px;
+ top: 25px;
+ font-size: 12px;
+ }
+ }
+ }
+ }
}
</style>
--
Gitblit v1.8.0