目標(biāo)要求:在系統(tǒng)的創(chuàng)建按鈕旁邊增加新的按鈕實(shí)現(xiàn)自定義的功能

image.png

一 新增一個(gè)按鈕

odoo的前端都是qweb渲染的,找到創(chuàng)建的按鈕的模板位置,我們?cè)诤竺婕由弦粋€(gè)按鈕標(biāo)簽即可

• 按鈕模板所在位置:odoo/addons/web/static/src/xml/base.xml

<t t-name="ListView.buttons">
    <t t-if="!widget.no_leaf and widget.options.action_buttons !== false">
        <div class="o_list_buttons">
            <t t-if="widget.options.addable and widget.is_action_enabled('create')">
                <button type="button" class="btn btn-primary btn-sm o_list_button_add" accesskey="c">
                    <t t-esc="widget.options.addable"/>
                </button>
            </t>
            <button type="button" class="btn btn-primary btn-sm o_list_button_save" accesskey="s">
                Save
            </button>
            <button type="button" class="btn btn-default btn-sm o_list_button_discard" accesskey="j">
                Discard
            </button>
        </div>
    </t>
</t>

• 我們需要在這個(gè)ListView.buttons中增加一個(gè)button標(biāo)簽,為了不改動(dòng)源碼我們通過(guò)繼承增加,新建一個(gè)add_button.xml
  這個(gè)文件需要在__manifest__.py文件'qweb'中引入才會(huì)進(jìn)行加載
  'qweb': ['static/src/xml/add_button.xml']

<?xml version="1.0" encoding="UTF-8"?>
<template xml:space="preserve">
<!--    繼承ListView.buttons模板-->
    <t t-extend="ListView.buttons">
<!--       在 button.o_list_button_discard 標(biāo)簽之后增加 -->
      <t t-jquery="button.o_list_button_discard" t-operation="after">
<!--          通過(guò)'add_new'進(jìn)行判斷什么時(shí)候顯示按鈕,如果不加這個(gè)t-if判斷,那么所有的tree視圖都將出現(xiàn)這個(gè)新按鈕-->
          <t t-if="widget.options.addable and widget.is_action_enabled('add_new')">
<!--              button標(biāo)簽,記得加上一個(gè)'oe_list_button_news'自定義的類用于js定位綁定動(dòng)作-->
            <button class="btn btn-primary btn-sm oe_list_button_news" type="button">新按鈕</button>
          </t>
      </t>
    </t>
</template>

二 在JS中進(jìn)行對(duì)按鈕顯示的判斷及按鈕動(dòng)作綁定

• 新建文件tree_button_action.js

odoo.define('tree_button.button_action', function (require) {
    "use strict";

    var View = require('web.View');
    var Model = require('web.Model');
    var ListView = require('web.ListView');

    ListView.include({
        render_buttons: function ($node) {
            this._super.apply(this, arguments);
            if (this.$buttons) {
                // 通過(guò)屬性名綁定動(dòng)作
                this.$buttons.find('.oe_list_button_news').click(this.proxy('new_action_2'));
            }
        },

        // 可以直接調(diào)用模型方法
        new_action_1: function () {
            var self = this
            var tree_button = new Model("tree.button");
            tree_button.call("func").then(function (result) {
                console.log(result);
            });
        },

        // 也可以調(diào)出模型視圖,比如打開(kāi)一個(gè)向?qū)б晥D,action參數(shù)于python中一致
        new_action_2:function () {
            var self = this;
            this.do_action({
                name: "列表視圖",
                res_model: "tree.button",
                // 注意tree視圖類型在js中使用'list'
                // views: [[false, 'list'], [false, 'form']],
                views: [[false, 'form']],
                type: 'ir.actions.act_window',
                target: "new",
                context: self.dataset.get_context(),
                flags: {
                    action_buttons: false,
                }
            });
        },
    })

    View.include({
        // 判斷按鈕是否顯示
        is_action_enabled: function (action) {
            // 這里'add_new'與add_button.xml中widget.is_action_enabled('add_new')對(duì)應(yīng)
            if (action == "add_new") {
                var attrs = this.fields_view.arch.attrs;
                return (action in attrs) ? JSON.parse(attrs[action]) : false;
            } else {
                return this._super.apply(this, arguments);
            }

        }
    })

})

• 記得需要加載這個(gè)js才會(huì)生效,新建一個(gè)render_js.xml文件,且這個(gè)xml文件需要在_manifest中data 引入

<?xml version="1.0"?>
<odoo>
    <data>
        <template id="tree_button_render_js" inherit_id="web.assets_backend">
            <xpath expr="." position="inside">
<!--                js文件地址按實(shí)際填寫-->
                <script src="tree_button/static/src/js/tree_button_action.js" type="text/javascript"/>
            </xpath>
        </template>
    </data>
</odoo>

三 顯示按鈕

在JS代碼中設(shè)置按鈕默認(rèn)不顯示,在需要顯示的模型上設(shè)置屬性為true即可顯示

<!--tree_button視圖-->
        <record id="tree_button_tree" model="ir.ui.view">
            <field name="name">tree.button.tree</field>
            <field name="model">tree.button</field>
            <field name="arch" type="xml">
<!--             在tree標(biāo)簽中將add_new設(shè)為true即可顯示按鈕-->
                <tree editable="bottom" add_new="true">
                    <field name="name"/>
                </tree>
            </field>
        </record>

最終項(xiàng)目結(jié)構(gòu):

image.png