byte-sailing-new/src/components/headerBar/header-bar.vue

<template>
	<div id="main" class="header-bar">
		<header>
			<ul class="nav">
				<div class="logo">ByteSailing</div>
				<li class="header-bar-hover-warp nav-li">
					<div @click="isChildMenu = !isChildMenu" class="menu-modal" style="font-size: 12px;">
						功能导览
						<i class="el-icon-arrow-down el-icon--right"></i>
					</div>
					
				</li>
				
				<li class="nav-li" v-for="i in barData" :key="i.id">
					<span>{{ i.name }}</span>
				</li>
				<div class="header-bar-warp"  v-if="isChildMenu" @click.stop="isChildMenu = false">
					<div class="header-bar-hover" @click.stop>
						<div class="header-bar-hover-content">
							<div class="left-banner">
								<div class="first-order">
									<el-icon size="16" color="#0084FF">
										<edit />
									</el-icon>
									常用功能
								</div>
								<div class="first-order">
									<el-icon size="16" color="#0084FF">
										<edit />
									</el-icon>
									功能菜单
								</div>
								<ul>
									<li>外贸ERP</li>
									<li>云仓</li>
									<li>办公OA</li>
									<li>供应链</li>
									<li>产品库</li>
								</ul>
								<!-- <div class="first-order">
									<el-icon size="16" color="#0084FF">
										<edit /> 
									</el-icon>
									推荐服务
								</div> -->
							</div>
							<div class="menu-warp">
								<div class="first-order-title">
									外贸ERP
								</div>
								<ul class="second-level">
									<div v-for="(i, index) in sidebarRouters"
											:key="index">
										<li
											v-if="i.isNone"
											class="menu-ul"
											style="cursor: auto;"
										></li>
										<li class="menu-title" v-else-if="i.isTitle">
											<el-icon size="16" color="#0084FF">
												<edit />
											</el-icon>
											{{ i.meta.title }}
										</li>
										<li
											v-else
											class="menu-ul"
											@click="routerPush(i)"
											style="cursor: pointer"
										>
											{{ i.meta.title }}
										</li>
									</div>
									
								</ul>
								
							</div>
						</div>
					</div>
				</div>
			</ul>
			<div class="fr">
				<!-- <el-input
            class="input-search"
            placeholder="请输入关键词"
            suffix-icon="el-icon-search"
			size="mini"
            v-model="input1">
          </el-input>
          <el-dropdown class="dropdown-box">
            <span class="el-dropdown-link">
              中文<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>English</el-dropdown-item>
              <el-dropdown-item>中文</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown> -->
				<el-badge :value="12" class="badge">
					<el-icon :size="20">
						<BellFilled />
					</el-icon>
				</el-badge>

				<el-dropdown
					@command="handleCommand"
					class="right-menu-item hover-effect"
					trigger="click"
				>
					<div class="dropdown-box">
						{{ userData }}
					</div>
					<template #dropdown>
						<el-dropdown-menu>
							<router-link to="/user/profile">
								<el-dropdown-item>个人中心</el-dropdown-item>
							</router-link>
							<el-dropdown-item command="setLayout">
								<span>布局设置</span>
							</el-dropdown-item>
							<el-dropdown-item divided command="logout">
								<span>退出登录</span>
							</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
		</header>
	</div>
</template>
  
<script setup>
import Cookies from 'js-cookie'
import { ElMessageBox,ElNotification } from 'element-plus'
import useUserStore from '@/store/modules/user'
import usePermissionStore from '@/store/modules/permission'
const router = useRouter()
const userStore = useUserStore()
const permissionStore = usePermissionStore()

const sidebarRouters = ref([])
const input1 = ref('')
const isChildMenu = ref(false)
const menuData = ref([])
const barData = ref([])
const userData = ref(Cookies.get('username') || '')

const routerInit = (() => {
	//二维转一维
	const arr = []
	for (let i = 0; i < permissionStore.addRoutes.length; i++) {
		const element = permissionStore.addRoutes[i];
		if(element.type === 1) {
			element.isTitle = true
			arr.push(element)
		}
		
		if(element.children && element.children.length > 0){
			for (let j = 0; j < element.children.length; j++) {
				const jelement = element.children[j];
				jelement.isTitle = false
				arr.push({...jelement, fatherPath:element.path})
			}
		}		
	}
	let num = 0
	//添加剩余子元素，补齐一列
	for (let i = 0; i < arr.length; i++) {
		const element = arr[i];
		if(element.isTitle) {
			//判断是否存在
			if(element.children && element.children.length > 0){
				//判断余数加上子项列会不会爆掉
				if(num % 11 + element.children.length + 1 > 11 && element.children.length < 11){
					element.pushNum = 11 - num % 11
					for (let j = 0; j < 11 - num % 11; j++) {
						arr.splice(i, 0, {...element,isNone:true})
						i++
					}
				}
			}
			num ++ 
		}else{
			num ++ 
		}
	}
	sidebarRouters.value = arr
})
function handleCommand(command) {
	switch (command) {
		case 'setLayout':
			setLayout()
			break
		case 'logout':
			logout()
			break
		default:
			break
	}
}


