码迷,mamicode.com
首页 > 其他好文 > 详细

odoo14在tree、kanban视图上添加dashboard

时间:2021-03-16 13:41:17      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:使用   cli   lead   utf-8   resolve   类型   mamicode   mod   ext   

效果图:

技术图片

 

 

 

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

1、viewAbstractView的子类,这是工厂类:类需要解析 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

<record id="helpdesk_team_view_kanban" model="ir.ui.view" >
...
  <field name="arch" type="xml">
  <kanban js_class="helpdesk_dashboard">
...
</kanban>
</field>
</record>

 

 

 

 

案例:

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 view let dashboardValues; SampleServer.mockRegistry.add(‘purchase.order/retrieve_dashboard‘, () => { return Object.assign({}, dashboardValues); }); //-------------------------------------------------------------------------- // List View //-------------------------------------------------------------------------- //渲染renderer var 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‘), }); }, });

//模型 model
var 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; }); }, });
//控制器:controller
var 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)}); }, });
//视图 view
var 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

<?xml version="1.0" encoding="UTF-8"?>
<templates>
    <!-- This template is for a table at the top of purchase views that shows some KPIs. -->
    <t t-name="purchase.PurchaseDashboard">
        <div class="o_purchase_dashboard container">
        <div class="row">
            <div class="col-sm-5">
            <table class="table table-sm">
                <!-- thead needed to avoid list view rendering error for some reason -->
                <thead>
                    <tr>
                    <!-- can‘t use th tag due to list rendering error when no values in list... -->
                        <td class="o_text">
                            <div>All RFQs</div>
                        </td>
<td class="o_main o_dashboard_action" title="All Draft RFQs" name="purchase.purchase_action_dashboard" context=‘{"search_default_draft_rfqs": true}‘> <a href="#"><t t-esc="values[‘all_to_send‘]"/><br/>To Send</a> </td> <td class="o_main o_dashboard_action" title="All Waiting RFQs" name="purchase.purchase_action_dashboard" context=‘{"search_default_waiting_rfqs": true}‘> <a href="#"><t t-esc="values[‘all_waiting‘]"/><br/>Waiting</a> </td> <td class="o_main o_dashboard_action" title="All Late RFQs" name="purchase.purchase_action_dashboard" context=‘{"search_default_late_rfqs": true}‘> <a href="#"><t t-esc="values[‘all_late‘]"/><br/>Late</a> </td> </tr> </thead> <tbody> <tr> <td class="o_text"> <div>My RFQs</div> </td> <td class="o_main o_dashboard_action" title="My Draft RFQs" name="purchase.purchase_action_dashboard" context=‘{"search_default_draft_rfqs": true, "search_default_my_purchases": true}‘> <a href="#"><t t-esc="values[‘my_to_send‘]"/></a> </td> <td class="o_main o_dashboard_action" title="My Waiting RFQs" name="purchase.purchase_action_dashboard" context=‘{"search_default_waiting_rfqs": true, "search_default_my_purchases": true}‘> <a href="#"><t t-esc="values[‘my_waiting‘]"/></a> </td> <td class="o_main o_dashboard_action" title="My Late RFQs" name="purchase.purchase_action_dashboard" context=‘{"search_default_late_rfqs": true, "search_default_my_purchases": true}‘> <a href="#"><t t-esc="values[‘my_late‘]"/></a> </td> </tr> </tbody> </table></div> <div class="col-sm-7"> <table class="table table-sm"> <!-- thead needed to avoid list view rendering error for some reason --> <thead> <tr> <!-- can‘t use th tag due to list rendering error when no values in list... --> <td class="o_text">Avg Order Value (<t t-esc="values[‘company_currency_symbol‘]"/>)</td> <td><span><t t-esc="values[‘all_avg_order_value‘]"/></span></td> <td class="o_text">Purchased Last 7 Days (<t t-esc="values[‘company_currency_symbol‘]"/>)</td> <td><span><t t-esc="values[‘all_total_last_7_days‘]"/></span></td> </tr> </thead> <tbody> <tr> <td class="o_text">Lead Time to Purchase</td> <td><span><t t-esc="values[‘all_avg_days_to_purchase‘]"/> &#160;Days</span></td> <td class="o_text">RFQs Sent Last 7 Days</td> <td><span><t t-esc="values[‘all_sent_rfqs‘]"/></span></td> </tr> </tbody> </table></div> </div></div> </t> </templates>

 

导入js

<?xml version="1.0"?>
<odoo>
    <template id="assets_backend" name="purchase assets" inherit_id="web.assets_backend">
        <xpath expr="." position="inside">
            <link rel="stylesheet" type="text/scss" href="/purchase/static/src/scss/purchase.scss"/>
            <script type="text/javascript" src="/purchase/static/src/js/purchase_dashboard.js"></script>
        </xpath>
       
    </template>


</odoo>

 

 

最后引用:

                <kanban class="o_kanban_mobile" js_class="purchase_kanban_dashboard" sample="1"></kanban>


          <tree  class="o_kanban_mobile" js_class="purchase_kanban_dashboard" sample="1"></tree>
 

 

odoo14在tree、kanban视图上添加dashboard

标签:使用   cli   lead   utf-8   resolve   类型   mamicode   mod   ext   

原文地址:https://www.cnblogs.com/1314520xh/p/14533780.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!