ODOO Tree Form 自定义按钮【基于odoo12,odoo13】
前段时间写的【odoo自定义按钮】不是很清晰,今天有时间,翻一遍,挂好注释。
开始了还是那个需求:
在odoo的前端页面,我们也许需要在【创建】/【保存】/【导入】等按钮后,增加自定义按钮,比如【打印XXX】、【合并XXX】这种odoo没有提供的按钮。
下面是一个自定义按钮的例子,例子是在继承 hr.employee 的基础上做的:
创建 page_button/static/src/xml/tree_view_button.xml
这里创建template去拓展odoo原有的列表视图和from视图,不要忘了把它加载到 __manifest__.py里面
在第五行,o_list_button_save,是odoo的列表视图提供的【保存】按钮的标识,
在第十一行,o_form_button_create,是odoo的表单视图提供的【创建】按钮的标识。
我选择分别在这两个按钮后,新增我的自定义按钮【Tree:Say Hello】和【Form:Say Hello】
<?xml version="1.0" encoding="UTF-8"?> <template id="template" xml:space="preserve"> <!-- 拓展Tree视图增加自定义按钮 --> <t t-extend="ListView.buttons"> <t t-jquery="button.o_list_button_save" t-operation="after"> <button type="button" class="btn btn-primary o_list_tender_button_say_hello" style="display:inline-block;">Tree:Say Hello</button> </t> </t> <!-- 拓展Form视图增加自定义按钮 --> <t t-extend="FormView.buttons"> <t t-jquery="button.o_form_button_create" t-operation="after"> <button type="button" class="btn btn-primary o_list_tender_button_say_hello" style="display:inline-block;">Form:Say Hello</button> </t> </t> </template>
创建 page_button/wizard/widzard_employee.py
此文件是做提示用,所以这里用了个瞬态模型TransientModel
from odoo import api, fields, models, _ class ShowMessageWizard(models.TransientModel): _name = "message.wizard" _description = "提示一下" def say_hello(self): context = dict(self._context or {}) view_type = context.get('view_type') actived_id = context.get('actived_id') active_ids = context.get('active_ids') print("视图类型:", view_type) if view_type == "form": print("Form Selected ID:", actived_id) elif view_type == "list": print("Tree Selected IDs:", active_ids) else: print("其他视图类型的ID在JS里自行传值吧。") print("接下来做你想做的")
创建 page_button/wizard/widzard_employee.xml
这个文件时提示的视图,代码中的say_hello就是上面py文件的方法。
<?xml version="1.0" encoding="utf-8"?> <odoo> <data> <record id="show_message_wizard" model="ir.ui.view"> <field name="name">Show Message Wizard</field> <field name="model">message.wizard</field> <field name="arch" type="xml"> <form string="Message"> <h3>要说Hello吗?</h3> <footer> <button name="say_hello" string="Yes" type="object" class="btn-primary"/> <button string="No" class="btn-primary" special="cancel"/> </footer> </form> </field> </record> </data> </odoo>
创建 page_button/static/src/js/extend_view_button.js
这个文件主要是监听上面定义的按钮,根据触发的事件,操作后台。
在JS中你只需要关注的是:self.do_action 里的代码
odoo.define('hr_employee.tree_view_button', function (require) { "use strict"; var core = require('web.core'); var ListView = require('web.ListView'); var ListController = require('web.ListController'); var FormView = require('web.FormView'); var FormController = require('web.FormController'); var ImportViewMixin = { init: function (viewInfo, params) { var importEnabled = 'import_enabled' in params ? params.import_enabled : true; this.controllerParams.importEnabled = importEnabled; }, }; var ImportControllerMixin = { init: function (parent, model, renderer, params) { this.importEnabled = params.importEnabled; }, _bindImport: function () { if (!this.$buttons) { return; } var self = this; this.$buttons.on('click', '.o_list_tender_button_say_hello', function () { var view_type = self.viewType; var actived_id; var actived_ids = []; if (view_type == "form") { actived_id = self.model.get(self.handle).data.id; console.log(actived_id); // 至此你获取到了 当前form 的ID,你可以在JS里拿这着这个ID搞点事 // 当然,你也可以去调用后台的方法,或者打开一个新的页面,一个新的wizard } else { var state = self.model.get(self.handle, {raw: true}); for (var i = 0; i < $('tbody .o_list_record_selector input').length; i++) { if ($('tbody .o_list_record_selector input')[i].checked === true) { actived_ids.push(state.res_ids[i]); } } var ctx = state.context; ctx['active_ids'] = actived_ids; console.log(actived_ids); // 至此你获取到了你勾选的项的ID,你可以在JS里拿这着这些ID搞点事 // 当然,你也可以去调用后台的方法,或者打开一个新的页面,一个新的wizard } var resmodel = "message.wizard"; var resname = "提示一下"; if ((view_type == "list" && actived_ids.length >= 1 ) || (view_type == "form")) { // 这里的例子是弹出一个wizard提示,根据用户选择操作后台 self.do_action ({ type: 'ir.actions.act_window', name: resname, res_model: resmodel, views: [[false, 'form']], target: 'new', context: { view_type: view_type, active_ids: actived_ids, actived_id: actived_id, }, }, { on_reverse_breadcrumb: function () { self.reload(); }, on_close: function () { self.reload(); } }); } else { $(function () { alert("啥都没选择啊") }); } }); } }; // 拓展LIST ListView.include({ init: function () { this._super.apply(this, arguments); ImportViewMixin.init.apply(this, arguments); }, }); ListController.include({ init: function () { this._super.apply(this, arguments); ImportControllerMixin.init.apply(this, arguments); }, renderButtons: function () { this._super.apply(this, arguments); ImportControllerMixin._bindImport.call(this); } }); // 拓展FORM FormView.include({ init: function (viewInfo) { this._super.apply(this, arguments); this.controllerParams.viewID = viewInfo.view_id; ImportViewMixin.init.apply(this, arguments); }, }); FormController.include({ init: function (parent, model, renderer, params) { this._super.apply(this, arguments); this.viewID = params.viewID; ImportControllerMixin.init.apply(this, arguments); }, renderButtons: function () { this._super.apply(this, arguments); // Sets this.$buttons ImportControllerMixin._bindImport.call(this); } }); });
创建 page_button/views/tree_view_asset.xml
此文件用于引入上面的JS,不要忘了把它加载到 __manifest__.py里面
<?xml version="1.0" encoding="utf-8"?> <odoo> <data> <template id="assets_backend" name="tree view menu" inherit_id="web.assets_backend"> <xpath expr="." position="inside"> <script type="text/javascript" src="/page_button/static/src/js/extend_view_button.js"></script> </xpath> </template> </data> </odoo>
如有问题,请指正。
2020 05 25 更新: 按照 qq_36762265 给出的建议,在xml 中增加了 t-if 判断。之前我是在JS中用样式控制的,代码没贴上来。大家可以按下面这样去实现。
补充:ODOO13 可用
<?xml version="1.0" encoding="UTF-8"?> <template id="template" xml:space="preserve"> <!-- 拓展Tree视图增加自定义按钮 --> <t t-extend="ListView.buttons"> <t t-jquery="button.o_list_export_xlsx" t-operation="after"> <t t-if="widget.modelName=='hr.employee'"> <button type="button" class="btn btn-primary o_button_send_to_phosee" style="display:inline-block;">xxxxxxxx</button> </t> </t> </t> ..... </template>