在树视图 Odoo 13 之外添加按钮

Question

美好的一天！

有没有办法在 Odoo 的树视图上方添加一个按钮？
每当用户单击按钮时，我都想运行一个函数。
如果这不可能，你能帮我换一个吗？

这是我的代码：

'''<?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

好吧，这是我在树视图中获取按钮的尝试。我会一步步给你解释清楚的。

首先我们必须通过 qweb 将按钮添加到树视图，从 web 模块继承树视图。这将使我们的新按钮出现在所有树视图中，这是我们不想要的。所以为了避免我们添加一个条件 t-if='widget.modelName == "account.payment.import"' ，这将导致按钮只为我们感兴趣的模型的视图生成。我们还添加了一个 CSS class 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 实现。

这里我们继承了树视图控制器，叫做ListController，它的作用是渲染和绑定控制面板中所有额外的buttons/pager，等等。

让我们调用包含这个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 资产并配置 manifest 以接受我们所有的更改。

让我们调用包含资产的文件 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>

这就是它应该的样子 manifest.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 列表

调用一个动作

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,
}

结束

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

在树视图 Odoo 13 之外添加按钮

Adding Button outside Tree View Odoo 13

treeview

user-interface

button

odoo

odoo-13

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

调用模型方法

调用一个动作

结束