如何覆盖 Odoo 14 PoS 中的小部件

销售点是 odoo ERP 中最重要的模块之一。在此博客中，我们可以了解如何覆盖 POS 中的小部件。在开始编程之前，我们想知道什么是小部件。小部件是用户界面最重要的构建块，或者我们可以说在 Odoo 中，用户界面中的大多数组件都是使用小部件进行控制的。所以基本上一个小部件可以有一个与之链接的模板。现在让我们看看工作原理，当小部件初始化时，它将渲染模板并将其附加到用户界面中。在这里，我将重写 EditListPopup 小部件。现在让我们看看当我们单击批次和序列号弹出窗口的“确定”按钮时如何显示错误弹出窗口。

现在我们将创建一个自定义模块。自定义模块结构如下所示。

tatic文件夹下创建src文件夹，src.Js文件夹下创建一个名为js的文件夹，包含所有js文件。创建一个名为views的文件夹来继承资产。

销售点中有一个名为 asset 的模板，其中加载了所有脚本。我们必须继承这个模板，并且必须加载我们的js文件。我们必须在 script 标签内指定 js 文件的路径。

js 文件：widget_override.js

首先，我们必须扩展EditListPopup。编辑列表弹出窗口用于显示您公司中产品的序列号和批号操作。下面给出了 EditListPopup。

odoo.define('pos_widget_override.widget_override', function (require) {
'use strict';
 const { useState } = owl.hooks;
 const AbstractAwaitablePopup = require('point_of_sale.AbstractAwaitablePopup');
 const Registries = require('point_of_sale.Registries');
 const { useAutoFocusToLast } = require('point_of_sale.custom_hooks');
 const EditListPopup = require('point_of_sale.EditListPopup')
 var core = require('web.core');
 var _t = core._t;
const WidgetsOverride = (EditListPopup) =>
    
class extends EditListPopup {
    
async confirm(event){
    
this.props.resolve({ confirmed: true, payload: await this.getPayload() });
        
return this.showPopup('错误信息', {
                                    
'title': this.env._t('错误'),
                                    
'body': this.env._t("错误信息"),
                                
});
     
}
}
   Registries.Component.extend(EditListPopup, WidgetsOverride);
  return EditListPopup;
});

首先，我们必须扩展 EditListPopup 小部件并编写在单击“确定”按钮时显示错误弹出窗口的代码。在这里，我们可以根据需要设置要在错误弹出窗口中显示的标题和内容。添加后，将其添加到注册表中。

这是当我们单击“确定”按钮时显示的错误弹出窗口。在这里，我刚刚添加了一个 ErrorPopup 来展示如何覆盖小部件。通过这种方式，我们可以覆盖一个小部件并添加我们想要的任何内容。