怎样使用Odoo JS 创建对话框

对话框是显示在现有窗口顶部的小窗口，它可能是警告或新的弹出窗口。

对话框也称为模态或弹出窗口。

Odoo对话框的最佳例子是，当我们单击Many2one字段中的搜索更多按钮时，它会显示一个弹出窗口。

在这里，我们正在讨论Odoo中常用的不同对话框，特别是在后端页面上。我们可以使用web.Dialog和web.view_dialogs这两种方法编写对话框，这两种方法都用于不同的场景。

在这里，我们正在讨论警告、确认、销售确认、表单视图对话框和选择视图对话框。

警告

首先，我们正在讨论警告。为此，我们需要导入“web.Dialog”模块。

var Dialog = require('web.Dialog');

警告用于显示简单的消息。 web.Dialog.alert需要三个参数:

• 第一个参数是必填字段，我们需要用this或self指定所有者。
• 第二个参数也是必填字段,用于您要向用户展示的消息。
• 第三个参数是可选的。当用户强行关闭对话框或单击按钮时，Odoo将执行您的动作。

Dialog.alert(
   this,
   "Dialog Alert",
   {
       onForceClose: function(){
           console.log("Click Close");
       },
       confirm_callback: function(){
           console.log("Click Ok");
           self._setValue("0");
       }
   }
);

这里添加了第一个参数，消息内容是“Dialog Alert"。 下图是显示结果:

确认

与web.Dialog.alert类似,web.Dialog.confirm也用于向用户显示简单的消息。

它们之间只有一个区别，那就是web.Dialog.confirm有两个按钮，即确定按钮和取消按钮。因此，我们有两种方法来结束对话。通过单击带有X图标的按钮或单击取消按钮。

Dialog.confirm(
   this,
   "Confirm",
   {
       onForceClose: function(){
            console.log("Click Close");
       },
       confirm_callback: function(){
           console.log("Click Confirm");
           self._setValue("1000");
       },
       cancel_callback: function(){
           console.log("Click Cancel");
       }
   }
);

这里的信息是“确认”。在第三个参数中，这三个按钮都有相应的执行动作。 下图是显示结果：

安全确认

另一个web.dialog是安全确认。它也类似于Web.Dialog.Confirm。在这里，我们还可以指定弹出窗口的标题。

Dialog.safeConfirm(this, "Save Confirm Message", {
               title: "Safe Confirm Page",
               async confirm_callback() {
                   console.log('Click Confirm')
               },
               async cancel_callback(){
                   console.log('Click Cancel')
               },
               async onForceClose(){
                   console.log('Click Close')
               }
           });

下图是显示结果：

接下来，我们将讨论web.view_dialogs。首先，我们需要导入web.view_dialogs。

表单视图对话框

它用于显示对应记录的表单视图。例如，点按“Customer”（客户）栏位中销售订单表单上的外部链接按钮。

new view_dialogs.FormViewDialog(this, {
   res_model: 'account.move',
   res_id: 1,
   title: "Invoice with ID of 1",
   on_saved: function (record) {
       console.log("Click Save");
   }
}).open();

这是显示ID为1的发票的示例。在这里，我们正在传递一些参数。res_model是我们正在显示的指定模型，res_id是显示记录的id。在标题中，我们可以指定弹出窗口的标题。它不是一个必填字段。 on_saved 是当我们单击保存按钮时需要执行函数。 下图是显示结果：

选择与创建对话框

选择与创建对话框用于显示模型的列表视图，包括搜索视图。

最好的例子是Many2one字段中的搜索更多按钮。在这里，我们正在传递一些参数:

• res_model是模型名称。标题是弹出窗口的标题，并且是可选的。
• domain是可以选择的记录的条件,它是可选的。
• no_create是确保用户无法创建新记录的选项,这是可选的。
• on_selected是我们单击选择按钮时需要执行的函数。

new view_dialogs.SelectCreateDialog(this, {
   res_model: 'account.move',
   title: "Select the Invoice",
   domain: [['move_type','=', 'out_invoice']],
   no_create: true,
   on_selected: function (records) {
       console.log(records)
   }
}).open();

下图是显示结果:

在这里，我们提到了一些对话框。这在业务系统的前端页面上使用。

上述对话框不能在POS或Website模块上使用。