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"
					>
						功能导览
					</div>
				</li>

				<li class="nav-li active" 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"
										>
										<i  :class="'iconfont icon-' +  i.meta.icon" style="position: relative;top: -1px;"></i>
											
										{{ 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 { proxy } = getCurrentInstance()
const sidebarRouters = ref([])
const input1 = ref('')
const isChildMenu = ref(false)
const menuData = ref([])
const barData = ref([
	{name:'首页1',id:1},
	{name:'首页2',id:2},
	{name:'首页3',id:3},
	{name:'首页4',id:4},
])
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
				if (jelement.type === 1) {
					arr.push({ ...jelement, fatherPath: element.path })
				}
			}
		}
	}
	//添加剩余子元素，补齐一列
	for (let i = 0; i < arr.length; i++) {
		const element = arr[i]
		if (element.isTitle) {
			//判断余数加上子项列会不会爆掉
			if (
				element.children &&
				element.children.length > 0 &&
				((i) % 11) + element.children.length + 1 > 11 &&
				element.children.length < 11
			) {
				let num = 11 - ((i) % 11)
				for (let j = 0; j < num; j++) {
					arr.splice(i, 0, { ...element, isNone: true })
					i++
				}
			}
			
		}
	}
	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()
	proxy.get('/getInfo').then(res=>{
		userData.value = res.user.userName
	})
	
})
</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-weight: 400;
	}
	.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: 14px;
			font-weight: 400;
			text-align: center;
			line-height: 50px;
			list-style: none;
			color: #fff;
			cursor: pointer;
			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>