navMenus 的动态路由 嵌套 2

<template>
<el-col id="navMenu">
<el-menu
:default-active="defaultActive"
background-color="#0b172e"
text-color="#A7B1C2"
active-text-color="#ffffff"
class="el-menu-vertical-demo"
:unique-opened="true"
:collapse-transition="true"
@open="handleOpen"
router
>
<!-- :mode='true' 展开的动画，加在上面就可以使用 -->
<!-- <template v-for="(item, i) in navList">
<el-menu-item
v-if="permissions == 0"
class="oneLi"
:key="i"
:index="item.path"
>
<i style="font-size:14px;margin-right:12px" class="iconfont icona-1shouyungongzuotai"></i>
<span slot="title" @click.passive="clickDeskMenu(item.path)">{{
item.name
}}</span>
</el-menu-item>
</template> -->

<NavMenu :navMenus="modelLeftList"></NavMenu>
<!-- 左侧五种权限判断 -->

<el-menu-item
class="oneLi"
v-for="item in commonList"
:key="item.path"
:index="item.path"
>
<i style="font-size: 14px" :class="item.iconClass"></i>
<a
style="margin-left: 12px"
slot="title"
:href="item.path"
target="_blank"
>{{ item.name }}</a
>
</el-menu-item>
</el-menu>
</el-col>
</template>

