Odoo开发之自定义弹框、提示框Dialog

Odoo开发之自定义弹框、提示框Dialog

---

前言

在odoo业务开发过程中，在用户调用方法时需要检测方法是否有效，这时候需就要用到弹框给用户提示信息。但是使用odoo自带的提示方法，并不能满足所有的使用场景，所以大家可以根据本教程自定义一个符合场景需求的弹框提示。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Odoo官方提示框的三种方法

第一种：在xml按钮中，添加confirm属性。

<header>
     <button name="create" class="btn btn-primary" type="object" string="创建" confirm="是否创建?" />
</header>

第二种：在onchange方法中，return 一个warning对象。

@api.onchange('name')
    def onchange(self):
        return {
            'warning': {
                'title': "提示！",
                'message': "这是提示信息！"
                }
            }

此方法只能在onchange中使用

方法三：引用Odoo exceptions包

在exceptions下有AccessError、UserError、RedirectWarning、ValidationError等方法。
其中，官方只推荐我们使用UserError。

from odoo.exceptions import AccessError, UserError, RedirectWarning, ValidationError, Warning

...

@api.multi
    def create(self):
        raise UserError(u'一些提示信息！')

可以看到这个方法只接受一个参数，无法在开发中添加别的信息，比如说标题、参数、自定义内容等。这时候就要自定义自己的Dialog了。

二、自定义弹框Dialog

原理：引用官方Dialog部件，修改参数，注册自己的Dialog。
JS路径：\addons\web\static\src\js\core\dialog.js
以下是官方Dialog可添加的参数：

/**
     * @param {Widget} parent
     * @param {Object} [options]
     * @param {string} [options.title=Odoo]
     * @param {string} [options.subtitle]
     * @param {string} [options.size=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)
     */

1.注册自定义JS

代码如下（示例）：

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

    function MyDialog(parent, action) {
        var dialog = new Dialog(this, {
                    size: 'large',
                    title: action.params.title,
                    $content: action.params.content,  //支持html文本
                    buttons: [{
                        text: "确定",
                        classes : "btn-primary",
                        click: function () {
                            window.open(url, '_blank');
                        },
                        close:true,
                    }, {
                        text: "取消",
                        close: true,
                    }],
                }); //定义弹框
        dialog.open();      //打开弹框
    }
    core.action_registry.add("MyDialog", MyDialog);

});

在XML中，将JS加载到Odoo中：

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template id="assets_backend" inherit_id="web.assets_backend">
        <xpath expr="." position="inside">
            <script src="/模块名/static/src/js/上面的js.js" type="text/javascript"/>
        </xpath>
    </template>
</odoo>

记得将XML写进manifest配置文件。

2.使用自定义的Dialog方法

代码如下（示例）：

@api.multi
    def create(self):
        return {
            'type': 'ir.actions.client',
            'tag': 'MyDialog',
            'params': {
                'title': u'提示信息',
                'content': '<main role="alert" class="modal-body">一些提示！</main>',
            }
        }

直接在方法中return即可！

---

总结

以上就是Odoo自定义Dialog弹框的方法，本文仅仅简单介绍了弹出文本信息的使用，而官方Dialog提供了大量参数和方法。大家可以根据自己的需要，在弹框中玩出更多的花样，比如像在弹框中显示表单，图片等。