odoo14在tree、kanban视图上添加dashboard

odoo14在tree、kanban视图上添加dashboard

效果图：

实现代码：js：view的类型原来1个js给拆分成了4个： view, controller, renderer, model

​​1、view：AbstractView​​的子类，这是工厂类：类需要解析 ​​arch​​字段并设置其它3个类

2、Renderer ：渲染器，来自 ​​AbstractRenderer：负责在用户界面中展示数据；​​

3、Controller：一个控制器 (来看​​AbstractController​​)：用于协调、与网页客户端对话

4、Model：一个模型 (来自 ​​AbstractModel​​)：用于和服务端对话、加载数据并处理数据

步骤：一、二、三、四案例

一、MVCR：

var MapController = AbstractController.extend({});var MapRenderer = AbstractRenderer.extend({});var MapModel = AbstractModel.extend({});var MapView = AbstractView.extend({ 　　config: { 　　　　Model: MapModel, 　　　　Controller: MapController, 　　　　Renderer: MapRenderer, 　　},});

二、告知网页客户端视图名称和实际类之间的映射。var viewRegistry = require('web.view_registry');viewRegistry.add('helpdesk_dashboard', HelpdeskDashboardView);

三、现在我们需要告知网页客户端指定的 ​​ir.ui.view​​需要使用我们的新类。注意这是一个网页客户端的具体考虑。

从服务端的视角来看，我们还是对应看板视图。这么做的相应方式是通过对框架的根节点使用特殊属性​​js_class​​

... 　　 　　 ...

案例：

