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

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