Skip to content

H
huamu
Commit 51ea3341 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

顶部菜单使用接口

parent dea1ccb2
Show whitespace changes
Inline Side-by-side
Showing with 227 additions and 177 deletions
src/store/actions.ts
View file @ 51ea3341
......@@ -77,10 +77,30 @@ export default {
name: item['名称'],
children: [],
}))
// TODO 生成菜单
// result.forEach((item:any) => {
// const cur = res.find((e:any) => e['父编码'] == item.key && e['顺序'] == '1')
// })
result.forEach((item: any) => {
const level2 = res.filter(
(e: any) => e['父编码'] == item.key && e['级别'] == '2',
)
if (level2 && level2.length > 0) {
item.children = level2.map((e: any) => ({
name: e['名称'],
list: res
.filter((child: any) => child?.['父编码'] == e['编码'])
.map((child: any) => ({
name: child['名称'],
id: child?.url || null,
})),
}))
} else {
item.children = res
.filter((child: any) => child?.['父编码']?.startsWith(item.key))
.map((child: any) => ({
name: child['名称'],
id: child?.url || null,
}))
}
})
commit('SET_MENUS', result)
},
}
......
src/store/mutations.ts
View file @ 51ea3341
......@@ -9,6 +9,9 @@ export default {
SET_AUTH(state: GlobalStateProps, val: any) {
state.auth = val
},
SET_MENUS(state: GlobalStateProps, data: any) {
state.menus = data
},
SET_SHOW_TAG(state: GlobalStateProps, val: boolean) {
state.showTag = val
},
......
src/store/state.ts
View file @ 51ea3341
......@@ -61,4 +61,5 @@ export default {
labelKey: '党组织名称',
result: [{}],
},
menus: [],
}
src/util/menus.ts
View file @ 51ea3341
export default [
{
key: 'system',
name: '系统',
children: [
{
name: '管市民',
list: [
{
name: '市民（房屋）信息系统',
id: 'page_40bf6060-cccc-11ea-a34f-f558bf9fe429',
},
{ name: '志愿者信息系统' },
{ name: '党员团员信息系统' },
{ name: '重点关怀对象信息系统' },
{ name: '统战人员信息系统' },
{ name: '司法管理人员信息系统' },
{ name: '自治组织信息系统' },
{ name: '更多系统' },
],
},
{
name: '管商办',
list: [
{
name: '楼宇信息系统',
id: 'page_50bb42f0-3544-11eb-813d-85e48fa0f61d',
},
{
name: '企业信息系统',
id: 'page_50bb42f0-3544-11eb-813d-85e48fa0f61d',
},
{
name: '商铺信息系统',
id: 'page_50bb42f0-3544-11eb-813d-85e48fa0f61d',
},
{ name: '更多系统' },
],
},
{
name: '管自己',
list: [
{
name: '视频信息系统',
id: 'page_19abe960-4109-11eb-bcd0-a98c14e187f6',
},
{
name: '城运信息系统',
id: 'page_af847490-3937-11eb-8bd2-af9cb9e97668',
},
{ name: '政府机关系统' },
{ name: '党建信息系统' },
{ name: '预案文件信息系统' },
{ name: '规划信息系统' },
{ name: '更多系统' },
],
},
{
name: '管服务',
list: [
{
name: '电梯信息系统',
id: 'page_87f75700-41d7-11eb-84c4-f9d93e21eaf4',
},
{ name: '设施信息系统' },
{ name: '人才公寓信息系统' },
{ name: '物业信息体统' },
{ name: '更多系统' },
],
},
],
},
{
key: 'application',
name: '应用',
children: [
{
list: [
{ name: '养老管理', id: 'page_a6073dc0-a70c-11ea-bbf4-6fdd8b50636a' },
{ name: '垃圾监管', id: 'page_9bf6bcb0-bd0b-11ea-aa4f-9d7cec320c12' },
{ name: '预案推荐' },
{ name: '志愿者管理' },
{ name: '稳商监管' },
],
},
{
list: [
{ name: '联勤联动', id: 'page_af847490-3937-11eb-8bd2-af9cb9e97668' },
{ name: '电子门铃', id: 'page_7dd43000-28bd-11eb-a455-67d7a1e16cfb' },
{ name: '党建管理' },
{ name: '规划管理' },
{ name: '物业管理' },
],
},
{
list: [
{ name: '疫情管控', id: 'page_b6134040-8869-11ea-8650-bb21e10eb77e' },
{ name: '春节帮困', id: 'page_e4ec9b30-4968-11eb-a659-8bbd9242be6e' },
{ name: '城运提效' },
{ name: '停车管理' },
{ name: '更多应用' },
],
},
{
list: [
{ name: '营商优化', id: 'page_b9efffb0-8aa2-11ea-8956-4db27eca528f' },
{ name: '电梯加装', id: 'page_87f75700-41d7-11eb-84c4-f9d93e21eaf4' },
{ name: '政企通讯' },
{ name: '人才公寓管理' },
],
},
],
},
{
key: 'ability',
name: '能力',
children: [
{
list: [
{
name: '填表机器人',
id: 'page_99c095b0-c1ec-11eb-b455-8573e34978b3',
},
{ name: '建言献策' },
],
},
{
list: [
{
name: '知识库推荐',
id: 'page_af847490-3937-11eb-8bd2-af9cb9e97668',
},
{ name: '问题上报' },
],
},
{
list: [
{
name: '15分钟服务圈模型',
id: 'page_90fa7af0-9f40-11eb-8841-4d34f1d622ba',
},
{ name: '服务获取', id: 'page_213eed40-a0bc-11eb-95d1-691952c8451e' },
],
},
{
list: [
{ name: '短信互动', id: 'page_e0fb11b0-f1b0-11ea-8dfd-198fd4af74bf' },
{ name: '活动参与' },
],
},
],
},
]
// export default [
// {
// key: 'system',
// name: '系统',
// children: [
// {
// name: '管市民',
// list: [
// {
// name: '市民（房屋）信息系统',
// id: 'page_40bf6060-cccc-11ea-a34f-f558bf9fe429',
// },
// { name: '志愿者信息系统' },
// { name: '党员团员信息系统' },
// { name: '重点关怀对象信息系统' },
// { name: '统战人员信息系统' },
// { name: '司法管理人员信息系统' },
// { name: '自治组织信息系统' },
// { name: '更多系统' },
// ],
// },
// {
// name: '管商办',
// list: [
// {
// name: '楼宇信息系统',
// id: 'page_50bb42f0-3544-11eb-813d-85e48fa0f61d',
// },
// {
// name: '企业信息系统',
// id: 'page_50bb42f0-3544-11eb-813d-85e48fa0f61d',
// },
// {
// name: '商铺信息系统',
// id: 'page_50bb42f0-3544-11eb-813d-85e48fa0f61d',
// },
// { name: '更多系统' },
// ],
// },
// {
// name: '管自己',
// list: [
// {
// name: '视频信息系统',
// id: 'page_19abe960-4109-11eb-bcd0-a98c14e187f6',
// },
// {
// name: '城运信息系统',
// id: 'page_af847490-3937-11eb-8bd2-af9cb9e97668',
// },
// { name: '政府机关系统' },
// { name: '党建信息系统' },
// { name: '预案文件信息系统' },
// { name: '规划信息系统' },
// { name: '更多系统' },
// ],
// },
// {
// name: '管服务',
// list: [
// {
// name: '电梯信息系统',
// id: 'page_87f75700-41d7-11eb-84c4-f9d93e21eaf4',
// },
// { name: '设施信息系统' },
// { name: '人才公寓信息系统' },
// { name: '物业信息体统' },
// { name: '更多系统' },
// ],
// },
// ],
// },
// {
// key: 'application',
// name: '应用',
// children: [
// {
// list: [
// { name: '养老管理', id: 'page_a6073dc0-a70c-11ea-bbf4-6fdd8b50636a' },
// { name: '垃圾监管', id: 'page_9bf6bcb0-bd0b-11ea-aa4f-9d7cec320c12' },
// { name: '预案推荐' },
// { name: '志愿者管理' },
// { name: '稳商监管' },
// ],
// },
// {
// list: [
// { name: '联勤联动', id: 'page_af847490-3937-11eb-8bd2-af9cb9e97668' },
// { name: '电子门铃', id: 'page_7dd43000-28bd-11eb-a455-67d7a1e16cfb' },
// { name: '党建管理' },
// { name: '规划管理' },
// { name: '物业管理' },
// ],
// },
// {
// list: [
// { name: '疫情管控', id: 'page_b6134040-8869-11ea-8650-bb21e10eb77e' },
// { name: '春节帮困', id: 'page_e4ec9b30-4968-11eb-a659-8bbd9242be6e' },
// { name: '城运提效' },
// { name: '停车管理' },
// { name: '更多应用' },
// ],
// },
// {
// list: [
// { name: '营商优化', id: 'page_b9efffb0-8aa2-11ea-8956-4db27eca528f' },
// { name: '电梯加装', id: 'page_87f75700-41d7-11eb-84c4-f9d93e21eaf4' },
// { name: '政企通讯' },
// { name: '人才公寓管理' },
// ],
// },
// ],
// },
// {
// key: 'ability',
// name: '能力',
// children: [
// {
// list: [
// {
// name: '填表机器人',
// id: 'page_99c095b0-c1ec-11eb-b455-8573e34978b3',
// },
// { name: '建言献策' },
// ],
// },
// {
// list: [
// {
// name: '知识库推荐',
// id: 'page_af847490-3937-11eb-8bd2-af9cb9e97668',
// },
// { name: '问题上报' },
// ],
// },
// {
// list: [
// {
// name: '15分钟服务圈模型',
// id: 'page_90fa7af0-9f40-11eb-8841-4d34f1d622ba',
// },
// { name: '服务获取', id: 'page_213eed40-a0bc-11eb-95d1-691952c8451e' },
// ],
// },
// {
// list: [
// { name: '短信互动', id: 'page_e0fb11b0-f1b0-11ea-8dfd-198fd4af74bf' },
// { name: '活动参与' },
// ],
// },
// ],
// },
// ]
src/view/components/nav-bar.vue
View file @ 51ea3341
......@@ -48,7 +48,7 @@
</n-icon>
</div>
<b>|</b>
<n-popover trigger="hover" class="top-menu">
<n-popover trigger="hover" class="top-menu" width="13rem">
<template #trigger>
<div class="align-center menu-btn">
<n-icon
......@@ -65,23 +65,40 @@
<div
v-for="menu in menus"
:key="menu.key"
:class="{ on: curMenu.key === menu.key }"
@click="curMenu = menu"
:class="{ on: curMenuKey === menu.key }"
@click="curMenuKey = menu.key"
>
{{ menu.name }}
</div>
</div>
<div class="children">
<div v-for="(child, i) in curMenu.children" :key="i">
<h3 v-if="child.name">{{ child.name }}</h3>
<div
v-for="(child, i) in curMenu.children"
:key="i"
:class="{ child: !child.list }"
>
<template v-if="child.list">
<h3>{{ child.name }}</h3>
<p
v-for="p in child.list"
:key="p.name"
:class="{ link: !!p.id }"
:title="p.name"
@click.prevent="toPage(p.id)"
>
{{ p.name }}
</p>
</template>
<template v-else>
<p
:key="child.name"
:class="{ link: !!child.id }"
:title="child.name"
@click.prevent="toPage(child.id)"
>
{{ child.name }}
</p>
</template>
</div>
</div>
</div>
......@@ -108,13 +125,17 @@ import nav1 from '@images/nav1.svg'
import nav2 from '@images/nav2.svg'
import nav3 from '@images/nav3.svg'
import nav5 from '@images/nav5.svg'
import menus from '@/util/menus'
const curMenu = ref<any>(menus[0])
const showFilterDrawer = computed(() => store.state.showFilterDrawer)
const showBuildingDrawer = computed(() => store.state.showBuildingDrawer)
const showActivityDrawer = computed(() => store.state.showActivityDrawer)
const showStructModal = computed(() => store.state.showStructModal)
const menus = computed(() => store.state.menus)
const curMenuKey = ref('101')
const curMenu = computed(() =>
menus.value.find((menu: any) => menu.key == curMenuKey.value),
)
const onClick = (type: string) => {
store.commit('SET_FILTER_DRAWER', false)
store.commit('SET_ACTIVITY_DRAWER', false)
......@@ -315,8 +336,7 @@ const toPage = (id?: string) => {
border .01rem solid $red
.top-menu
width 12rem
height 2.5rem
min-height 3rem
.menu
height 100%
border-radius .06rem
......@@ -339,21 +359,26 @@ const toPage = (id?: string) => {
background $light-red
color $red
.children
display flex
justify-content space-around
flex 1
>div
display inline-block
margin 0 .1rem
vertical-align top
h3
font-size .13rem
margin-bottom .1rem
p
width 1.2rem
width 1.4rem
margin .1rem 0
font-size .1rem
$text-overflow()
&.link
color #000
font-weight bold
cursor pointer
&:hover
color $red
&.child
p
margin .05rem 0
</style>
src/view/main.vue
View file @ 51ea3341
......@@ -31,6 +31,7 @@ import reset from '@images/reset.svg'
import store from '@/store'
store.dispatch('getAuth')
store.dispatch('getMenus')
const showReset = computed(() => store.state.showBasicInfo)
const map = ref<any>()
......
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