Odoo13-- 弹窗--自定义弹窗

Odoo 的弹窗使用的是Dialog，无论是异常还是警告还是向导，都是一个Dialog对话框。
有时候，我们只想给用户一个提示。除了在点击按钮在xml中定义一个confirm提示信息外， 在代码中基本就是使用向导的方式来解决了，这无疑是个麻烦事。
上一篇中，我们介绍了如何使用延时提醒的方式。那本篇就扒一扒如何自定义一个Dialog。
各位看官，就请关上门，拉上窗，听我细细分说。

扒衣服、揭面纱

Dialog 定义

Odoo使用的是前端框架有bootstrap框架，那我们的Dialog小姐就是运用此框架。
DIalog的定义在odoo\addons\web\static\src\js\core\dialog.js文件中。

odoo.define('web.Dialog', function (require) {
"use strict";

var core = require('web.core');
var dom = require('web.dom');
var Widget = require('web.Widget');
...
var Dialog = Widget.extend({
    ...
})
...

由此可见， Dialog小姐也是继承自Widget。

扒衣服

相关参数

* @param {Widget} parent
* @param {Object} [options]
* @param {string} [options.title=Odoo]
* @param {string} [options.subtitle]
* @param {string} [options.size=large] - 'extra-large', 'large', 'medium'
*        or 'small'
* @param {boolean} [options.fullscreen=false] - whether or not the dialog
*        should be open in fullscreen mode (the main usecase is mobile)
* @param {string} [options.dialogClass] - class to add to the modal-body
* @param {jQuery} [options.$content]
*        Element which will be the $el, replace the .modal-body and get the
*        modal-body class
* @param {Object[]} [options.buttons]
*        List of button descriptions. Note: if no buttons, a "ok" primary
*        button is added to allow closing the dialog
* @param {string} [options.buttons[].text]
* @param {string} [options.buttons[].classes]
*        Default to 'btn-primary' if only one button, 'btn-secondary'
*        otherwise
* @param {boolean} [options.buttons[].close=false]
* @param {function} [options.buttons[].click]
* @param {boolean} [options.buttons[].disabled]
* @param {boolean} [options.technical=true]
*        If set to false, the modal will have the standard frontend style
*        (use this for non-editor frontend features)
* @param {jQueryElement} [options.$parentNode]
*        Element in which dialog will be appended, by default it will be
*        in the body
* @param {boolean|string} [options.backdrop='static']
*        The kind of modal backdrop to use (see BS documentation)
* @param {boolean} [options.renderHeader=true]
*        Whether or not the dialog should be rendered with header
* @param {boolean} [options.renderFooter=true]
*        Whether or not the dialog should be rendered with footer
* @param {function} [options.onForceClose]
*        Callback that triggers when the modal is closed by other means than with the buttons
*        e.g. pressing ESC

我就不翻译了， 我相信大家都能看的懂，毕竟各位都是连日语都懂的人。

找准姿势

姿势要领：
自定义一个dialog，我们仍然使用上一篇中延时提醒的方式，定义一个客户端动作。
通过这个客户端动作，返回Dialog小姐。

前戏

在js中定义一个客户端动作，并注册。如下所示：

var Dialog = require('web.Dialog');
function AlertDialog(parent, action) {
    var dialog = new Dialog(this, action.params);
    dialog.open();
}
core.action_registry.add("dialog", AlertDialog);

入戏

紧接着，我们就可以在后端代码中，任君发挥了。如下：

def dialog(self):
    return {
        'type': 'ir.actions.client',
        'tag': 'dialog',
        'params': {
            'title': _('提示信息'),
            '$content': _('<h2 style="color:red; text-align:center; ">123456789</h2>'),
            'size': 'medium',
        }
    }

在参数中。You Can 自定义内容（包括富文本格式），Also Can 设置大小。
因为我们已经掌握Dialog的参数了，此处参数只要与Dialog参数一直就可以。
弹窗可大可小， 任君安排。

耕耘收获

还是看图：

以上

先了解，再找准，再开发。
– end –