odoo看板视图拓展

通过阅读原生的服务台代码,拓展看板视图，对审批模块进行优化，实现如下效果: 

主要思路:

其实就是在看板视图的基础上加了一个表格，这个表格由4个td标签组成。

首先呢先定义好表格的template:

<?xml version="1.0" encoding="UTF-8"?>
<templates>
    <t t-name="approval.Dashboard">
        <div class="o_approval_dashboard">
            <div>
                <table class="approval_table table-sm">
                    <tr>
                        <td class="o_text">
                            <div class="o_highlight">我的审批</div>
                        </td>
                        <!-- 此处的name对应相应的动作视图的id js中获取跳转-->
                        <td class="o_approval_main o_approval_dashboard_action" title="To approve"
                            name="approval.approval_my_task_action">
                            <a href="#">
                                <span class="o_highlight">
                                    <t t-esc="values['to_approve']"/>
                                </span>
                                <br/>

                                待审批
                            </a>
                        </td>
                        <td class="o_approval_main o_approval_dashboard_action" title="Approved"
                            name="approval.approval_approved_task_action">
                            <a href="#">
                                <span class="o_highlight">
                                    <t t-esc="values['approved']"/>
                                </span>
                                <br/>
                                已审批
                            </a>
                        </td>
                        <td class="o_approval_main o_approval_dashboard_action" title="My submits"
                            name="approval.approval_my_submit_action">
                            <a href="#">
                                <span class="o_highlight">
                                    <t t-esc="values['submitted']"/>
                                </span>
                                <br/>
                                我的提交
                            </a>
                        </td>
                    </tr>
                </table>

            </div>

        </div>
    </t>
</templates>

其次是js文件:

主要代码:

        _render: function () {
            var self = this;
            return this._super.apply(this, arguments).then(function () {
                var values = self.state.dashboardValues;
                var helpdesk_dashboard = QWeb.render('approval.Dashboard', {
                    widget: self,
                    show_demo: values.show_demo,
                    rating_enable: values.rating_enable,
                    values: values,
                });
                if (!self.$el.parent('.o_kanban_view_wrapper').length) {
                    self.$el.wrap('<div class="o_kanban_view_wrapper d-flex flex-column align-items-start"></div>');
                }
                self.$el.parent().find(".o_approval_dashboard").remove();
                self.$el.before(helpdesk_dashboard);
                self.$el.parent().find('.o_approval_dashboard_action').on('click', self, self._onDashboardActionClicked.bind(self));
            });
        },

主要是对 web.KanbanRenderer进行拓展，重写它的_rander渲染方法

QWeb.render 方法将之前定义好的template生成一个dom节点，然后插入该节点。

最后别忘记在 看板视图中引入该js_class

<kanban string="审批" class="oe_background_grey o_kanban_dashboard" default_group_by="approval_type_id"
                        js_class="approval_dashboard"
                        archivable="false">

然后在xml中引入js和css文件

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <data>
        <template id="assets_backend" name="approval extension assets" inherit_id="web.assets_backend">
            <xpath expr="//script[last()]" position="after">
                <script type="text/javascript" src="/approval/static/src/js/approval.js"/>
                <link rel="stylesheet" href="/approval/static/src/css/header_dashboard.css"/>
                <script type="text/javascript" src="/approval/static/src/js/approval_strategy_kanban_view.js"/>
            </xpath>
        </template>
    </data>
</odoo>

以下积分商城的实现原理也大致一样: