本文摘要
介绍泛微 Ecology ecode 中为流程表单右上角添加状态图签的做法：通过 register.js 前置加载，在 Menu 的 overwritePropsFnQueueMapSet 钩子里判断请求路径后，向表单容器追加状态图片，并用 index.css 绝对定位。当前为归档流程无条件全局生效，可自行加条件扩展，图片需放入项目 resources 目录。

归档流程右上角增加状态图签

当前代码为归档流程无条件全局图签，可按照自己需求增加条件拓展

ad78dc4ec71fe402a5680b999b1f67f.png

代码

register.js(前置加载)

ecodeSDK.overwritePropsFnQueueMapSet('Menu', {
  fn: (newProps) => {
    if (!ecodeSDK.checkLPath('/spa/workflow/static4form/index.html#/main/workflow/req')) return;
        if (!WfForm.getGlobalStore().commonParam.currentnodetype === 3) return;


        var form = document.querySelector("div.wf-req-form");
        if (!form) return;
        if (form.querySelector(".floating-status-img")) return;


        var statusImage = document.createElement("img");
        statusImage.src = "${appRes}/shenpitongguo_1.svg"; // 图片链接
        statusImage.alt = "流程状态";
        statusImage.className = "floating-status-img";


        form.appendChild(statusImage);
  },
});

index.css(前置加载)

.floating-status-img {
    position: absolute;
    top: 10px; /* 距离上边缘10px */
    right: 10px; /* 距离右边缘10px */
    /* width: 50px;   */
    /* 设置图片的宽度 */
    /* height: 50px;  */
    /* 设置图片的高度 */
    z-index: 999;
}

shenpitongguo_1.svg 图片上传至项目resources文件夹下