odoo12 Tree视图创建编辑旁边新增按钮，并根据条件隐藏

前言

我们通常在form视图中可以很简单地在header里面添加按钮，但是在某些情况下，我们也需要在Tree视图中添加按钮，但是odoo官方目前没有给我们提供相应的接口，因此，我们尝试自己来实现它。最终效果如下：

按钮显示拓展

首先，我们需要先把按钮的样子给它做出来，我们需要在项目路径下(/xxx/static/src/xml/file_name.xml)添加如下模板：

 <?xml version="1.0" encoding="UTF-8"?>
 <template xml:space="preserve">
     <t t-extend="ListView.buttons">
       <t t-jquery="button.o_list_button_add" t-operation="after">
           <button class="btn btn-primary oe_action_button_picking o_hidden" type="button"
                   accesskey="f">拣货</button>
       </t>
     </t>
 9 </template>

继承修改ListView视图的buttons，添加“拣货”按钮，然后在__manifest__的'qweb'中引用它，升级模块后发现所有模块下都已经成功添加按钮。

通常情况下，我们只需要在特定的模块下显示按钮，我们只需要稍作修改，指定模型名即可：

 <?xml version="1.0" encoding="UTF-8"?>
 <template xml:space="preserve">
     <t t-extend="ListView.buttons">
       <t t-jquery="button.o_list_button_add" t-operation="after">
           <button t-if="widget.modelName == 'MODEL_NAME'"
                   class="btn btn-primary oe_action_button_picking o_hidden" type="button"
                   accesskey="f">拣货</button>
       </t>
     </t>
 </template>

按钮方法逻辑

我们简单完成了按钮的显示，按钮的目的就是需要绑定执行特定的方法，因此，我们接下来需要为按钮绑定对应的python方法。

首先在目录下(/static/src/js/file_name.js)创建一个js文件，继承修改ListController：

 odoo.define('ModelName.action_picking_button', function (require) {
     "use strict";
     var core = require('web.core');
     var ListController = require('web.ListController');
     var rpc = require('web.rpc');
     var session = require('web.session');
     var _t = core._t;
     ListController.include({
         renderButtons: function ($node) {
             this._super.apply(this, arguments);
             if (this.$buttons) {
                 this.$picking_button = this.$buttons.find('.oe_action_button_picking');
                 this.$picking_button.click(this.proxy('action_def'));
             }
         },
         action_def: function () {
             var self = this;
             var user = session.uid;
             rpc.query({
                 model: 'ModelName',
                 method: 'do_picking',
                 args: [[user], self.getSelectedIds()],
             }).then(function (result) {
                 self.do_notify('拣货通知', '销售订单(%s)已成功生成拣货单，你可以开始拣货啦' % result.codes);
                 self.update({});
             });
         }
     });
 });

注意上面的oe_action_button_picking 需要和上面qweb templates中的button class对应，以绑定方法。

action_def 方法就是button绑定的方法，在方法中调用了model类中的do_picking方法。

因此，我们只需要在python类中添加do_picking方法，并添加相应的逻辑即可。

拓展彩蛋

我需要有相应行选定的时候显示按钮，没有的时候隐藏，如下图。该如何实现呢？

在JS中覆盖_toggleSidebar方法，在selectedRecords大于0时显示按钮，如下逻辑：

_toggleSidebar: function () {
    this._super.apply(this, arguments);
    if (this.$picking_button) {
        this.do_picking_button_toggle(this.selectedRecords.length > 0);
    }
},
do_picking_button_toggle: function (display) {
    if (_.isBoolean(display)) {
        display ? this.do_show_picking_button() : this.do_hide_picking_button();
    } else {
        this.$el.hasClass('o_hidden') ? this.do_show_picking_button() : this.do_hide_picking_button();
    }
},
do_show_picking_button: function() {
    this.$picking_button.removeClass('o_hidden');
},
do_hide_picking_button: function() {
    this.$picking_button.addClass('o_hidden');
}

当然，你也可以见仁见智，修改不同的逻辑以满足你的业务。