From 26245c0db99d4c75fed5a7af57b28fcd143a0dc4 Mon Sep 17 00:00:00 2001
From: Argo <argo@163.com>
Date: Tue, 18 Jan 2022 13:32:01 +0000
Subject: [PATCH] =?UTF-8?q?!2328=20doc(#I4RCRW):=20update=20sample=20code?=
 =?UTF-8?q?=20for=20Dialog=20ShowEdit/Search/SaveDialog=20*=20doc:=20?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=BC=B9=E7=AA=97=E7=A4=BA=E4=BE=8B=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=20*=20feat:=20=E5=A2=9E=E5=8A=A0=20DialogSaveDetail?=
 =?UTF-8?q?=20=E7=BB=84=E4=BB=B6=20*=20refactor:=20=E5=BE=AE=E8=B0=83=20Po?=
 =?UTF-8?q?pover=20=E8=84=9A=E6=9C=AC=E4=BB=A3=E7=A0=81=20*=20revert:=20?=
 =?UTF-8?q?=E6=81=A2=E5=A4=8D=E9=85=8D=E7=BD=AE=20*=20doc:=20=E6=A0=BC?=
 =?UTF-8?q?=E5=BC=8F=E5=8C=96=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/DialogSaveDetail.razor         | 17 ++++++++
 .../Samples/Dialogs.razor                     | 37 ++++++++++++----
 .../Samples/Dialogs.razor.cs                  | 43 +++++++++++++++++++
 3 files changed, 89 insertions(+), 8 deletions(-)
 create mode 100644 src/BootstrapBlazor.Shared/Components/DialogSaveDetail.razor

diff --git a/src/BootstrapBlazor.Shared/Components/DialogSaveDetail.razor b/src/BootstrapBlazor.Shared/Components/DialogSaveDetail.razor
new file mode 100644
index 000000000..3d4f373a5
--- /dev/null
+++ b/src/BootstrapBlazor.Shared/Components/DialogSaveDetail.razor
@@ -0,0 +1,17 @@
+<div class="row form-inline g-3">
+    <div class="col-12 col-sm-6">
+        <BootstrapInput @bind-Value="Value.Name" ShowLabel="true" DisplayText="姓名" />
+    </div>
+    <div class="col-12 col-sm-6">
+        <BootstrapInput @bind-Value="Value.Count" ShowLabel="true" DisplayText="数量" />
+    </div>
+</div>
+
+@code {
+    /// <summary>
+    ///
+    /// </summary>
+    [Parameter]
+    [NotNull]
+    public Foo? Value { get; set; }
+}
diff --git a/src/BootstrapBlazor.Shared/Samples/Dialogs.razor b/src/BootstrapBlazor.Shared/Samples/Dialogs.razor
index ff8f6c17a..bbbd7c356 100644
--- a/src/BootstrapBlazor.Shared/Samples/Dialogs.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Dialogs.razor
@@ -4,14 +4,6 @@
 
 <h4>通过注入服务调用 <code>Show</code> 方法弹出窗口进行人机交互</h4>
 
-<Tips class="mt-3">
-    <p>
-        本组件使用注入服务的形式提供功能，使用时用户体验效果非常舒适，随时随地的调用，需要在使用本组件的页面中内置 <code>Dialog</code> 组件，或者在 <code>MainLayout</code> 主布局组件中内置，示例代码如下：
-    </p>
-</Tips>
-
-<Pre>&lt;Dialog /&gt;</Pre>
-
 <DemoBlock Title="基本用法" Introduction="通过设置 <code>DialogOption</code> 属性对模态框进行基本属性设置" Name="Keyboard">
     <div>
         <p>通过设置 <code>DialogOption</code> <code>IsKeyboard</code> 参数，开启弹窗是否支持 <kbd>ESC</kbd>，请点击后面按钮设置后再点击 <b>弹窗</b> 按钮测试效果</p>
@@ -100,6 +92,35 @@
     <BlockLogger @ref="Trace" class="mt-3" />
 </DemoBlock>
 
+<DemoBlock Title="编辑对话框" Introduction="通过 <code>ShowEditDialog</code> 方法弹出保存对话框" Name="EditDialog">
+    <p>功能介绍</p>
+    <ul class="ul-demo">
+        <li>点击按钮弹出编辑弹窗</li>
+        <li>通过 <code>EditDialogOption</code> 参数对弹窗进行设置</li>
+        <li>设计出发点通过给定 <code>Model</code> 或者 <code>Items</code> 自动生成带客户端验证的表单窗口</li>
+    </ul>
+    <Button OnClick="@OnEditDialogClick">编辑弹窗</Button>
+</DemoBlock>
+
+<DemoBlock Title="搜索对话框" Introduction="通过 <code>ShowSearchDialog</code> 方法弹出保存对话框" Name="SearchDialog">
+    <p>功能介绍</p>
+    <ul class="ul-demo">
+        <li>点击按钮弹出搜索弹窗</li>
+        <li>通过 <code>SearchDialogOption</code> 参数对弹窗进行设置</li>
+        <li>设计出发点通过给定 <code>Model</code> 或者 <code>Items</code> 自动生成搜索窗口</li>
+    </ul>
+    <Button OnClick="@OnSearchDialogClick">搜索弹窗</Button>
+</DemoBlock>
+
+<DemoBlock Title="保存对话框" Introduction="通过 <code>ShowSaveDialog</code> 方法弹出保存对话框" Name="SaveDialog">
+    <p>功能介绍</p>
+    <ul class="ul-demo">
+        <li>点击按钮弹出保存弹窗</li>
+        <li>设计出发点通过给定 <code>TComponent</code> 自动生成保存窗口，通过设置 <code>saveCallback</code> 在保存回调方法中进行数据处理，<code>TComponent</code> 泛型组件所需要参数可以通过 <code>parameters</code> 进行传递</li>
+    </ul>
+    <Button OnClick="@OnSaveDialogClick">保存弹窗</Button>
+</DemoBlock>
+
 <DemoBlock Title="对话框大小" Introduction="通过设置 <code>Size</code> <code>FullScreenSize</code> 参数组合可以实现非常灵活的窗体大小控制" Name="ModalDialog">
     <Button OnClick="@OnSizeDialogClick">全屏弹窗(&lt; 1200px)</Button>
 </DemoBlock>
diff --git a/src/BootstrapBlazor.Shared/Samples/Dialogs.razor.cs b/src/BootstrapBlazor.Shared/Samples/Dialogs.razor.cs
index 373fc65b0..a5e2de209 100644
--- a/src/BootstrapBlazor.Shared/Samples/Dialogs.razor.cs
+++ b/src/BootstrapBlazor.Shared/Samples/Dialogs.razor.cs
@@ -7,6 +7,7 @@ using BootstrapBlazor.Shared.Common;
 using BootstrapBlazor.Shared.Components;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
+using Microsoft.Extensions.Localization;
 using System;
 using System.Collections.Generic;
 using System.Diagnostics.CodeAnalysis;
@@ -29,6 +30,10 @@ public sealed partial class Dialogs
     [NotNull]
     private DialogService? DialogService { get; set; }
 
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<Foo>? Localizer { get; set; }
+
     private bool IsKeyboard { get; set; }
 
     private void OnClickKeyboard()
@@ -224,6 +229,44 @@ public sealed partial class Dialogs
         });
     }
 
+    private async Task OnEditDialogClick()
+    {
+        var option = new EditDialogOption<Foo>()
+        {
+            Title = "编辑弹窗",
+            Model = new Foo(),
+            RowType = RowType.Inline,
+            ItemsPerRow = 2,
+            ItemChangedType = ItemChangedType.Update
+        };
+        await DialogService.ShowEditDialog(option);
+    }
+
+    private async Task OnSearchDialogClick()
+    {
+        var option = new SearchDialogOption<Foo>()
+        {
+            Title = "搜索弹窗",
+            Model = new Foo(),
+            RowType = RowType.Inline,
+            ItemsPerRow = 2,
+        };
+        await DialogService.ShowSearchDialog(option);
+    }
+
+    private async Task OnSaveDialogClick()
+    {
+        var foo = Foo.Generate(Localizer);
+        await DialogService.ShowSaveDialog<DialogSaveDetail>("保存", () =>
+        {
+            // 此处可以访问 foo 实例进行入库操作等
+            return Task.FromResult(true);
+        }, new Dictionary<string, object?>
+        {
+            ["Value"] = foo
+        });
+    }
+
     /// <summary>
     /// 获得属性方法
     /// </summary>