odoo.define('purchase.dashboard', function (require) {"use strict";/** * This file defines the Purchase Dashboard view (alongside its renderer, model * and controller). This Dashboard is added to the top of list and kanban Purchase * views, it extends both views with essentially the same code except for * _onDashboardActionClicked function so we can apply filters without changing our * current view. */var core = require('web.core');//这里是列表视图上的扩展：导入的模块var ListController = require('web.ListController');var ListModel = require('web.ListModel');var ListRenderer = require('web.ListRenderer');var ListView = require('web.ListView');//这里是kanban视图上的扩展：var KanbanController = require('web.KanbanController');var KanbanModel = require('web.KanbanModel');var KanbanRenderer = require('web.KanbanRenderer');var KanbanView = require('web.KanbanView');var SampleServer = require('web.SampleServer');//注册模块var view_registry = require('web.view_registry');var QWeb = core.qweb;// Add mock of method 'retrieve_dashboard' in SampleServer, so that we can have// the sample data in empty purchase kanban and list viewlet dashboardValues;SampleServer.mockRegistry.add('purchase.order/retrieve_dashboard', () => { return Object.assign({}, dashboardValues);});//--------------------------------------------------------------------------// List View//--------------------------------------------------------------------------//渲染renderervar PurchaseListDashboardRenderer = ListRenderer.extend({ events:_.extend({}, ListRenderer.prototype.events, { 'click .o_dashboard_action': '_onDashboardActionClicked', }), /** * @override * @private * @returns {Promise} */ _renderView: function () { var self = this; return this._super.apply(this, arguments).then(function () { var values = self.state.dashboardValues; var purchase_dashboard = QWeb.render('purchase.PurchaseDashboard', { values: values, }); self.$el.prepend(purchase_dashboard); }); }, /** * @private * @param {MouseEvent} */ _onDashboardActionClicked: function (e) { e.preventDefault(); var $action = $(e.currentTarget); this.trigger_up('dashboard_open_action', { action_name: $action.attr('name')+"_list", action_context: $action.attr('context'), }); },});//模型 modelvar PurchaseListDashboardModel = ListModel.extend({ /** * @override */ init: function () { this.dashboardValues = {}; this._super.apply(this, arguments); }, /** * @override */ __get: function (localID) { var result = this._super.apply(this, arguments); if (_.isObject(result)) { result.dashboardValues = this.dashboardValues[localID]; } return result; }, /** * @override * @returns {Promise} */ __load: function () { return this._loadDashboard(this._super.apply(this, arguments)); }, /** * @override * @returns {Promise} */ __reload: function () { return this._loadDashboard(this._super.apply(this, arguments)); }, /** * @private * @param {Promise} super_def a promise that resolves with a dataPoint id * @returns {Promise -> string} resolves to the dataPoint id */ _loadDashboard: function (super_def) { var self = this; var dashboard_def = this._rpc({ model: 'purchase.order', method: 'retrieve_dashboard', }); return Promise.all([super_def, dashboard_def]).then(function(results) { var id = results[0]; dashboardValues = results[1]; self.dashboardValues[id] = dashboardValues; return id; }); },});//控制器：controllervar PurchaseListDashboardController = ListController.extend({ custom_events: _.extend({}, ListController.prototype.custom_events, { dashboard_open_action: '_onDashboardOpenAction', }), /** * @private * @param {OdooEvent} e */ _onDashboardOpenAction: function (e) { return this.do_action(e.data.action_name, {additional_context: JSON.parse(e.data.action_context)}); },});//视图 viewvar PurchaseListDashboardView = ListView.extend({ config: _.extend({}, ListView.prototype.config, { Model: PurchaseListDashboardModel, Renderer: PurchaseListDashboardRenderer, Controller: PurchaseListDashboardController, }),});//--------------------------------------------------------------------------// Kanban View//--------------------------------------------------------------------------var PurchaseKanbanDashboardRenderer = KanbanRenderer.extend({ events:_.extend({}, KanbanRenderer.prototype.events, { 'click .o_dashboard_action': '_onDashboardActionClicked', }), /** * @override * @private * @returns {Promise} */ _render: function () { var self = this; return this._super.apply(this, arguments).then(function () { var values = self.state.dashboardValues; var purchase_dashboard = QWeb.render('purchase.PurchaseDashboard', { values: values, }); self.$el.prepend(purchase_dashboard); }); }, /** * @private * @param {MouseEvent} */ _onDashboardActionClicked: function (e) { e.preventDefault(); var $action = $(e.currentTarget); this.trigger_up('dashboard_open_action', { action_name: $action.attr('name')+"_kanban", action_context: $action.attr('context'), }); },});var = KanbanModel.extend({ /** * @override */ init: function () { this.dashboardValues = {}; this._super.apply(this, arguments); }, /** * @override */ __get: function (localID) { var result = this._super.apply(this, arguments); if (_.isObject(result)) { result.dashboardValues = this.dashboardValues[localID]; } return result; }, /** * @override * @returns {Promise} */ __load: function () { return this._loadDashboard(this._super.apply(this, arguments)); }, /** * @override * @returns {Promise} */ __reload: function () { return this._loadDashboard(this._super.apply(this, arguments)); }, /** * @private * @param {Promise} super_def a promise that resolves with a dataPoint id * @returns {Promise -> string} resolves to the dataPoint id */ _loadDashboard: function (super_def) { var self = this; var dashboard_def = this._rpc({ model: 'purchase.order', method: 'retrieve_dashboard', }); return Promise.all([super_def, dashboard_def]).then(function(results) { var id = results[0]; dashboardValues = results[1]; self.dashboardValues[id] = dashboardValues; return id; }); },});var PurchaseKanbanDashboardController = KanbanController.extend({ custom_events: _.extend({}, KanbanController.prototype.custom_events, { dashboard_open_action: '_onDashboardOpenAction', }), /** * @private * @param {OdooEvent} e */ _onDashboardOpenAction: function (e) { return this.do_action(e.data.action_name, {additional_context: JSON.parse(e.data.action_context)}); },});通过VIEW来设置它var PurchaseKanbanDashboardView = KanbanView.extend({ config: _.extend({}, KanbanView.prototype.config, { Model: PurchaseKanbanDashboardModel, Renderer: PurchaseKanbanDashboardRenderer, Controller: PurchaseKanbanDashboardController, }),});//视图类型和实际类之间的映射需要进行更新view_registry.add('purchase_list_dashboard', PurchaseListDashboardView);view_registry.add('purchase_kanban_dashboard', PurchaseKanbanDashboardView);return { PurchaseListDashboardModel: PurchaseListDashboardModel, PurchaseListDashboardRenderer: PurchaseListDashboardRenderer, PurchaseListDashboardController: PurchaseListDashboardController, PurchaseKanbanDashboardModel: PurchaseKanbanDashboardModel, PurchaseKanbanDashboardRenderer: PurchaseKanbanDashboardRenderer, PurchaseKanbanDashboardController: PurchaseKanbanDashboardController};});

Dashboard的page的xml

导入js

最后引用：

心有猛虎,细嗅蔷薇

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。