Odoo 免费开源 ERP:通过 JavaScript 创建对话框窗口的技术实践分享

作者 | 老杨

出品 | 上海开源智造软件有限公司(OSCG)

概述

在本文中,我们将深入研讨如何于 Odoo 18 中构建 JavaScript(JS)对话框或弹出窗口。对话框乃是展现重要讯息、确认用户操作以及警示用户留意警告或错误的行之有效的手段。对话框作为一个小巧的窗口,当由特定的操作(诸如单击按钮或者与 Many2many 等字段进行交互)所触发时,便会呈现在当前页面之上。此类对话框强化了前端与后端的用户体验,并且能够以确认、警报等的模式抑或弹出窗口的形式予以呈现。

我们将予以介绍 Odoo 18 当中的若干关键对话框类型,涵盖 WarningDialog、ConfirmationDialog、AlertDialog、FormViewDialog 以及 MessageConfirmDialog。

ConfirmationDialog (确认对话框)

ConfirmationDialog 能够用于呈现涵盖两个选项(通常为"Ok"与"Cancel")的简短讯息。用户能够通过点击 Cancel 按钮或者关闭(X)图标来将对话框关闭。

要实现此对话框,请先导入所需的组件:

复制代码
import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
import { useService } from "@web/core/utils/hooks";

然后,在组件的 setup 方法中设置对话框:

复制代码
setup() {
   super.setup();
   this.notification = useService("notification");
   this.dialogService = useService("dialog");
},

添加带有确认消息的对话服务,如下所示:

复制代码
this.dialogService.add(ConfirmationDialog, {
    body: _t("Sample text to confirm here"),
    confirmClass: "btn-primary",
    confirmLabel: _t("Confirm"),
    confirm: () => {
        this.notification.add(_t("Confirmed"), {
            type: "success",
        });
    },
    cancelLabel: _t("Cancel"),
    cancel: () => { },
});

示例:增添确认对话框,以自 Many2many 字段标记开启表单视图

在此示例当中,我们将会达成一个确认对话框的实现,当用户点击 Many2many 字段标签之时,该对话框将会开启一个表单视图。

复制代码
/** @odoo-module **/
import { _t } from "@web/core/l10n/translation";
import { useService } from "@web/core/utils/hooks";
import { Many2ManyTagsFieldColorEditable } from "@web/views/fields/many2many_tags/many2many_tags_field";
import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
import { patch } from "@web/core/utils/patch";
patch(Many2ManyTagsFieldColorEditable.prototype, {
   setup() {
       super.setup();
       this.action = useService("action");
       this.dialogService = useService("dialog");
   },
   onTagClick(ev, record) {
       this.dialogService.add(ConfirmationDialog, {
           body: _t("If you want to open the form view, click 'Open Form View'."),
           confirmClass: "btn-primary",
           confirmLabel: _t("Open Form View"),
           confirm: () => {
               this.action.doAction({
                   type: 'ir.actions.act_window',
                   res_model: this.relation,
                   res_id: record.resId,
                   views: [[false, 'form']],
                   target: 'current',
               });
           },
           cancelLabel: _t("Cancel"),
           cancel: () => { },
       });
   }
});

以下是显示确认对话框的输出:

WarningDialog(完整报错信息)

WarningDialog 主要用以向用户呈现重要的警告或报错。其通常涵盖标题、消息以及用户交互按钮。

要使用此对话框,请先导入所需的组件:

复制代码
import { WarningDialog } from "@web/core/errors/error_dialogs";
import { useService } from "@web/core/utils/hooks";

在设置方法中,指定对话框服务:

复制代码
setup() {
   super.setup();
   this.dialogService = useService("dialog");
}

添加带有报错信息的对话框,如下所示:

复制代码
this.dialogService.add(WarningDialog, {
    title: _t("Warning: Title goes here"),
    message: _t("Warning message goes here."),
});

完整报错信息如下所示:

AlertDialog(简易报错信息)

AlertDialog 能够用于展示简易的报错或者警报消息。它与 ConfirmationDialog 处于同一模块之中。

