如何覆盖/扩展 Odoo 17 Owl JS？

Question

我在扩展此类来修改导出对话框和按钮时遇到问题。我能够在控制台中看到第一个日志项，因此我知道该文件已在清单中正确声明。但我试图扩展的类（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;

Answer 1

我查看了源代码和官方文档并使用补丁解决了它。

/** @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, {
    /**
     * @override
    */
    
    async onClickExportButton() {
        console.log("This is the way.");
        if (!this.state.exportList.length) {
            return this.notification.add(_t("Please select fields to save export list..."), {
                type: "danger",
            });
        }

        this.state.disabled = true;
        await this.props.download(
            this.state.exportList,
            this.state.isCompatible,
            this.availableFormats[this.state.selectedFormat].tag
        );
        this.state.disabled = false;
    }
});