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