Odoo 模塊推薦——Web Dialog Size

tommego 發(fā)布于2019-07-31 09:59 / 955人閱讀

摘要：模塊安裝之后不需要任何配置，這個模塊對中的彈窗做了一些優(yōu)化，為了看到效果我們需要找一個彈窗出來。在打開開發(fā)者模式后點擊菜單就有一個彈窗出現(xiàn)把注意力放在上圖彈窗右上角的高亮處，在安裝該模塊前，高亮位置是沒有這樣的擴展圖標(biāo)的。

好久不見，我又回來了，帶著新的內(nèi)容板塊再次和大家見面啦～這是你沒有見過的全新板塊（自動播放喳喳輝發(fā)音）

在新的內(nèi)容板塊里，我將會為大家推薦一些實用的 Odoo 模塊，并且通過簡單的實例來說明這些模塊的使用方法和適用場景（可能會在某些時候虛構(gòu)一些業(yè)務(wù)場景），除此之外我還將對部分模塊的實現(xiàn)和源碼進行簡單的講解和分析，畢竟會用不是我們的目的，知曉其核心才更有意義。

今天就先推薦一個小模塊吧，雖然這個模塊很簡單，但是卻能帶來很實在的用戶體驗上的提升。

		備注
名稱	Web Dialog Size
功能	讓用戶可以放大彈窗到全屏寬，并且讓彈窗可以拖動
商店地址	點擊前往	商店中最高版本為 11.0
倉庫地址	前往 GitHub	倉庫中最高版本為 12.0

使用體驗

本次體驗使用的 Odoo 版本是 12.0，不同版本之間可能會有細微差異，請以實際使用情況為準(zhǔn)。

模塊安裝之后不需要任何配置，這個模塊對 Odoo 中的彈窗做了一些優(yōu)化，為了看到效果我們需要找一個彈窗出來。

在打開「開發(fā)者模式」后點擊菜單「Update Apps List」就有一個彈窗出現(xiàn)：

把注意力放在上圖彈窗右上角的高亮處，在安裝該模塊前，高亮位置是沒有這樣的擴展圖標(biāo)的。在點擊該圖標(biāo)后，彈窗的寬度發(fā)生了變化：

同時擴展圖標(biāo)也變成了收縮圖標(biāo)，除了縮放圖標(biāo)和彈窗寬度的變化外，這個模塊還讓原本不能拖動的彈窗變得可以隨意拖動了：

適用場景

上面只是簡單的試用，并不能體現(xiàn)出這個模塊的優(yōu)點，那我們打開另一個彈窗再看一下效果吧：

這是個人選項（在右上角下拉菜單里的「Preferences」）的彈窗，就簽名（Signature）來說，在縱向高度不是很夠的時候，如果橫向?qū)挾纫膊粔驅(qū)挼脑?，我們在富文本框?nèi)輸入時，很容易就會換行，然后需要滾動文本去查看上面的內(nèi)容，而把窗口放大到全屏寬之后，文本框內(nèi)每行就能多顯示一些字符了。

又或者說在彈窗內(nèi)有列表需要顯示，而且字段相對較多，彈窗寬度不夠就需要橫向滾動列表，稍微有些麻煩，這時候?qū)棿胺糯蟮饺翆捑湍茱@示更多列的內(nèi)容了。

其實我覺得最有用的還是窗口拖動這個功能。不妨設(shè)想一個場景，你正在編輯一個表單頁面上的 x2many 字段，你創(chuàng)建了一些這個字段的記錄，在你又一次創(chuàng)建新記錄并且在填寫了一半的內(nèi)容之后，想要看一下現(xiàn)在正在創(chuàng)建的這條記錄是不是在前面已經(jīng)創(chuàng)建過了，可是列表前面的幾條數(shù)據(jù)剛好被彈窗遮擋住了，這時為了避免創(chuàng)建重復(fù)的數(shù)據(jù)，你不得不關(guān)閉彈窗去查看列表前面的記錄，如果并沒有創(chuàng)建過，前面填寫的這么多內(nèi)容就都白費了！

