wanda-adm:feat > 修改框架支持显示一级children

src/layout/components/Sidebar/SidebarItem.vue

@@ -1,11 +1,14 @@
 <template>
-    <div v-if="!item.meta || !item.meta.hidden" :class="['menu-wrapper', isCollapse ? 'simple-mode' : 'full-mode', { 'first-level': isFirstLevel }]">
-        <template v-if="theOnlyOneChild && !theOnlyOneChild.children">
+    <div v-if="!item.meta || !item.meta.hidden"
+         :class="['menu-wrapper', isCollapse ? 'simple-mode' : 'full-mode', { 'first-level': isFirstLevel }]">
+        <template v-if="theOnlyOneChild && !theOnlyOneChild.children && !alwaysShowRootMenu">
             <sidebar-item-link v-if="theOnlyOneChild.meta" :to="resolvePath(theOnlyOneChild.path)">
-                <el-menu-item :index="resolvePath(theOnlyOneChild.path)" :class="{ 'submenu-title-noDropdown': isFirstLevel }">
+                <el-menu-item :index="resolvePath(theOnlyOneChild.path)"
+                              :class="{ 'submenu-title-noDropdown': isFirstLevel }">
                     <!-- <svg-icon v-if="theOnlyOneChild.meta.icon" :name="theOnlyOneChild.meta.icon" /> -->
                     <i v-if="theOnlyOneChild.meta.icon" class="iconfont" :class="theOnlyOneChild.meta.icon"></i>
-                    <span v-if="theOnlyOneChild.meta.title" slot="title" class="title-name">{{ theOnlyOneChild.meta.title }}</span>
+                    <span v-if="theOnlyOneChild.meta.title" slot="title"
+                          class="title-name">{{ theOnlyOneChild.meta.title }}</span>
                 </el-menu-item>
             </sidebar-item-link>
         </template>
