define_action_button方法支持另一个可选参数条件。这个参数用于根据某一条件隐藏/显示该按钮。这个参数的值是一个返回布尔值的函数。根据所返回的值，POS 系统会隐藏或显示这个按钮。参见下例来获取更多信息：

screens.define_action_button({
  'name': 'reprint',
  'widget': ReprintButton,
  'condition': function(){
    return this.pos.config.print_via_proxy;
  }
});

虽然销售点应用可离线使用，它仍然可以对服务端进行RPC调用。RPC调用可用于任意操作，你可以使用它来进行增删改查操作或对服务端执行某个动作。本节中，我们将进行RPC调用来获取客户最近的5个订单的信息。

本节中，我们将使用在键盘上添加动作按钮一节中所创建的pos_demo模块。我们将定义动作按钮。在用户点击这个动作按钮时，我们会进行RPC调用来获取订单信息并在弹窗中展示。

按照如下步骤来显示所选择客户的最近的5张订单：

1. 通过如下代码在 /static/src/js/pos_demo.js文件中导入RPC工具：

   var rpc = require('web.rpc');
   

2. 在/static/src/js/pos_demo.js文件中添加如下代码，这会新增一个动作按钮来在用户点击该按钮时获取并显示最近5张订单的信息：

   var lastOrders = screens.ActionButtonWidget.extend({
     template: 'LastOrders',
     // Add step 3 and 4 here
   });
   
   screens.define_action_button({
     'name': 'last_orders',
     'widget': lastOrders
   });
   

