如何在Odoo 18中实现OWL通知服务
OWL（Odoo Web Library）是Odoo的前端框架，用于构建现代化的动态响应式用户界面。在早期版本中，Odoo 前端设计与开发使用的是诸如 QWeb 这类较为老旧的框架，而随着 Odoo 每发布一个新版本，OWL 都在逐步取代 QWeb，尤其是在构建与后端交互流畅的 UI 组件方面。
OWL的“通知服务（Notification Service）”是框架的一部分，允许开发者以统一的方式向用户显示通知消息。OWL 通知服务使我们能够为用户生成定制化的、友好的反馈，比如警告、错误消息、一般信息、成功消息等等。
本文将演示如何在Odoo 18中实现OWL通知服务。首先要做的是实现 XML 代码，以便 Odoo 18 UI 中的任何组件能够触发 Javascript 中定义的相应方法，该方法会向用户显示相应的通知。
定义XML模板
为了使通知服务正常工作，首先我们需要实现 XML 模板，以确定触发通知弹出的操作。为此，我们来看一个示例代码，它会在 Odoo 后端 UI 上显示一个简单的 “铃铛” 图像作为系统托盘图标。我们知道，Odoo 通知栏中的系统托盘图标是一项快速访问功能。用户无需通过主界面和菜单导航到其他 Odoo 模块，借助系统托盘图标就能轻松与 Odoo 系统的相关功能进行交互。
我们以一个系统托盘（Systray）的“铃铛图标”为例，点击该图标时触发通知。XML代码如下：
<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve"><t t-name="systray_icon" owl="1"><t t-set-slot="default"><button><div t-on-click="_notify"><i id="notify_msg"class="fa fa-bell fa-1.5x"role="img"/></div></button></t></t>
</templates>
这里，当铃铛图标被点击时，图标通过t-on-click属性设置为_notify，这会渲染在 Javascript 组件中创建的_notify()函数。这个铃铛图标就是用户与提醒进行交互的地方。class=“fa fa-bell”：使用Font Awesome图标库显示铃铛图标。
系统托盘部分的图标看起来会像这样。
实现JavaScript组件
在JavaScript中定义SystrayIcon类，继承自OWL的Component，并通过notificationService显示通知：
/** @odoo-module **/
import { registry } from "@web/core/registry";
import { useService } from "@web/core/utils/hooks";
import { Component } from "@odoo/owl";
import { _t } from "@web/core/l10n/translation";class SystrayIcon extends Component {setup() {super.setup(...arguments);this.notificationService = useService("notification");}_notify() {{this.notificationService.add(_t("成功消息提示。"), {title: "成功",type: "success"});}}
}SystrayIcon.template = "systray_icon";
export const systrayItem = { Component: SystrayIcon,};
registry.category("systray").add("SystrayIcon", systrayItem, { sequence: 1 });
第一步是添加/** @odoo-module **/这行代码，并导入registry、useService、Owl 组件以及用于字符串翻译的_t。
SystrayIcon类是通过扩展从 Owl 库导入的Component类创建的。
我们使setup()方法调用super来为其添加通知服务，通知内容在_notify()方法中定义如下：
_notify() {{this.notificationService.add(_t("成功消息提示。"), {title: "成功",type: "success"});}}
注意：notificationService.add()：核心方法，用于显示通知。
参数说明：
1、add:通过点（.）运算符，“add” 用于显示通知内容，内容需用引号括起来。在内容中，可以使用的属性有：
·title：通知标题，要显示的消息或字符串内容。
· type：定义消息的类型，可以是 “success”（成功）、“info”（信息）、“warning”（警告）或 “danger”（危险）。
· button：用于添加自定义按钮，并可带有诸如 name、onClick ()、primary 等属性。
·sticky：可以是 “True” 或 “False”，用于确定消息是否应一直显示在视图中，直到用户手动关闭，默认自动消失。
·duration：指定消息应在屏幕上显示多长时间（以毫秒为单位的时长）。
2、remove：与 “add” 相反，用于移除特定的通知。
3、clear：清除通知。
点击铃铛图标后，显示如下成功通知：
高级示例：带按钮的错误通知
以下代码演示如何显示带按钮的“危险”类型通知：
_notify() {this.notificationService.add(_t("发生严重错误，请联系支持或通过下方按钮跳转设置。"),{title: "错误",type: "danger",buttons: [{onClick: () => {this.actionService.doAction("base_setup.action_general_configuration"); // 跳转到设置页面closeFn(); // 关闭通知},primary: true, // 高亮按钮name: "前往设置", }],});
}
效果如下：
注册静态资源
设计好所需的通知后，.xml 和.js 文件会添加到模块清单文件中 “assets” 下的 “web.assets_backend” 键内。在我们的例子中，由于模块名称是 “test_model”，manifest.py清单文件的 “assets” 键定义如下：
'assets': {'web.assets_backend': ['test_model/static/src/**/*', // 包含所有静态文件],
},
注意事项
- 确保使用/** @odoo-module **/标记ES6模块。
- 多语言支持需通过_t()函数实现。
- 按钮的onClick事件需处理关闭逻辑（如closeFn()）。
总结
OWL 通知服务可以通过 XML 实现，并集成到 Javascript 中，以便以完善的方式向用户传递各种友好且定制化的消息。其用例可以是处理错误、表单成功提交以及根据我们设计的工作流程处理各种系统事件。这为在 Odoo 18 中通过及时反馈提升用户体验铺平了道路。
