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

news2024/12/25 22:30:24

作者 | 老杨

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2265499.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

OOP面向对象编程:类与类之间的关系

OOP面向对象编程:类与类之间的关系 三大关系:复合(适配器设计模式)、委托(桥接设计模式)、继承 8、1复合Composition has-a -> 适配器模式 一个类里面含有另一个类的对象 —> 复合关系 has-a 适配器设…

集成 jacoco 插件,查看单元测试覆盖率

文章目录 前言集成 jacoco 插件,查看单元测试覆盖率1. 添加pom2. 配置完成、执行扫描3. 执行结果4. 单元测试报告 前言 如果您觉得有用的话,记得给博主点个赞,评论,收藏一键三连啊,写作不易啊^ _ ^。   而且听说点赞…

下载运行Vue开源项目vue-pure-admin

git地址:GitHub - pure-admin/vue-pure-admin: 全面ESMVue3ViteElement-PlusTypeScript编写的一款后台管理系统(兼容移动端) 安装pnpm npm install -g pnpm # 国内 淘宝 镜像源 pnpm config set registry https://registry.npmmirror.com/…

创建用于预测序列的人工智能模型,设计模型架构。

上一篇:《创建用于预测序列的人工智能模型,设计数据集》 序言:在前一篇中,我们创建了用于训练人工智能模型的数据集。接下来,就要设计模型的架构了。其实,人工智能模型的开发关键并不在于代码量&#xff0…

ubuntu22.04安装PPOCRLabel

可使用的模型参考模型列表,ppocr版本这里PPOCR版本作为预训练模型: (经常用放在这里) 基础电脑配置: cunda12.4 ubuntu22.04系统 pytorch2.5.0 (python3.10不能运行,python3.8我之前可以正…

Linux网络——TCP的运用

系列文章目录 文章目录 系列文章目录一、服务端实现1.1 创建套接字socket1.2 指定网络接口并bind2.3 设置监听状态listen2.4 获取新链接accept2.5 接收数据并处理(服务)2.6 整体代码 二、客户端实现2.1 创建套接字socket2.2 指定网络接口2.3 发起链接con…

江苏捷科云:可视化平台助力制造企业智能化管理

公司简介 江苏捷科云信息科技有限公司(以下简称“捷科”)是一家专注于云平台、云储存、云管理等产品领域的创新型企业,集研发、生产和销售于一体,致力于在网络技术领域打造尖端品牌。在推动制造业企业数字化转型的进程中&#xf…

消息队列(一)消息队列的工作流程

什么是消息队列 首先,代入一个场景,我现在做一个多系统的集成,分别有系统A、B、C、D四个系统,A系统因为使用产生了业务数据,B、C、D需要使用这些数据做相关的业务处理和运算,最基本的做法就是通过接口通信…

施耐德变频器ATV320系列技术优势:创新与安全并重

在工业自动化领域,追求高效、安全与智能已成为不可阻挡的趋势。施耐德变频器ATV320系列凭借其强大的设计标准和全球认证,成为能够帮助企业降低安装成本,提高设备性能的创新解决方案。 【全球认证,品质保障】ATV320 系列秉持施耐德…

WEB入门——文件上传漏洞

文件上传漏洞 一、文件上传漏洞 1.1常见的WebShell有哪些?1.2 一句话木马演示1.2 文件上传漏洞可以利用需满足三个条件1.3 文件上传导致的危害 二、常用工具 2.1 搭建upload-labs环境2.2 工具准备 三、文件上传绕过 3.1 客户端绕过 3.1.1 实战练习 :upl…

Android 蓝牙开发-传输数据

概述 传统蓝牙是通过建立REFCCOM sockect来进行通信的,类似于socket通信,一台设备需要开放服务器套接字并处于listen状态,而另一台设备使用服务器的MAC地址发起连接。连接建立后,服务器和客户端就都通过对BluetoothSocket进行读写…

红米Note 9 Pro5G刷小米官方系统

前言 刷机有2种方式:线刷 和 卡刷。 线刷 线刷:需要用电脑刷机工具,例如:XiaoMiFlash.exe,通过电脑和数据线对设备进行刷机。 适用场景: 系统损坏无法开机。恢复官方出厂固件。刷机失败导致软砖、硬砖的…

html + css 淘宝网实战

之前有小伙伴说,淘宝那么牛逼你会写代码,能帮我做一个一样的淘宝网站吗,好呀,看我接下来如何给你做一个淘宝首页。hahh,开个玩笑。。。学习而已。 在进行html css编写之前 先了解下网页的组成和网页元素的尺寸吧 1.网页的组成 …

SOME/IP 协议详解——信息格式

文章目录 1. 头部格式1.1 消息 ID(Message ID)1.2 长度(Length)1.3 请求 ID(Request ID)1.4 协议版本(Protocol Version):1.5 接口版本(Interface Version&am…

使用QML实现播放器进度条效果

使用QML实现播放进度效果 QML Slider介绍 直接上DEMO如下: Slider {width: 300;height: 20;orientation: Qt.Vertical; //决定slider是横还是竖 默认是HorizontalstepSize: 0.1;value: 0.2;tickmarksEnabled: true; //显示刻度}效果图如下 那么我先改变滑块跟滚轮…

Android——自定义按钮button

项目中经常高频使用按钮,要求:可设置颜色,有圆角且有按下效果的Button 一、自定义按钮button button的代码为 package com.fslihua.clickeffectimport android.annotation.SuppressLint import android.content.Context import android.gra…

【双指针算法】--复写零(Java版)

文章目录 1. 题目2. 题目解析3. 代码 1. 题目 在线oj 给你一个长度固定的整数数组 arr ,请你将该数组中出现的每个零都复写一遍,并将其余的元素向右平移。 注意:请不要在超过该数组长度的位置写入元素。请对输入的数组 就地 进行上述修改&a…

联合目标检测与图像分类提升数据不平衡场景下的准确率

联合目标检测与图像分类提升数据不平衡场景下的准确率 在一些数据不平衡的场景下,使用单一的目标检测模型很难达到99%的准确率。为了优化这一问题,适当将其拆解为目标检测模型和图像分类模型的组合,可以更有效地控制最终效果,尤其…

HDR视频技术之十:MPEG 及 VCEG 的 HDR 编码优化

与传统标准动态范围( SDR)视频相比,高动态范围( HDR)视频由于比特深度的增加提供了更加丰富的亮区细节和暗区细节。最新的显示技术通过清晰地再现 HDR 视频内容使得为用户提供身临其境的观看体验成为可能。面对目前日益…

LabVIEW声音信号处理系统

开发了一种基于LabVIEW的声音信号处理系统,通过集成的信号采集与分析一体化解决方案,提升电子信息领域教学与研究的质量。系统利用LabVIEW图形化编程环境和硬件如USB数据采集卡及声音传感器,实现了从声音信号的采集到频谱分析的全过程。 项目…