@@ -50,6 +53,13 @@ export default class extends Vue {
     @Prop({ default: true }) private isFirstLevel!: boolean;
     @Prop({ default: "" }) private basePath!: string;
 
+    get alwaysShowRootMenu() {
+        if (this.item.meta && this.item.meta.alwaysShow) {
+            return true
+        }
+        return false
+    }
+
     get showingChildNumber() {
         if (this.item.children) {
             const showingChildren = this.item.children.filter((item) => {
@@ -106,6 +116,7 @@ export default class extends Vue {
         &:hover {
             background-color: $subMenuHover !important;
         }
+
         &:active {
             background-color: $subMenuHover !important;
         }
@@ -147,9 +158,11 @@ export default class extends Vue {
     color: #ffffff;
     padding: 0 5px;
 }
+
 .title-name {
     color: #ffffff;
 }
+
 .svg-icon {
     margin-right: 16px;
 }

src/layout/components/Sidebar/index.vue

@@ -10,7 +10,8 @@
             :collapse-transition="false"
             mode="vertical"
         >
-            <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" :is-collapse="isCollapse" />
+            <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path"
+                          :is-collapse="isCollapse"/>
         </el-menu>
     </el-scrollbar>
 </template>

src/router/index.ts

@@ -30,7 +30,7 @@ export default new Router({
             component: () =>
                 import(
                     /* webpackChunkName: "login" */ "@/views/login/index.vue"
-                ),
+                    ),
             meta: { hidden: true }
         },
         {
@@ -43,7 +43,7 @@ export default new Router({
                     component: () =>
                         import(
                             /* webpackChunkName: "project" */ "@/views/project/index.vue"
-                        ),
+                            ),
                     meta: {
                         title: "项目管理",
                         icon: "icon-xiangmuguanli"
@@ -63,7 +63,7 @@ export default new Router({
                     component: () =>
                         import(
                             /* webpackChunkName: "allDetails" */ "@/layout/components/Navbar/MessageSever/MsgAllDetails.vue"
-                        ),
+                            ),
                     meta: {
                         title: "消息中心"
                     }
@@ -83,7 +83,7 @@ export default new Router({
                     component: () =>
                         import(
                             /* webpackChunkName: "build" */ "@/views/manage/build/index.vue"
-                        ),
+                            ),
                     meta: {
                         title: "建筑楼层管理"
                         // icon: "tree"
@@ -94,7 +94,7 @@ export default new Router({
                     component: () =>
                         import(
                             /* webpackChunkName: "model" */ "@/views/manage/model/index.vue"
-                        ),
+                            ),
                     meta: {
                         title: "模型修改任务"
                         // icon: "table"
@@ -105,7 +105,7 @@ export default new Router({
                     component: () =>
                         import(
                             /* webpackChunkName: "path" */ "@/views/manage/path/index.vue"
-                        ),
+                            ),
                     meta: {
                         hidden: true,
                         title: "模型后台处理监控"
@@ -127,7 +127,7 @@ export default new Router({
                     component: () =>
                         import(
                             /* webpackChunkName: "device" */ "@/views/maintain/device/index.vue"
-                        ),
+                            ),
                     meta: { title: "设备" }
                 },
                 {
@@ -135,7 +135,7 @@ export default new Router({
                     component: () =>
                         import(
                             /* webpackChunkName: "space" */ "@/views/maintain/space/index.vue"
-                        ),
+                            ),
                     meta: { title: "空间" }
                 },
                 {
@@ -179,7 +179,7 @@ export default new Router({
                     component: () =>
                         import(
                             /* webpackChunkName: "tiepoint" */ "@/views/scene/tiepoint/index.vue"
-                        ),
+                            ),
                     meta: { title: "绑点" }
                 },
                 {
@@ -187,7 +187,7 @@ export default new Router({
                     component: () =>
                         import(
                             /* webpackChunkName: "system" */ "@/views/scene/system/index.vue"
-                        ),
+                            ),
                     meta: { title: "系统图" }
                 },
                 {
@@ -195,8 +195,16 @@ export default new Router({
                     component: () =>
                         import(
                             /* webpackChunkName: "plane" */ "@/views/scene/plane/index.vue"
-                        ),
+                            ),
                     meta: { title: "平面图" }
+                },
+                {
+                    path: "mapping",
+                    component: () =>
+                        import(
+                            /* webpackChunkName: "mapping" */ "@/views/management/mapping/index.vue"
+                            ),
+                    meta: { title: "xxxxxxx" }
                 }
             ]
         },
@@ -219,10 +227,22 @@ export default new Router({
         {
             path: "/management",
             component: Layout,
+            redirect: "/management/mapping",
             meta: {
                 title: "综合管理与其他",
-                icon: "icon-zongheguanliyuqita"
+                icon: "icon-zongheguanliyuqita",
+                alwaysShow: true
             },
+            children: [
+                {
+                    path: "mapping",
+                    component: () =>
+                        import(
+                            /* webpackChunkName: "mapping" */ "@/views/management/mapping/index.vue"
+                            ),
+                    meta: { title: "映射关系维护" }
+                }
+            ]
         },
         {
             path: "/error",
@@ -238,7 +258,7 @@ export default new Router({
                     component: () =>
                         import(
                             /* webpackChunkName: "error-page-401" */ "@/views/error-page/401.vue"
-                        ),
+                            ),
                     name: "Page401",
                     meta: {
                         title: "401",
@@ -250,7 +270,7 @@ export default new Router({
                     component: () =>
                         import(
                             /* webpackChunkName: "error-page-404" */ "@/views/error-page/404.vue"
-                        ),
+                            ),
                     name: "404",
                     meta: {
                         title: "404",
@@ -262,7 +282,7 @@ export default new Router({
                     component: () =>
                         import(
                             /* webpackChunkName: "error-page-demo" */ "@/views/error-page/demo.vue"
-                        ),
+                            ),
                     name: "demo",
                     meta: {
                         title: "demo",

src/store/modules/app.ts

@@ -14,12 +14,12 @@ export enum DeviceType {
 }
 
 export interface IAppState {
-    device: DeviceType;
-    uploaderList: any[];
+    device: DeviceType
+    uploaderList: any[]
     sidebar: {
-        opened: boolean;
-        withoutAnimation: boolean;
-    };
+        opened: boolean
+        withoutAnimation: boolean
+    }
 }
 
 @Module({ dynamic: true, store, name: "app" })

src/styles/_variables.scss

@@ -17,7 +17,7 @@ $subMenuHover:#001528;
 $subMenuActiveText:#f4f4f5;
 $menuBg:#304156;
 $menuText:#bfcbd9;
-$menuActiveText:#409EFF; // Also see settings.sidebarTextTheme
+$menuActiveText:#409EFF; // 参考 settings.sidebarTextTheme
 
 // Login page
 $lightGray: #eee;
@@ -25,7 +25,7 @@ $darkGray:#889aa4;
 $loginBg: #2d3a4b;
 $loginCursorColor: #fff;
 
-// The :export directive is the magic sauce for webpack
+// The :export 指定输出
 // https://mattferderer.com/use-sass-variables-in-typescript-and-javascript
 :export {
   menuBg: $menuBg;

src/views/management/mappingRelation/index.vue

@@ -4,7 +4,7 @@
 
 <script>
 export default {
-    name: 'index'
+    name: 'mappingRelation'
 }
 </script>