From bcdb083a696b7e43f21b15e0c07195d409f36bce Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期二, 19 十一月 2024 09:30:50 +0800
Subject: [PATCH] 前端添加sse获取进度
---
src/layout/components/Navbar.vue | 95 +++++++++++++++++++++++++++++++++++------------
1 files changed, 71 insertions(+), 24 deletions(-)
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 53ce25c..96c35b5 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,19 +1,39 @@
<template>
<div class="navbar">
- <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+ <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>
+ <!-- <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 }}-{{ selectStaff.role.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 }}-{{ item.role.name }}
+ </el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
<el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper">
- {{ '浣犲ソ锛�' + getUserName() }}
+ {{ "鎮ㄥソ锛�" + 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>
+ <span style="display: block">閫�鍑虹櫥褰�</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
@@ -22,40 +42,62 @@
</template>
<script>
-import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
+import { mapGetters } from "vuex";
+import Breadcrumb from "@/components/Breadcrumb";
+import Hamburger from "@/components/Hamburger";
export default {
+ inject: ["reload"], // 渚濊禆娉ㄥ叆
+ data() {
+ return {
+ selectStaff: { org: {} },
+ staffs: [],
+ };
+ },
components: {
Breadcrumb,
- Hamburger
+ Hamburger,
},
computed: {
- ...mapGetters([
- 'sidebar',
- 'avatar'
- ])
+ ...mapGetters(["sidebar", "avatar"]),
},
methods: {
+ changeStaff(item) {
+ this.selectStaff = item;
+ localStorage.setItem("selectStaff", JSON.stringify(item));
+ // this.$router.go(0)
+ this.reload();
+ },
orgCss() {
- return JSON.parse(localStorage.getItem("user")).name.length * 20 + 100 + 'px';
+ return (
+ JSON.parse(localStorage.getItem("user")).name.length * 20 + 100 + "px"
+ );
},
getOrgName() {
- return JSON.parse(localStorage.getItem("user")).staffs[0].org.name;
+ return JSON.parse(localStorage.getItem("selectStaff")).org.name;
},
getUserName() {
return JSON.parse(localStorage.getItem("user")).name;
},
toggleSideBar() {
- this.$store.dispatch('app/toggleSideBar')
+ this.$store.dispatch("app/toggleSideBar");
},
async logout() {
// await this.$store.dispatch('user/logout')
- this.$router.push(`/login`)
+ this.$router.push(`/login`);
+ },
+ },
+ created() {
+ const selectStaff = JSON.parse(localStorage.getItem("selectStaff"));
+ if (selectStaff) {
+ this.selectStaff = selectStaff;
}
- }
-}
+ const staffs = JSON.parse(localStorage.getItem("staffs"));
+ if (staffs) {
+ this.staffs = staffs;
+ }
+ },
+};
</script>
<style lang="scss" scoped>
@@ -64,18 +106,18 @@
overflow: hidden;
position: relative;
background: #fff;
- box-shadow: 0 1px 4px rgba(0,21,41,.08);
+ 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;
+ transition: background 0.3s;
+ -webkit-tap-highlight-color: transparent;
&:hover {
- background: rgba(0, 0, 0, .025)
+ background: rgba(0, 0, 0, 0.025);
}
}
@@ -102,10 +144,10 @@
&.hover-effect {
cursor: pointer;
- transition: background .3s;
+ transition: background 0.3s;
&:hover {
- background: rgba(0, 0, 0, .025)
+ background: rgba(0, 0, 0, 0.025);
}
}
}
@@ -136,4 +178,9 @@
}
}
}
+
+.el-dropdown-menu {
+ max-height: 400px; /*璁剧疆鑿滃崟楂樺害涓�200px*/
+ overflow-y: auto; /*璁剧疆婊氬姩鏉�*/
+}
</style>
--
Gitblit v1.8.0