菜单管理

1. 概述

菜单管理模块负责目录、菜单信息的维护。（目录：将有类似属性的菜单归类，类似文件夹。菜单：需要打开的页面信息。） 主要功能包含：新增、修改、查询、启用、停用、删除、数据日志、生命周期、导入、导出、查看。

【菜单路径：】系统管理–>菜单管理

2. 查询菜单

菜单管理页面可以根据菜单编码、菜单名称来查询。

3. 新增菜单

勾选目录，再点击新增按钮，打开新增菜单窗口页面中，上级目录默认为勾选的目录。

未勾选目录，点击新增按钮，打开新增资源窗口页面，上级目录为空。

菜单各属性介绍

菜单编辑页面信息如下

属性名	属性说明
编码	菜单编码，唯一不可重复，必填项
名称	菜单名称，必填项
上级目录	上级目录，只能选择目录作为上级
菜单类型	菜单类型，包括：目录、菜单
目录位置	仅在菜单类型为目录，且上级目录为空（即根目录）时显示。目录包含：左侧、右上角。见下文目录位置
所属模块	菜单所属的模块.用于程序在哪个模块下查找菜单地址.模块定义详见模块配置
路由	菜单地址，当资源类型为菜单时为必填项,目录也可配置路由用于自定义路由布局.顶级目录如若不配置路由则为页签路由(@components/layouts/TabLayout). 其他目录如若不配置路由则为空路由(@components/layouts/RouteView)
图标	菜单图标
打开方式	菜单打开方式，包括：tab、新窗口、iframe、弹窗。如果菜单的路由非系统内部vue页面路径，打开方式请使用 iframe。详见下文打开方式
是否外链	菜单是否为外部链接。开启时，打开方式为iframe，路由配置外部系统的链接地址或static下的静态页面相对路径。
是否启用	菜单是否启用
是否可见	菜单是否可见，如果为不可见则不会在目录菜单列中展示
是否缓存	菜单是否需要前端缓存
排序	菜单排序值，数字。用来控制菜单展示顺序
页面属性	仅当打开方式为新窗口或弹窗时显示，支持窗口的样式配置。例如（height:400px）
高级js	打开菜单时需要执行的特殊js脚本

菜单传参

• 动态路由匹配: 很多时候，我们需要将给定匹配模式的路由映射到同一个组件。

例如，我们可能有一个 person-details 组件，它应该对所有用户进行渲染，但用户 ID 不同. 我们可以在编码中使用一个动态字段来实现,我们称之为路径参数。 路径参数 用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。

路由跳转使用:

• 传递固定参数给路由组件,组件可通过props接收路由参数.

• 如果是要传不固定的参数，比如token，又不想将参数暴露在路由上,可使用高级js进行脚本编辑。

打开方式

打开方式为tab时，页面以页签方式打开，路由必须为系统内部vue页面路径，如下：

打开方式为iframe时，是否外链开启，路由配置外部系统的链接地址或static下的静态页面相对路径。外部链接示例如下：

打开方式为弹窗时，页面窗口形式打开，如下：

打开方式为新窗口时，会打开新页面，如下：

static 菜单配置方式

目录位置

目录位置为左侧时，目录显示在页面最左侧。入下图：

目录位置为右上角时，目录显示在页面最右上角。入下图：

4. 修改菜单

点击菜单表格行操作列编辑按钮，即可打开菜单详情页面进行编辑操作。

页面编辑信息详见上文新增菜单

5. 启用菜单

对停用状态的菜单进行启用操作，点击是否启用列switch按钮，将菜单状态置为启用状态即可。

6. 停用菜单

对启用状态的菜单进行停用操作，点击是否启用列switch按钮，将菜单状态置为停用状态即可。注意：菜单停用后，拥有该菜单的访问权限将不可用。

7. 删除菜单

菜单删除包含两种操作场景：单独删除和批量删除。

• 单独删除。点击菜单表格行操作列删除按钮，即可对菜单进行删除。

  

• 批量删除。勾选菜单后，点击表头上方删除按钮，即可对菜单进行批量删除。

  

  注意：目录下如果有子级数据，则不可删除。

8. 菜单数据日志

菜单管理提供数据日志的查询功能，点击数据日志按钮即可进入菜单管理模块的数据日志列表页面，详情参考数据日志。

9. 菜单生命周期

菜单管理提供生命周期的查询功能，勾选表格行选中框，点击生命周期即可查看该条数据的生命周期信息，详情参考生命周期。

10. 菜单导入

菜单管理提供数据的导入功能，详情参考导入导出-导入流程。

11. 菜单导出

菜单管理提供数据的导出功能，详情参考导入导出-导出流程。

12. 菜单详情查看

菜单管理提供数据的详情查看功能，选择某一个记录，点击【查看】按钮，即可查看该条数据的详细信息。