资讯专栏INFORMATION COLUMN

Odoo 模块推荐——Web Dialog Size

tommego / 902人阅读

摘要:模块安装之后不需要任何配置,这个模块对中的弹窗做了一些优化,为了看到效果我们需要找一个弹窗出来。在打开开发者模式后点击菜单就有一个弹窗出现把注意力放在上图弹窗右上角的高亮处,在安装该模块前,高亮位置是没有这样的扩展图标的。

好久不见,我又回来了,带着新的内容板块再次和大家见面啦~这是你没有见过的全新板块(自动播放喳喳辉发音)

在新的内容板块里,我将会为大家推荐一些实用的 Odoo 模块,并且通过简单的实例来说明这些模块的使用方法和适用场景(可能会在某些时候虚构一些业务场景),除此之外我还将对部分模块的实现和源码进行简单的讲解和分析,毕竟会用不是我们的目的,知晓其核心才更有意义。

今天就先推荐一个小模块吧,虽然这个模块很简单,但是却能带来很实在的用户体验上的提升。

备注
名称 Web Dialog Size
功能 让用户可以放大弹窗到全屏宽,并且让弹窗可以拖动
商店地址 点击前往 商店中最高版本为 11.0
仓库地址 前往 GitHub 仓库中最高版本为 12.0
使用体验

本次体验使用的 Odoo 版本是 12.0,不同版本之间可能会有细微差异,请以实际使用情况为准。

模块安装之后不需要任何配置,这个模块对 Odoo 中的弹窗做了一些优化,为了看到效果我们需要找一个弹窗出来。

在打开「开发者模式」后点击菜单「Update Apps List」就有一个弹窗出现:

把注意力放在上图弹窗右上角的高亮处,在安装该模块前,高亮位置是没有这样的扩展图标的。在点击该图标后,弹窗的宽度发生了变化:

同时扩展图标也变成了收缩图标,除了缩放图标和弹窗宽度的变化外,这个模块还让原本不能拖动的弹窗变得可以随意拖动了:

适用场景

上面只是简单的试用,并不能体现出这个模块的优点,那我们打开另一个弹窗再看一下效果吧:

这是个人选项(在右上角下拉菜单里的「Preferences」)的弹窗,就签名(Signature)来说,在纵向高度不是很够的时候,如果横向宽度也不够宽的话,我们在富文本框内输入时,很容易就会换行,然后需要滚动文本去查看上面的内容,而把窗口放大到全屏宽之后,文本框内每行就能多显示一些字符了。

又或者说在弹窗内有列表需要显示,而且字段相对较多,弹窗宽度不够就需要横向滚动列表,稍微有些麻烦,这时候将弹窗放大到全屏宽就能显示更多列的内容了。

其实我觉得最有用的还是窗口拖动这个功能。不妨设想一个场景,你正在编辑一个表单页面上的 x2many 字段,你创建了一些这个字段的记录,在你又一次创建新记录并且在填写了一半的内容之后,想要看一下现在正在创建的这条记录是不是在前面已经创建过了,可是列表前面的几条数据刚好被弹窗遮挡住了,这时为了避免创建重复的数据,你不得不关闭弹窗去查看列表前面的记录,如果并没有创建过,前面填写的这么多内容就都白费了!

而窗口可以拖动的话,就可以轻松地查看到被挡住的内容,然后你可以继续填写剩下的字段,舒服呀!对于我这种金鱼记忆的人来说,这个功能再好用不过了。

实现浅析

上面看完了怎么用,现在我们来看看怎么写。因为这是个对前端展现内容做修改的模块,核心部分基本上都在其 JS 代码中,所以我们直奔主题,打开 static/src/js/ 目录下的 JS 文件,一般情况下这种类型的模块其 JS 命名是和模块名一样的,在这个模块里就是 web_dialog_size.js 了。

先来看看 willStart() 这个方法:

willStart: function () {
    var self = this;
    return this._super.apply(this, arguments).then(function () {
        self.$modal.find(".dialog_button_extend").on("click", self.proxy("_extending"));
        self.$modal.find(".dialog_button_restore").on("click", self.proxy("_restore"));
        return config.done(function(r) {
            if (r.default_maximize) {
                self._extending();
            } else {
                self._restore();
            }
        });
    });
},

在执行完 _super() 之后,这里只是简单地做了三件事:

为扩展按钮添加点击事件,绑定方法 _extending()

为收缩按钮添加点击事件,绑定方法 _restore()

