Odoo POS重写ReceiptScreen异步函数解决二维码编码错误

问题背景 #

开发Odoo POS时，给小票添加自定义二维码后，原ReceiptScreen组件onMounted钩子内的setTimeout使用0延迟配合图片解码异步函数，出现编码错误。需要将延迟改为1000ms并移除图片解码步骤，但直接继承组件后原代码仍会优先执行，需彻底覆盖原有逻辑。

解决思路 #

Odoo的OWL组件中，父类setup方法会在子类继承后自动执行，因此原生的onMounted逻辑会保留。要完全替换原有逻辑，需：

• 重写setup方法，保留基础功能的同时重新定义onMounted内的setTimeout逻辑
• 通过组件注册器替换原生ReceiptScreen，确保自定义逻辑生效

完整代码示例 #

创建自定义模块并编写以下代码：

odoo.define('your_module_name.CustomReceiptScreen', function (require) {
    'use strict';

    const { Printer } = require('point_of_sale.Printer');
    const { is_email } = require('web.utils');
    const { useErrorHandlers } = require('point_of_sale.custom_hooks');
    const Registries = require('point_of_sale.Registries');
    const AbstractReceiptScreen = require('point_of_sale.AbstractReceiptScreen');
    const { useAsyncLockedMethod } = require('point_of_sale.custom_hooks');

    const { onMounted, useRef, status } = owl;

    const CustomReceiptScreen = (AbstractReceiptScreen) => {
        class CustomReceiptScreen extends AbstractReceiptScreen {
            setup() {
                // 保留父类的基础初始化逻辑
                super.setup();
                useErrorHandlers();
                this.orderReceipt = useRef('order-receipt');
                const order = this.currentOrder;
                const partner = order.get_partner();
                this.orderUiState = order.uiState.ReceiptScreen;
                this.orderUiState.inputEmail = this.orderUiState.inputEmail || (partner && partner.email) || '';
                this.orderUiState.isSendingEmail = false;
                this.is_email = is_email;

                // 重写onMounted中的延迟执行逻辑
                onMounted(() => {
                    setTimeout(async () => {
                        if (status(this) === "mounted") {
                            // 移除图片解码步骤，直接触发自动打印
                            await this.handleAutoPrint();
                        }
                    }, 1000); // 将延迟调整为1000ms
                });
            }
        }
        return CustomReceiptScreen;
    };

    // 替换原生ReceiptScreen组件，确保自定义逻辑覆盖原生逻辑
    Registries.Component.addByExtending(CustomReceiptScreen, AbstractReceiptScreen);

    return CustomReceiptScreen;
});

关键说明 #

• 必须使用Registries.Component.addByExtending替换原生组件，而非简单继承后注册，这样才能确保自定义的setup逻辑完全覆盖原生逻辑
• 调用super.setup()保留原有基础功能，避免丢失小票界面的其他交互逻辑
• 移除图片解码循环后，避免了二维码图片异步解码导致的编码错误，同时1000ms的延迟给小票渲染和二维码生成预留了足够时间

内容的提问来源于stack exchange，提问作者Unit Kin