配置二级菜单,即组件对应的主菜单。先看order组件的demo界面:
如何配置上图红框里的菜单呢?
1. 查看界面对应的html源码。
鼠标放到“首页”菜单按钮上,右击-》检查(我的是chrome浏览器就是这么操作,其他浏览器自行百度对应方法)。弹出如下窗口:
可以看到该界面对应的Widget路径:component://order/widget/ordermgr/OrderMenus.xml#OrderAppBar
2.打开OrderMenus.xml#OrderAppBar:
<menu name="OrderAppBar" title="${uiLabelMap.OrderManager}" extends="CommonAppBarMenu" extends-resource="component://common/widget/CommonMenus.xml">
<menu-item name="request" title="${uiLabelMap.OrderRequests}">
<condition>
<or>
<if-has-permission permission="ORDERMGR" action="_VIEW"/>
<if-has-permission permission="ORDERMGR" action="_PURCHASE_VIEW"/>
</or>
</condition>
<link target="FindRequest"/>
</menu-item>
<menu-item name="quote" title="${uiLabelMap.OrderOrderQuotes}">
<condition>
<or>
<if-has-permission permission="ORDERMGR" action="_VIEW"/>
<if-has-permission permission="ORDERMGR" action="_PURCHASE_VIEW"/>
</or>
</condition>
<link target="FindQuote"/>
</menu-item>
<menu-item name="orderlist" title="${uiLabelMap.OrderOrderList}">
<condition>
<if-has-permission permission="ORDERMGR" action="_VIEW"/>
</condition>
<link target="orderlist"/>
</menu-item>
<menu-item name="findorders" title="${uiLabelMap.OrderFindOrder}">
<condition>
<if-has-permission permission="ORDERMGR" action="_VIEW"/>
</condition>
<link target="findorders"/>
</menu-item>
<menu-item name="orderentry" title="${uiLabelMap.OrderOrderEntry}">
<condition>
<or>
<if-has-permission permission="ORDERMGR" action="_CREATE"/>
<if-has-permission permission="ORDERMGR" action="_PURCHASE_CREATE"/>
</or>
</condition>
<link target="orderentry" link-type="anchor"/>
</menu-item>
<menu-item name="return" title="${uiLabelMap.OrderOrderReturns}">
<condition>
<if-has-permission permission="ORDERMGR" action="_RETURN"/>
</condition>
<link target="findreturn"/>
</menu-item>
<menu-item name="requirement" title="${uiLabelMap.OrderRequirements}">
<condition>
<or>
<if-has-permission permission="ORDERMGR" action="_VIEW"/>
<if-has-permission permission="ORDERMGR_ROLE" action="_VIEW"/>
</or>
</condition>
<link target="FindRequirements"/>
</menu-item>
<menu-item name="reports" title="${uiLabelMap.CommonReports}">
<link target="OrderPurchaseReportOptions"/>
</menu-item>
<menu-item name="stats" title="${uiLabelMap.CommonStats}">
<link target="orderstats"/>
</menu-item>
</menu>
3.分析源码
OrderMenus.xml#OrderAppBar配置了order组件的菜单显示列表,以及菜单需要的对应权限。
3.1 menu-item标签属性含义:
name属性:这个好像没什么用,就是一个标识左右,便于理解该菜单的含义。
title属性:这个是菜单显示的文本,比如 title="${uiLabelMap.OrderRequests}" 就是在界面上显示 “请求” 菜单按钮(国际化配置文件在order/config/OrderUiLabels.xml)。这里有个疑问,界面上“请求”菜单按钮前面 还有个 “首页”,这个配置里面没配置啊,为什么会出现呢?猜测是js,或者是menu-item标签自定义好的。每个组件的菜单都会自动添加 “首页” 菜单按钮。
3.2 condition标签含义:这个比较好理解,就是这个菜单需要的权限,如果登录用户没有对应的权限,应该是不能看到,也不能访问该菜单。
3.3 link标签:这个会转换为对应的超链接。比如:<link target="FindQuote"/>
转换为超链接后:<a href="/ordermgr/control/FindRequest">
最后再把一个菜单配置源码与最后生成的html贴出来,能更好的理解:
菜单配置源码:
<menu-item name="request" title="${uiLabelMap.OrderRequests}">
<condition>
<or>
<if-has-permission permission="ORDERMGR" action="_VIEW"/>
<if-has-permission permission="ORDERMGR" action="_PURCHASE_VIEW"/>
</or>
</condition>
<link target="FindRequest"/>
</menu-item>
最后生成的html源码:
<li><a href="/ordermgr/control/FindRequest"> 请求</a>
</li>