门户定制案例-根据打开页定位门户左边菜单

运行效果

在门户中，打开或切换页面时，左侧功能树，根据打开页面进行定位

实现方法

1. 定制企业门户应用，参考《门户定制》
2. 在门户页 /entry/pcxapp/pcx/index.w 中，页面激活事件 onPageActive 的 after 扩展点，设置当前页面
3. 在门户页 /entry/pcxapp/pcx/index.w 中，数据初始化事件 onInitState 的 after 扩展点，设置当前展开关闭标识
4. 在门户页 /entry/pcxapp/pcx/index.w 中，菜单渲染方法 menuRender 的 before 扩展点，设置需要打开的菜单 key

添加扩展点

桌面端门户的扩展点方法写在 /UI2/comp/portalConfig/components/portalConfig/portalConfig.config.pc.js 文件的 onConfigContextInit 方法中，如果没有 portalConfig.config.pc.js 文件，将 portalConfig.config.js 文件复制为 portalConfig.config.pc.js 文件

添加门户页 /entry/pcxapp/pcx/index.w 页面激活事件 onPageActive、数据初始化事件 onInitState 的 after 扩展点，添加菜单渲染方法 menuRender 的 before 扩展点，代码如下

    async onConfigContextInit(configContextProcessor) {
        let portalConfig = {
            "config": {   
                "/entry": {
                    "/pcxapp": {
                        "/pcx": {
                            "/index.w": {
                                "onPageActive":{
                                    "@after":(result,pageInfo, portalConfig, publicConfig)=>{   
                                    }
                                },
                                "onInitState":{
                                    "@after":(result,...args)=>{                                     
                                    }
                                },
                                "menuRender":{
                                    "@before":(props, defaultDom)=>{
                                    }
                                }                                                        
                            }
                        }
                    }
                }
            }
        };
        //处理自定义内容
        merge(_this.configContext, portalConfig);
        ConfigContextProcessor.enhancePageAdvice(_this);
    }

完整代码

/UI2/comp/portalConfig/components/portalConfig/portalConfig.config.pc.js 文件的完整代码如下

import { merge,cloneDeep } from "lodash";
import ConfigContextProcessor from 'core/framework/ConfigContextProcessor';
import React from 'react';

export default {

    processConfigContext(configContext) {
    },  

    //菜单打开关闭标识
    changeOpenKeys:false,

    async onConfigContextInit(configContextProcessor) {
        //获取当前页
        let _this = configContextProcessor.page;

        // 递归实现DFS查找,删除不符合条件的菜单，保留树形结构
        const dfsFindClass=(data, condition)=> {
            for (let i = 0; i < data.length; i++) {
                let item = data[i];
                if (item.hasOwnProperty("children")) {
                    item.children = dfsFindClass(item.children, condition);
                    if(item.children.length==0){
                        data.splice(i, 1);
                        --i;
                    }
                } else if (!condition(item)) {
                    data.splice(i, 1);
                    --i;
                }
            }
            return data;
        }

        let portalConfig = {
            "config": {   
                "/entry": {
                    "/pcxapp": {
                        "/pcx": {
                            "/index.w": {
                                //页面激活事件
                                "onPageActive":{
                                    "@after":(result,pageInfo, portalConfig, publicConfig)=>{   
                                        //获取当前页面激活事件                               
                                        _this.setState({activePgae:pageInfo});
                                    }
                                },
                                //页面初始设置菜单打开及关闭事件
                                "onInitState":{
                                    "@after":(result,...args)=>{                                     
                                        const onOpenChange=(openKeys)=>{ 
                                            //设置当前展开关闭标识
                                            this.changeOpenKeys=true;                                  
                                            _this.setState({openKeys});
                                        }
                                        //获取当前页面激活事件                               
                                        _this.setState({onOpenChange});
                                        return result
                                    }
                                },

                                //菜单渲染
                                "menuRender":{
                                    "@before":(props, defaultDom)=>{
                                        if(this.changeOpenKeys){
                                            this.changeOpenKeys=false;
                                            return;
                                        }
                                        //获取当前激活页面
                                        let {activePgae}=props||{};                                 
                                        //获取菜单数据
                                        let {menuData}=defaultDom?.props||{};
                                        if(activePgae&&menuData&&menuData.length>0){                                                                     
                                            //获取当前菜单及其父菜单信息(树形)
                                            let menus=dfsFindClass(cloneDeep(menuData), item => item.key == activePgae.key);                                      
                                            if(menus&&menus.length>0){
                                                //转换树形数据数据为列表数据
                                                let transData=(data)=>{
                                                    let floderMenu=[];
                                                    for(let item of data){
                                                        if(item.isLeaf==true){
                                                           continue;
                                                        }
                                                        floderMenu.push(item);  
                                                        floderMenu.push(... transData(item.children));
                                                    }
                                                    return floderMenu;
                                                }
                                                //获取当前菜单所有非叶子节点菜单数据
                                                let floderMenu=transData(menus);
                                                let openKeys=[];
                                                floderMenu.forEach(item=>openKeys.push(item.key));
                                                //设置需要打开的菜单key
                                                defaultDom.props.openKeys=openKeys;
                                            }                                      
                                        }                                 
                                    }
                                }                                                        
                            }
                        }
                    }
                }
            }
        };
        //处理自定义内容
        merge(_this.configContext, portalConfig);
        ConfigContextProcessor.enhancePageAdvice(_this);
    }
}