Odoo 模块推荐——Web Dialog Size

很久不见，我又回来了，带着新的内容板块再次和你们见面啦～这是你没有见过的全新板块（自动播放喳喳辉发音）

在新的内容板块里，我将会为你们推荐一些实用的 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() 以后，这里只是简单地作了三件事：

1. 为扩展按钮添加点击事件，绑定方法 _extending()
2. 为收缩按钮添加点击事件，绑定方法 _restore()
3. 查询系统参数，判断弹窗是否默认为放大状态，而后执行相应的方法

其中第 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