E10 流程节点预加载后，自定义弹窗拦截，提示内容多行显示

泛微E10 流程节点预加载后，自定义弹窗拦截，提示内容多行显示

在泛微 E10 流程开发中，我们经常会遇到在流程节点加载后，向用户展示确认提示的需求，尤其是在人力、合规等流程中，用户必须先阅读并确认一些重要信息。

本文将介绍如何实现一个在流程节点预加载完成后拦截并弹出提示的功能，并且支持多行内容显示与只弹出一次的逻辑控制。

📌 业务场景背景

在「绩效评估」流程中，用户需确认以下信息：

• 无需上传文档，直接填写表单；
• 如果本年中有部门变动，需在字段中注明；
• 若存在工作时间不足（如产假、病假等），可以不参与本次评估；

用户阅读后点击确认，才可继续进行操作。

✅ 目标效果

• 📍 进入流程节点后自动弹窗；
• 📍 弹窗内容为多行说明文字，格式清晰；
• 📍 用户确认后记录状态，避免重复弹出；
• 📍 使用组件自带按钮，自动关闭弹窗，体验良好。

🧩 实现思路

1. 监听页面准备完毕（onceReady）

const wffpSdk = window.weappWorkflow.getFlowPageSDK();

wffpSdk.onceReady(() => {
  const { workflowId, userCurrentNodeId, isCreate } = wffpSdk.getBaseParam() || {};
  const loginAccount = localStorage.getItem('e_login_accont');
  const storageKey = `hrms_confirm_shown_${workflowId}_${userCurrentNodeId}_${loginAccount}_1`;

  // 若已确认过且非新建单据，跳过弹窗
  if (localStorage.getItem(storageKey) && !isCreate) return;

  const confirmText = `PMS24 Reminder:
Please read before starting your 2024 performance appraisal:
• No document uploads required. Type clearly into the designated fields. Save and submit when complete.
• Changed departments in 2024? Be sure to indicate it in the relevant field.
• Worked less than effective period of time within FOD?
  Due to sick leave, maternity leave, or other special cases, worked less than 6 months; or joined after October 2024, will be exempt from Y2024 performance appraisal.

Please confirm your participation:
I have read and understood the above information, and confirm my participation in PMS24.`;

  showCustomConfirm({
    title: "Eligibility Confirmation",
    content: confirmText,
    okText: "I confirm",
    cancelText: "Cancel",
    onOk: () => {
      console.log("Confirmed");
      localStorage.setItem(storageKey, "1");
    },
    onCancel: () => {
      console.log("Cancelled");
      window.close(); // 可选：关闭当前窗口
    }
  });
});

function showCustomConfirm({
  title = "Confirmation",
  content = "",
  okText = "OK",
  cancelText = "Cancel",
  onOk = () => {},
  onCancel = () => {},
  width = "500px",
  height = "500px",
}) {
  const confirmContent = React.createElement("div", {
    style: {
      fontSize: "14px",
      lineHeight: 1.6,
      whiteSpace: "pre-line" // 关键样式，支持 \n 换行
    },
    children: content,
  });

  window.WeFormSDK.openCustomDialog({
    title,
    content: confirmContent,
    width,
    height,
    okText,
    cancelText,
    onOk: () => {
      onOk(); // 执行业务逻辑
      // 使用系统按钮，弹窗会自动关闭
    },
    onCancel: () => {
      onCancel();
      // 同样自动关闭
    }
  });
}

实现效果图