# 菜单管理

# 1. 概述

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

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

菜单路径

# 2. 查询菜单

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

查询菜单

# 3. 新增菜单

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

新增菜单

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

新增菜单

# 菜单各属性介绍

菜单编辑页面信息如下

属性名	属性说明
编码	菜单编码，唯一不可重复，必填项
名称	菜单名称，必填项
上级目录	上级目录，只能选择目录作为上级
菜单类型	菜单类型，包括：`目录`、`菜单`
目录位置	仅在菜单类型为目录，且上级目录为空（即根目录）时显示。目录包含：`左侧`、`右上角`。见下文目录位置
是否外链	仅在菜单类型为菜单时显示。开启时，加载类型为`iframe`，路由配置外部系统的链接地址或static下的静态页面相对路径。
是否缓存	仅在菜单类型为菜单时显示。菜单是否需要前端缓存
路由	仅在菜单类型为菜单时显示。菜单地址，当资源类型为`菜单`时为必填项,目录也可配置路由用于自定义路由布局.顶级目录如若不配置路由则为页签路由(`@components/layouts/TabLayout`). 其他目录如若不配置路由则为空路由(`@components/layouts/RouteView`)
所属模块	仅在菜单类型为菜单时显示。菜单不是外链时所选(路由后的下拉)，菜单所属的模块.用于程序在哪个模块下查找菜单地址.模块定义详见模块配置
外链前缀	仅在菜单类型为菜单时显示。菜单所关联应用的前端前缀地址，仅适用菜单打开外链开关
是否免密	仅在菜单类型为菜单时显示。菜单是否允许三方系统免密访问
认证来源编码	仅在菜单类型为菜单时显示。菜单开启免密以后,需维护编码，此编码供三方系统调用时传参
是否单点	仅在菜单类型为菜单时显示。菜单开启单点开关以后,菜单跳转时会携带token
链接参数	仅在菜单类型为菜单时显示。菜单外链地址上携带的参数,包含固定值、动态值(来自动态参数)、自定义(来自数据字典或者手动输入)
链接参数自定义处理地址	仅在菜单类型为菜单时显示。与链接参数搭配使用，由业务系统自行处理链接自定义参数并替换，链接地址维护到数据字典中，在菜单中选择即可，字典编码`paramsUrlConfig`,请求默认为pos请求,body入参格式见下参数详情
图标	菜单图标
打开方式	仅在菜单类型为菜单时显示。菜单打开方式，包括：`tab`、`新窗口`、`弹窗`。详见下文打开方式
是否启用	菜单是否启用
加载类型	仅在菜单类型为菜单且打开方式为`tab`或`新窗口`时显示。加载类型，包括：`vue组件`、`iframe`。
是否可见	仅在菜单类型为菜单时显示。菜单是否可见，如果为不可见则不会在目录菜单列中展示
排序	菜单排序值，数字。用来控制菜单展示顺序
页面属性	仅在菜单类型为菜单时显示。仅当打开方式为`新窗口`或`弹窗`时显示。`新窗口`支持窗口的样式配置，例如（height:400px）；`弹窗`仅支持弹窗的宽度配置，例如（width：500px 或者 width：40%
扩展参数设置	菜单的扩展属性目前包含isVisisble、isRefresh两个属性
扩展参数设置	菜单的扩展属性,需要数据字典中创建，字典编码`base-resource-custom-param`
菜单个性化处理地址	菜单的个性化处理,目前包含visibility、countVisibility、count、color, 个性化地址维护到数据字典中，在菜单中选择即可，字典编码`indviUrlConfig`,请求默认为pos请求,body入参格式见下参数详情
高级js	打开菜单时需要执行的特殊js脚本
js函数	打开菜单时执行的前端js方法
加载类型	菜单的打开方式，如果菜单是外链默认为非vue组件打开菜单时执行的前端js方法

# 菜单相关出入参介绍

链接参数入参:
需将pageParam存入sessionStorage,字段名为'pageParam', 写法如下所示：

 const pageParam = {
   code: 'xxx',
   name: 'xxx'
 }
 sessionStorage.setItem('pageParam', JSON.stringify(pageParam))
 {
  //页面参数集合
 "pageParam": JSON.parse(sessionStorage.getItem('pageParam'))
 //需要拼接的地址	
 "url": "http://10.1.23.89/?name=张三",
 //菜单的自定义参数
  customParams": {
     "code": "userCode"//key为链接上的key值，userCode为需要解析的参数值。
  }   
 }

链接参数出参:

 {
  "code": "200",
  "data": "http://10.1.23.89/?name=张三&code=001&age=333"
  "msg":"操作成功",
  "success": true
}

个性化配置入参:

在需要重新加载菜单的地方，调用window.parent.postMessage(obj,'*')方法手动触发刷新菜单。 其中obj数据格式为：
{
//必传固定
"type": "refreshMenu",
"data": {
//参数可为空非必传
"categoryId": "",
"categoryLocation": "",
"resourceCode": "",
"pageData":{
//菜单的个性化配置的时候传入的数据;   
}
}
}

个性化配置出参:


{
  "visibility"::true,
  "countVisibility": true,
  "count": 20,
  "color": "red"
}

# 菜单传参

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

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

路由匹配