From 7e460156de73171f9660ce48f80703e79f8b478d Mon Sep 17 00:00:00 2001
From: Crunchy <3114200645@qq.com>
Date: 星期六, 14 六月 2025 11:48:26 +0800
Subject: [PATCH] 初始化提交
---
src/layout/components/Navbar.vue | 198 ++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 171 insertions(+), 27 deletions(-)
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 3db50d2..afcd2c4 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,74 +1,211 @@
<template>
- <div class="navbar">
- <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+ <div class="header">
+ <div class="navbar">
+ <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+ <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绯荤粺
+ </div>
- <breadcrumb class="breadcrumb-container" />
- <div class="center-title">
- 涓ぉ绉戞妧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" />
- </div>
- <el-dropdown-menu slot="dropdown" class="user-dropdown">
- <router-link to="/">
+ <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"> -->
+ <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="/">
<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>
- <el-dropdown-item divided @click.native="logout">
- <span style="display:block;">Log Out</span>
- </el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
+ </a> -->
+ <!-- <el-button>閫�鍑�</el-button> -->
+ <el-dropdown-item divided @click.native="logout">
+ <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 {
--
Gitblit v1.9.3