初始化提交

Crunchy

2025-06-14 7e460156de73171f9660ce48f80703e79f8b478d

 src/layout/components/Navbar.vue

@@ -1,74 +1,211 @@
<template>
  <div class="header">
  <div class="navbar">
    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />

    <breadcrumb class="breadcrumb-container" />
      <el-input v-model="keyword" size="small" placeholder="请输入客户名称查询台账" class="input-with-select">
        <el-button slot="append" type="primary" icon="el-icon-search" @click="goTo" />
      </el-input>
      <!-- <breadcrumb class="breadcrumb-container" /> -->
    <div class="center-title">
      中天科技WMS系统
        WMS系统
    </div>

    <div class="right-menu">
      <el-dropdown class="avatar-container" trigger="click">
        <div class="avatar-wrapper">
          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
          <i class="el-icon-caret-bottom" />
            <!-- <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar"> -->
            <img :src="baseUrl+'/img'+avatar" class="user-avatar">
            <span class="avater-name">{{ name }}</span>
          <!-- <i class="el-icon-caret-bottom" /> -->
        </div>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <router-link to="/">
            <!-- <router-link to="/">
            <el-dropdown-item>
              Home
            </el-dropdown-item>
          </router-link>
          <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
          </router-link> -->
            <!-- <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
            <el-dropdown-item>Github</el-dropdown-item>
          </a>
          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
            <el-dropdown-item>Docs</el-dropdown-item>
          </a>
          </a> -->
            <!-- <el-button>退出</el-button> -->
          <el-dropdown-item divided @click.native="logout">
            <span style="display:block;">Log Out</span>
              <span style="display:block;">退 出</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
    <div class="header-tabs">
      <div class="el-icon-arrow-left" @click="prev" />
      <div class="routers">
        <a v-for="tag in openTab.openTab">
          <el-tag

            :key="tag.name"
            closable
            :class="tag.name==openTab.activeIndex?'active':''"
            @close="handleClose(tag)"
            @click="changeRouter(tag)"
          >
            {{ tag.name }}
          </el-tag>
        </a>

      </div>
    </div>
  </div>

</template>

<script>
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import openTab from '@/store/modules/openTab'
// import openTab from '@/store/modules/openTab'

export default {
  components: {
    Breadcrumb,
    Hamburger
  },
  data() {
    return {
      keyword: '',
      routers: [
      ],
      baseUrl: process.env.VUE_APP_BASE_API

    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar'
      'avatar',
      'name',
      'openTab'
    ])
  },
  mounted() {
    // console.log(this.openTab)
  },
  methods: {
    goTo() {
      // console.log('点击查询', this.$route)
      this.$router.push({ path: '/outbound/outboundLedger', query: { keyword: this.keyword }})
      this.keyword = ''
      // if (this.$route.name === '出库台账') {
      //   console.log('输出当前')
      //   // this.$router.go(0)
      //   return
      // }
    },
    prev() {
      this.$router.go(-1)
    },
    handleClose(tag) {
      console.log(this.openTab.activeIndex)
      if (this.openTab.openTab.length == 1) {
        if (tag.name == '主页') {
          return
        }
        this.$store.commit('DEL_TAB', tag.route)
        this.$router.push('/home')
        this.$store.commit('SET_ACTIVE_INDEX', '/home')
      }
      if (this.openTab.activeIndex == tag.route) {
        this.$store.commit('DEL_TAB', tag.route)
        this.$router.push(this.openTab.openTab[0].route)
        this.$store.commit('SET_ACTIVE_INDEX', this.openTab.openTab[0].route)
      }
      this.$store.commit('DEL_TAB', tag.route)
    },
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    },
    goBack() {

    },
    changeRouter(tag) {
      this.$router.push(tag.route)
    }
  }
}
</script>

<style lang="scss" scoped>
.header{
  background: #efefef;
  .header-tabs{
    margin-top: 10px;
    background: #304156;
    color: #fff;
    height: 35px;
    display: flex;
    align-items: center;
    >div:nth-child(1){
      width: 40px;
      text-align: center;
    }

    .el-tabs{
      flex: 1;
    }
    ::v-deep .el-breadcrumb .el-breadcrumb__inner a{
      color: #fff !important;
    }
    .el-tag{
      height: 100%;
      background: #304156;
      color: #fff;
      border-radius: 0;
      margin: 0;
      border-right: 0px;
      border-top: 0px;
      border-bottom: 0px;
      line-height: 35px;
      .el-tag__close{
        color: #fff;
      }
    }
    .routers{
      height: 100%;
       a:last-of-type{
      .el-tag{
      border-right: 1px solid #fff;
     }
    }
    }

    // .el-tag,.active{
    //   color: #409EFF !important;
    // }
  }
}
.navbar {
  height: 50px;
  overflow: hidden;
  position: relative;
  background: #fff;
  background: #304156;
  color: #fff;
  line-height: 50px;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
  ::v-deep .el-input-group__append{
    background: #448ACA;
    border: 0px;
    color: #fff;
  }
  .input-with-select{
  width: 300px;
  // height: 30px;
}
  .center-title{
    position: absolute;
    left: 50%;
@@ -125,12 +262,19 @@
      .avatar-wrapper {
        margin-top: 5px;
        position: relative;

        color: #fff;
        display: flex;
        .avater-name{
          // position: absolute;
          // top: 50%;
          margin-left: 10px;
        }
        .user-avatar {
          cursor: pointer;
          border-radius: 50%;
          width: 40px;
          height: 40px;
          border-radius: 10px;
          // border-radius: 10px;
        }

        .el-icon-caret-bottom {