1

src/components/headerBar/header-bar.vue

@@ -1,86 +1,88 @@
 <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">
+  <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
+              </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"
@@ -96,345 +98,344 @@
               <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-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>
+        <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()
+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 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];
-		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
-})
+const routerInit = () => {
+  //二维转一维
+  const arr = [];
+  for (let i = 0; i < permissionStore.addRoutes.length; i++) {
+    const element = permissionStore.addRoutes[i];
+    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
-	}
+  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(() => {})
+  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
 }
 //拼接url跳转
 function routerPush(i) {
-	router.push(i.fatherPath + '/' + i.path)
-	this.isChildMenu = false
+  router.push(i.fatherPath + "/" + i.path);
+  isChildMenu.value = false;
 }
 
-onMounted(()=>{
-	routerInit()
-})
-
-
+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;
-	
+  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;
+  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-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;
+  margin: 0 20px;
 }
 </style>