Skip to content

V
vue-gjjs
Commit 0377f18c by 潘际乾
Options

菜单栏问题修复、支持多层

parent aaae98b8
Showing with 77 additions and 103 deletions
src/components/SubMenu.vue
<template>
<div>
<template v-for="(item, index) in subMenuList">
<template v-for="(item) in subMenuList">
<el-submenu
v-if="item.children && item.children.length > 0"
:key="item.path + '_' + index"
:index="item.path + '_' + index"
:key="item.index"
:index="item.index"
>
<template slot="title">
<i class="el-icon-caret-right" v-if="openFlgArr[index]"></i>
<i class="el-icon-caret-bottom" v-else></i>
<i
class="el-icon-caret-bottom"
v-if="getOpenFlag(item.index)"
></i>
<i class="el-icon-caret-right" v-else></i>
<!-- <img :src="item.icon" alt=""> -->
<span>{{ item.name }}</span>
</template>
<SubMenu :subMenuList="item.children" />
<SubMenu :subMenuList="item.children" :openFlgArr="openFlgArr" />
</el-submenu>
<el-menu-item v-else :key="item.path" :index="item.path">
<template slot="title">
......@@ -30,13 +33,18 @@ import SubMenu from "./SubMenu.vue";
export default {
name: "SubMenu",
components: { SubMenu },
props: ['subMenuList','openFlgArr'],
props: ["subMenuList", "openFlgArr"],
methods: {
getOpenFlag(index) {
return this.openFlgArr.includes(index);
},
},
};
</script>
<style>
.el-menu--collapse>div>.el-menu-item span,
.el-menu--collapse>div>.el-submenu>.el-submenu__title span {
.el-menu--collapse > div > .el-menu-item span,
.el-menu--collapse > div > .el-submenu > .el-submenu__title span {
height: 0;
width: 0;
overflow: hidden;
......
src/views/Layout/SideMenu.vue
......@@ -7,15 +7,9 @@
@click="closeMenu"
></c-button>
<c-button icon="el-icon-s-unfold" v-else @click="openMenu"></c-button>
<!-- <c-input prefix-icon="el-icon-search" v-if="menuOpen" v-model="searchContent"
@keyup.enter.native="searchMenuEvent" placeholder="全局搜索"></c-input> -->
<c-search-input v-show="menuOpen"></c-search-input>
</div>
<c-content :height="250">
<!-- <img
src="../../assets/menu_bottom.png"
style="position: fixed; width: 200px; bottom: 0"
/> -->
<el-menu
:default-active="activeMenu"
class="el-menu-vertical-demo"
......@@ -24,10 +18,6 @@
@close="handleClose"
:collapse="!menuOpen"
>
<!-- <el-menu-item index="/business/office">
<i class="el-icon-menu"></i>
<span slot="title">主页</span>
</el-menu-item> -->
<SubMenu :subMenuList="menus" :openFlgArr="openFlgArr"></SubMenu>
</el-menu>
</c-content>
......@@ -39,18 +29,17 @@ import SubMenu from "~/components/SubMenu.vue";
export default {
components: { Button, SubMenu },
data: function () {
data: function() {
return {
recordIndext:'',
openFlgArr: [],
openFlgArrCopy: [],
menuOpen: true,
searchContent: "",
menuList: [
// { inifrm: "0", ininam: "公共夹", pntmiu: "" },
// { inifrm: "sptsel", ininam: "待办任务", pntmiu: "0" },
// { inifrm: "trnrel", ininam: "复核任务", pntmiu: "0" },
// { inifrm: "diasel", ininam: "备忘录选择交易", pntmiu: "0" },
{ inifrm: "1", ininam: "汇款", pntmiu: ""},
{ inifrm: "1", ininam: "汇款", pntmiu: "" },
{ inifrm: "infcpd", ininam: "汇款查询", pntmiu: "1" },
{ inifrm: "cptopn", ininam: "汇出汇款", pntmiu: "1" },
{ inifrm: "cptadv", ininam: "汇入汇款", pntmiu: "1" },
......@@ -94,14 +83,19 @@ export default {
{ inifrm: "botdcr", ininam: "出口托收拒付/不符点", pntmiu: "6" },
{ inifrm: "botset", ininam: "出口托收收汇", pntmiu: "6" },
{ inifrm: "botcan", ininam: "出口托收闭卷", pntmiu: "6" },
{ inifrm: "7", ininam: "静态参数管理", pntmiu: "", },
{ inifrm: "7", ininam: "静态参数管理", pntmiu: "" },
{ inifrm: "infusr", ininam: "用户信息", pntmiu: "7" },
{ inifrm: "8",ininam: "转让证", pntmiu: "" },
{ inifrm: "8", ininam: "转让证", pntmiu: "" },
{ inifrm: "lttopn", ininam: "转让证开立", pntmiu: "8" },
{ inifrm: "lttame", ininam: "转让证修改", pntmiu: "8" },
{ inifrm: "lttcan", ininam: "转让证注销", pntmiu: "8" },
{ inifrm: "aaaaaa", ininam: "你你你你", pntmiu: "8" },
{ inifrm: "bbbbbb", ininam: "我我我我", pntmiu: "aaaaaa" },
{ inifrm: "cccccc", ininam: "他他他他", pntmiu: "bbbbbb" },
{ inifrm: "dddddd", ininam: "她她她她", pntmiu: "bbbbbb" },
{ inifrm: "eeeeee", ininam: "EEEEEEE", pntmiu: "aaaaaa" },
{ inifrm: "ffffff", ininam: "FFFFFFF", pntmiu: "eeeeee" },
],
menusOrigin: [],
menus: [],
};
},
......@@ -113,69 +107,14 @@ export default {
mounted() {
const arr = [];
this.generateMenuTree(arr);
this.menusOrigin = arr;
this.menus = this.menusOrigin;
this.openFlgArr = new Array(this.menus.length).fill(true)
this.menus = arr;
this.initOpenFlgIndex();
},
methods: {
searchMenuEvent() {
if (this.searchContent.trim() === "") {
this.menus = this.menusOrigin;
return;
}
const res = [];
for (let i = 0; i < this.menusOrigin.length; i++) {
const menu = this.menusOrigin[i];
const r = this.eachItem(menu);
if (r !== null) {
res.push(r);
}
}
this.menus = res;
},
eachItem(item) {
if (item.name.indexOf(this.searchContent) > -1) {
// if (item.children.length > 0) {
// if (this.hasAvailableChild(item.children)) {
// return item;
// }
// return null;
// } else {
// // TODO 判断此处是否为叶子节点
// return item;
// }
return item;
}
const arr = [];
for (let i = 0; i < item.children.length; i++) {
const child = item.children[i];
const r = this.eachItem(child);
if (r !== null) {
arr.push(r);
}
}
if (arr.length > 0) {
return {
name: item.name,
path: item.path,
icon: item.icon,
children: arr,
};
}
return null;
},
hasAvailableChild(children) {
for (let i = 0; i < children.length; i++) {
const child = children.length[i];
if (child.children.length > 0) {
return this.hasAvailableChild(child.children);
} else {
// TODO 判断此处是否为叶子节点
return true;
}
}
},
generateMenuTree(list, item) {
const cc = [],
c = [];
let n = 0;
for (let i = 0; i < this.menuList.length; i++) {
const menuItem = this.menuList[i];
if (!item) {
......@@ -183,55 +122,82 @@ export default {
const children = [];
menuItem.path = "/business";
this.generateMenuTree(children, menuItem);
list.push({
const child = {
name: menuItem.ininam,
path: menuItem.path,
children,
});
};
if (children.length > 0) {
child["index"] = child.path + "_" + n++;
cc.push(child);
} else {
c.push(child);
}
}
} else {
if (menuItem.pntmiu === item.inifrm) {
const children = [];
menuItem.path = item.path + "/" + menuItem.inifrm;
this.generateMenuTree(children, menuItem);
list.push({
const child = {
name: menuItem.ininam,
path: menuItem.path,
icon: "el-icon-document",
children,
});
};
if (children.length > 0) {
child["index"] = child.path + "_" + n++;
cc.push(child);
} else {
c.push(child);
}
}
}
}
list.push(...cc, ...c);
},
handleOpen(index, indexPath) {
// console.log(index, indexPath);
this.$set(this.openFlgArr, index.split("_")[1], false)
this.recordIndext=index.split("_")[1]
const arr = Object.assign([], this.openFlgArr);
arr.push(index);
this.openFlgArr = arr;
},
handleClose(index, indexPath) {
// console.log(index, indexPath);
this.$set(this.openFlgArr, index.split("_")[1], true)
const arr = Object.assign([], this.openFlgArr);
this.openFlgArr = arr.filter((idx) => idx !== index);
},
openMenu() {
this.menuOpen = true;
const aside = document.querySelector("aside");
aside.className = aside.className.split(" ")[0];
// if(){
// this.openFlgArr = new Array(this.menus.length).fill(true);
// this.$set(this.openFlgArr,this.recordIndext , false)
// }else{
// this.openFlgArr = new Array(this.menus.length).fill(true);
// }
this.initOpenFlgIndex();
},
initOpenFlgIndex() {
const r = [];
this.getOpenMenusIndex(this.menus, r);
this.openFlgArr = r;
},
getOpenMenusIndex(menus, arr) {
for (let i = 0; i < menus.length; i++) {
const menu = menus[i];
if (menu.path === this.activeMenu) {
return true;
}
if (menu.children.length > 0) {
if (this.getOpenMenusIndex(menu.children, arr)) {
arr.push(menu.index);
return true;
}
}
}
return false;
},
closeMenu() {
this.menuOpen = false;
const aside = document.querySelector("aside");
aside.className = aside.className + " fold";
this.openFlgArr = new Array(this.menus.length).fill(true)
this.openFlgArr = [];
},
},
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment