feat: 一级菜单只存一级

backend/src/main/java/io/dataease/auth/api/dto/DynamicMenuDto.java

@@ -27,6 +27,8 @@ public class DynamicMenuDto implements Serializable {
 
     private Boolean hidden;
 
+    private Integer type;
+
     private List<DynamicMenuDto> children;
 
 }

backend/src/main/java/io/dataease/auth/service/impl/DynamicMenuServiceImpl.java

@@ -36,6 +36,7 @@ public class DynamicMenuServiceImpl implements DynamicMenuService {
         dynamicMenuDto.setName(sysMenu.getName());
         dynamicMenuDto.setPath(sysMenu.getPath());
         dynamicMenuDto.setRedirect(null);
+        dynamicMenuDto.setType(sysMenu.getType());
         dynamicMenuDto.setComponent(sysMenu.getComponent());
         MenuMeta menuMeta = new MenuMeta();
         menuMeta.setTitle(sysMenu.getTitle());

backend/src/main/java/io/dataease/controller/sys/SysMenuController.java

@@ -31,6 +31,7 @@ public class SysMenuController {
     @PostMapping("/childNodes/{pid}")
     public List<MenuNodeResponse> childNodes(@PathVariable("pid") Long pid){
         List<SysMenu> nodes = menuService.nodesByPid(pid);
+        nodes = nodes.stream().filter(node -> !node.getHidden()).collect(Collectors.toList());
         return menuService.convert(nodes);
     }
 

frontend/src/permission.js

@@ -84,7 +84,12 @@ const filterRouter = routers => {
   }
   const tempResults = routers.filter(router => hasPermission(router, user_permissions))
   // 如果是一级菜单(目录) 没有字菜单 那就移除
-  return tempResults.filter(item => item.children && item.children.length)
+  return tempResults.filter(item => {
+    if (item.type === 0 && (!item.children || item.children.length === 0)) {
+      return false
+    }
+    return true
+  })
 }
 const hasPermission = (router, user_permissions) => {
   // 菜单要求权限 但是当前用户权限没有包含菜单权限

frontend/src/store/modules/permission.js

@@ -31,7 +31,11 @@ const actions = {
 }
 
 export const filterAsyncRouter = (routers) => { // 遍历后台传来的路由字符串，转换为组件对象
-  return routers.filter(router => {
+  return routers.map(router => {
+    // 如果是菜单类型 且 是一级菜单 需要包装一层父级目录
+    if (router.type === 1 && router.pid === 0 && router.component && router.component !== 'Layout') {
+      router = decorate(router)
+    }
     if (router.component) {
       if (router.component === 'Layout') { // Layout组件特殊处理
         router.component = Layout
@@ -43,9 +47,8 @@ export const filterAsyncRouter = (routers) => { // 遍历后台传来的路由
     if (router.children && router.children.length) {
       router.children = filterAsyncRouter(router.children)
     }
-    return true
-  }).map(router => {
     router.hasOwnProperty('id') && delete router.id
+    router.hasOwnProperty('type') && delete router.type
     router.hasOwnProperty('pid') && delete router.pid
     router.hasOwnProperty('children') && (!router['children'] || !router['children'].length) && delete router.children
     router.hasOwnProperty('redirect') && !router['redirect'] && delete router.redirect
@@ -53,6 +56,25 @@ export const filterAsyncRouter = (routers) => { // 遍历后台传来的路由
   })
 }
 
+// 包装一层父级目录
+export const decorate = (router) => {
+  const parent = {
+    id: router.id + 1000000,
+    path: router.path,
+    component: 'Layout'
+  }
+  const current = {}
+  Object.assign(current, router)
+  current.type = 1
+  current.path = 'index'
+  current.pid = parent.id
+  parent.children = [current]
+  if (router.hidden) {
+    parent.hidden = router.hidden
+  }
+  return parent
+}
+
 export const loadView = (view) => {
   return (resolve) => require([`@/views/${view}`], resolve)
 }

frontend/src/views/system/datasource/form.vue

 <template>
-  <layout-content :header="formType=='add' ? $t('datasource.create') : $t('datasource.modify')" back-name="数据源1">
+  <layout-content :header="formType=='add' ? $t('datasource.create') : $t('datasource.modify')" back-name="数据源">
     <el-form ref="dsForm" :model="form" :rules="rule" size="small" label-width="auto" label-position="right">
       <el-form-item :label="$t('commons.name')" prop="name">
         <el-input v-model="form.name" autocomplete="off" />
@@ -128,7 +128,7 @@ export default {
       }
     },
     backToList() {
-      this.$router.push({ name: '数据源1' })
+      this.$router.push({ name: '数据源' })
     }
   }
 }

frontend/src/views/system/datasource/index.vue

@@ -11,7 +11,8 @@
     >
 
       <template #toolbar>
-        <fu-table-button v-permission="['datasource:add']" icon="el-icon-circle-plus-outline" :label="$t('datasource.create')" @click="create" />
+        <!-- <fu-table-button v-permission="['datasource:add']" icon="el-icon-circle-plus-outline" :label="$t('datasource.create')" @click="create" /> -->
+        <el-button v-permission="['datasource:add']" icon="el-icon-circle-plus-outline" @click="create">{{ $t('datasource.create') }}</el-button>
       </template>
 
       <!-- <el-table-column type="selection" fix /> -->

frontend/src/views/system/menu/form.vue

@@ -8,7 +8,7 @@
           <el-radio-button label="2">按钮</el-radio-button>
         </el-radio-group>
       </el-form-item>
-      <el-form-item v-if="form.type!== 2" label="菜单图标" prop="icon">
+      <el-form-item v-if="form.type=== 1 && form.icon" label="菜单图标" prop="icon">
         <el-popover
           placement="bottom-start"
           width="425"
@@ -29,21 +29,21 @@
       <el-form-item v-if="form.type === 2" label="按钮名称" prop="title">
         <el-input v-model="form.title" placeholder="按钮名称" />
       </el-form-item>
-      <el-form-item v-if="form.type !== 0" label="权限标识" prop="permission">
+      <!-- <el-form-item v-if="form.type !== 0" label="权限标识" prop="permission">
         <el-input v-model="form.permission" :disabled="form.iframe || formType!=='add'" placeholder="权限标识" />
       </el-form-item>
       <el-form-item v-if="form.type !== 2" label="路由地址" prop="path">
         <el-input v-model="form.path" placeholder="路由地址" :disabled="formType!=='add'" />
-      </el-form-item>
-      <el-form-item label="菜单排序" prop="menuSort">
+      </el-form-item> -->
+      <el-form-item v-if="form.type !== 2" label="菜单排序" prop="menuSort">
         <el-input-number v-model.number="form.menuSort" :min="0" :max="999" controls-position="right" />
       </el-form-item>
-      <el-form-item v-if="!form.iframe && form.type === 1" label="组件名称" prop="componentName">
+      <!-- <el-form-item v-if="!form.iframe && form.type === 1" label="组件名称" prop="componentName">
         <el-input v-model="form.componentName" :disabled="formType!=='add'" placeholder="匹配组件内Name字段" />
       </el-form-item>
       <el-form-item v-if="!form.iframe && form.type === 1" label="组件路径" prop="component">
         <el-input v-model="form.component" :disabled="formType!=='add'" placeholder="组件路径" />
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item label="上级类目" prop="pid">
         <treeselect
           v-model="form.pid"

frontend/src/views/system/menu/index.vue

@@ -15,23 +15,23 @@
         :data="tableData"
         lazy
         :load="initTableData"
-        style="width: 100%"
+
         :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
         row-key="menuId"
       >
 
         <!-- <el-table-column type="selection" fix /> -->
-        <el-table-column :show-overflow-tooltip="true" label="菜单标题" width="150px" prop="title" />
-        <el-table-column prop="icon" label="图标" align="center" width="60px">
+        <el-table-column :show-overflow-tooltip="true" label="菜单标题" prop="title" />
+        <el-table-column prop="icon" label="图标" align="center">
           <template slot-scope="scope">
             <svg-icon :icon-class="scope.row.icon ? scope.row.icon : ''" />
           </template>
         </el-table-column>
 
-        <el-table-column :show-overflow-tooltip="true" prop="permission" label="权限标识" />
-        <el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径" />
+        <!-- <el-table-column :show-overflow-tooltip="true" prop="permission" label="权限标识" />
+        <el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径" /> -->
 
-        <el-table-column prop="createTime" label="创建日期" width="160px">
+        <el-table-column prop="createTime" label="创建日期">
           <template v-slot:default="scope">
             <span>{{ scope.row.createTime | timestampFormatDate }}</span>
           </template>