Odoo 12 如何修改web模块Notification通知窗口宽度

原生组件基础定义 #

Odoo 12 web模块base.xml中Notification通知的原生QWeb模板定义如下：

<t t-name="Notification">
    <div t-attf-class="o_notification #{widget.className}" t-translation="off" role="alertdialog">
        <a t-if="widget.sticky" class="fa fa-times o_close" href="#" title="Close" aria-label="Close"/>
        <div class="o_notification_title">
            <span t-attf-class="o_icon fa fa-3x #{widget.icon}" role="img" t-attf-aria-label="Notification #{widget.name}" t-attf-title="Notification #{widget.name}"/>
            <t t-raw="widget.title"/>
        </div>
        <div class="o_notification_content" t-if="widget.message"><t t-raw="widget.message"/></div>
        <div t-if="widget.buttons.length" class="o_buttons">
            <button t-foreach="widget.buttons" t-as="button" t-attf-class="btn #{button.primary ? 'btn-primary' : 'btn-secondary'}" type="button">
                <t t-if="button.icon">
                    <i t-if="button.icon.indexOf('fa-') === 0" t-attf-class="fa fa-fw o_button_icon #{button.icon}" role="img" t-att-aria-label="button.name" t-att-title="button.name"/>
                    <img t-else="" t-att-src="button.icon" t-att-alt="button.name"/>
                </t>
                <span><t t-esc="button.text"/></span>
            </button>
        </div>
    </div>
</t>

默认通知为固定定位悬浮显示，默认宽度300px。

现有自定义代码问题 #

当前已完成基础的模板内容替换，涉及三个核心文件：

• 模板扩展文件mybase.xml

<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
    <t t-name="Notification" t-extend="Notification">
        <t t-jquery=".o_notification_title > t" t-operation="replace">
            <p>Title replace</p>
        </t>
        <t t-jquery=".o_notification_content" t-operation="append">
            <p>Content replace</p>
        </t>
    </t>
</templates>

• QWeb模板加载文件mybase.js

odoo.define('bp_unjustified.base', function (require) {
    "use strict";
    var core = require('web.core');
    var ajax = require('web.ajax');
    var qweb = core.qweb;
    ajax.loadXML('/bp_unjustified/static/src/xml/base.xml', qweb);
});

• 静态资源注入文件mybase_ext_js.xml

<?xml version="1.0" encoding="UTF-8"?>
<template id="base_notification_ext_js" name="Bsae Notification Ext Js" inherit_id="web.assets_backend">
    <xpath expr="." position="inside">
        <script type="text/javascript" src="/bp_unjustified/static/src/js/base.js"/>
    </xpath>
    <xpath expr="link[last()]" position="after">
        <link rel="stylesheet" type="text/scss" href="/bp_unjustified/static/src/scss/webclient.scss"/>
    </xpath>
</template>

存在两个待解决问题：

1. 自定义SCSS文件未被加载，无法修改通知窗口宽度
2. 需要将通知内容重构为表格结构

具体修复实现 #

1. 修复SCSS加载并自定义通知宽度 #

SCSS未加载核心原因是资源注入的XPath规则不稳定，link[last()]会匹配到资源列表最后一个link标签，可能因为版本差异匹配到非CSS标签，导致SCSS插入位置错误无法被Odoo编译识别。

第一步：修正资源注入代码

将SCSS和JS统一放在assets_backend内部直接注入，修改后的mybase_ext_js.xml代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<template id="base_notification_ext_js" name="Base Notification Ext Js" inherit_id="web.assets_backend">
    <xpath expr="." position="inside">
        <script type="text/javascript" src="/bp_unjustified/static/src/js/base.js"/>
        <link rel="stylesheet" type="text/scss" href="/bp_unjustified/static/src/scss/webclient.scss"/>
    </xpath>
</template>

注意：Odoo静态资源会做缓存处理，修改资源注入文件后必须重启服务、升级对应自定义模块，同时清理浏览器缓存才能看到改动效果，开发阶段可加--dev=all启动参数禁用资源缓存。

第二步：编写SCSS修改通知宽度

原生通知样式自带固定宽度和最大宽度限制，通过层级选择器提升权重覆盖即可，不需要加!important，webclient.scss示例代码如下：

// 通知容器宽度自定义
.o_notification_manager {
    .o_notification {
        width: 600px; // 自定义宽度，可根据需求调整
        max-width: 90vw; // 适配小屏幕，避免超出视口
        .o_notification_content {
            // 可自定义内容区内边距、字体等样式
            padding: 8px 12px;
        }
    }
}

2. 通知内容表格结构重构 #

优先推荐直接通过QWeb模板修改实现，比JS操作DOM性能更好、兼容性更稳定，不需要额外操作DOM。

方案一：直接修改QWeb模板（推荐）

修改mybase.xml，直接替换通知内容区域结构为表格，示例代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
    <t t-name="Notification" t-extend="Notification">
        <t t-jquery=".o_notification_title > t" t-operation="replace">
            <p>Title replace</p>
        </t>
        <!-- 替换原有内容区为表格结构 -->
        <t t-jquery=".o_notification_content" t-operation="replace">
            <div class="o_notification_content" t-if="widget.message">
                <table class="o_notification_table table table-sm table-borderless mb-0">
                    <!-- 这里替换为你的表格行、单元格逻辑，可通过t-foreach遍历数据 -->
                    <t t-raw="widget.message"/>
                </table>
            </div>
        </t>
    </t>
</templates>

表格可直接复用Odoo自带的Bootstrap表格样式，不需要额外写CSS。

方案二：JS动态重构（特殊场景使用）

如果需要动态处理渲染后的内容，可重写Notification组件的渲染逻辑，修改mybase.js代码如下：

odoo.define('bp_unjustified.base', function (require) {
    "use strict";
    var core = require('web.core');
    var ajax = require('web.ajax');
    var qweb = core.qweb;
    var Notification = require('web.Notification');

    ajax.loadXML('/bp_unjustified/static/src/xml/base.xml', qweb);

    // 重写Notification组件
    Notification.include({
        start: function () {
            var self = this;
            return this._super.apply(this, arguments).then(function () {
                // 获取原有内容
                var $content = self.$('.o_notification_content');
                var originalMsg = $content.html();
                // 重构为表格结构
                var tableHtml = '<table class="o_notification_table table table-sm table-borderless mb-0"><tbody>' + originalMsg + '</tbody></table>';
                $content.empty().append(tableHtml);
            });
        }
    });
});

内容的提问来源于stack exchange，提问作者DONGMO BERNARD GERAUD