function logout() {
	
	ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			userStore.logOut().then(() => {
				location.href = '/index'
			})
		})
		.catch(() => {})
}
//拼接url跳转
function routerPush(i) {
	router.push(i.fatherPath + '/' + i.path)
	isChildMenu.value = false
}

onMounted(()=>{
	routerInit()
})


</script>
  
<style  lang="scss">
.header-bar-warp {
	position: fixed;
	top: 50px;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1100;
	
}
.header-bar {
	background: #20222a;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1100;
	ul,li{
		list-style: none;
		padding: 0;
	}
	.avatar-wrapper {
		margin-top: 10px;
	}
	.menu-modal {
		cursor: pointer;
		font-size: 12px;
		font-weight: 300;
	}
	.header-bar-hover {
		position: fixed;
		z-index: 205;
		top: 50px;
		left: 0px;
		right: 0;
		background: #fff;
		box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.1);
		height: 500px;

		.header-bar-hover-content {
			display: flex;
			text-align: left;
			.left-banner{
				width: 230px;
				ul{
					background: #F1F1F1;
					li{
						height: 50px;
						line-height: 50px;
						padding: 0 50px;
						font-size: 12px;
						cursor: pointer;
					}
				}
				.first-order{
					height: 50px;
					padding: 0 20px;
					line-height: 50px;
					font-size: 14px;
					font-weight: bold;
					background: #F9F9F9;
					cursor: pointer;
					i{
						position: relative;
						top: 3px;
						margin-right: 5px;
					}
				}
			}
			.el-alert {
				line-height: 20px;
				text-align: center;
				background: #dfecff;
				color: #666666;
				font-weight: 400;
				margin-bottom: 20px;
				i {
					color: #46a6ff;
				}
			}
		}
		.menu-warp {
			width: calc(100vw - 230px);
			background: #fff;
			overflow: hidden;
			box-sizing: border-box;
			padding: 0 40px;
			height: 500px;
			overflow-y: auto;
			.first-order-title{
				height: 70px;
				line-height: 70px;
				color: #333333;
				font-size: 15px;
				font-weight: bold;
			}
			.second-level{
				overflow: hidden;
				height:420px;
				display: flex;
				flex-wrap:wrap;
				flex-direction:column;
				flex-grow:0;
				flex-basis:auto;
			}
			.menu-title {
				font-weight: 600;
				color: #0084FF;
				height: 40px;
				line-height: 40px;
				border-bottom: 1px solid #ddd;
				font-size: 14px;
				width: 140px;
				margin: 0 100px 0 0;
				i{
					position: relative;
					top:3px;
					margin-right: 5px;
				}
			}
			.menu-ul {
				float: left;
				width: 140px;
				list-style: none;
				margin: 0 100px 0 0;
				padding: 0;
				height: 36px;
				line-height: 36px;
				font-size: 12px;
				font-weight: 400;
				cursor: pointer;
			}
			.menu-ul:hover{
				color: #0084ff;
			}
		}
	}
	.nav {
		display: flex;
		padding: 0;
		margin: 0;
		height: 50px;
		overflow: hidden;
		.logo {
			color: #fff;
			font-size: 20px;
			font-weight: bold;
			line-height: 50px;
			margin: 0 20px;
		}
		.nav-li {
			width: 130px;
			height: 50px;
			font-size: 16px;
			font-weight: 700;
			text-align: center;
			line-height: 50px;
			list-style: none;
			color: #fff;
			a {
				color: #fff;
			}
		}
		.nav-li.active {
			background: #0084ff;
			color: #fff;
			a {
				color: #fff;
			}
		}
	}
	header {
		z-index: 11205;
		left: 0;
		right: 0;
		top: 0;
		height: 50px;
		display: flex;
		justify-content: space-between;
		.fr {
			display: flex;
			.input-search {
				margin: 12px 40px 12px 0;
				width: 240px;
				input {
					height: 30px;
				}
			}
			.dropdown-box {
				margin: 0 24px 0 0px;
				line-height: 50px;
				cursor: pointer;
			}
			.badge {
				margin: 15px 24px 15px 0;
				height: 20px;
				width: 20px;
				i {
					color: #bbbbbb;
				}
			}
			.user-img {
				margin: 12px 12px 12px 0;
			}
		}
	}
}

header > a {
	margin: 0 20px;
}
</style>