Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
H
haoban-3
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
office
haoban-3
Commits
d6264d37
Commit
d6264d37
authored
May 07, 2022
by
caoyanzhi
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
update: 菜单接口联调
parent
c0adf2b4
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
115 additions
and
40 deletions
+115
-40
aside-menu.vue
src/components/layout/aside-menu.vue
+23
-18
bread-menu.vue
src/components/layout/bread-menu.vue
+16
-8
change-store.vue
src/components/layout/components/change-store.vue
+2
-2
index.vue
src/components/layout/index.vue
+45
-8
main-menu.vue
src/components/layout/main-menu.vue
+29
-4
No files found.
src/components/layout/aside-menu.vue
View file @
d6264d37
<
template
>
<el-menu
class=
"aside-menu-box"
default-active=
"2"
:default-openeds=
"['1']
"
>
<el-submenu
class=
"aside-menu-list"
index=
"1
"
>
<el-menu
class=
"aside-menu-box"
:default-openeds=
"menuList.map(el => el.menuCode)
"
>
<el-submenu
class=
"aside-menu-list"
v-for=
"el in menuList"
:index=
"el.menuCode"
:key=
"el.menuCode
"
>
<div
class=
"aside-menu-list-title"
slot=
"title"
>
<i
class=
"iconfont-hb3 iconwodekehu menu-icon
"
></i>
<span>
我的客户
</span>
<i
:class=
"['menu-icon iconfont-hb3', el.iconUrl]
"
></i>
<span>
{{
el
.
menuName
}}
</span>
</div>
<el-menu-item
class=
"aside-menu-title"
index=
"1-1"
>
客户列表
</el-menu-item>
<el-menu-item
class=
"aside-menu-title actived"
index=
"1-2"
>
客户标签
</el-menu-item>
<el-menu-item
class=
"aside-menu-title"
index=
"1-3"
>
客户列表
</el-menu-item>
<el-menu-item
class=
"aside-menu-title"
index=
"1-4"
>
客户列表
</el-menu-item>
<el-menu-item
class=
"aside-menu-title"
index=
"1-5"
>
客户列表
</el-menu-item>
<el-menu-item
class=
"aside-menu-title"
index=
"1-6"
>
客户列表
</el-menu-item>
<el-menu-item
class=
"aside-menu-title"
index=
"1-7"
>
客户列表
</el-menu-item>
<el-menu-item
class=
"aside-menu-title"
index=
"1-8"
>
客户列表
</el-menu-item>
<el-menu-item
class=
"aside-menu-title"
index=
"1-9"
>
客户列表
</el-menu-item>
<el-menu-item
class=
"aside-menu-title"
index=
"1-10"
>
客户列表
</el-menu-item>
<el-menu-item
class=
"aside-menu-title"
index=
"1-11"
>
客户列表
</el-menu-item>
<el-menu-item
class=
"aside-menu-title"
index=
"1-12"
>
客户列表123
</el-menu-item>
<el-menu-item
:class=
"['aside-menu-title',
{ actived: activedCode == item.menuCode }]" v-for="item in el.childList" :index="item.menuCode" :key="item.menuCode" @click="toPage(item)">
{{
item
.
menuName
}}
</el-menu-item>
</el-submenu>
</el-menu>
</
template
>
<
script
>
export
default
{
name
:
'AsideMenu'
name
:
'AsideMenu'
,
props
:
{
menuList
:
{
type
:
Array
,
default
:
()
=>
[]
},
activedCode
:
String
},
methods
:
{
toPage
(
menu
)
{
if
(
this
.
activedCode
==
menu
.
menuCode
)
return
;
this
.
$router
.
push
(
'/'
+
menu
.
menuUrl
);
}
}
};
</
script
>
...
...
@@ -58,7 +62,8 @@ export default {
line-height
:
44px
;
box-sizing
:
border-box
;
border-radius
:
2px
;
&:hover
{
&:hover,
&:focus
{
background
:
#f2f3f5
;
}
&
.actived
{
...
...
src/components/layout/bread-menu.vue
View file @
d6264d37
<
template
>
<div
class=
"bread-menu"
>
<span
class=
"bread-menu-item"
>
<span
class=
"bread-menu-text is-link"
>
客户标签
</span>
</span>
<span
class=
"bread-menu-item"
>
<i
class=
"bread-menu-icon iconfont-hb3 iconnavigate_next"
></i>
<span
class=
"bread-menu-text bread-menu-active"
>
同步记录
</span>
<span
class=
"bread-menu-item"
v-for=
"(el, index) in menuList"
:key=
"el.menuCode"
>
<i
v-if=
"index > 0"
class=
"bread-menu-icon iconfont-hb3 iconnavigate_next"
></i>
<span
:class=
"['bread-menu-text', index == menuList.length - 1 ? 'bread-menu-actived' : 'is-link']"
@
click=
"toPage"
>
{{
el
.
menuName
}}
</span>
</span>
</div>
</
template
>
<
script
>
export
default
{
name
:
'BreadMenu'
name
:
'BreadMenu'
,
props
:
{
menuList
:
{
type
:
Array
,
default
:
()
=>
[]
}
},
methods
:
{
toPage
()
{
this
.
$router
.
go
(
-
1
);
}
}
};
</
script
>
...
...
@@ -42,7 +50,7 @@ export default {
color
:
#2f54eb
;
}
}
&
.bread-menu-active
{
&
.bread-menu-active
d
{
font-weight
:
500
;
color
:
#303133
;
}
...
...
src/components/layout/components/change-store.vue
View file @
d6264d37
...
...
@@ -6,7 +6,7 @@
<i
class=
"iconfont-hb3 iconxiajiantou change-store-icon"
></i>
</span>
<div
class=
"change-store"
>
<div
class=
"store-item active"
>
<div
class=
"store-item active
d
"
>
<div>
<div
class=
"store-name"
>
金华达摩
</div>
<div
class=
"default-store-tag"
>
默认商户
</div>
...
...
@@ -129,7 +129,7 @@ export default {
+
.store-item
{
margin-top
:
4px
;
}
&
.active
{
&
.active
d
{
background
:
#f7f8fa
;
.store-name
{
color
:
#2f54eb
;
...
...
src/components/layout/index.vue
View file @
d6264d37
<
template
>
<div
class=
"hb-layout"
>
<main-menu></main-menu>
<aside-menu></aside-menu>
<main-menu
:menu-list=
"menuList"
:actived-code=
"activedMenu.length > 0 ? activedMenu[0].menuCode : ''"
></main-menu>
<aside-menu
:menu-list=
"activedMenu.length > 0 ? activedMenu[0].childList : []"
:actived-code=
"activedMenu.length > 2 ? activedMenu[2].menuCode : ''"
></aside-menu>
<div
class=
"hb-layout-content"
>
<bread-menu
v-if=
"
breadShow
"
></bread-menu>
<div
class=
"hb-layout-pager"
:style=
"
{ height:
breadShow
? `calc(100% - 30px)` : '100%' }">
<bread-menu
v-if=
"
activedMenu.length > 3"
:menu-list=
"activedMenu.slice(2)
"
></bread-menu>
<div
class=
"hb-layout-pager"
:style=
"
{ height:
activedMenu.length > 3
? `calc(100% - 30px)` : '100%' }">
<slot>
<!--
<div
style=
"width: 1300px;height: 1000px;border:1px solid red"
></div>
页面内容 -->
...
...
@@ -16,6 +16,7 @@
<
script
>
import
{
getRequest
}
from
'@/api/api.js'
;
import
errorMsg
from
'@/common/js/error.js'
;
import
MainMenu
from
'./main-menu.vue'
;
import
AsideMenu
from
'./aside-menu.vue'
;
import
BreadMenu
from
'./bread-menu.vue'
;
...
...
@@ -24,18 +25,54 @@ export default {
components
:
{
MainMenu
,
AsideMenu
,
BreadMenu
},
data
()
{
return
{
breadShow
:
true
breadShow
:
true
,
// 菜单树数据
menuList
:
[],
// 菜单平铺数据
flatMenuList
:
[],
// 侧边栏菜单数据
asideMenu
:
[],
// 激活的菜单
activedMenu
:
[]
};
},
created
()
{
this
.
getMenuList
();
},
methods
:
{
// /get-haoban-menu
getMenuList
()
{
getRequest
(
'/haoban-manage3-web/get-haoban-menu'
,
{
requestProject
:
'haoban-manage-web'
,
enterpriseId
:
''
}).
then
(
res
=>
{
console
.
log
(
res
);
getRequest
(
'/haoban-manage3-web/get-haoban-menu'
,
{
requestProject
:
'haoban-manage-web'
}).
then
(
res
=>
{
const
{
errorCode
,
result
}
=
res
.
data
||
[];
if
(
errorCode
!=
1
)
{
errorMsg
.
errorMsg
(
res
.
data
);
return
;
}
if
(
!
Array
.
isArray
(
result
))
return
;
this
.
menuList
=
result
;
this
.
flatMenuList
=
this
.
getFlatMenuList
(
result
);
this
.
activedMenu
=
this
.
getActivedMenu
(
this
.
getMenuByPath
(
this
.
$route
.
path
.
slice
(
1
)));
});
},
getFlatMenuList
(
menuList
)
{
return
menuList
.
reduce
((
list
,
el
)
=>
{
if
(
Array
.
isArray
(
el
.
childList
))
{
list
=
list
.
concat
(
this
.
getFlatMenuList
(
el
.
childList
));
}
list
.
push
(
el
);
return
list
;
},
[]);
},
getActivedMenu
(
menu
)
{
if
(
!
menu
.
menuCode
)
return
[];
let
result
=
[
menu
];
const
parentMenu
=
this
.
flatMenuList
.
find
(
el
=>
el
.
menuCode
==
menu
.
parentCode
)
||
{};
if
(
parentMenu
.
menuCode
)
{
result
=
[...
this
.
getActivedMenu
(
parentMenu
),
...
result
];
}
return
result
;
},
getMenuByPath
(
path
)
{
return
this
.
flatMenuList
.
find
(
el
=>
el
.
menuUrl
==
path
)
||
{};
}
}
};
...
...
src/components/layout/main-menu.vue
View file @
d6264d37
...
...
@@ -2,9 +2,9 @@
<div
class=
"main-menu-box"
>
<div
class=
"main-menu"
>
<img
class=
"main-menu-logo"
src=
"@/assets/logo-layout.png"
alt=
""
@
click=
"toIndex"
/>
<div
class=
"main-menu-item active"
>
客户
</div
>
<div
class=
"main-menu-item"
>
营销
</div>
<
div
class=
"main-menu-item"
>
数据
<
/div>
<div
v-for=
"el in menuList.filter(el => el.hasRight == 1 && el.isShow == 1)"
:key=
"el.menuCode"
:class=
"['main-menu-item',
{ actived: activedCode == el.menuCode }]" @click="toPage(el)"
>
{{
el
.
menuName
}}
</div>
</div>
<div
class=
"main-info"
>
<change-store></change-store>
...
...
@@ -22,9 +22,34 @@ export default {
provide
:
{
projectName
:
'haoban-manage-web'
},
props
:
{
menuList
:
{
type
:
Array
,
default
:
()
=>
[]
},
activedCode
:
String
},
methods
:
{
toIndex
()
{
this
.
$router
.
push
(
'/'
);
},
toPage
(
menu
)
{
// 找到第一个有权限的路径
let
path
=
''
;
menu
.
childList
.
some
(
el
=>
{
if
(
el
.
hasRight
&&
Array
.
isArray
(
el
.
childList
))
{
el
.
childList
.
some
(
item
=>
{
if
(
item
.
hasRight
)
{
path
=
item
.
menuUrl
;
}
return
item
.
hasRight
;
});
}
return
path
;
});
if
(
path
)
{
this
.
$router
.
push
(
'/'
+
path
);
}
}
}
};
...
...
@@ -65,7 +90,7 @@ export default {
+
.main-menu-item
{
margin-left
:
40px
;
}
&
.active
{
&
.active
d
{
font-weight
:
600
;
color
:
#2f54eb
;
&::after
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment