泛微E10自定义“批准”按钮点击事件 —— 拦截逻辑实战分享

泛微E10自定义“批准”按钮点击事件 —— 拦截逻辑实战分享

在日常使用泛微E10系统进行流程开发时，我们常常需要对系统默认按钮（如“批准”按钮）添加自定义拦截逻辑，以便在用户执行某些关键操作前进行二次确认，确保业务流程的严谨性和可控性。

本文将分享如何通过泛微提供的 getFlowPageSDK 与 registerInterceptEvent 接口，复写“批准”按钮的默认行为，加入一个自定义确认弹窗，实现对PO生成的二次确认拦截逻辑。

---

💡 场景说明

在某个流程节点中，当用户点击“批准（AGREE）”按钮时，系统会根据业务规则自动生成PO（采购订单）。但一旦PO生成后，BOQ（工程量清单）将不可修改。

因此，我们希望在用户点击“批准”按钮时弹出确认框，提示用户该操作的后果，并由用户确认是否继续执行。

---

🧩 实现思路

我们借助泛微的前端SDK能力：

• 通过 window.weappWorkflow.getFlowPageSDK() 获取流程页面SDK实例；
• 使用 registerInterceptEvent 拦截“批准”按钮点击事件；
• 弹出自定义确认框（showConfirm）；
• 用户点击“确认”后调用 successFn() 正式触发“批准”逻辑；
• 用户点击“取消”后调用 failFn() 阻止操作继续执行。

---

🛠️ 示例代码

// 获取流程页面SDK实例
const wffpSdk = window.weappWorkflow.getFlowPageSDK();
const params = wffpSdk.getBaseParam();  // 可获取当前流程信息// 获取表单SDK（如需操作表单可使用）
const formSdk = window.WeFormSDK.getWeFormInstance();// 注册SDK准备就绪事件
wffpSdk.ready(() => {// 拦截“批准”按钮点击事件（menutype 为 AGREE）wffpSdk.registerInterceptEvent('BeforeClickOperBtn|AGREE', (successFn, failFn, params) => {// 弹出确认框wffpSdk.showConfirm("If work order generated, the BOQ can't be modified. Confirm to generate the PO?",function() {// 用户点击“确定”后，继续执行默认行为successFn();},function() {// 用户点击“取消”后，中止操作failFn();},{title: "Information Confirmation", // 弹窗标题（仅PC端有效）okText: "Ok",                       // 确认按钮文字cancelText: "Cancel"               // 取消按钮文字});});
});

✅ 效果预览
• 点击“批准”按钮后，弹出如下确认框：

•	用户点击 Ok：进入正常审批流程；
•	用户点击 Cancel：取消此次操作，无任何流程变更。

⸻

📌 注意事项
• menutype 值需与按钮类型精确匹配，例如“批准”对应的是 AGREE；
• showConfirm 弹窗API目前仅在 PC端支持标题（title）配置项；
• 可扩展逻辑判断，如根据表单字段或流程状态动态控制是否弹出确认框；
• 若需要兼容移动端，建议搭配其他提示机制如 showToast 做兜底提示。

⸻

🧭 总结

通过本案例，我们成功地实现了对泛微E10系统“批准”按钮行为的前端拦截，加入了自定义交互提示，有效降低误操作风险，为企业流程系统的稳定运行保驾护航。