查询系统参数,判断弹窗是否默认为放大状态,然后执行相应的方法

其中第 3 点中用到了 RPC 请求去调用模型的方法查询数据:

var config = rpc.query({
    model: "ir.config_parameter",
    method: "get_web_dialog_size_config",
});

打开模块的 models/ir_config_parameter.py 可以看到只有一个模型方法:

@api.model
def get_web_dialog_size_config(self):
    get_param = self.sudo().get_param
    return {
        "default_maximize": const_eval(
            get_param("web_dialog_size.default_maximize", "False"))
    }

这个方法所做的就是查找系统参数中弹窗默认是否最大化的值,默认值为 False

划重点!当我们编写的前端内容需要从后台获取返回值,例如上面的获取配置信息,就可以像这个模块这样做,最后返回得到的是一个 Promise,可以使用 .then().done() 等方法链。

下面再看看 opened() 这个方法:

opened: function(handler) {
    return this._super.apply(this, arguments).then(function(){
        if (this.$modal) {
            this.$modal.draggable({
                handle: ".modal-header",
                helper: false
            });
        }
    }.bind(this));
},

这个方法将会在弹窗打开(open())之后执行,这里只做了一件事,让窗口可以拖动。这里是利用 jQuery UI 的 Draggable) 实现的。

重点来了,Odoo 的前端用到的一个基础框架就是 jQuery UI),也就是说里面的 Widgets 和各种效果以及工具方法我们都可以在自定义 Widget 或编写扩展的时候用上,在准备实现某些相关的功能前,不妨先看看官方文档,说不定就省了很多的功夫呢 XD

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/43045.html

相关文章

  • Odoo 中添加自定义页面

    摘要:一般情况下都是在中继承后在其末尾添加相关资源路径除了资源需要引入外,我们编写的页面模板也许要引入,打开并在底部添加我们的自定义页面文件大功告成,一个最简单的自定义页面已经完成了,安装模块然后运行看看效果吧。 前些天群里的小伙伴问了些关于在 Odoo 管理后台自定义页面和 Widget 的问题,那我就来写一篇简短的内容,教大家如何创建自定义页面并引用第三方库。如果大家有看我之前写的基础教...

    Jackwoo 评论0 收藏0
  • odoo远程部署命令

    摘要:前提条件在源码中可以看到,部署命令的操作是将模块文件上传在运行中的执行安装操作。从帮助上看,部署命令的使用为模块路径网站用户名密码使用示例注意点阅读源码可以发现该命令只是安装或者升级模块的文件,并不会更新已经在运行的代码。阅读源码的cli模块发现一个远程部署模块的命令,在官方文档并没有说,发现隐藏功能! 解决的问题 在odoo里面写界面是很烦人的,每次写完需要重启服务器并且到app界面点击升...

    Youngdze 评论0 收藏0
  • Odoo 基础教程系列」第〇篇——开天坑啦

    摘要:而模块化则是区别于大多数传统的最强特性,基于这一特性,开发人员可以轻松地继承和扩展任何现有的模块,可以轻松地针对不同的需求进行功能定制。相关文章基础教程系列第一篇环境准备 showImg(https://segmentfault.com/img/remote/1460000013290099?w=1280&h=856); 大家新年好!给大伙拜个早年,今天也是情人节呢,这么好的日子,却一...

    X1nFLY 评论0 收藏0
  • Odoo 基础教程系列」第一篇——环境准备

    摘要:安装好后,在中执行查看版本信息,应该会看到输出如下信息版本号可能会不同如果提示未找到,则需要手动将用户基础目录下的添加到中。相关文章基础教程系列第篇开天坑啦 showImg(https://segmentfault.com/img/bV4GZu?w=1262&h=911); 之前说好的 「Odoo 基础教程系列」终于来了(撒花)~刚过完年重新投入到工作中,一下子事情有点多都要忙不过来了...

    szysky 评论0 收藏0
  • Odoo 基础教程系列」第二篇——从 Todo 应用开始(1)

    摘要:虽然这是个很简单的应用,但是希望大家可以动手一起操作,从最简单的开始上手学习如何使用这个框架。则是在和之间,负责响应用户操作,从中获取数据进行处理并返回到中。 showImg(https://segmentfault.com/img/bV66tE?w=728&h=410); 在第一篇教程发布之后差不多一个月的今天,终于完成了第二篇内容,这个发布周期拖得实在是有点太长了,我都觉得不好意思...

    UCloud 评论0 收藏0

发表评论

0条评论

tommego

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<