要实现它,请先导入所需的组件:

复制代码
import { AlertDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
import { useService } from "@web/core/utils/hooks";

在设置方法中,包括对话框服务:

复制代码
setup() {
   super.setup();
   this.dialog = useService("dialog");
},

添加警报消息的对话框,如下所示:

复制代码
this.dialog.add(AlertDialog, {
    body: _t("Error trying to connect to Odoo. Check your internet connection"),
});

简易报错将如下所示:

FormView(表单对话框)

对话框类型,如 FormViewDialog 和 MessageConfirmDialog。针对不同的使用案例量身定制,在确认用户操作、显示表单或显示消息时提供灵活性。

如果我们使用 FormViewDialog 打开项目任务中标签的表单视图,以下是实现它的方法:

导入所需的组件:

复制代码
import { FormViewDialog } from "@web/views/view_dialogs/form_view_dialog";
import { useService } from "@web/core/utils/hooks";

在您的设置方法中,设置对话服务:

复制代码
setup() {
   super.setup();
   this.dialog = useService("dialog");
},

在 tag click 函数中,添加以下内容:

复制代码
onTagClick(ev, record) {
        this.dialog.add(FormViewDialog, {
            resModel: "project.tags",
            resId: record.resId,
            onRecordSaved: async (record) => {
                //add the action here
                this.action.doAction({
                    type: "ir.actions.act_window_close",
                });
            },
        });
   }

输出结果如下所示:

MessageConfirmDialog 专门为处理消息所设计。让我们来看一个在将 Chatter 消息标记为"To Do"是集成此对话框的示例。为此,我们将修补消息模型并更新 toggleStar 函数以融合 MessageConfirmDialog,如下所示:

复制代码
import { patch } from "@web/core/utils/patch";
import { Message } from "@mail/core/common/message_model";
import { _t } from "@web/core/l10n/translation";
import { MessageConfirmDialog } from "@mail/core/common/message_confirm_dialog";
patch(Message.prototype, {
    async toggleStar() {
        this.store.env.services.dialog.add(MessageConfirmDialog, {
            message: this,
            onConfirm: async () => {
            await super.toggleStar();
        },
            prompt: _t("Are you sure you want to mark this message as todo?"),
        });
    },
});

当您点击消息上的"Star"图标之际,会呈现出一个弹出窗口。其结果将会如下所呈:

集成这些 JavaScript 对话框能够于 Odoo 18 中赋予更具交互性与响应性的用户体验。不管是用于展示警告、确认操作,还是提醒用户,这些弹出窗口皆能保证清晰且有效地传递重要消息,进而提升整体的可用性与参与度。

相关推荐
EndingCoder1 小时前
调试技巧:Chrome DevTools 与 Node.js Inspector
javascript·网络·electron·node.js·vim·chrome devtools
知识分享小能手1 小时前
React学习教程,从入门到精通, React 入门指南:React JSX 语法知识点详解及案例代码(8)
前端·javascript·vue.js·学习·react.js·前端框架·anti-design-vue
学习3人组1 小时前
React 组件基础与事件处理
前端·javascript·react.js
qczg_wxg5 小时前
React Native的动画系统
javascript·react native·react.js
漂流瓶jz7 小时前
解锁Babel核心功能:从转义语法到插件开发
前端·javascript·typescript
大怪v7 小时前
老乡,别走!Javascript隐藏功能你知道吗?
前端·javascript·代码规范
ERP老兵-冷溪虎山7 小时前
Python/JS/Go/Java同步学习(第三篇)四语言“切片“对照表: 财务“小南“纸切片术切凭证到崩溃(附源码/截图/参数表/避坑指南/老板沉默术)
java·javascript·python·golang·中医编程·四语言同步学习·职场生存指南
gnip8 小时前
结合Worker通知应用更新
前端·javascript
_Rookie._8 小时前
vue3 使用css变量
前端·javascript·html
良木林11 小时前
JS函数进阶
开发语言·前端·javascript