3. 在 lastOrders组件中添加button_click函数来管理按钮点击：

   button_click: function () {
     var self = this;
     var order = this.pos.get_order();
     if (order.attributes.client) {
       var domain = [['partner_id', '=',
         order.attributes.client.id]];
       rpc.query({
         model: 'pos.order',
         method: 'search_read',
         args: [domain, ['name', 'amount_total', 'cu']], 
           kwargs: { limit: 5 },
       }).then(function (orders) {
       if(orders.length > 0){
         var order_list = _.map(orders, function (o) {
         return { 'label': _.str.sprintf("%s -
           TOTAL: %s", o.name, o.amount_total) };
         });
         self.show_order_list(order_list);
       } else {
         self.show_error('No previous order found for
         the customer');
       }
       });
     } else {
       this.show_error('Please select the customer');
     }
   },
   

4. 添加方法来显示订单列表和错误：

   show_order_list: function(list) {
     this.gui.show_popup('selection', {
       'title': 'Please select a reward',
       'list': list,
       'confirm': function (reward) {
         order.apply_reward(reward);
       },
     });
   },
   show_error: function (message){
     this.gui.show_popup('error', {
       title: "Warning",
       body: message,
     });
   }
   

5. 在/static/src/xml/pos_demo.xml 文件中为按钮添加QWeb模板：

   <t t-name="LastOrders">
     <div class='control-button'>
       <i class='fa fa-shopping-cart' /> Last orders
     </div>
   </t>
   

更新pos_demo模块来应用修改。然后，你将能在键盘面板上方看到一个 Last Orders 按钮。在点击这个按钮时，会在弹窗中显示订单信息：

RPC工具可以在web.rpc命名空间中使用。在第1步中，我们通过require('web.rpc')导入了RPC工具。

在第2步中，我们定义一个动作按钮来获取并显示选中客户的订单信息。在深入技术细节之前，让我们来理解通过这个动作按钮我们希望完成的操作。在进行点击后，我们希望显示所选客户的最近5张订单的信息。有一些情况是未选中客户或者客户此前没有订单。在这些情况下，我们需要在弹窗中显示相应的信息。

让我们回到第2步的技术细节。这里我们创建并注册了这个动作按钮。如果想要了解动作按钮更多的相关知识，请参见在键盘上添加动作按钮一节。在第3步中，我们添加了点击处理函数。在点击动作按钮时，会调用点击处理函数。这个函数会向服务端发送RPC调用来获取订单信息。我们使用了rpc.query()方法来进行RPC调用。以下是你可以在rpc.query() 方法中传递的参数列表：

• model：你希望对其执行操作的模型名称。
• method：你所希望调用的方法名称。
• args：方法所能接受的必填位置参数列表。
• kwargs：方法所接收的位置参数字典。

本节中，我们使用了search_read方法来通过RPC获取数据。我们传递了客户域来过滤订单。我们还传递了limit关键字参数来仅获取5个订单。 rpc.query()是一个异步方法，返回JQuery延时对象，因此要处理该结果，你需要使用then()方法。

在第4步中，我们在lastOrders按钮中创建了show_order_list和show_error方法。这些会用于在弹窗中显示订单信息和警告。我们使用了gui 的show_popup() 方法。如果你希望了解更多有关gui方法的知识，可以查看addons/point_of_sale/static/src/js/gui.js文件。

在第5步中，我们为动作按钮添加了QWeb模板。POS 应用会渲染这个模板来显示动作按钮。

ℹ️RPC调用不可在离线模式下使用。如果你有良好的因特网连接并且不常使用离线模式，那么可以使用RPC。虽然Odoo的销售点应用可以离线使用，有些操作，如创建或更新客户，需要有网络连接，因为这些功能在内部使用了RPC调用。

POS 应用的用户界面使用QWeb模板编写。这些模板是客户端QWeb模板。因此你不能使用XPath来修改元素。客户端模板使用另一种方法来修改已有的UI元素。本节中，我们将学习如何在 POS应用中修改UI元素。

本节我们将使用做RPC调用一节中所创建的pos_demo模块。我们会修改产品卡片的UI并显示每个产品的边际利润。

按照如下步骤来在产品卡片中显示边际利润：

1. 在/static/src/js/pos_demo.js文件中添加如下代码来获取针对产品的实际价格的额外字段：

   var pos_model = require('point_of_sale.models');
   pos_model.load_fields("product.product", "standard_price");
   

2. 在/static/src/xml/pos_demo.xml中添加如下代码来显示一个边际利润产品卡片：

   <t t-extend="Product">
     <t t-jquery=".price-tag" t-operation="after">
       <span t-if="product.standard_price" class="sale_margin">
         <t t-set="margin"
           t-value="product.list_price - product.standard_price"/>
         <t t-esc="widget.format_currency(margin)"/>
       </span>
     </t>
   </t>
   

3. 为利润文本添加如下的样式：

   .sale_margin {
     top: 21px;
     line-height: 15px;
     right: 2px;
     background: #CDDC39;
     position: absolute;
     border-radius: 10px;
     padding: 0px 5px;
   }
   

更新pos_demo模块来应用修改。然后，你将能够在产品卡片中看到边际利润：

本节中，我们希望使用standard_price来作为产品的购买价格。这个字段默认在 POS 应用中并没有加载。在第1步中，我们为product.product模型添加了standard_price字段。然后中，产品数据会多一个字段：standard_price。

第2步中，我们扩展了默认的产品卡片模板。你将需要对已有QWeb模板使用t-extend属性。然后你需要使用t-jquery属性来选择你想要执行操作的元素。这非常类似 XPath，它代替XPath它使用的是JQuery选择器。这个选择器必须匹配初始模板中的元素。本例中，我们使用了t-jquery=".price-tag"。要进行交叉验证，你可以在初始产品模板中检查带有class="price-tag"的元素。这个初始产品模板位于point_of_sale/static/src/xml/pos.xml文件中。

通过JQuery选择器，你还需要为所希望执行的操作传递参数。本节中我们使用了t-operation="after"，它表示你的自定义会被加到所选元素之后。以下是能够使用的操作列表：

• append：将自定义内容添加为所选元素的最后一个子元素。
• prepend：将自定义内容添加为所选元素的第一个子元素。
• before：在所选元素之前添加自定义内容。
• after：在所选元素之后添加自定义内容。
• replace：将所选元素替换为自定义内容。
• inner：将所选元素的内部内容替换为自定义内容。
• attribute：修改所选元素的属性。

在第3步中，我们添加了样式来修改利润元素的位置。这会为利润元素添加背景色并将其放到价格胶囊的下方。

在前一小节中，我们学习了如何通过RPC获取数据以及如何修改 POS 应用的 UI 界面。本节中我们将学习如何修改或继承已有的业务逻辑。

本节我们将继续使用修改POS界面UI一节中所创建的pos_demo模块，其中我们获取了产品的购买价格并显示产品利润。现在，本节中我们将在销售低于产品利润的产品时向用户发送警告。

在部分 POS 应用的业务逻辑使用JavaScript编写，因此我们仅需对其进行修改来实现本节的目标。在/static/src/js/pos_demo.js中添加如下代码来在用户销售低于购买价格的产品时发送警告。

var screens = require('point_of_sale.screens');

screens.OrderWidget.include({
  set_value: function (val) {
    this._super(val);
    var orderline = this.pos.get_order().get_selected_orderline();
    var standard_price = orderline.product.standard_price;
    if (orderline && standard_price) {
      var line_price = orderline.get_base_price();
      if (line_price < orderline.quantity * standard_price) {
        this.gui.show_popup('alert', {
          title: "Warning",
          body: "Product price is set below product actual cost",
        });
      }
    }
  }
});

更新pos_demo模块来应用修改。在更新后，对订单添加折扣，让产品的价格低于购买价格。会弹出 一个警告的窗口：

为修改现有业务，我们需要使用include() 函数。这个函数将在内部使用猴子补丁并替换原来的对象属性为新的属性。如果你想要访问初始方法，可以使用this._super属性。

OrderWidget的set_value()函数用于通过键盘更新产品价格。相同的函数也用于应用折扣。因此在本节中，我们替换set_value()方法为我们自己的实现。我们不希望修改默认的实现，因此首先调用了_super()，它会调用默认的 set_value()方法。在进行父级调用后，我们添加了逻辑来在用户将产品价格设置为地采购价格时显示警告。我们使用了gui的show_popup()方法来显示弹窗。

我们将自己的业务逻辑放到默认的实现 (_super)调用之后。如果想要在默认实现之前编写业务逻辑，可以通过将_super调用放到函数的最后来实现。

ℹ️使用include()时如不谨慎会破坏一些事物。如果方法从多个文件中继承，你必须调用 super方法，否则它会在随后的继承中跳过该逻辑。这有时会导致崩溃的内部数据状态。

在你自定义销售点应用时，从客户获取到的常见请求是修改客户收据。本节我们将学习如何修改客户收据。

本节我们将继续使用修改已有业务逻辑一节中所创建的pos_demo模块。我们将在 POS 收据中添加一行来显示用户在订单中节省了多少钱。

按照如下步骤来在 POS 中修改客户收据：

1. 在 /static/src/js/pos_demo.js文件中添加如下代码。这会在收据环境添加额外的数据：

   var screens = require('point_of_sale.screens');
   
   screens.ReceiptScreenWidget.include({
     get_receipt_render_env: function () {
       var receipt_env = this._super();
       var order = this.pos.get_order();
       var saved = 0;
       _.each(order.orderlines.models, function (line) {
         saved += ((line.product.list_price -
         line.get_base_price()) * line.quantity);
       });
       receipt_env['saved_amount'] = saved;
       return receipt_env;
     }
   });
   

2. 在/static/src/xml/pos_demo.xml中添加如下代码。这会继承默认的收据模板并添加我们的自定义内容：

   <t t-extend="PosTicket">
     <t t-jquery=".receipt-change" t-operation="after">
       <t t-if="saved_amount">
         <br/>
         <div class="pos-center-align">
           <t t-esc="widget.format_currency(saved_amount)"/>
           you saved in this order
         </div>
       </t>
     </t>
   </t>
   

更新pos_demo模块来应用修改。然后，添加一个带有折扣的产品并查看收据，会在收据上看到多了一行：

本节中并没有什么新的内容。我们只是通过使用前面小节的模块更新了收据。在第1步中，我们重载了get_receipt_render_env() 函数来向收据环境发送了更多信息。我们对比了产品的基准价格和收据上的价格来计算为客户节约了多少现金。我们通过saved_amount键将这一数据发送到收据环境中。如果你现要了解方法重载的更多内容，可以参见修改已有业务逻辑一节。

在第2步中，我们修改了收据上默认的QWeb模板。实际收据的模板名为PosTicket，因此我们使用了它作为t-extend 属性的值。在第1步中我们已经修改收据所需的信息。在QWeb模板中，我们在saved_amount键中获取到了节省的金额，因此我们在收据的最后又添加了一个

<t t-extend="XmlReceipt">
  <t t-jquery='.after-footer' t-operation='after'>
    <div>
      <t t-esc="saved_amount"/>
      you saved in this order
    </div>
  </t>
</t>