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');
}

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