公司切换功能开发

chenrui

8 天以前 cd8bb25c6b07c81d0740714e45c3ce77bf724054

 src/layout/components/Navbar.vue

@@ -1,27 +1,31 @@
<template>

  <div class="navbar">

    <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />

    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" />

    <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" />

    <div>

      <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">

      <template v-if="appStore.device !== 'mobile'">

        <header-search id="header-search" class="right-menu-item" />



        <el-tooltip content="源码地址" effect="dark" placement="bottom">

          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />

        </el-tooltip>



        <el-tooltip content="文档地址" effect="dark" placement="bottom">

          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />

        </el-tooltip>



        <screenfull id="screenfull" class="right-menu-item hover-effect" />



        <el-tooltip content="布局大小" effect="dark" placement="bottom">

          <size-select id="size-select" class="right-menu-item hover-effect" />

        </el-tooltip>

      </template>

      <div class="avatar-container">

        <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">

          <div class="avatar-wrapper">

@@ -60,11 +64,14 @@
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()

const settingsStore = useSettingsStore()



const factoryList = ref([])

function toggleSideBar() {

  appStore.toggleSideBar()

}

@@ -72,13 +79,13 @@
function handleCommand(command) {

  switch (command) {

    case "setLayout":

      setLayout();

      break;

      setLayout()

      break

    case "logout":

      logout();

      break;

      logout()

      break

    default:

      break;

      break

  }

}



@@ -89,15 +96,56 @@
    type: 'warning'

  }).then(() => {

    userStore.logOut().then(() => {

      location.href = '/index';

      location.href = '/index'

    })

  }).catch(() => { });

  }).catch(() => { })

}



const emits = defineEmits(['setLayout'])

function setLayout() {

  emits('setLayout');

  emits('setLayout')

}



function toggleTheme() {

  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 handleFactoryChange(command) {

  console.log('command', command)

  handleLogin(command.deptId);

}



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(() => {

  })

}



getUserLoginFacotryList();

</script>



<style lang='scss' scoped>

@@ -105,8 +153,19 @@
  height: 50px;

  overflow: hidden;

  position: relative;

  background: #fff;

  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;

@@ -150,7 +209,7 @@
      padding: 0 8px;

      height: 100%;

      font-size: 18px;

      color: #5a5e66;

      color: var(--navbar-text);

      vertical-align: text-bottom;



      &.hover-effect {

@@ -159,6 +218,19 @@


        &:hover {

          background: rgba(0, 0, 0, 0.025);

        }

      }



      &.theme-switch-wrapper {

        display: flex;

        align-items: center;



        svg {

          transition: transform 0.3s;



          &:hover {

            transform: scale(1.15);

          }

        }

      }

    }

@@ -174,14 +246,14 @@
          cursor: pointer;

          width: 40px;

          height: 40px;

          border-radius: 10px;

          border-radius: 50px;

        }



        i {

          cursor: pointer;

          position: absolute;

          right: -20px;

          top: 25px;

          top: 14px;

          font-size: 12px;

        }

      }