Odoo15中CreateOrderPopup无法显示且后续日志无输出求助

问题说明 #

开发Odoo15 POS功能时，点击自定义的CreateOrderButton按钮后，前置日志ffffffffffffffffffff能正常打印，但调用await this.showPopup('CreateOrderPopup');后弹窗不显示，后续的QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ日志也没有输出，控制台无任何报错信息。

相关代码 #

CreateOrderButton 组件代码 #

odoo.define("point_of_sale.CreateOrderButton", function (require) {
    "use strict";

    const PosComponent = require("point_of_sale.PosComponent");
    const ProductScreen = require("point_of_sale.ProductScreen");
    const Registries = require("point_of_sale.Registries");
   
    class CreateOrderButton extends PosComponent {
        async onClick() {
            console.log("ffffffffffffffffffff");
           await this.showPopup('CreateOrderPopup');
            console.log('QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ');
        };
        
    }
    CreateOrderButton.template = "CreateOrderButton";
    
    ProductScreen.addControlButton({
        
        component: CreateOrderButton,
        condition: function () {
            return (
                this.env.pos.config.iface_create_sale_order &&
                this.env.pos.get_order().get_client() &&
                this.env.pos.get_order().get_orderlines().length !== 0
                
            );
        },
    });

    Registries.Component.add(CreateOrderButton);
});

CreateOrderPopup 组件代码 #

odoo.define("point_of_sale.CreateOrderPopup", function (require) {
    "use strict";

    const AbstractAwaitablePopup = require("point_of_sale.AbstractAwaitablePopup");
    const Registries = require("point_of_sale.Registries");
    const framework = require("web.framework");

    class CreateOrderPopup extends AbstractAwaitablePopup {
        setup() {
            super.setup();
            this.createOrderClicked = false;
        }

        async createDraftSaleOrder() {
            await this._createSaleOrder("draft");
        }

        async createConfirmedSaleOrder() {
            await this._createSaleOrder("confirmed");
        }

        async createDeliveredSaleOrder() {
            await this._createSaleOrder("delivered");
        }

        async createInvoicedSaleOrder() {
            await this._createSaleOrder("invoiced");
        }

        async _createSaleOrder(order_state) {
            var current_order = this.env.pos.get_order();

            framework.blockUI();

            await this.rpc({
                model: "sale.order",
                method: "create_order_from_pos",
                args: [current_order.export_as_JSON(), order_state],
            })
                .catch(function (error) {
                    throw error;
                })
                .finally(function () {
                    framework.unblockUI();
                });

            // Delete current order
            this.env.pos.removeOrder(current_order);
            this.env.pos.add_new_order();

            // Close popup
            return await super.confirm();
        }
    }

    CreateOrderPopup.template = "CreateOrderPopup";
    Registries.Component.add(CreateOrderPopup);

    return CreateOrderPopup;
});

Manifest 资产配置 #

"assets": {
        "point_of_sale.assets": [
            "pos_order_to_sale_order/static/src/css/pos.css",
            "pos_order_to_sale_order/static/src/js/CreateOrderPopup.js",
            "pos_order_to_sale_order/static/src/js/CreateOrderButton.js",
        ],
        'web.assets_qweb': [
            "pos_order_to_sale_order/static/src/xml/CreateOrderPopup.xml",
            "pos_order_to_sale_order/static/src/xml/CreateOrderButton.xml",

        ],

排查方向及解决方案 #

1. Popup组件未注册到Popup Registry
   showPopup方法是从Registries.Popup中查找组件的，当前代码仅将CreateOrderPopup添加到普通组件注册表，需要额外添加到Popup注册表：
   在CreateOrderPopup的JS代码末尾，替换或添加：

Registries.Popup.add(CreateOrderPopup);

2. QWeb模板问题

• 检查CreateOrderPopup.xml文件是否存在，路径与manifest配置一致
• 确认模板名称CreateOrderPopup与JS中CreateOrderPopup.template = "CreateOrderPopup";完全匹配（大小写敏感）
• 确保模板正确继承AbstractAwaitablePopup的结构，示例模板：

<t t-name="CreateOrderPopup" t-inherit="point_of_sale.AbstractAwaitablePopup" t-inherit-mode="primary">
    <xpath expr="//div[hasclass('popup-content')]" position="replace">
        <!-- 自定义弹窗内容 -->
    </xpath>
</t>

3. 捕获隐藏错误
   在onClick方法中添加try-catch块，排查是否有静默错误：

async onClick() {
    console.log("ffffffffffffffffffff");
    try {
        await this.showPopup('CreateOrderPopup');
        console.log('QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ');
    } catch (e) {
        console.error('弹窗调用失败:', e);
    }
};

4. 资产加载顺序验证
   虽然当前配置中Popup JS在Button JS之前加载是正确的，但可以尝试清除Odoo缓存（设置->技术->用户界面->清除缓存），确保资产重新加载。

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