【云之家-智能审批-个性化开发】在提交单据时弹出一个对话框，倒计时3秒后可关闭

场景：当单据对接了第三方系统，单据提交后需要等待对方返回信息，此时，为了避免提交人误操作，在提交后创建一个对话框，等待3秒后才可关闭。 效果如下：

//等待n秒后关闭对话框
function createDialog(count) {
// 创建遮罩层元素
let mask = document.createElement('div');
mask.style.position = 'fixed';
mask.style.top = '0';
mask.style.left = '0';
mask.style.width = '100%';
mask.style.height = '100%';
mask.style.backgroundColor = 'rgba(0,0,0,0.5)';
mask.style.zIndex = '999';

// 创建一个对话框元素
let dialog = document.createElement('div');
dialog.style.position = 'fixed';
dialog.style.top = '50%';
dialog.style.left = '50%';
dialog.style.transform = 'translate(-50%, -50%)';
dialog.style.backgroundColor = 'white';
dialog.style.padding = '20px';
dialog.style.border = '1px solid black';
dialog.style.zIndex = '1000';
dialog.style.display = 'flex';
dialog.style.flexDirection = 'column';
dialog.style.alignItems = 'flex-start'; // 修改为 flex-start，使子元素左对齐
// 创建对话框的标题元素
let title = document.createElement('h3');
title.textContent = '提示：';
dialog.appendChild(title);
// 创建对话框中的文本元素
let text = document.createElement('p');
text.textContent = '单据正在同步到NC并等待返回结果，在单据还未提交到下个审批人之前，请勿对单据进行任何操作，否则将引起数据错误！\n等待10秒后关闭对话框。';
text.style.margin = '10px 0'; // 上下添加 10px 的空白
text.style.color ='red'; // 将文字颜色设置为红色
text.style.whiteSpace = 'pre-line';
dialog.appendChild(text);
// 创建确定按钮元素
let button = document.createElement('button');
button.textContent = '返回';
button.style.fontSize = "12px";
button.style.backgroundColor = "orange";
button.style.color = "#ffffff";
button.style.borderRadius = "5px";
button.style.padding = "5px 10px 5px 10px";
button.style.height = "35px";
button.style.width = "50px";
button.style.alignSelf = "center";
button.style.marginRight = "10px";
button.style.marginLeft = 'auto'; // 将按钮推到右侧
button.disabled = true; // 初始时禁用按钮
dialog.appendChild(button);
// 将对话框和遮罩层添加到文档中
document.body.appendChild(mask);
document.body.appendChild(dialog);
// 倒计时函数
let timer = setInterval(function () {
text.textContent = `单据正在同步到NC并等待返回结果，在单据还未提交到下个审批人之前，请勿对单据进行任何操作，否则将引起数据错误！\n等待 ${count} 秒后关闭对话框`;
count--;
if (count < 0) {
clearInterval(timer);
button.disabled = false; // 倒计时结束，启用按钮
}
}, 1000);
// 为按钮添加点击事件，点击后关闭对话框
button.onclick = function () {
document.body.removeChild(dialog);
document.body.removeChild(mask);
};
}

 
cf.ready(function(){
   cf.addEventHook(cf.EVENT_HOOKS.BEFORE_SUBMIT, function (next) {
        // 调用函数创建对话框
        createDialog(10);
        next()
   })
})