门户定制案例-显示待办任务数

运行效果

在门户页的右上角，展示当前用户的待办任务数

实现方法

1. 定制企业门户应用，参考《门户定制》
2. 在门户页 /entry/pcxapp/pcx/index.w 中，渲染顶部工具条方法 headerActionsRender 的 after 扩展点，用代码添加 Badge 组件，显示角标
3. 在门户页 /entry/pcxapp/pcx/index.w 中，设置消息方法 setNotice 的 after 扩展点，获取待办任务数，更新角标

添加扩展点

桌面端门户的扩展点方法写在 /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 渲染顶部工具条方法 headerActionsRender 和获取消息方法 setNotice 的 after 扩展点，代码如下

    async onConfigContextInit(configContextProcessor) {
        let _this = configContextProcessor.page;
        let portalConfig = {
            "config": {
                "/entry": {
                    "/pcxapp": {
                        "/pcx": {
                            "/index.w": {                     
                                "setNotice":{
                                    "@after": (result, ...args) => {
                                    }
                                },
                                "headerActionsRender": {
                                    "@after": (result, ...args) => {
                                        return result;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        };
        merge(_this.configContext, portalConfig);
        ConfigContextProcessor.enhancePageAdvice(_this);
    }

获取待办任务数

引用 ProcessUtil，调用 countTask 方法，获取待办任务数，代码如下

import ProcessUtil from "$UI/comp/wfmui/components/wfmui/js/processUtil";

    try {
        //查询用户待办任务数
        ProcessUtil.countTask(_this).then(({ data }) => {
            //设置任务tab对应的待办任务数
            _this.setState({ notificationCount: data });
        })
    } catch (error) {
        console.error("获取任务数异常", error);
    }

完整代码

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

import { merge } from "lodash";
import ConfigContextProcessor from 'core/framework/ConfigContextProcessor';
import React from 'react';
import { NotificationOutlined } from '@ant-design/icons';
import { Badge, notification } from 'antd';
import ProcessUtil from "$UI/comp/wfmui/components/wfmui/js/processUtil";

export default {

    processConfigContext(configContext) {
    },

    async onConfigContextInit(configContextProcessor) {
        //获取当前页面
        let _this = configContextProcessor.page;
        let portalConfig = {
            "config": {
                "/entry": {
                    "/pcxapp": {
                        "/pcx": {
                            "/index.w": {                     
                                //获取消息后，调用待办接口获取待办任务数
                                "setNotice":{
                                    "@after": (result, ...args) => {
                                        try {
                                            //查询用户待办任务数
                                            ProcessUtil.countTask(_this).then(({ data }) => {
                                                //设置任务tab对应的待办任务数
                                                _this.setState({ notificationCount: data });
                                            })
                                        } catch (error) {
                                            console.error("获取任务数异常", error);
                                        }
                                    }
                                },
                                //头部工具渲染方法执行后，添加待办案例
                                "headerActionsRender": {
                                    "@after": (result, ...args) => {
                                        //根据组件key判断是否已存在
                                        let notices=result.filter(item=>item.key=="notices");
                                        if(notices&&notices.length==1){
                                            return result;
                                        }
                                        //建议在元素上新增key属性，用于判断当前元素是否已存在，需注意key的唯一性
                                        let notification = <Badge key="notices" count={_this.state.notificationCount} size="small" styles={{ "root": { "color": "inherit" } }}>
                                            <NotificationOutlined
                                                style={{
                                                    fontSize: 16,
                                                }}
                                            />
                                        </Badge>
                                        result.push(notification);
                                        return result;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        };
        merge(_this.configContext, portalConfig);
        ConfigContextProcessor.enhancePageAdvice(_this);
    }
}