|
@@ -1,16 +1,20 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div id="systemHeader">
|
|
<div id="systemHeader">
|
|
|
<div id="systemInformation">
|
|
<div id="systemInformation">
|
|
|
- <img class="logoImg" src="@/assets/thlogo.png" alt="">
|
|
|
|
|
|
|
+ <img class="logoImg" src="@/assets/thlogo.png" alt="" />
|
|
|
<span>太湖流域河湖管理系统</span>
|
|
<span>太湖流域河湖管理系统</span>
|
|
|
</div>
|
|
</div>
|
|
|
<div id="systemMenuContainer">
|
|
<div id="systemMenuContainer">
|
|
|
- <systemMenu @addSystemMenuView='menuItemClick'></systemMenu>
|
|
|
|
|
|
|
+ <systemMenu @addSystemMenuView="menuItemClick"></systemMenu>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="user-area">
|
|
<div class="user-area">
|
|
|
- <el-dropdown @command="handleCommand" class="avatar-container right-menu-item hover-effect" trigger="hover">
|
|
|
|
|
|
|
+ <el-dropdown
|
|
|
|
|
+ @command="handleCommand"
|
|
|
|
|
+ class="avatar-container right-menu-item hover-effect"
|
|
|
|
|
+ trigger="hover"
|
|
|
|
|
+ >
|
|
|
<div class="avatar-wrapper">
|
|
<div class="avatar-wrapper">
|
|
|
- <img :src="userStore.avatar" class="user-avatar"/>
|
|
|
|
|
|
|
+ <img :src="userStore.avatar" class="user-avatar" />
|
|
|
<span class="user-nickname"> {{ userStore.nickName }} </span>
|
|
<span class="user-nickname"> {{ userStore.nickName }} </span>
|
|
|
</div>
|
|
</div>
|
|
|
<template #dropdown>
|
|
<template #dropdown>
|
|
@@ -32,47 +36,48 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
-import {onMounted, ref} from 'vue'
|
|
|
|
|
-import {useRouter} from 'vue-router'
|
|
|
|
|
-import Cookies from 'js-cookie'
|
|
|
|
|
-import systemMenu from './systemMenuBar.vue'
|
|
|
|
|
-import useUserStore from '@/store/modules/user'
|
|
|
|
|
-import {ElMessageBox} from "element-plus";
|
|
|
|
|
-
|
|
|
|
|
-const router = useRouter()
|
|
|
|
|
-const userStore = useUserStore()
|
|
|
|
|
-const name = ref('')
|
|
|
|
|
-const emit = defineEmits(['addSystemMenuView'])
|
|
|
|
|
|
|
+import { onMounted, ref } from "vue";
|
|
|
|
|
+import { useRouter } from "vue-router";
|
|
|
|
|
+import Cookies from "js-cookie";
|
|
|
|
|
+import systemMenu from "./systemMenuBar.vue";
|
|
|
|
|
+import useUserStore from "@/store/modules/user";
|
|
|
|
|
+import { ElMessageBox } from "element-plus";
|
|
|
|
|
+
|
|
|
|
|
+const router = useRouter();
|
|
|
|
|
+const userStore = useUserStore();
|
|
|
|
|
+const name = ref("");
|
|
|
|
|
+const emit = defineEmits(["addSystemMenuView"]);
|
|
|
const menuItemClick = (menuItem) => {
|
|
const menuItemClick = (menuItem) => {
|
|
|
- emit('addSystemMenuView', {viewItem: menuItem.viewItem})
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ emit("addSystemMenuView", { viewItem: menuItem.viewItem });
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
function handleCommand(command) {
|
|
function handleCommand(command) {
|
|
|
switch (command) {
|
|
switch (command) {
|
|
|
case "logout":
|
|
case "logout":
|
|
|
- logout()
|
|
|
|
|
- break
|
|
|
|
|
|
|
+ logout();
|
|
|
|
|
+ break;
|
|
|
default:
|
|
default:
|
|
|
- break
|
|
|
|
|
|
|
+ break;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function logout() {
|
|
function logout() {
|
|
|
- ElMessageBox.confirm('确定注销并退出系统吗?', '提示', {
|
|
|
|
|
- confirmButtonText: '确定',
|
|
|
|
|
- cancelButtonText: '取消',
|
|
|
|
|
- type: 'warning'
|
|
|
|
|
- }).then(() => {
|
|
|
|
|
- userStore.logOut().then(() => {
|
|
|
|
|
- location.href = '/index'
|
|
|
|
|
- })
|
|
|
|
|
- }).catch(() => {
|
|
|
|
|
|
|
+ ElMessageBox.confirm("确定注销并退出系统吗?", "提示", {
|
|
|
|
|
+ confirmButtonText: "确定",
|
|
|
|
|
+ cancelButtonText: "取消",
|
|
|
|
|
+ type: "warning",
|
|
|
})
|
|
})
|
|
|
|
|
+ .then(() => {
|
|
|
|
|
+ userStore.logOut().then(() => {
|
|
|
|
|
+ location.href = "/index";
|
|
|
|
|
+ });
|
|
|
|
|
+ })
|
|
|
|
|
+ .catch(() => {});
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
- if (Cookies.get('isLogin') === 'true') name.value = Cookies.get('name')
|
|
|
|
|
-})
|
|
|
|
|
|
|
+ if (Cookies.get("isLogin") === "true") name.value = Cookies.get("name");
|
|
|
|
|
+});
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
@@ -83,7 +88,7 @@ onMounted(() => {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
color: #1a3a5c;
|
|
color: #1a3a5c;
|
|
|
- box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
|
|
|
|
|
|
|
+ box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
|
|
|
position: relative;
|
|
position: relative;
|
|
|
z-index: 500;
|
|
z-index: 500;
|
|
|
border-bottom: 2px solid #b8d8f0;
|
|
border-bottom: 2px solid #b8d8f0;
|
|
@@ -153,7 +158,6 @@ onMounted(() => {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
#systemInformation {
|
|
#systemInformation {
|
|
@@ -166,6 +170,9 @@ onMounted(() => {
|
|
|
font-size: 17px;
|
|
font-size: 17px;
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
|
color: #0d4b80;
|
|
color: #0d4b80;
|
|
|
|
|
+ span {
|
|
|
|
|
+ font-size: 24px;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.logoImg {
|
|
.logoImg {
|