| | |
| | | <template>
|
| | | <div class="navbar">
|
| | | <div>
|
| | | <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
| | | <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container"
|
| | | @toggleClick="toggleSideBar" />
|
| | | <breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />
|
| | | </div>
|
| | | <!-- <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />-->
|
| | | <div class="center-menu">
|
| | | <span class="label">{{userStore.currentFactoryName}}</span>
|
| | | <el-dropdown @command="handleFactoryChange" class="right-menu-item hover-effect" trigger="click">
|
| | | <div class="avatar-wrapper">
|
| | | <el-icon><Switch /></el-icon>
|
| | | </div>
|
| | | <template #dropdown>
|
| | | <el-dropdown-menu >
|
| | | <el-dropdown-item
|
| | | v-for="item in factoryList"
|
| | | :key="item.deptId"
|
| | | :command="item"
|
| | | >
|
| | | {{ item.deptName }}
|
| | | </el-dropdown-item>
|
| | | </el-dropdown-menu>
|
| | | </template>
|
| | | </el-dropdown>
|
| | |
|
| | | </div>
|
| | | <div class="right-menu">
|
| | | <!-- <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />-->
|
| | | <div class="avatar-container">
|
| | | <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
|
| | | <div class="avatar-wrapper">
|
| | |
| | | </el-dropdown>
|
| | | </div>
|
| | | </div>
|
| | | </div>
|
| | | </template>
|
| | |
|
| | | <script setup>
|
| | |
| | | import useAppStore from '@/store/modules/app'
|
| | | import useUserStore from '@/store/modules/user'
|
| | | import useSettingsStore from '@/store/modules/settings'
|
| | | import { userLoginFacotryList } from "@/api/system/user.js"
|
| | | import Cookies from "js-cookie";
|
| | | import { decrypt } from "@/utils/jsencrypt"
|
| | |
|
| | | const appStore = useAppStore()
|
| | | const userStore = useUserStore()
|
| | |
| | | function toggleSideBar() {
|
| | | appStore.toggleSideBar()
|
| | | }
|
| | | // const redirect = ref(undefined)
|
| | | // watch(route, (newRoute) => {
|
| | | // redirect.value = newRoute.query && newRoute.query.redirect
|
| | | // }, { immediate: true })
|
| | |
|
| | | function handleCommand(command) {
|
| | | switch (command) {
|
| | |
| | | settingsStore.toggleTheme()
|
| | | }
|
| | |
|
| | | function getUserLoginFacotryList() {
|
| | | if(userStore.id){
|
| | | userLoginFacotryList({userId:userStore.id}).then(res => {
|
| | | console.log('res', res)
|
| | | factoryList.value = res.data
|
| | | })
|
| | | }else {
|
| | | factoryList.value = []
|
| | | }
|
| | | }
|
| | | // function getUserLoginFacotryList() {
|
| | | // if (userStore.id) {
|
| | | // userLoginFacotryList({ userId: userStore.id }).then(res => {
|
| | | // console.log('res', res)
|
| | | // factoryList.value = res.data
|
| | | // })
|
| | | // } else {
|
| | | // factoryList.value = []
|
| | | // }
|
| | | // }
|
| | |
|
| | | function handleFactoryChange(command) {
|
| | | console.log('command', command)
|
| | | handleLogin(command.deptId);
|
| | | }
|
| | |
|
| | | function handleLogin(currentFatoryId){
|
| | | function handleLogin(currentFatoryId) {
|
| | | const loginForm = {
|
| | | username: Cookies.get("username"),
|
| | | password: Cookies.get("password") === undefined ? null : decrypt(Cookies.get("password")),
|
| | | currentFatoryId: currentFatoryId
|
| | | }
|
| | | userStore.loginCheckFactory(loginForm).then(res => {
|
| | | const query = route.query
|
| | | const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
|
| | | if (cur !== "redirect") {
|
| | | acc[cur] = query[cur]
|
| | | }
|
| | | return acc
|
| | | }, {})
|
| | | router.push({ path: redirect.value || "/", query: otherQueryParams })
|
| | | }).catch(() => {
|
| | | forceReload();
|
| | | }).catch((err) => {
|
| | | console.log(err)
|
| | | })
|
| | | }
|
| | |
|
| | | getUserLoginFacotryList();
|
| | | function forceReload() {
|
| | | const currentUrl = window.location.origin + window.location.pathname;
|
| | | const timestamp = new Date().getTime();
|
| | | window.location.href = `${currentUrl}?reload=${timestamp}`;
|
| | | }
|
| | | </script>
|
| | |
|
| | | <style lang='scss' scoped>
|
| | |
| | | position: relative;
|
| | | background: var(--navbar-bg);
|
| | | box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
| | | .center-menu {
|
| | | line-height: 50px;
|
| | | position: absolute;
|
| | | left: 50%;
|
| | | transform: translateX(-50%);
|
| | | .label {
|
| | | font-weight: bold;
|
| | | font-size: 18px;
|
| | | color: #333333;
|
| | | }
|
| | | }
|
| | |
|
| | | .hamburger-container {
|
| | | line-height: 46px;
|
| | |
| | | }
|
| | | }
|
| | |
|
| | | .notification-container {
|
| | | margin-right: 20px;
|
| | | display: flex;
|
| | | align-items: center;
|
| | | cursor: pointer;
|
| | |
|
| | | .notification-badge {
|
| | | :deep(.el-badge__content) {
|
| | | border: none;
|
| | | }
|
| | | }
|
| | | }
|
| | |
|
| | | .avatar-container {
|
| | | margin-right: 40px;
|
| | |
|
| | |
| | | }
|
| | | }
|
| | | }
|
| | |
|
| | | </style>
|
| | |
|
| | | <style lang="scss">
|
| | | .notification-popover {
|
| | | padding: 0 !important;
|
| | | |
| | | .el-popover__title {
|
| | | display: none;
|
| | | }
|
| | | |
| | | .el-popover__body {
|
| | | padding: 0 !important;
|
| | | }
|
| | | }
|
| | | .el-badge__content.is-fixed{
|
| | | top: 12px;
|
| | | }
|
| | | </style>
|