修改一级菜单交互方式，更改为点击一级菜单后直接打开功能界面
This commit is contained in:
wangchengming
parent
b8d04f7830
commit
361b2de6f7
|
|
@ -845,6 +845,23 @@ textarea,
|
|||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.ant-menu-horizontal .ant-menu-item {
|
||||
background-image: url('~@/assets/img/menuDefault.png');
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
min-width: 130px !important;
|
||||
margin: 0 10px !important;
|
||||
min-height: 55px !important;
|
||||
line-height: 50px !important;
|
||||
text-align: center;
|
||||
font-weight: 800;
|
||||
font-size: 20px !important;
|
||||
padding: 0 40px !important;
|
||||
vertical-align: middle !important;
|
||||
font-family: @fontfamily;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
|
||||
.ant-menu-item-selected>a>span,
|
||||
.ant-menu-item-active>a>span,
|
||||
|
|
@ -868,7 +885,6 @@ textarea,
|
|||
.ant-menu {
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
border-bottom: 1px dotted #00CBFF;
|
||||
}
|
||||
|
||||
.ant-menu-submenu,
|
||||
|
|
@ -888,8 +904,22 @@ textarea,
|
|||
line-height: 50px !important;
|
||||
text-align: left;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
padding: 0 0 0 20px !important;
|
||||
// margin-right: 20px;
|
||||
// padding: 0 0 0 20px !important;
|
||||
// border-top: 1px dotted #00CBFF;
|
||||
color: #fff !important;
|
||||
border-bottom: 1px dotted #00CBFF;
|
||||
}
|
||||
|
||||
.ant-menu-dark.ant-menu-vertical{
|
||||
background-size: 100% 100%;
|
||||
width: 263px !important;
|
||||
height: 50px !important;
|
||||
margin-bottom: 0 !important;
|
||||
margin-top: -1px !important;
|
||||
line-height: 50px !important;
|
||||
text-align: left;
|
||||
float: left;
|
||||
border-top: 1px dotted #00CBFF;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export default {
|
|||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
openKeys: [],
|
||||
selectedKeys: [],
|
||||
|
|
@ -41,11 +41,11 @@ export default {
|
|||
return keys
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
this.updateMenu()
|
||||
},
|
||||
watch: {
|
||||
collapsed (val) {
|
||||
collapsed(val) {
|
||||
if (val) {
|
||||
this.cachedOpenKeys = this.openKeys.concat()
|
||||
this.openKeys = []
|
||||
|
|
@ -59,10 +59,10 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
// select menu item
|
||||
onOpenChange (openKeys) {
|
||||
onOpenChange(openKeys) {
|
||||
// if(openKeys.length == 1 || this.selectedKeys[0] == '/dashboard/analysis') this.latestOpenKey = openKeys
|
||||
if(openKeys.length == 1) this.latestOpenKey = openKeys
|
||||
else if(openKeys.length == 2) this.latestOpenKey = [openKeys[1]]
|
||||
if (openKeys.length == 1) this.latestOpenKey = openKeys
|
||||
else if (openKeys.length == 2) this.latestOpenKey = [openKeys[1]]
|
||||
// openKeys = this.latestOpenKey
|
||||
// 在水平模式下时执行，并且不再执行后续
|
||||
if (this.mode === 'horizontal') {
|
||||
|
|
@ -78,7 +78,7 @@ export default {
|
|||
this.openKeys = latestOpenKey ? [latestOpenKey] : []
|
||||
}
|
||||
},
|
||||
updateMenu () {
|
||||
updateMenu() {
|
||||
const routes = this.$route.matched.concat()
|
||||
const { hidden } = this.$route.meta
|
||||
if (routes.length >= 3 && hidden) {
|
||||
|
|
@ -94,21 +94,21 @@ export default {
|
|||
})
|
||||
}
|
||||
//update-begin-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
|
||||
if(!this.selectedKeys || this.selectedKeys[0].indexOf(":")<0){
|
||||
if (!this.selectedKeys || this.selectedKeys[0].indexOf(":") < 0) {
|
||||
this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
|
||||
}
|
||||
//update-end-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
|
||||
},
|
||||
|
||||
// render
|
||||
renderItem (menu) {
|
||||
renderItem(menu) {
|
||||
if (!menu.hidden) {
|
||||
return menu.children && !menu.alwaysShow ? this.renderSubMenu(menu) : this.renderMenuItem(menu)
|
||||
// return menu.children && !menu.alwaysShow ? this.renderSubMenu(menu) : this.renderMenuItem(menu)
|
||||
return this.renderMenuItem(menu)
|
||||
}
|
||||
return null
|
||||
},
|
||||
renderMenuItem (menu) {
|
||||
renderMenuItem(menu) {
|
||||
// if(menu.meta.title == '首页')
|
||||
// {
|
||||
// return null
|
||||
|
|
@ -116,11 +116,14 @@ export default {
|
|||
const target = menu.meta.target || null
|
||||
const tag = target && 'a' || 'router-link'
|
||||
let props = { to: { name: menu.name } }
|
||||
if(menu.route && menu.route === '0'){
|
||||
if (menu.children && menu.children.length > 0) props = { to: { name: menu.children[0].name } }
|
||||
|
||||
if (menu.route && menu.route === '0') {
|
||||
props = { to: { path: menu.path } }
|
||||
}
|
||||
|
||||
const attrs = { href: menu.path, target: menu.meta.target }
|
||||
let attrs = { href: menu.path, target: menu.meta.target }
|
||||
if (menu.children && menu.children.length > 0) attrs = { href: menu.children[0].path, target: menu.children[0].meta.target }
|
||||
|
||||
if (menu.children && menu.alwaysShow) {
|
||||
// 把有子菜单的 并且 父菜单是要隐藏子菜单的
|
||||
|
|
@ -140,7 +143,7 @@ export default {
|
|||
</Item>
|
||||
)
|
||||
},
|
||||
renderSubMenu (menu) {
|
||||
renderSubMenu(menu) {
|
||||
const itemArr = []
|
||||
if (!menu.alwaysShow) {
|
||||
menu.children.forEach(item => itemArr.push(this.renderItem(item)))
|
||||
|
|
@ -156,19 +159,19 @@ export default {
|
|||
</SubMenu>
|
||||
)
|
||||
},
|
||||
renderIcon (icon) {
|
||||
renderIcon(icon) {
|
||||
if (icon === 'none' || icon === undefined) {
|
||||
return null
|
||||
}
|
||||
const props = {}
|
||||
typeof (icon) === 'object' ? props.component = icon : props.type = icon
|
||||
return (
|
||||
<Icon {... { props } }/>
|
||||
<Icon {... { props }} />
|
||||
)
|
||||
}
|
||||
},
|
||||
|
||||
render () {
|
||||
render() {
|
||||
const { mode, theme, menu } = this
|
||||
const props = {
|
||||
mode: mode,
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@
|
|||
<span>{{ link.title }}</span>
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <slot slot="extra" name="extra"></slot>
|
||||
<div slot="pageMenu">
|
||||
<div class="page-menu-search" v-if="search">
|
||||
|
|
@ -30,6 +30,11 @@
|
|||
<div class="leftMenu">
|
||||
<!-- <div class="parent"></div> -->
|
||||
<!-- <div class="child" v-for="(item,index) in menuList">{{ item.meta.title }}</div> -->
|
||||
<a-menu mode="vertical" theme="dark" :selected-keys="[current]" @click="handleClick">
|
||||
<a-menu-item v-for="item in menuList" :key="item.id">
|
||||
{{ item.meta.title }}
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div :class="['page-header-index-wide']">
|
||||
|
|
@ -40,6 +45,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import PageHeader from './PageHeader'
|
||||
import { mapState, mapActions } from 'vuex'
|
||||
export default {
|
||||
|
|
@ -49,8 +55,9 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
current: '',
|
||||
menuList: [],
|
||||
parentTitle:''
|
||||
parentTitle: ''
|
||||
}
|
||||
},
|
||||
// ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage']
|
||||
|
|
@ -96,21 +103,34 @@ export default {
|
|||
permissionMenuList: (state) => state.user.permissionList,
|
||||
}),
|
||||
},
|
||||
watch: {
|
||||
title(val) {
|
||||
if (val) {
|
||||
this.initMenuList()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initMenuList()
|
||||
},
|
||||
methods: {
|
||||
initMenuList() {
|
||||
|
||||
this.menuList = []
|
||||
this.parentTitle = this.$route.matched[1].meta.title
|
||||
this.permissionMenuList.forEach((item) => {
|
||||
if (item.meta.title == this.parentTitle) this.menuList = item.children
|
||||
})
|
||||
|
||||
console.log(333, this.menuList)
|
||||
// 依据标题设置选中
|
||||
if (this.menuList && this.menuList.length > 0) {
|
||||
var choseMenu = this.menuList.filter(item => item.meta.title == this.title)
|
||||
if (choseMenu && choseMenu.length > 0) this.current = choseMenu[0].id
|
||||
}
|
||||
|
||||
},
|
||||
handleClick(e) {
|
||||
this.current = e.key;
|
||||
var node = this.menuList.filter(item => item.id == e.key)
|
||||
if (node && node.length > 0) this.$router.push({ name: node[0].name, path: node[0].path })
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -126,13 +146,14 @@ export default {
|
|||
left: 20px;
|
||||
top: 140px;
|
||||
font-size: 18px;
|
||||
padding: 30px 15px 0;
|
||||
}
|
||||
|
||||
.leftMenu .parent{
|
||||
.leftMenu .parent {
|
||||
width: 263px;
|
||||
height: 46px;
|
||||
background: linear-gradient(0deg, #1E30A2, #11B3FF);
|
||||
color:#fff;
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
padding-left: 20px;
|
||||
line-height: 46px;
|
||||
|
|
@ -140,15 +161,16 @@ export default {
|
|||
left: 14px;
|
||||
top: 30px;
|
||||
}
|
||||
.leftMenu .child{
|
||||
|
||||
.leftMenu .child {
|
||||
height: 60px;
|
||||
background-color: #00467C;
|
||||
color:#fff;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.leftMenu .child.selected{
|
||||
.leftMenu .child.selected {
|
||||
background-color: #2B85D1;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -90,7 +90,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import PageLayout from '@/components/page/PageLayout'
|
||||
import RouteView from "@/components/layouts/RouteView"
|
||||
import { AppPage, ArticlePage, ProjectPage } from './page'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
|
@ -99,7 +98,6 @@
|
|||
export default {
|
||||
components: {
|
||||
RouteView,
|
||||
PageLayout,
|
||||
AppPage,
|
||||
ArticlePage,
|
||||
ProjectPage
|
||||
|
|
|
|||
|
|
@ -45,7 +45,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import PageLayout from '@/components/page/PageLayout'
|
||||
import RouteView from "@/components/layouts/RouteView"
|
||||
import { mixinDevice } from '@/utils/mixin.js'
|
||||
import security from './Security'
|
||||
|
|
@ -56,7 +55,6 @@
|
|||
export default {
|
||||
components: {
|
||||
RouteView,
|
||||
PageLayout,
|
||||
security,
|
||||
baseSetting,
|
||||
custom,
|
||||
|
|
|
|||
|
|
@ -112,8 +112,6 @@
|
|||
<script>
|
||||
import { timeFix } from "@/utils/util"
|
||||
import {mapGetters} from "vuex"
|
||||
|
||||
import PageLayout from '@/components/page/PageLayout'
|
||||
import HeadInfo from '@/components/tools/HeadInfo'
|
||||
import Radar from '@/components/chart/Radar'
|
||||
import { getRoleList, getServiceList, getFileAccessHttpUrl } from "@/api/manage"
|
||||
|
|
@ -123,7 +121,6 @@
|
|||
export default {
|
||||
name: "Workplace",
|
||||
components: {
|
||||
PageLayout,
|
||||
HeadInfo,
|
||||
Radar
|
||||
},
|
||||
|
|
|
|||
|
|
@ -134,7 +134,6 @@
|
|||
|
||||
<script>
|
||||
import { mixinDevice } from '@/utils/mixin.js'
|
||||
import PageLayout from '@/components/page/PageLayout'
|
||||
import DetailList from '@/components/tools/DetailList'
|
||||
|
||||
const DetailListItem = DetailList.Item
|
||||
|
|
@ -142,7 +141,6 @@
|
|||
export default {
|
||||
name: "Advanced",
|
||||
components: {
|
||||
PageLayout,
|
||||
DetailList,
|
||||
DetailListItem
|
||||
},
|
||||
|
|
|
|||
|
|
@ -43,7 +43,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import PageLayout from '@/components/page/PageLayout'
|
||||
import STable from '@/components/table/'
|
||||
import DetailList from '@/components/tools/DetailList'
|
||||
import ABadge from "ant-design-vue/es/badge/Badge"
|
||||
|
|
@ -51,7 +50,6 @@
|
|||
|
||||
export default {
|
||||
components: {
|
||||
PageLayout,
|
||||
ABadge,
|
||||
DetailList,
|
||||
DetailListItem,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user