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 中赋予更具交互性与响应性的用户体验。不管是用于展示警告、确认操作,还是提醒用户,这些弹出窗口皆能保证清晰且有效地传递重要消息,进而提升整体的可用性与参与度。

相关推荐
轻口味1 小时前
命名空间与模块化概述
开发语言·前端·javascript
前端小小王2 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发2 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
真滴book理喻5 小时前
Vue(四)
前端·javascript·vue.js
程序员_三木6 小时前
Three.js入门-Raycaster鼠标拾取详解与应用
开发语言·javascript·计算机外设·webgl·three.js
开心工作室_kaic7 小时前
springboot476基于vue篮球联盟管理系统(论文+源码)_kaic
前端·javascript·vue.js
川石教育7 小时前
Vue前端开发-缓存优化
前端·javascript·vue.js·缓存·前端框架·vue·数据缓存
搏博7 小时前
使用Vue创建前后端分离项目的过程(前端部分)
前端·javascript·vue.js
温轻舟7 小时前
前端开发 之 12个鼠标交互特效上【附完整源码】
开发语言·前端·javascript·css·html·交互·温轻舟
web135085886357 小时前
2024-05-18 前端模块化开发——ESModule模块化
开发语言·前端·javascript