Odoo基础会计套件对账完成提示渲染异常问题排查

问题现象 #

在Odoo基础会计套件的payment_matching功能中，完成对账触发showRainbowMan方法展示恭喜消息时，HTML标签未被解析，直接显示原始标签内容（例如显示「Congrats,you are all done!

....」）。注释message字段的$done参数后，问题仅得到部分修复，无法完整展示预期的提示内容。

问题原因 #

当前代码中传递给show_effect的message参数是jQuery DOM对象，但彩虹人效果组件（rainbow_man）期望接收的是纯HTML字符串。直接传入jQuery对象会导致组件将其转换为字符串时保留原始标签文本，无法正常渲染HTML结构。

修复方案 #

将jQuery对象转换为完整的HTML字符串后再传递给message参数。通过jQuery的prop('outerHTML')方法可获取包含当前元素在内的完整HTML代码，既保留模板渲染的结构，也能让彩虹人组件正确解析渲染。

代码修改示例 #

原错误代码片段 #

this.trigger_up('show_effect', {
    type: 'rainbow_man',
    fadeout: 'no',
    message: $done, // 此处传入jQuery对象导致HTML未解析
});

修改后代码片段 #

this.trigger_up('show_effect', {
    type: 'rainbow_man',
    fadeout: 'no',
    message: $done.prop('outerHTML'), // 转换为HTML字符串
});

完整修改后的showRainbowMan方法 #

showRainbowMan: function (state) {
    if (this.model.display_context !== 'validate') {
        return;
    }
    var dt = Date.now()-this.time;
    var $done = $(qweb.render("reconciliation.done", {
        'duration': moment(dt).utc().format(time.getLangTimeFormat()),
        'number': state.valuenow,
        'timePerTransaction': Math.round(dt/1000/state.valuemax),
        'context': state.context,
    }));
    $done.find('*').addClass('o_reward_subcontent');
    $done.find('.button_close_statement').click(this._onCloseBankStatement.bind(this));
    $done.find('.button_back_to_statement').click(this._onGoToBankStatement.bind(this));
    
    // display rainbowman after full reconciliation
    if (session.show_effect) {
        this.trigger_up('show_effect', {
            type: 'rainbow_man',
            fadeout: 'no',
            message: $done.prop('outerHTML'), // 修复核心：转为HTML字符串
        });
        this.$el.css('min-height', '450px');
    } else {
        $done.appendTo(this.$el);
    }
},

说明 #

• XML模板代码无需修改，其渲染后的HTML结构是正常的，问题出在JS层传递参数的类型错误。
• 使用prop('outerHTML')可以完整保留$done对象包含的所有HTML结构和样式类，确保提示消息的样式和功能与预期一致。

内容的提问来源于stack exchange，提问作者medo sobh