如何在Odoo 12 POS的支付区域添加清除订单行的自定义按钮

你之前的代码通过define_action_button注册的按钮默认只会挂载到商品选择界面的控制栏，要放到支付界面，需要调整代码将按钮注入支付页面的控件节点，调整后代码如下：

1. 修改XML模板 #

<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-name="ClearCartLine">
    <div class='paymentmethod check o_paymentmethod' style="margin:8px; padding:12px; text-align:center;">
        删除选中订单行
    </div>
</t>
</templates>

这里调整了按钮样式，适配支付区域的支付按钮视觉风格，你也可以根据需求自定义样式。

2. 调整JS逻辑 #

odoo.define('clear_button_fun.pos_view',function(require){
"use strict";

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

var ClearCartLine = screens.ActionButtonWidget.extend({
    template: "ClearCartLine",

    button_click: function(){
        this.clear_button_fun();
    },

    clear_button_fun(){
        var order = this.pos.get_order();
        // 增加非空判断，避免无选中行时点击报错
        var selected_line = order.get_selected_orderline();
        if(selected_line){
            order.remove_orderline(selected_line);
        }
    },
});

// 核心修改：继承支付界面，注入自定义按钮
screens.PaymentScreen.include({
    renderElement: function() {
        this._super();
        var self = this;
        // 实例化自定义按钮
        this.clear_button = new ClearCartLine(this, {});
        this.clear_button.appendTo(this.$('.paymentmethods'));
        // 绑定点击事件
        this.clear_button.$el.click(function(){
            self.clear_button.button_click();
        });
    }
});

});

代码修改说明 #

• 移除了原来的define_action_button注册逻辑，该方法仅适配商品界面的按钮栏
• 通过继承PaymentScreen支付界面，在界面渲染完成后将自定义按钮挂载到支付方式容器.paymentmethods下，和参考示例的摆放位置一致
• 增加了选中订单行的非空校验，避免空点击触发报错

3. 效果验证 #

升级模块后重启Odoo服务，进入POS界面选择商品进入支付页，就可以看到删除按钮出现在支付方式区域，点击即可删除当前选中的订单行。

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