<script>
import {
leftSubNavList,
hn_internetFirst,
commonList
} from "../leftPermission";
import NavMenu from "../navMenu";
export default {
name: "leftMenu",
components: {
NavMenu
},
data() {
return {
commonList,
defaultActive: this.$route.path,
permissions: this.$store.state.permissions,
isCollapse: false,
menu: this.$store.state.menu, //左侧菜单权限列表
userquanxian: this.$store.state.userquanxian, //用户权限
leftPermission: this.$store.state.menu,
isshowhome: false, //是否登录 如果没登录则跳转到登陆页
defautlCollapseMenuItem: [],
navList: [
{
name: "首云工作台",
path: "/webpage/deskTop",
haveRight: false,
isSelected: false,
iconClass: "iconfont icona-1shouyungongzuotai",
children: []
}
],
lefList:
this.$store.state.permissions != 0 ? hn_internetFirst : leftSubNavList,
modelLeftList: [],
viewFlag: ""
};
},
watch: {
$route: {
handler: function(val, oldVal) {
console.log(val);
this._routerSelect();
},
// 深度观察监听
deep: true
}
},
created() {
let that = this;
// console.log(that.$route.fullPath.split("?")[0]);

// console.log(this.leftPermission);
// 两主体以上自动添加全部主体
this.persmissonCOunt();

if (this.$store.state.permissions == 1) {
this.leftPermission = [
"gg_ggtz",
"gg_ggznfx",
"gg_ggzt",
"gg_zdyjm",
"gg_xdjl",
"gg_ctggxs",
"gg_hwggxs",
"gg_yspxs",
"bggl",
"gg_ggys",
"gg_ggys_front_hm",
"ybzt_tsjb",
"gg_tsjb",
"wj_tsjb",
"xtsz_dzqz",
"xtsz_yhdt",
"xtsz_qhsc",
"rwpf",
"zzjg"
];
}
if (this.$store.state.permissions == 2) {
this.menu.push("gg_ggys_front_hm");
this.leftPermission = [
"gg_ggtz",
"gg_ggznfx",
"gg_ggzt",
"gg_zdyjm",
"gg_xdjl",
"gg_hywxs",
"bggl",
"gg_ggys",
"ybzt_tsjb",
"gg_tsjb",
"wj_tsjb",
"rwpf",
"zzjg",
"xtsz_dzqz",
"xtsz_yhdt",
"xtsz_qhsc"
];
}
this.RedefiningFormat();
// console.log(this.userquanxian);
this.getPermission();
that.defautlCollapseMenuItem = that.defautlCollapseMenu();
// 页面加载数据变化
setTimeout(function() {
// 判断左侧列表当前选中的样式
that._routerSelect();
}, 100);
this.isNoPath();
},
mounted() {
this.defaultActive = this.$route.fullPath;
},
methods: {
// 路由选中的设置
_routerSelect() {
if (this.$route.query.frontRouterType) {
this.defaultActive = '/suspected';
return;
}
// 线索特殊处理
if (this.$route.query.clueType) {
console.log('[ route ] >', this.$route.query.clueType)
this.defaultActive = this._threadView(this.$route.query.clueType);
return;
}
if (this.$route.fullPath.split("?")[0] == "/hlwxs") {
this.defaultActive = "/hlwxs?clueType=" + this.$route.query.clueType;
return;
}
if (this.$route.meta.selectPath) {
this.defaultActive = this.$route.meta.selectPath;
return;
}

// ----------------------最后
if (this.$route.fullPath.split("?")[0] != "/hlwxs") {
this.defaultActive = this.$route.fullPath.split("?")[0];
}

},
// 线索页面的选中
_threadView(clueType) {
let self = this;
switch (clueType) {
case "1":
return "/advertising";
case "2":
return "/hlwxs?clueType=9";
case "3":
return "/advertising";
case "4":
return "/advertising";
case "5":
return "/foodFrugs";
case "6":
return "/special";
case "8":
return "/generalStores";
case "9":
return "/hlwxs?clueType=9";
case "10":
return "/suspected";
case "11":
return "/caseup";
case "12":
return "/caseanc";
case "13":
return "/handlercd";
case "14":
return "/weaken";
case "15":
return "/architecture";
case "16":
return "/travel";
case "17":
return "/traffic";
case "18":
return "/feature";
case "19":
return "/payment";
case "20":
return "/industry";
case "21":
return "/foodBeverages";
case "22":
return "/foodFrugs";
case "23":
return "/medicalManagement";
case "24":
return "/advertising";
}
},
getSiteType(val) {
this.$axios
.get(
"/apis/hmcsEnterprise/v2/reportShare/siteTypeList?SSOID=" +
this.$store.state.cookie,
{
params: {
loginUserName: this.$store.state.userName,
SSOID: this.$store.state.cookie
}
}
)
.then(res => {
if (res.data.code == 0) {
let resData = res.data.result;
resData.map(item => {
if (item.value1 == val) {
sessionStorage.setItem("siteType", item.value0);
}
});
}
});
},
isNoPath() {
let pathFlag = false;
let defaulfPath = "";
for (let route of this.modelLeftList) {
if (route.path == this.$route.path) {
pathFlag = true;
console.log(route.path);
console.log(this.$route.path);
return;
}
route.children.forEach(item => {
if (item.path == this.$route.path) {
console.log(route.path);
console.log(this.$route.path);
console.log(item, "oooooooo");
// this.getSiteType(item.name)
pathFlag = true;
}
});
}
if (pathFlag == false && this.userquanxian.identityType != 1) {
console.log(this.userquanxian.identityType);
return;

this.$router.push({ path: "/deskTop" });
}
},
// 阻止默认事件
handleOpen(key, keyPath) {
return;
},
// 两个主体以上添加全部主体
persmissonCOunt() {
let permssonCount = 0;
let leftPermission = this.leftPermission.filter(item => {
return item != "ybzt";
});
// console.log(leftPermission);
leftPermission.map(item => {
if (item.substring(item.length - 2) == "zt") {
permssonCount++;
if (permssonCount >= 2) {
this.leftPermission.push("ztsj-front-qbzt");
}
}
});
},
// 修改数据格式
RedefiningFormat() {
for (let route of this.lefList) {
let childrenCode = [];
route.children.forEach(item => {
childrenCode.push.apply(childrenCode, item.code);
});
route.childrenCode = childrenCode;
}
// console.log(this.lefList, "我是新数据");
},
// 获取权限
getPermission() {
// 用户当前拥有的一级父级权限
let hasMenuPerm = [];
let that = this;
hasMenuPerm = this.lefList.filter(item => {
if (item.haveRight == true || that.userquanxian.identityType == 1) {
return item;
}
let intersection = item.code.filter(function(val) {
return that.leftPermission.indexOf(val) > -1;
});
if (intersection.length > 0) {
return item;
}
let intersection2 = item.childrenCode.filter(function(val) {
return that.leftPermission.indexOf(val) > -1;
});
if (intersection2.length > 0) {
return item;
}
});

let lefListTmp = this.childrenPermList(hasMenuPerm);
// //两个以上主体自动添加页面
// let qbztIndex =[]
// lefListTmp.map((item) => {
// console.log(item.code);

// // if (
// // item.code.length > 0 &&
// // item.code[0] == "ztsj-front" &&
// // item.children.length >= 2 && item.children
// // ) {
// // item.children.unshift({
// // name: "全部主体",
// // path: "/webpage/allmain",
// // code: ["ztsj-front-qbzt"],
// // iconClass: "iconfont icona-3quanbuzhuti",
// // isSelected: false,
// // });
// // }
// });
this.modelLeftList = lefListTmp;
console.log("[ ] >", this.modelLeftList);
},
// 从子集中找出 公共的因素
childrenPermList(hasMenuPerm) {
let that = this;
if (hasMenuPerm.children) {
let intersection = hasMenuPerm.code.filter(val => {
if (that.leftPermission.indexOf(val) > -1) {
return true;
}
});
return intersection;
}
hasMenuPerm.map(item => {
if (item.children) {
that.childrenPermList(item.children);
}
let tempChildren = item.children.filter(childrenItem => {
if (that.userquanxian.identityType == 1) {
return true;
}
if (childrenItem.children) {
that.childrenPermList(childrenItem.children);
}

let intersection = childrenItem.code.filter(val => {
if (that.leftPermission.indexOf(val) > -1) {
return true;
}
});

return intersection.length > 0;
});
item.children = tempChildren;
});

return hasMenuPerm;
},
// 整合数据

isRoleCode(item) {
if (item.roleCode && item.roleCode.length) {
if (this.userquanxian != "" && this.userquanxian.identityType == 1) {
return true;
}
return this.menu.some(val => {
return item.roleCode.indexOf(val) !== -1;
});
}
return true;
},
pageRole(item) {
if (this.userquanxian.identityType == 1) {
return true;
}
if (item.isAdmin) {
return false;
}

return this.menu.some(val => {
return item.code.indexOf(val) !== -1;
});
},
collapse() {
this.isCollapse = !this.isCollapse;
},

clickSubMenu(path) {
if (path.indexOf("http://") > -1 || path.indexOf("https://") > -1) {
window.open(path);
} else {
window.location.href = path;
}
},

clickDeskMenu(path) {
let pathParam = sessionStorage.getItem("shouyun");
if (pathParam) {
window.location.href = path + "?path=" + pathParam;
} else {
window.location.href = path;
}
},

defautlRightMenu() {
// console.log("this.menu ",this.$store.state.menu )
let that = this;
let lefList = that.lefList;
for (let subNav of lefList) {
if (that.userquanxian != "" && that.userquanxian.identityType == 1) {
subNav.haveRight = true;
subNav.children.forEach(subchild => {
subchild.haveRight = true;
});
continue;
}
let isHaveSubTotalRight = false;

subNav.children.forEach(subchild => {
let code = subchild.code;
if (that.menu != "" && that.menu.indexOf(code) > -1) {
subchild.haveRight = true;
isHaveSubTotalRight = true;
}
});

if (!subNav.haveRight) {
subNav.haveRight = isHaveSubTotalRight;
}

let code = subNav.code;
if (that.menu != "" && that.menu.indexOf(code) > -1) {
subNav.haveRight = true;
}
}
},

defautlSelectMenu() {
let currentPath = "/webpage" + this.$route.fullPath;
let lefList = this.modelLeftList;
for (let subNav of lefList) {
let subNavPath = subNav.path;
subNav.isSelected = false;
if (currentPath.indexOf(subNavPath) > -1) {
subNav.isSelected = true;
}
let children = subNav.children;
for (let subchild of children) {
subchild.isSelected = false;
if (currentPath.indexOf(subchild.path) > -1) {
subchild.isSelected = true;
}
let thridChildren = subchild.children;
for (let thirdPath of thridChildren) {
thirdPath.isSelected = false;
if (currentPath.indexOf(thirdPath.path) > -1) {
thirdPath.isSelected = true;
}
}
}
}
this.modelLeftList = lefList;
},
isChildren(lefList, children) {
for (let subNav of lefList) {
if (subNav.children.length == 0) {
return;
}

let subNavPath = subNav.path;
subNav.isSelected = false;
if (currentPath.indexOf(subNavPath) > -1) {
subNav.isSelected = true;
}
this.isChildren(subNav, subNav.children);
}

return;
},

defautlCollapseMenu() {
let currentPath = "/webpage" + this.$route.fullPath;
let lefList = this.modelLeftList;
let returnArray = new Array();
// 一级
for (let subNav of lefList) {
let children = subNav.children;
for (let subchild of children) {
subNav.path += subchild.path + "_";
}
}

// 二级
for (let subNav of lefList) {
if (subNav.path.indexOf(currentPath) != -1) {
returnArray.push(subNav.path);
return returnArray;
}

let children = subNav.children;
for (let childrenSubNav of children) {
if (currentPath.indexOf(childrenSubNav.path) != -1) {
returnArray.push(subNav.path);
return returnArray;
}
}
}
// 三级
for (let subNav of lefList) {
if (subNav.path.indexOf(currentPath) != -1) {
returnArray.push(subNav.path);
return returnArray;
}

let children = subNav.children;
for (let childrenSubNav of children) {
if (currentPath.indexOf(childrenSubNav.path) != -1) {
returnArray.push(currentPath.path);
return returnArray;
}
let thirdChildren = childrenSubNav.children;
for (let thirdPath of thirdChildren) {
if (currentPath.indexOf(thirdPath.path) != -1) {
returnArray.push(thirdPath.path);
return returnArray;
}
}
}
}

return returnArray;
},

handleClose(key, keyPath) {
// console.log(key, keyPath);
}
}
};
</script>
<style lang="" scoped>
.oneLi a {
width: 271px;
display: inline-block;
width: 100%;
color: rgb(167, 177, 194) !important;
}
.oneLi:hover a {
color: #fff !important;
}
</style>