|
@@ -159,28 +159,46 @@
|
|
<template #default>
|
|
<template #default>
|
|
<div class="menu-bar">
|
|
<div class="menu-bar">
|
|
<div class="menu-warp" @click.stop>
|
|
<div class="menu-warp" @click.stop>
|
|
- <div v-for="(item, index) in sidebarRoutersCopy" :key="item.name" v-show="item.type == 1 && item.status == '0'"
|
|
|
|
- style="border-bottom:2px dashed #edeaea;padding-bottom:20px;margin-bottom:20px;">
|
|
|
|
- <div class="first-order-title">
|
|
|
|
- <TitleInfo :content="item.menuName" :size="16"></TitleInfo>
|
|
|
|
- </div>
|
|
|
|
- <div class="layout-box">
|
|
|
|
- <ul class="son-box" v-for="i in item.children" :key="i.menuId">
|
|
|
|
- <li class="menu-title">
|
|
|
|
- {{ i.menuName }}
|
|
|
|
- </li>
|
|
|
|
- <div v-for="(j, index) in i.children" :key="index">
|
|
|
|
- <li v-if="i.isNone" class="menu-ul" style="cursor: auto"></li>
|
|
|
|
- <li class="menu-ul">
|
|
|
|
- <i style="cursor: pointer;position:relative;top:0px" @click.stop="editMenu(j)">
|
|
|
|
- <svg-icon :icon-class="isHaveCollect(j) ? 'shoucang1' :'shoucang'" />
|
|
|
|
- </i>
|
|
|
|
- <span style="margin-left:6px;cursor: pointer" @click="commonsBannerToRouter(j)">{{ j.menuName }}</span>
|
|
|
|
|
|
+ <div style="margin:20px 0">
|
|
|
|
+ <el-input v-model="menuKeyword" placeholder="输入菜单名称进行搜索" class="menu-box" clearable @input="handleSearchMenu" />
|
|
|
|
+ </div>
|
|
|
|
+ <div v-if="!menuKeyword">
|
|
|
|
+ <div v-for="(item, index) in sidebarRoutersCopy" :key="item.name" v-show="item.type == 1 && item.status == '0'"
|
|
|
|
+ style="border-bottom:2px dashed #edeaea;padding-bottom:20px;margin-bottom:20px;">
|
|
|
|
+ <div class="first-order-title">
|
|
|
|
+ <TitleInfo :content="item.menuName" :size="16"></TitleInfo>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="layout-box">
|
|
|
|
+ <ul class="son-box" v-for="i in item.children" :key="i.menuId">
|
|
|
|
+ <li class="menu-title">
|
|
|
|
+ {{ i.menuName }}
|
|
</li>
|
|
</li>
|
|
- </div>
|
|
|
|
- </ul>
|
|
|
|
|
|
+ <div v-for="(j, index) in i.children" :key="index">
|
|
|
|
+ <li v-if="i.isNone" class="menu-ul" style="cursor: auto"></li>
|
|
|
|
+ <li class="menu-ul">
|
|
|
|
+ <i style="cursor: pointer;position:relative;top:0px" @click.stop="editMenu(j)">
|
|
|
|
+ <svg-icon :icon-class="isHaveCollect(j) ? 'shoucang1' :'shoucang'" />
|
|
|
|
+ </i>
|
|
|
|
+ <span style="margin-left:6px;cursor: pointer" @click="commonsBannerToRouter(j)">{{ j.menuName }}</span>
|
|
|
|
+ <!-- :class="{'search-class':showSearchStyle(j.menuName)}" -->
|
|
|
|
+ </li>
|
|
|
|
+ </div>
|
|
|
|
+ </ul>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <div v-if="menuKeyword">
|
|
|
|
+ <div v-for="(j, index) in keywordRouters" :key="index">
|
|
|
|
+ <li class="menu-ul">
|
|
|
|
+ <i style="cursor: pointer;position:relative;top:0px" @click.stop="editMenu(j)">
|
|
|
|
+ <svg-icon :icon-class="isHaveCollect(j) ? 'shoucang1' :'shoucang'" />
|
|
|
|
+ </i>
|
|
|
|
+ <span style="margin-left:6px;cursor: pointer" @click="commonsBannerToRouter(j)">{{ j.menuName }}</span>
|
|
|
|
+ <!-- :class="{'search-class':showSearchStyle(j.menuName)}" -->
|
|
|
|
+ </li>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
</div>
|
|
</div>
|
|
<div class="right-banner">
|
|
<div class="right-banner">
|
|
<div class="first-order-title">
|
|
<div class="first-order-title">
|
|
@@ -378,6 +396,39 @@ const plugsDialog = ref(false);
|
|
const userData = ref(Cookies.get("nickName") || "");
|
|
const userData = ref(Cookies.get("nickName") || "");
|
|
const commonsRouterList = ref([]);
|
|
const commonsRouterList = ref([]);
|
|
const activeLeftData = ref({});
|
|
const activeLeftData = ref({});
|
|
|
|
+const menuKeyword = ref("");
|
|
|
|
+const keywordRouters = ref([]);
|
|
|
|
+const handleSearchMenu = (val) => {
|
|
|
|
+ if (val) {
|
|
|
|
+ // let els = document.querySelectorAll(".search-class");
|
|
|
|
+ // if (els && els.length > 0) {
|
|
|
|
+ // console.log(els, "ss");
|
|
|
|
+ // els[0].scrollIntoView();
|
|
|
|
+ // els[0].scrollIntoView({
|
|
|
|
+ // behavior: "smooth", // 平滑过渡
|
|
|
|
+ // block: "nearest", // 上边框与视窗顶部平齐。默认值
|
|
|
|
+ // });
|
|
|
|
+ // }
|
|
|
|
+
|
|
|
|
+ let arr = [];
|
|
|
|
+ sidebarRoutersCopy.value.map((item) => {
|
|
|
|
+ if (item.children) {
|
|
|
|
+ item.children.map((j) => {
|
|
|
|
+ if (j.children) {
|
|
|
|
+ j.children.map((n) => {
|
|
|
|
+ if (n.menuName.includes(val) || n.menuName.indexOf(val) != -1) {
|
|
|
|
+ arr.push(n);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ keywordRouters.value = arr;
|
|
|
|
+ } else {
|
|
|
|
+ keywordRouters.value = [];
|
|
|
|
+ }
|
|
|
|
+};
|
|
const openLeftBaner = (i, index) => {
|
|
const openLeftBaner = (i, index) => {
|
|
// leftBanerType.value = 1;
|
|
// leftBanerType.value = 1;
|
|
activeLeftData.value = i;
|
|
activeLeftData.value = i;
|
|
@@ -584,6 +635,9 @@ const commonsBannerToRouter = (i) => {
|
|
});
|
|
});
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
+ if (menuKeyword.value) {
|
|
|
|
+ menuKeyword.value = "";
|
|
|
|
+ }
|
|
};
|
|
};
|
|
|
|
|
|
//获取浏览器宽度
|
|
//获取浏览器宽度
|
|
@@ -725,9 +779,15 @@ const plugDowload = () => {
|
|
});
|
|
});
|
|
plugsDialog.value = false;
|
|
plugsDialog.value = false;
|
|
};
|
|
};
|
|
|
|
+
|
|
|
|
+const showSearchStyle = (name) => {
|
|
|
|
+ if (menuKeyword.value) {
|
|
|
|
+ return name.includes(menuKeyword.value);
|
|
|
|
+ }
|
|
|
|
+};
|
|
</script>
|
|
</script>
|
|
|
|
|
|
-<style lang="scss">
|
|
|
|
|
|
+<style lang="scss" scope>
|
|
.menuDrawerClass {
|
|
.menuDrawerClass {
|
|
// width: calc(100vw - 500px) !important;
|
|
// width: calc(100vw - 500px) !important;
|
|
width: 70% !important;
|
|
width: 70% !important;
|
|
@@ -879,8 +939,8 @@ const plugDowload = () => {
|
|
}
|
|
}
|
|
.menu-ul {
|
|
.menu-ul {
|
|
// padding-left: 10px;
|
|
// padding-left: 10px;
|
|
- height: 30px;
|
|
|
|
- line-height: 30px;
|
|
|
|
|
|
+ height: 33px;
|
|
|
|
+ line-height: 33px;
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
@@ -890,6 +950,17 @@ const plugDowload = () => {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ .menu-ul {
|
|
|
|
+ // padding-left: 10px;
|
|
|
|
+ height: 33px;
|
|
|
|
+ line-height: 33px;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .menu-ul span:hover {
|
|
|
|
+ color: #0084ff;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
.right-banner {
|
|
.right-banner {
|
|
width: 300px;
|
|
width: 300px;
|
|
@@ -919,4 +990,15 @@ const plugDowload = () => {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+.search-class {
|
|
|
|
+ color: red !important;
|
|
|
|
+}
|
|
|
|
+</style>
|
|
|
|
+
|
|
|
|
+<style>
|
|
|
|
+.el-input.menu-box .el-input__wrapper {
|
|
|
|
+ border: none !important;
|
|
|
|
+ box-shadow: none !important;
|
|
|
|
+ border-bottom: 1px solid #c0c4cc !important;
|
|
|
|
+}
|
|
</style>
|
|
</style>
|