门户V2定制

场景描述

需要对企业门户V2首页菜单、组织信息及用户信息等页面相关内容进行定制

实现思路

通过平台提供的“ 门户自定义 ”组件进行实现

实现步骤

使用租户管理员登录系统，在“应用/服务管理”新增企业门户V2，开启门户定制（详细操作步骤可参考 门户V2调试）
进入云端开发后，找到市场组件“门户自定义”，并开启组件定制

进入到“代码”模块下，在“\UI2\comp\portalConfig\components\portalConfig”组件目录下，对“portalConfig.config.js”（文件命名：组件名+“.config.js”，不能随便定义）进行定制编辑,文件基础内容如下所示：

 import { merge } from "lodash";
 import ConfigContextProcessor from 'core/framework/ConfigContextProcessor';

 export default {

     processConfigContext(configContext) {
     },

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

         /**
          * 1.针对已有的方法或是变量进行自定义
          *      按照需要处理的文件路径及方法进行自定义
          *          @before:原方法执行前执行;参数：(...args)，其中args是原方法自带参数
          *          @after:原方法执行后执行；参数：(result,...args),其中result是原方法返回数据，args是原方法自带参数
          *          @replace:替换原方法;参数：(...args)，其中args是原方法自带参数
          *      注意：
          *          1.上述3种方法，async标识必须与原方法同步，即原方法是异步，在自定义方法才能使用异步，否则不能使用
          *          2.上述3种方法可在统一方法内使用搭配使用   
          *          3.定制方法必须在.w页面下，在js路径下定义方法无效      
          *      使用案例：
          *          详细使用案例可以参考“帮助中心”下门户 V2 定制下相关案例
          * 
          * 2.动态加载自定义方法，主要用于一些特殊场景，例如同一逻辑不同组织执行逻辑各异
          *      使用：
          *          1.根据页面路径进行方法定义，如下面“onProcessMenu”所示
          *          2.在对应页面位置上通过this.getConfig(方法名)?.(方法参数)来调用执行（同步还是异常执行根据实际需求进行定制即可）
          */        
         let portalConfig = {
             "config": {
                 "/entry": {
                     "/pcxapp": {
                         "/pcx": {
                             "/index.w": {
                                 "menuRender":{//方法
                                     /**
                                      * 原方法执行前执行
                                      * @param  {...any} args 原方法自带参数
                                      */
                                     "@before":(...args)=>{

                                     },
                                     /**
                                      * 原方法执行后执行
                                      * @param {*} result 原方法返回数据
                                      * @param  {...any} args 原方法自带参数
                                      */
                                     "@after":(result,...args)=>{

                                     },
                                     /**
                                      * 替换原方法
                                      * @param  {...any} args 原方法自带参数
                                      */
                                     "@replace":(...args)=>{

                                     }
                                 },
                                 /**
                                  * 定义动态方法
                                  * @param {*} param0 动态方法对应的参数，根据业务需要自行传参
                                  */
                                 "onProcessMenu": function ({ menus }) {
                                 //在使用页面位置通过“this.getConfig(方法名)?.(方法参数)”来调用执行
                                 }
                             }
                         }
                     }
                 }
             }
         };
         //处理自定义内容，固定内容请勿随意删除
         merge(_this.configContext, portalConfig);
         ConfigContextProcessor.enhancePageAdvice(_this);
     }
 }

注意： 上述操作除了针对“UI2\pcx\portal.meta.json”文件中标记的方法变量自定义外，还能更为灵活的设置动态调用，例如在某个方法中情况1需要调用方法对数据进行处理，情况2不需要调用方法处理数据，可以按照上述json路径写好方法，在指定方法中新增“this.getConfig(方法名)?.(方法参数)”执行，如下图所示：

![图 5](assets/2024-03-13-13-52-57-339.png)

js文件中可自定义portalConfig配置可参考“UI2\pcx\portal.meta.json”文件
在自定义配置文件修改完成之后，重新发布即可。

定制案例

results matching ""

No results matching ""

results matching ""

No results matching ""