泛微Ecology9实现流程界面隐藏按钮

1. 前言

在泛微Ecology9系统中，流程界面默认显示多个操作按钮。为满足特定业务需求，需要隐藏部分按钮。本文将介绍三种实现方法，分别针对"提交"、"保存"、"转发"三个按钮进行演示。

首先我先建了个平白无奇的测试流程，我们可以看到目前流程上方存在四个按钮：

经过我的调研，目前一共有三种方式来实现这个功能：1、代码块CSS样式实现、2、编写ecode代码实现：复写WeaReqTop组件：overwritePropsFnQueueMapSet 3、也是ecode实现：复写API请求入参和返参：rewriteApiDataQueueSet；现在我分别用三种方式来隐藏三个不同的流程按钮：提交、保存、转发来作为测试

2. 实现方案对比

方案一：CSS样式隐藏法（推荐用于简单场景）

实现思路：通过CSS选择器直接隐藏目标按钮元素

适用场景：简单的按钮隐藏需求，无需复杂逻辑判断

操作步骤：

登录系统后台，进入流程引擎管理界面
定位目标流程，进入流程设计界面
在代码块区域添加CSS样式代码
保存配置并测试效果

javascript 复制代码

<style type="text/css">
  .ant-menu-item:has(.wea-right-menu-item span[title="提交"]) {
    display: none !important;
  }

  button[title="提交"] {
    display: none !important;
  }
</style>

保存之后，即可实现隐藏效果

方案二：ECode组件复写法（推荐用于复杂条件控制）

实现思路：复写WeaReqTop组件：overwritePropsFnQueueMapSet

通过复写WeaReqTop组件的属性，动态控制按钮显示

对于ecode腹泻我们可以先打印出参数查看，看看有啥参数可以修改达到目的：

核心代码

javascript 复制代码

ecodeSDK.overwritePropsFnQueueMapSet('WeaReqTop', {
    fn: (newProps) => {
        // 环境检查
        if (!ecodeSDK.checkLPath('/spa/workflow/static4form/index.html')) return;
        if (!WfForm) return;
        
        // 流程节点验证
        let baseInfo = WfForm.getBaseInfo();
        let workflowId = baseInfo.workflowid;
        let nodeId = baseInfo.nodeid;
        
        // 仅对特定流程生效（测试环境workflowId: 1537）这里需要换成你自己的流程id和节点id
        if (workflowId !== 1537 || nodeId !== 2622) return;
        
        // 按钮处理逻辑
        var buttons = newProps.buttons;
        console.log(buttons);
        
        // 隐藏保存按钮
        buttons = buttons.filter(button => button.props.title !== '保存');
        
        newProps.buttons = buttons;
    },
    order: 1,
    desc: '隐藏保存按钮'
});

方案三：ECode API复写法（推荐基于后端数据控制）

实现思路：

复写API请求入参和返参：rewriteApiDataQueueSet，通过拦截API请求的入参和返参，间接控制按钮显示状态

核心代码：

javascript 复制代码

ecodeSDK.rewriteApiDataQueueSet({
  fn: (url, params, data) => {
    var workflowids='87029,134021'
    var workflowArray = workflowids.split(',');  
    var workflowidsByDelete = '134021,131021,65523,43021';
    var workflowArrayByDelete = workflowidsByDelete.split(','); 
    var workflowid = params.workflowid+''
    if (workflowArray.includes(workflowid)){
      var value = '1'
    } // 判断流程是否是需要隐藏的流程
    if (workflowArrayByDelete.includes(workflowid)){
      var valueByDelete = '1'
    }
    var allow = window.location.hash.indexOf('#/main/workflow/req') >= 0 
    && (url.indexOf('/api/workflow/reqform/rightMenu') >= 0 ||url.indexOf('/api/workflow/reqform/loadForm') >=0 )
    && (params.workflowid=='4061' || params.workflowid=='4062' || value=='1')
    if (!allow) return data;
    if (data.rightMenus && data.rightMenus.length > 0 && valueByDelete!='1') {
      data.rightMenus = data.rightMenus.filter((item,index)=>{
        return item.menuName!='转发'
      })
    }

    return data;
  },
  desc: '拦截接口参数，同一个接口会在多个页面请求，需注意路径的判断'
});

目前上诉代码都是使用按钮名称汉字匹配，也可以改为ecId匹配，原理都是一样的；

方案选择建议

方案	适用场景	优点	缺点
CSS样式法	简单隐藏需求	实现简单、维护成本低	可能被绕过，灵活性差
组件复写法	复杂条件控制	灵活性高，可基于流程节点控制	实现复杂度中等
API复写法	基于数据条件控制	控制粒度细，稳定性好	需要了解API结构

注意事项

生产环境部署前务必充分测试
建议添加详细的注释说明业务逻辑
考虑系统升级对自定义代码的影响
推荐使用方案二或三实现条件性隐藏需求

总结

三种方案各有优势，可根据具体业务场景灵活选择。CSS方法适合简单场景，ECode方法适合需要条件判断的复杂场景。建议在开发过程中充分考虑代码的可维护性和系统的稳定性。