菜单

src/layout/components/Sidebar/Item.vue

@@ -18,6 +18,8 @@ export default {
 
     if (icon) {
       vnodes.push(<svg-icon icon-class={icon}/>)
+    } else {
+      vnodes.push(<span style="display: inline-block; width: 10px;"/>)
     }
 
     if (title) {

src/layout/components/Sidebar/Logo.vue

@@ -15,7 +15,7 @@
 				key="collapse"
 				class="sidebar-logo-link"
 				to="/">
-				<img v-if="logo" :src="logo" class="sidebar-logo" />
+				<img v-if="logo" :src="logo" class="sidebar-logo-close" />
 				<h1
 					v-else
 					class="sidebar-title"
@@ -118,7 +118,13 @@ export default {
 	}
 
 	&.collapse {
-		.sidebar-logo {
+		// .sidebar-logo {
+		// 	margin-right: 0px;
+		// }
+		.sidebar-logo-close {
+			width: 54px;
+			height: 19px;
+			vertical-align: middle;
 			margin-right: 0px;
 		}
 	}

src/layout/components/Sidebar/SidebarItem.vue

@@ -3,16 +3,16 @@
     <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
+          <item icon="menuIcon" :title="onlyOneChild.meta.title" />
         </el-menu-item>
       </app-link>
     </template>
 
     <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
       <template slot="title">
-        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
+        <item v-if="item.meta" icon="menuIcon" :title="item.meta.title" />
       </template>
-      <sidebar-item
+      <sidebar-item-sub
         v-for="(child, index) in item.children"
         :key="child.path + index"
         :is-nest="true"
@@ -30,10 +30,11 @@ import { isExternal } from '@/utils/validate'
 import Item from './Item'
 import AppLink from './Link'
 import FixiOSBug from './FixiOSBug'
+import SidebarItemSub from './SidebarItemSub'
 
 export default {
   name: 'SidebarItem',
-  components: { Item, AppLink },
+  components: { Item, AppLink, SidebarItemSub },
   mixins: [FixiOSBug],
   props: {
     // route object

src/layout/components/Sidebar/SidebarItemSub.vue

@@ -0,0 +1,96 @@
+<template>
+  <div v-if="!item.hidden">
+    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
+      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item icon="" :title="onlyOneChild.meta.title" />
+        </el-menu-item>
+      </app-link>
+    </template>
+
+    <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
+      <template slot="title">
+        <item v-if="item.meta" icon="" :title="item.meta.title" />
+      </template>
+      <sidebar-item-sub
+        v-for="(child, index) in item.children"
+        :key="child.path + index"
+        :is-nest="true"
+        :item="child"
+        :base-path="resolvePath(child.path)"
+        class="nest-menu"
+      />
+    </el-submenu>
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { isExternal } from '@/utils/validate'
+import Item from './Item'
+import AppLink from './Link'
+import FixiOSBug from './FixiOSBug'
+
+export default {
+  name: 'SidebarItemSub',
+  components: { Item, AppLink },
+  mixins: [FixiOSBug],
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    this.onlyOneChild = null
+    return {}
+  },
+  methods: {
+    hasOneShowingChild(children = [], parent) {
+      if (!children) {
+        children = [];
+      }
+      const showingChildren = children.filter(item => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      if (isExternal(routePath)) {
+        return routePath
+      }
+      if (isExternal(this.basePath)) {
+        return this.basePath
+      }
+      return path.resolve(this.basePath, routePath)
+    }
+  }
+}
+</script>

src/layout/components/Sidebar/index.vue

@@ -28,10 +28,10 @@
 				mode="vertical">
 				<!-- 根据 sidebarRouters 路由，生成菜单 -->
 				<sidebar-item
-					v-for="(route, index) in routeList"
+					v-for="(route, index) in routeList.children"
 					:key="route.path + index"
 					:item="route"
-					:base-path="route.path" />
+					:base-path="routeList.path+ '/'+ route.path" />
 			</el-menu>
 		</el-scrollbar>
 	</div>
@@ -49,9 +49,7 @@ export default {
 		...mapState(['settings']),
 		...mapGetters(['sidebarRouters', 'sidebar', 'choicepart']),
     routeList() {
-      // return [this.partList[this.choicepart]]
-			// return [this.sidebarRouters[29]]
-			return [this.sidebarRouters[this.choicepart]]
+			return this.sidebarRouters[this.choicepart]
     },
 		activeMenu() {
 			const route = this.$route;

src/views/system/menu/index.vue

@@ -32,11 +32,11 @@
     <el-table v-if="refreshTable" v-loading="loading" :data="menuList" row-key="id" :default-expand-all="isExpandAll"
               :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
       <el-table-column prop="name" label="菜单名称" :show-overflow-tooltip="true" width="250"></el-table-column>
-      <el-table-column prop="icon" label="图标" align="center" width="100">
+      <!-- <el-table-column prop="icon" label="图标" align="center" width="100">
         <template v-slot="scope">
           <svg-icon :icon-class="scope.row.icon" />
         </template>
-      </el-table-column>
+      </el-table-column> -->
       <el-table-column prop="sort" label="排序" width="60"></el-table-column>
       <el-table-column prop="permission" label="权限标识" :show-overflow-tooltip="true" />
       <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true" />
@@ -76,7 +76,7 @@
               </el-radio-group>
             </el-form-item>
           </el-col>
-          <el-col :span="24">
+          <!-- <el-col :span="24">
             <el-form-item v-if="form.type !== 3" label="菜单图标">
               <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
                 <IconSelect ref="iconSelect" @selected="selected" />
@@ -87,7 +87,7 @@
                 </el-input>
               </el-popover>
             </el-form-item>
-          </el-col>
+          </el-col> -->
           <el-col :span="12">
             <el-form-item label="菜单名称" prop="name">
               <el-input v-model="form.name" placeholder="请输入菜单名称" />
@@ -263,9 +263,9 @@ export default {
   },
   methods: {
     // 选择图标
-    selected(name) {
-      this.form.icon = name;
-    },
+    // selected(name) {
+    //   this.form.icon = name;
+    // },
     /** 查询菜单列表 */
     getList() {
       this.loading = true;
@@ -305,7 +305,7 @@ export default {
         id: undefined,
         parentId: 0,
         name: undefined,
-        icon: undefined,
+        // icon: undefined,
         type: SystemMenuTypeEnum.DIR,
         sort: undefined,
         status: CommonStatusEnum.ENABLE,