如何重写/扩展Odoo 17 Owl JS？扩展ExportDataDialog无日志输出

问题描述 #

我在尝试扩展Odoo的ExportDataDialog类以修改导出对话框和按钮时遇到了问题。控制台能够显示第一条日志，说明该JS文件已在manifest中正确声明，但我试图扩展的ExportDataDialog类相关日志均未显示。

原代码 #

/** @odoo-module **/
import { ExportDataDialog } from "@web/views/view_dialogs/export_data_dialog";

console.log('Test log to verify JS file is loading.');

class ExtendedExportDataDialog extends ExportDataDialog {
    setup() {
        console.log('Not seeing this log item');
        super.setup(); 
    }

    async onClickExportButton() {
        console.log("Extended export button click handler. Not seeing this log item either.");

        if (super.onClickExportButton) {
            await super.onClickExportButton();
        }
    }

    onAddItemExportList(fieldId) {
        console.log("item added to export list..Not seeing this log item either.");
        this.state.exportList.push(this.knownFields[fieldId]);
        this.enterTemplateEdition();
    }
    onRemoveItemExportList(fieldId) {
        console.log("item removed from export list..Not seeing this log item either.");
        const item = this.state.exportList.findIndex(({ id }) => id === fieldId);
        this.state.exportList.splice(item, 1);
        this.enterTemplateEdition();
    }
}

ExtendedExportDataDialog.components = ExportDataDialog.components;
ExtendedExportDataDialog.props = ExportDataDialog.props;
ExtendedExportDataDialog.template = ExportDataDialog.template;

问题原因 #

你只定义了继承自ExportDataDialog的扩展类，但没有将这个扩展类注入到Odoo的组件系统中，Odoo仍然在使用原生的ExportDataDialog组件，导致你的扩展逻辑完全没有被执行。

解决方案 #

方案1：使用Odoo的patch工具（推荐） #

Odoo提供了patch工具可以直接修改原组件的原型，无需手动替换注册，代码更简洁：

/** @odoo-module **/
import { ExportDataDialog } from "@web/views/view_dialogs/export_data_dialog";
import { patch } from "@web/core/utils/patch";

console.log('Test log to verify JS file is loading.');

patch(ExportDataDialog.prototype, 'custom-export-data-dialog-patch', {
    setup() {
        console.log('Now seeing this log item');
        super.setup(); 
    },

    async onClickExportButton() {
        console.log("Extended export button click handler. Now visible!");
        await super.onClickExportButton();
    },

    onAddItemExportList(fieldId) {
        console.log("item added to export list.. Log shows up now.");
        this.state.exportList.push(this.knownFields[fieldId]);
        this.enterTemplateEdition();
    },

    onRemoveItemExportList(fieldId) {
        console.log("item removed from export list.. Log is visible.");
        const item = this.state.exportList.findIndex(({ id }) => id === fieldId);
        this.state.exportList.splice(item, 1);
        this.enterTemplateEdition();
    },
});

方案2：替换组件注册 #

如果需要完全替换原组件，可以通过Odoo的registry来移除原注册并添加你的扩展类：

/** @odoo-module **/
import { ExportDataDialog } from "@web/views/view_dialogs/export_data_dialog";
import { registry } from "@web/core/registry";

console.log('Test log to verify JS file is loading.');

class ExtendedExportDataDialog extends ExportDataDialog {
    setup() {
        console.log('Now seeing this log item');
        super.setup(); 
    }

    async onClickExportButton() {
        console.log("Extended export button click handler. Now visible!");
        await super.onClickExportButton();
    }

    onAddItemExportList(fieldId) {
        console.log("item added to export list.. Log shows up now.");
        this.state.exportList.push(this.knownFields[fieldId]);
        this.enterTemplateEdition();
    }

    onRemoveItemExportList(fieldId) {
        console.log("item removed from export list.. Log is visible.");
        const item = this.state.exportList.findIndex(({ id }) => id === fieldId);
        this.state.exportList.splice(item, 1);
        this.enterTemplateEdition();
    }
}

ExtendedExportDataDialog.components = ExportDataDialog.components;
ExtendedExportDataDialog.props = ExportDataDialog.props;
ExtendedExportDataDialog.template = ExportDataDialog.template;

// 移除原组件注册，再添加你的扩展类
registry.category('dialogs').remove('export_data');
registry.category('dialogs').add('export_data', ExtendedExportDataDialog);

注意事项 #

• 确保你的JS文件在manifest的assets中加载顺序在原ExportDataDialog组件之后，避免加载顺序问题导致替换失败。
• 不同Odoo版本的组件注册key可能略有差异，若export_data无效，可以查看原组件的注册代码确认正确的key值。

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