而窗口可以拖動的話，就可以輕松地查看到被擋住的內(nèi)容，然后你可以繼續(xù)填寫剩下的字段，舒服呀！對于我這種金魚記憶的人來說，這個功能再好用不過了。

實現(xiàn)淺析

上面看完了怎么用，現(xiàn)在我們來看看怎么寫。因為這是個對前端展現(xiàn)內(nèi)容做修改的模塊，核心部分基本上都在其 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();
            }
        });
    });
},

在執(zhí)行完 _super() 之后，這里只是簡單地做了三件事：

為擴展按鈕添加點擊事件，綁定方法 _extending()

為收縮按鈕添加點擊事件，綁定方法 _restore()

查詢系統(tǒng)參數(shù)，判斷彈窗是否默認為放大狀態(tài)，然后執(zhí)行相應(yīng)的方法

其中第 3 點中用到了 RPC 請求去調(diào)用模型的方法查詢數(shù)據(jù)：

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"))
    }

這個方法所做的就是查找系統(tǒng)參數(shù)中彈窗默認是否最大化的值，默認值為 False。

劃重點！當(dāng)我們編寫的前端內(nèi)容需要從后臺獲取返回值，例如上面的獲取配置信息，就可以像這個模塊這樣做，最后返回得到的是一個 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()）之后執(zhí)行，這里只做了一件事，讓窗口可以拖動。這里是利用 jQuery UI 的 Draggable) 實現(xiàn)的。

重點來了，Odoo 的前端用到的一個基礎(chǔ)框架就是 jQuery UI)，也就是說里面的 Widgets 和各種效果以及工具方法我們都可以在自定義 Widget 或編寫擴展的時候用上，在準(zhǔn)備實現(xiàn)某些相關(guān)的功能前，不妨先看看官方文檔，說不定就省了很多的功夫呢 XD

云服務(wù)器 GPU云服務(wù)器模塊化機房推薦科華科士達 web服務(wù)器模塊 Odoo odoo部署

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/43045.html

發(fā)表評論

登陸后可評論

0條評論

tommego

男|高級講師

我要關(guān)注我要私信

TA的文章

excelitas埃賽力達高壓電源維修LC501常見故障

閱讀 2023·2021-11-24 09:39
CSS實用技巧干貨

閱讀 1885·2019-08-30 15:55
clearfix清除浮動最佳實踐

閱讀 2182·2019-08-30 15:53
[面試專題]從for循環(huán)看let和var的區(qū)別

閱讀 580·2019-08-29 13:16
Object構(gòu)造函數(shù)常用的方法

閱讀 995·2019-08-26 12:20
深入理解js的同步與異步

閱讀 2395·2019-08-26 11:58
uni-app項目瀑布流布局

閱讀 3158·2019-08-26 10:19
Hooks + Context：狀態(tài)管理的新選擇

閱讀 3318·2019-08-23 18:31

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Odoo 模塊推薦——Web Dialog Size

相關(guān)文章

**在 Odoo 中添加自定義頁面**

odoo遠程部署命令

**「Odoo 基礎(chǔ)教程系列」第〇篇——開天坑啦**

**「Odoo 基礎(chǔ)教程系列」第一篇——環(huán)境準(zhǔn)備**

**「Odoo 基礎(chǔ)教程系列」第二篇——從 Todo 應(yīng)用開始（1）**

發(fā)表評論

0條評論

tommego

男|高級講師

TA的文章

excelitas埃賽力達高壓電源維修LC501常見故障

CSS實用技巧干貨

clearfix清除浮動最佳實踐

[面試專題]從for循環(huán)看let和var的區(qū)別

Object構(gòu)造函數(shù)常用的方法

深入理解js的同步與異步

uni-app項目瀑布流布局

Hooks + Context：狀態(tài)管理的新選擇

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Odoo 模塊推薦——Web Dialog Size

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！