Suitelet点击审批/拒绝JE按钮后UI处理提示实现咨询

方案1：同步处理场景（短耗时操作） #

直接在客户端脚本中实现加载提示+按钮禁用，逻辑简单适合处理时间较短的操作：

// 假设是SuiteScript 1.x客户端脚本的按钮处理函数
function handleApproveJE() {
    // 弹出处理提示框
    var loadingDialog = nlapiCreateAlertDialog('处理中', '正在处理选中的交易记录，请稍候...');
    loadingDialog.show();

    // 禁用当前按钮，避免重复提交
    document.getElementById('custpage_approve_btn').disabled = true; // 替换成你的按钮实际ID

    try {
        // 1. 获取选中的交易记录ID
        var selectedIds = getSelectedTransactionIds(); // 你已实现的获取选中ID的函数
        // 2. 调用Suitelet处理接口（或直接执行处理逻辑）
        var response = nlapiRequestURL(window.location.href, {
            action: 'approve',
            transactionIds: selectedIds.join(',')
        });

        // 处理完成，关闭提示并恢复按钮
        loadingDialog.hide();
        document.getElementById('custpage_approve_btn').disabled = false;
        nlapiCreateAlertDialog('处理完成', '选中的10条交易记录已完成审批').show();
    } catch (error) {
        // 异常处理：关闭提示、恢复按钮、告知错误
        loadingDialog.hide();
        document.getElementById('custpage_approve_btn').disabled = false;
        nlapiCreateAlertDialog('处理失败', '错误信息：' + error.message).show();
    }
}

方案2：SuiteScript 2.x 友好UI遮罩（推荐） #

如果用的是SuiteScript 2.x，可使用NetSuite内置的N/ui/message组件实现更美观的加载提示：

/**
 * @NApiVersion 2.x
 * @NScriptType ClientScript
 */
define(['N/ui/message', 'N/ui/dialog', 'N/currentRecord'], function(message, dialog, currentRecord) {
    function handleApproveJE() {
        // 创建并显示加载提示
        var loadingMsg = message.create({
            title: '处理中',
            message: '正在处理选中的交易记录，请不要刷新页面',
            type: message.Type.INFORMATION
        });
        loadingMsg.show();

        var currentRec = currentRecord.get();
        // 禁用审批按钮
        currentRec.getField({id: 'custpage_approve_btn'}).isDisabled = true;

        try {
            // 获取选中ID+调用处理逻辑
            var selectedIds = getSelectedTransactionIds();
            // 这里替换为你的实际处理代码（比如调用Suitelet或RESTlet）
            
            // 处理完成后更新UI
            loadingMsg.hide();
            currentRec.getField({id: 'custpage_approve_btn'}).isDisabled = false;
            dialog.alert({title: '成功', message: '交易记录审批完成'});
        } catch (error) {
            loadingMsg.hide();
            currentRec.getField({id: 'custpage_approve_btn'}).isDisabled = false;
            dialog.alert({title: '失败', message: '处理出错：' + error.message});
        }
    }

    return {
        handleApproveJE: handleApproveJE
    };
});

方案3：长耗时异步处理（避免浏览器超时） #

如果处理10条记录耗时较长（比如超过30秒），建议用后台异步处理+客户端轮询的方式：

1. 点击按钮时，提交选中的ID到后台Suitelet，后台启动异步任务（比如用N/task模块创建Map/Reduce任务）
2. 客户端显示加载提示，定时轮询后台任务的状态
3. 轮询到任务完成后，关闭提示并更新界面

关键代码片段（客户端轮询部分）：

function startApprovalProcess() {
    var loadingMsg = message.create({title: '处理中', message: '后台正在处理，请稍候'});
    loadingMsg.show();
    document.getElementById('custpage_approve_btn').disabled = true;

    // 提交任务到后台
    var taskId = submitApprovalTask(getSelectedTransactionIds());

    // 轮询任务状态
    var pollInterval = setInterval(function() {
        var taskStatus = getTaskStatus(taskId); // 调用后台接口获取任务状态
        if (taskStatus === 'COMPLETE') {
            clearInterval(pollInterval);
            loadingMsg.hide();
            document.getElementById('custpage_approve_btn').disabled = false;
            dialog.alert({title: '完成', message: '所有交易记录已处理'});
        } else if (taskStatus === 'FAILED') {
            clearInterval(pollInterval);
            loadingMsg.hide();
            document.getElementById('custpage_approve_btn').disabled = false;
            dialog.alert({title: '失败', message: '任务执行失败'});
        }
    }, 3000); // 每3秒轮询一次
}

核心注意事项 #

• 禁用按钮：必须在点击后立即禁用对应按钮，防止用户重复提交导致重复处理
• 异常兜底：无论处理成功还是失败，都要关闭提示并恢复按钮状态
• 超时处理：如果是同步请求，确保处理逻辑耗时不超过浏览器默认超时时间（一般60秒），超时就用异步方案

内容的提问来源于stack exchange，提问作者Devesh Ojha