菜单面包屑导航支持多层级显示

ruoyi-ui/src/components/Breadcrumb/index.vue

@@ -1,7 +1,7 @@
 <template>
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group name="breadcrumb">
-      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
+      <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
         <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span>
         <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
       </el-breadcrumb-item>
@@ -31,15 +31,45 @@ export default {
   methods: {
     getBreadcrumb() {
       // only show routes with meta.title
-      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
+      let matched = []
-      const first = matched[0]
+      const router = this.$route
-
+      const pathNum = this.findPathNum(router.path)
-      if (!this.isDashboard(first)) {
+      // multi-level menu
-        matched = [{ path: '/index', meta: { title: '首页' }}].concat(matched)
+      if (pathNum > 2) {
+        const reg = /\/\w+/gi
+        const pathList = router.path.match(reg).map((item, index) => {
+          if (index !== 0) item = item.slice(1)
+          return item
+        })
+        this.getMatched(pathList, this.$store.getters.defaultRoutes, matched)
+      } else {
+        matched = router.matched.filter(item => item.meta && item.meta.title)
+      }
+      // 判断是否为首页
+      if (!this.isDashboard(matched[0])) {
+        matched = [{ path: "/index", meta: { title: "首页" } }].concat(matched)
       }
-
       this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
     },
+    findPathNum(str, char = "/") {
+      let index = str.indexOf(char)
+      let num = 0
+      while (index !== -1) {
+        num++
+        index = str.indexOf(char, index + 1)
+      }
+      return num
+    },
+    getMatched(pathList, routeList, matched) {
+      let data = routeList.find(item => item.path == pathList[0] || (item.name += '').toLowerCase() == pathList[0])
+      if (data) {
+        matched.push(data)
+        if (data.children && pathList.length) {
+          pathList.shift()
+          this.getMatched(pathList, data.children, matched)
+        }
+      }
+    },
     isDashboard(route) {
       const name = route && route.name
       if (!name) {
@@ -65,7 +95,6 @@ export default {
   font-size: 14px;
   line-height: 50px;
   margin-left: 8px;
-
   .no-redirect {
     color: #97a8be;
     cursor: text;

ruoyi-ui/src/layout/components/Sidebar/SidebarItem.vue

@@ -62,11 +62,10 @@ export default {
       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
         }
+        // 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

ruoyi-ui/src/plugins/cache.js

@@ -26,6 +26,7 @@ const sessionCache = {
     if (value != null) {
       return JSON.parse(value)
     }
+    return null
   },
   remove (key) {
     sessionStorage.removeItem(key);
@@ -59,6 +60,7 @@ const localCache = {
     if (value != null) {
       return JSON.parse(value)
     }
+    return null
   },
   remove (key) {
     localStorage.removeItem(key);

ruoyi-ui/src/views/system/config/index.vue

@@ -157,7 +157,7 @@
           <el-input v-model="form.configKey" placeholder="请输入参数键名" />
         </el-form-item>
         <el-form-item label="参数键值" prop="configValue">
-          <el-input v-model="form.configValue" placeholder="请输入参数键值" />
+          <el-input v-model="form.configValue" type="textarea" placeholder="请输入参数键值" />
         </el-form-item>
         <el-form-item label="系统内置" prop="configType">
           <el-radio-group v-model="form.configType">

ruoyi-ui/src/views/system/role/index.vue

@@ -522,8 +522,8 @@ export default {
             })
           });
         });
-        this.title = "修改角色";
       });
+      this.title = "修改角色";
     },
     /** 选择角色权限范围触发 */
     dataScopeSelectChange(value) {
@@ -543,8 +543,8 @@ export default {
             this.$refs.dept.setCheckedKeys(res.checkedKeys);
           });
         });
-        this.title = "分配数据权限";
       });
+      this.title = "分配数据权限";
     },
     /** 分配用户操作 */
     handleAuthUser: function(row) {

ruoyi-ui/src/views/system/user/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <el-row :gutter="20">
-      <splitpanes class="default-theme">
+      <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
         <!--部门数据-->
         <pane size="16">
           <el-col>
@@ -14,8 +14,8 @@
           </el-col>
         </pane>
         <!--用户数据-->
-        <pane>
+        <pane size="84">
-          <el-col size="84">
+          <el-col>
             <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
               <el-form-item label="用户名称" prop="userName">
                 <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" />