顶部菜单使用接口

src/store/actions.ts

@@ -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

@@ -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

@@ -61,4 +61,5 @@ export default {
     labelKey: '党组织名称',
     result: [{}],
   },
+  menus: [],
 }

src/util/menus.ts

-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

@@ -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>
-              <p
-                v-for="p in child.list"
-                :key="p.name"
-                :class="{ link: !!p.id }"
-                @click.prevent="toPage(p.id)"
-              >
-                {{ p.name }}
-              </p>
+            <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

@@ -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>()