user-interface - 在 TreeView Odoo 13 之外添加按钮

Question

美好的一天!

有没有办法在 Odoo 的 TreeView 上方添加一个按钮？
我想在用户单击按钮时运行一个函数。
如果这是不可能的，你能帮我找到一个替代方案吗？

这是我的代码:

'''<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <record id="account_payment_import_view_tree" model="ir.ui.view">
        <field name="name">account.payment.import.view.tree</field>
        <field name="model">account.payment.import</field>
        <field name="arch" type="xml">
            <tree string="Payment Imports" decoration-info="payment_id != False" decoration-danger="error_msg != False">
                <field name="transaction_date"/>
                <field name="facts_id"/>
                <field name="paid_in_lei"/>
                <field name="paid_in_euro"/>
                <field name="amount"/>
                <field name="account"/>
                <field name="account_no"/>
                <field name="document_no"/>
                <field name="details_bk_statement"/>
                <field name="error_msg"/>
                <field name="invoice_number" invisible="1"/>
                <field name="payment_id" widget="many2onebutton" invisible="1"/>
                <field name="invoice_id" widget="many2onebutton" invisible="1"/>
                <field name="company_id" invisible="1"/>
                <field name="currency_id" invisible="1"/>
            </tree>
        </field>
    </record>

    <record id="account_payment_import_action" model="ir.actions.act_window">
        <field name="name">Payment Imports</field>
        <field name="res_model">account.payment.import</field>
        <field name="view_mode">tree</field>
        <field name="domain">[]</field>
        <field name="context">{'edit': 0}</field>
    </record>

    <menuitem
        id="account_payment_import_menu"
        name="Payment Imports"
        action="account_payment_import_action"
        parent="account.menu_finance_receivables"
        sequence="160"/>
</odoo>''' 

Answer 1

好吧，这是我在 TreeView 中获取按钮的尝试。我会逐步向您解释清楚。

首先我们必须通过 qweb 将按钮添加到 TreeView ，从 web 模块继承 TreeView 。 这将使我们的新按钮出现在所有 TreeView 中，这是我们不想要的。因此，为了避免我们添加一个条件 t-if='widget.modelName == "account.payment.import"' ，这将导致按钮仅针对其模型为该模型的 View 生成这让我们感兴趣。我们还添加了一个 CSS 类 oe_new_custom_button 以便能够从 javascript 中识别按钮。

让我们调用包含此 qweb 的文件 tree_view_button.xml 并将其放在 your_module_name/static/src/xml 中。

<?xml version="1.0" encoding="UTF-8"?>

<templates>
    <t t-extend="ListView.buttons">
        <t t-jquery="div.o_list_buttons" t-operation="append">
            <button type="button" t-if='widget.modelName == "account.payment.import"'
                    class="oe_new_custom_button btn btn-primary">Custom Button
            </button>
        </t>
    </t>
</templates>

其次，我们必须为按钮提供功能，我们通过 javascript 实现。

这里我们继承了 TreeView Controller ，称为 ListController，它的作用是渲染和绑定(bind)控制面板中所有额外的按钮/分页器等。

让我们调用包含此 javascript 的文件 tree_view_button.js 并将其放在 your_module_name/static/src/js 中。

odoo.define('your_module_name.tree_view_button', function (require){
    "use strict";

    var ajax = require('web.ajax');
    var ListController = require('web.ListController');

    ListController.include({
        renderButtons: function($node) {
            this._super.apply(this, arguments);
            var self = this;
            if (this.$buttons) {
                $(this.$buttons).find('.oe_new_custom_button').on('click', function() {
                    //custom code
                });
            }
        },
    });
});

最后，我们将我们的 javascript 添加到 odoo Assets 并配置 list 以接受我们的所有更改。

让我们调用包含 Assets 的文件 assets.xml 并将其放在 your_module_name/views 中。

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <data>
        <template id="assets_backend" name="your_module_name_assets" inherit_id="web.assets_backend">
            <xpath expr="." position="inside">
                <script type="text/javascript" src="/your_module_name/static/src/js/tree_view_button.js"></script>
            </xpath>
        </template>
    </data>
</odoo>

这就是它应该看起来像 ma​​nifest.py 的样子。

{
    'data': [
        [ ... ]
        'views/assets.xml',  # <- important
    ],
    "qweb": ['static/src/xml/*.xml'],  # <- important
}

我们已经拥有了一切，但是现在，javascript 可以做什么？

所有内容都有一点点，但最重要的是以下内容。

调用模型方法

odoo.define('your_module_name.tree_view_button', function (require){
    "use strict";

    var ajax = require('web.ajax');
    var ListController = require('web.ListController');

    var rpc = require('web.rpc')

    ListController.include({
        renderButtons: function($node) {
            this._super.apply(this, arguments);
            var self = this;
            if (this.$buttons) {
                $(this.$buttons).find('.oe_new_custom_button').on('click', function() {
                    rpc.query({
                        model: 'account.payment.import',
                        method: 'some_method',
                        args: [],
                    }).then(function(res){
                        // console.log(res)
                        // self.reload();
                    })
                });
            }
        },
    });
});

args 的第一个参数是您希望出现在 some_method 的 self 变量中的 ID 列表。

调用一个 Action

odoo.define('your_module_name.tree_view_button', function (require){
    "use strict";

    var ajax = require('web.ajax');
    var ListController = require('web.ListController');

    ListController.include({
        renderButtons: function($node) {
            this._super.apply(this, arguments);
            var self = this;
            if (this.$buttons) {
                $(this.$buttons).find('.oe_new_custom_button').on('click', function() {
                    self.do_action('model_name.action_id', {
                        additional_context: {},
                    });
                });
            }
        },
    });
});

additional_context 应该是，例如，

{
    'active_id': 1,
}

结束

就这些了，希望对你有用。我附上了按钮的外观图片。