<template>
|
<div class="side-menu-wrapper" id="MainMenu">
|
<slot></slot>
|
<div>
|
<Menu ref="menu" v-show="!collapsed" :active-name="activeName" :open-names="openedNames" :accordion="accordion"
|
:theme="theme" width="auto" @on-select="handleSelect">
|
<!-- <template v-for="item in menuList" v-if="item.name == mainTag">
|
<template v-for="list in item.children">
|
<template v-if="list.children && list.children.length === 1">
|
<side-menu-item v-if="showChildren(list)" :key="`menu-${list.name}`" :parent-item="list"></side-menu-item>
|
<menu-item v-else :name="getNameOrHref(list, true)" :key="`menu-${list.children[0].name}`">
|
<Icon :custom="list.icon || ''"></Icon>
|
<span>{{ showTitle(list.children[0]) }}</span></menu-item>
|
</template>
|
<template v-else>
|
<side-menu-item v-if="showChildren(list)" :key="`menu-${list.name}`" :parent-item="list"></side-menu-item>
|
<menu-item v-else :name="getNameOrHref(list)" :key="`menu-${list.name}`">
|
<Icon :custom="list.icon || ''"></Icon>
|
<span>{{ showTitle(list) }}</span></menu-item>
|
</template>
|
</template>
|
</template> -->
|
<Tree ref="tree" :data="menuNew" :render="renderMenu" class="demo-tree-render" @on-select-change="handleSelect"
|
@on-toggle-expand="toggleExpand"></Tree>
|
<!-- <el-tree :data="menuNew" :props="defaultProps" accordion @node-click="handleNodeClick"></el-tree> -->
|
|
</Menu>
|
<div class="menu-collapsed" v-show="collapsed" :list="menuList">
|
<template v-for="item in menuList">
|
<collapsed-menu v-if="item.children && item.children.length >= 1 && item.name == mainTag"
|
@on-click="handleSelect" hide-title :root-icon-size="rootIconSize" :icon-size="iconSize" :theme="theme"
|
:parent-item="item" :key="`drop-menu-${item.name}`"></collapsed-menu>
|
<Tooltip max-width="200" transfer v-else-if="item.name == mainTag"
|
:content="showTitle(item.children && item.children[0] ? item.children[0] : item)" placement="right"
|
:key="`drop-menu-${item.name}`">
|
<a @click="handleSelect(getNameOrHref(item, true))" class="drop-menu-a" :style="{ textAlign: 'center' }">
|
<Icon :size="rootIconSize" :color="textColor"
|
:custom="item.icon || (item.children && item.children[0].icon)"></Icon>
|
</a>
|
</Tooltip>
|
</template>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { getToken } from '@/libs/util'
|
import SideMenuItem from './side-menu-item.vue'
|
import CollapsedMenu from './collapsed-menu.vue'
|
import { getUnion } from '@/libs/tools'
|
import mixin from './mixin'
|
import { resolveComponent } from 'vue'
|
import $ from 'jquery'
|
export default {
|
name: 'SideMenu',
|
mixins: [mixin],
|
components: {
|
SideMenuItem,
|
CollapsedMenu
|
},
|
props: {
|
menuList: {
|
type: Array,
|
default() {
|
return []
|
}
|
},
|
collapsed: {
|
type: Boolean
|
},
|
theme: {
|
type: String,
|
default: 'dark'
|
},
|
rootIconSize: {
|
type: Number,
|
default: 18
|
},
|
iconSize: {
|
type: Number,
|
default: 14
|
},
|
accordion: Boolean,
|
activeName: {
|
type: String,
|
default: ''
|
},
|
openNames: {
|
type: Array,
|
default: () => []
|
}
|
},
|
data() {
|
return {
|
openedNames: [],
|
loadingF: true,
|
NotLoading: false,
|
menuNew: [],
|
defaultProps: {
|
children: 'children',
|
label: 'title'
|
},
|
token: getToken(),
|
index: 0,
|
selectName: ''
|
}
|
},
|
methods: {
|
handleNodeClick(data) {
|
console.log(data);
|
localStorage.setItem('powerAccess', data.name)
|
this.$emit('on-select', data.name)
|
},
|
toggleExpand(item) {
|
console.log(item.name, this.selectName);
|
if (item.expand) {
|
if (item.name == this.menuNew[this.index].name) {
|
this.$nextTick(() => {
|
let routeName = location.hash.replace('#/', '')
|
let that = this
|
let arr = []
|
let number = 0
|
$("span[class^='ivu-tree-title']").each(function (i) {
|
arr.push($('.ivu-tree-title').eq(i)[0].innerText)
|
});
|
console.log(arr);
|
for (let i = 0; i < arr.length; i++) {
|
if (this.selectName == arr[i]) {
|
number = i
|
}
|
}
|
$("span[class^='ivu-tree-title']").each(function (i) {
|
if (i == number) {
|
console.log(i);
|
$('.ivu-tree-title').eq(i).addClass('selectMenu').siblings().removeClass('selectMenu')
|
}
|
});
|
for (let i = 0; i < this.menuNew.length; i++) {
|
if (i != this.index) {
|
this.menuNew[i].expand = false
|
this.menuNew = JSON.parse(JSON.stringify(this.menuNew))
|
}
|
}
|
|
})
|
} else {
|
for (let i = 0; i < this.menuNew.length; i++) {
|
if (this.menuNew[i].name != item.name) {
|
this.menuNew[i].expand = false
|
this.menuNew = JSON.parse(JSON.stringify(this.menuNew))
|
}
|
}
|
}
|
} else {
|
for (let i = 0; i < this.menuNew.length; i++) {
|
this.menuNew[i].expand = false
|
this.menuNew = JSON.parse(JSON.stringify(this.menuNew))
|
}
|
}
|
},
|
handleSelect(name) {
|
let nameList = ['newsFlashEx_tool', 'piaoDetail', 'piaoOverdue', 'piaoOverAlways', 'piaoNoInfo', 'piaoDelayInfo', 'piaoNotice', 'bankCreditNo', 'bankMarket', 'rentMarket', 'receivablesMarket',
|
'trustMarket', 'AssetManagementFinancing', 'PledgeMovableProperty', 'MovablePropertyRegistration', 'zoneAnalyse', 'zhengxinAreas', 'zhengxinCompanys', 'zhengxinCompanys', 'zonedynamics', 'zonedynamics',
|
'publicMessage_tool', 'financeCollateralPledge', 'rongziDebt', 'rongziBank', 'rongziRent', 'rongziYingshou', 'rongziXintuo', 'rongziZiguan', 'rongziDiya', 'shangShiInfo', 'shangShiInfos', 'xinSanBanInfo', 'xinSanBanInfos', 'basicAttributes_tool', 'bankPunishNewEvent']
|
|
if (!this.token && nameList.indexOf(name[0].name) < 0) {
|
// this.getMenuNew()
|
// let routeName = location.hash.replace('#/', '')
|
// let num = 0
|
// for (let i = 0; i < this.menuNew.length; i++) {
|
// num++
|
// for (let k = 0; k < this.menuNew[i].children.length; k++) {
|
// num++
|
// if (this.menuNew[i].children[k].name == routeName) {
|
// $('.ivu-tree-title').eq(num - 1).addClass('selectMenu')
|
// }
|
// }
|
// }
|
// for (let i = 0; i < this.menuNew.length; i++) {
|
// if (this.menuNew[i].name != item.name) {
|
// this.menuNew[i].expand = false
|
// this.menuNew = JSON.parse(JSON.stringify(this.menuNew))
|
// }
|
// }
|
|
this.$nextTick(() => {
|
// let routeName = location.hash.replace('#/', '')
|
let that = this
|
let arr = []
|
let number = 0
|
$('.ivu-tree-title').removeClass('ivu-tree-title-selected')
|
$('.selectMenu').removeClass('selectMenu')
|
$("span[class^='ivu-tree-title']").each(function (i) {
|
|
arr.push($('.ivu-tree-title').eq(i)[0].innerText)
|
});
|
console.log(arr);
|
for (let i = 0; i < arr.length; i++) {
|
if (this.selectName == arr[i]) {
|
number = i
|
}
|
}
|
$("span[class^='ivu-tree-title']").each(function (i) {
|
if (i == number) {
|
console.log(i);
|
$('.ivu-tree-title').eq(i).addClass('selectMenu').siblings().removeClass('selectMenu')
|
}
|
});
|
for (let i = 0; i < this.menuNew.length; i++) {
|
if (i != this.index) {
|
this.menuNew[i].expand = false
|
this.menuNew = JSON.parse(JSON.stringify(this.menuNew))
|
}
|
}
|
})
|
|
|
this.$store.commit('openloginModal', true)
|
} else if (!this.token && nameList.indexOf(name[0].name) > -1) {
|
localStorage.setItem('powerAccess', name[0].name)
|
this.$emit('on-select', name[0].name)
|
} else if (this.token) {
|
localStorage.setItem('powerAccess', name[0].name)
|
this.$emit('on-select', name[0].name)
|
}
|
|
|
},
|
getOpenedNamesByActiveName(name) {
|
return this.$route.matched.map(item => item.name).filter(item => item !== name)
|
},
|
updateOpenName(name) {
|
if (name === this.$config.homeName) this.openedNames = []
|
else this.openedNames = this.getOpenedNamesByActiveName(name)
|
},
|
renderMenu(h, { root, node, data }) {
|
// console.log({ root, node, data });
|
return h('span', {
|
style: {
|
display: "inline-block",
|
},
|
class: data.selected ? 'selectMenu' : '',
|
url: data.name
|
|
}, [h('span', [
|
h('span', {
|
class: data.icon,
|
style: {
|
marginRight: '2px'
|
}
|
}),
|
h('span', data.title)
|
|
])])
|
},
|
getMenuNew() {
|
// this.menuNew = []
|
// this.menuNew = JSON.parse(JSON.stringify(this.menuNew))
|
let data = []
|
this.menuNew = JSON.parse(JSON.stringify(data))
|
for (let i = 0; i < this.menuList.length; i++) {
|
let arr = {
|
title: '',
|
expand: true,
|
icon: '',
|
children: [],
|
meta: {},
|
name: '',
|
nodeKey: null,
|
iconClass: ''
|
}
|
arr.meta = this.menuList[i].meta
|
arr.title = this.menuList[i].meta.title
|
arr.icon = this.menuList[i].icon
|
arr.name = this.menuList[i].name
|
arr.nodeKey = this.menuList[i].nodeKey
|
arr.iconClass = this.menuList[i].icon
|
for (let k = 0; k < this.menuList[i].children.length; k++) {
|
arr.children.push({
|
icon: this.menuList[i].children[k].icon,
|
name: this.menuList[i].children[k].name,
|
nodeKey: this.menuList[i].children[k].nodeKey,
|
meta: this.menuList[i].children[k].meta,
|
title: this.menuList[i].children[k].meta.title,
|
notCache: this.menuList[i].children[k].notCache,
|
})
|
|
}
|
this.menuNew.push(arr)
|
}
|
}
|
},
|
computed: {
|
textColor() {
|
return this.theme === 'dark' ? '#fff' : '#495060'
|
},
|
mainTag() {
|
setTimeout(() => {
|
this.NotLoading = false
|
}, 1000)
|
return this.$store.state.app.mainTag
|
}
|
},
|
watch: {
|
activeName(name) {
|
// name=this.$store.state.user.companyRedirect2
|
if (this.accordion) this.openedNames = this.getOpenedNamesByActiveName(name)
|
else this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName(name))
|
// if(this.openedNames[0]==='newdiligenceTools'){
|
// this.openedNames[0]='newsFlashEx_tool'
|
// }else if(this.openedNames[0]==='rentMarkets'){
|
// this.openedNames[0]='rentMarket'
|
// }
|
this.$nextTick(() => {
|
this.$refs.menu.updateActiveName()
|
})
|
},
|
openNames(newNames) {
|
this.openedNames = newNames
|
},
|
openedNames() {
|
this.$nextTick(() => {
|
this.loadingF = true
|
setTimeout(() => {
|
this.loadingF = false
|
this.NotLoading = true
|
}, 2000)
|
this.$refs.menu.updateOpened()
|
})
|
},
|
mainTag() {
|
setTimeout(() => {
|
this.NotLoading = false
|
}, 1000)
|
return this.$store.state.app.mainTag
|
},
|
|
},
|
created() {
|
this.getMenuNew()
|
|
},
|
mounted() {
|
this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName(name))
|
let routeName = location.hash.replace('#/', '')
|
let num = 0
|
this.index = 0
|
for (let i = 0; i < this.menuNew.length; i++) {
|
num++
|
for (let k = 0; k < this.menuNew[i].children.length; k++) {
|
num++
|
if (this.menuNew[i].children[k].name == routeName) {
|
this.index = i
|
|
this.selectName = this.menuNew[i].children[k].title
|
console.log(this.menuNew[i].children[k].title, this.selectName);
|
$('.ivu-tree-title').eq(num - 1).addClass('selectMenu')
|
}
|
}
|
}
|
for (let i = 0; i < this.menuNew.length; i++) {
|
if (i != this.index) {
|
this.menuNew[i].expand = false
|
this.menuNew = JSON.parse(JSON.stringify(this.menuNew))
|
}
|
|
}
|
}
|
}
|
</script>
|
<style lang="less">
|
@import './side-menu.less';
|
|
.main .left-sider #MainMenu .ivu-menu .ivu-menu-submenu-title {
|
margin-top: 0px !important;
|
}
|
|
.ivu-menu-submenu-title>i,
|
.ivu-menu-submenu-title span>i {
|
margin-right: 12px !important;
|
}
|
|
.side-menu-wrapper .ivu-spin-fix {
|
position: absolute;
|
top: 0;
|
left: 0;
|
z-index: 999;
|
width: 100%;
|
height: 100%;
|
background: #263647;
|
}
|
|
.side-menu-wrapper .ivu-spin {
|
color: #fff
|
}
|
|
.demo-tree-render .ivu-tree-arrow {
|
position: relative;
|
left: 20px;
|
top: 5px;
|
}
|
|
.demo-tree-render .ivu-tree-title {
|
color: #BEC3BC;
|
padding: 5px 24px;
|
|
}
|
|
.demo-tree-render .ivu-tree-title:hover {
|
color: #000;
|
|
|
}
|
|
.selectMenu {
|
color: #000 !important;
|
background-color: #d5e8fc !important;
|
}
|
|
/deep/ .ivu-tree-title-selected {
|
color: #BEC3BC;
|
}
|
|
.ivu-tree-title-selected /deep/ .selectMenu {
|
color: #BEC3BC;
|
}
|
|
// .demo-tree-render .ivu-tree-title:hover {
|
// color: #fff !important;
|
// background-color: #1b2a39 !important;
|
// width: 260px;
|
// }
|
</style>
|
