pc3 一级大菜单，左边子系统菜单，功能Tab页，右键contextMenu

江苏院-吴昊

先上图：


pc2 的菜单模式适用于大型综合的后台信息管理系统，这类系统会涉及多个子系统，那么一级菜单就是一个子系统，二级菜单为子系统的功能菜单。
此外pc2的功能页采用动态TAB页，便于用户在同时打开多个功能时来回切换。

pc3 是起步集成了adminLTE框架，样式好看，但是不支持tab功能页，菜单也只有左侧功能树（其实adminLTE有很多版本，有的版本是支持功能Tab页，只是起步集成的这个不支持tab）。


为综合pc2和pc3的特点，我花了整整2天时间，在pc3的基础上做了改造。改造需要熟悉base.js、pc2/index.w、pc2/index.js 以及pc3/index.w、pc3/index.js 的部分代码，了解整个首页的构建流程。

1. 最顶上为一级菜单，点击一级菜单，会动态切换左侧功能树；
2. 左侧功能树，点击功能，通过TAB页打开功能；
3. 增加contextMenu，支持【关闭该功能】、【关闭其他功能】、【关闭所有功能】。

yyy66887

江苏院大神，先点个赞，再mark！

xqbq2517

真是被感动的痛哭流涕，我什么时候能像你一样优秀？源码可否分享下?

江苏院-吴昊

xqbq2517 发表于 2019-7-10 15:48
真是被感动的痛哭流涕，我什么时候能像你一样优秀？源码可否分享下?

后面有空把思路说下，其实也不难

江苏院-吴昊

base.js 实现页面底层的逻辑，包括用shellImpl打开关闭页面，与服务端交互数据（如获取功能树对象等）。
而pc2/index、pc3/index 只是做了页面展示层的逻辑。通过定义事件，在base.js做底层操作时，去触发事件，让页面产生变化。

主要关注以下事件。
onLoadFunctionTree ，加载功能树
onShowPage ， 打开功能页
onclosePage ， 关闭功能页

所以，在pc2和pc3 的index 中，要研究下这些事件的callback函数。

江苏院-吴昊

base.js不用做任何修改。主要拿pc2/index的代码融入到pc3/index中。
建议先改造成一级菜单+左侧树形菜单。这个改造调通后，再改造tab页。分解目标，逐个解决，会比较容易。


将pc2的一级菜单div.x-portal-first-menu放入到pc3的 nav中



将pc2的doCreateMenu 和 createFirstMenuItem 融入到 pc3中的onLoadFunctionTree，这个完成一级菜单的调整。

其中注意doClickFirstMenuItem 方法，这个方法的逻辑替换为 pc3的左侧功能树的加载，printTree函数，注意在这个函数中跳过一级菜单。

这样就完成了一级菜单+左侧菜单树的改造。

江苏院-吴昊

平台pc2的 .x-portal-first-menu的menu拼错了，要注意下，我自己再调试时，拼写的是正确的menu，结果jquery始终找不到 “meun”

江苏院-吴昊

功能tab页改造，上图就是改造后的html结构，相应的css也要复制过来。




相应showPage，closePage事件 参考pc2实现即可。

最后，右键菜单，参考平台第三方案例即可。

malixin

江苏院-吴昊 发表于 2019-7-16 13:22
功能tab页改造，上图就是改造后的html结构，相应的css也要复制过来。

楼主是哪个版本

江苏院-吴昊

malixin 发表于 2019-7-16 17:20
楼主是哪个版本

3.8，3.6应该也可以。