refactor: Table 组件增加删除确认按钮

This commit is contained in:
Argo-SHCX 2020-04-17 13:12:54 +08:00
parent 331daefc6e
commit db02950c74
7 changed files with 82 additions and 60 deletions

View File

@ -230,4 +230,6 @@
<Toast></Toast>
<PopoverConfirm></PopoverConfirm>
<AttributeTable Items="GetAttributes()"></AttributeTable>

View File

@ -10,10 +10,18 @@
<TableToolbar>
@if (ShowDefaultButtons)
{
<TableToolbarButton class="btn btn-success" Icon="fa fa-plus" Title="新增" OnClick="@Add" />
<TableToolbarButton class="btn btn-danger" Icon="fa fa-remove" Title="删除" OnClick="@ConfirmDelete" data-toggle="popover">
<TableToolbarButton Color="Color.Success" OnClick="@Add">
<i class="fa fa-plus"></i>
<span>新建</span>
</TableToolbarButton>
<TableToolbarPopconfirmButton Color="Color.Danger" OnBeforeClick="@ConfirmDelete" OnConfirm="@Delete">
<i class="fa fa-remove"></i>
<span>删除</span>
</TableToolbarPopconfirmButton>
<TableToolbarButton Color="Color.Primary" OnClick="@Edit">
<i class="fa fa-pencil"></i>
<span>编辑</span>
</TableToolbarButton>
<TableToolbarButton class="btn btn-primary" Icon="fa fa-pencil" Title="编辑" OnClick="@Edit" />
}
@TableToolbarTemplate
</TableToolbar>

View File

@ -125,8 +125,9 @@ namespace BootstrapBlazor.Components
/// <summary>
/// 确认删除按钮方法
/// </summary>
protected void ConfirmDelete()
protected bool ConfirmDelete()
{
var ret = false;
if (SelectedItems.Count == 0)
{
var option = new ToastOption();
@ -139,7 +140,9 @@ namespace BootstrapBlazor.Components
{
var content = SelectedItems.Count == 1 ? "确定要删除本条数据吗?" : "确定要删除选中的所有数据吗?";
//DeleteConfirm?.Show(content: content);
ret = true;
}
return ret;
}
/// <summary>

View File

@ -17,11 +17,11 @@ namespace BootstrapBlazor.Components
/// <summary>
/// 添加按钮到工具栏方法
/// </summary>
public void AddButtons(TableToolbarButton button) => Buttons.Add(button);
public void AddButtons(ButtonBase button) => Buttons.Add(button);
/// <summary>
/// 获得 Toolbar 按钮集合
/// </summary>
public ICollection<TableToolbarButton> Buttons { get; } = new HashSet<TableToolbarButton>();
public ICollection<ButtonBase> Buttons { get; } = new HashSet<ButtonBase>();
}
}

View File

@ -1,55 +1,26 @@
using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components;
namespace BootstrapBlazor.Components
{
/// <summary>
/// 表格 Toolbar 按钮组件
/// </summary>
public class TableToolbarButton : ComponentBase
public class TableToolbarButton : ButtonBase
{
/// <summary>
/// Gets or sets a collection of additional attributes that will be applied to the created <c>form</c> element.
/// </summary>
[Parameter(CaptureUnmatchedValues = true)]
public IReadOnlyDictionary<string, object>? AdditionalAttributes { get; set; }
/// <summary>
/// 获得/设置 Table Toolbar 实例
/// </summary>
[CascadingParameter]
protected TableToolbar? Toolbar { get; set; }
/// <summary>
/// 获得/设置 按钮图标 fa fa-fa
/// </summary>
[Parameter]
public string Icon { get; set; } = "";
/// <summary>
/// 获得/设置 按钮显示文字
/// </summary>
[Parameter]
public string Title { get; set; } = "未设置";
/// <summary>
/// 获得/设置 子组件
/// </summary>
[Parameter] public RenderFragment? ChildContent { get; set; }
/// <summary>
/// 组件初始化方法
/// </summary>
protected override void OnInitialized()
{
base.OnInitialized();
Toolbar?.AddButtons(this);
}
/// <summary>
/// 点击按钮回调方法
/// </summary>
[Parameter]
public Action? OnClick { get; set; }
}
}

View File

@ -29,27 +29,34 @@ namespace BootstrapBlazor.Components
builder.AddAttribute(index++, "class", "btn-toolbar btn-group d-none d-sm-inline-block");
foreach (var button in Toolbar.Buttons)
{
builder.OpenElement(index++, "button");
builder.AddAttribute(index++, "type", "button");
builder.AddMultipleAttributes(index++, button.AdditionalAttributes);
builder.AddAttribute(index++, "onclick", EventCallback.Factory.Create(button, button.OnClick));
// icon
builder.OpenElement(index++, "i");
// class="fa fa-plus" aria-hidden="true"
builder.AddAttribute(index++, "class", button.Icon);
builder.AddAttribute(index++, "aria-hidden", "true");
builder.CloseElement(); // end i
// span
builder.OpenElement(index++, "span");
builder.AddContent(index++, button.Title);
builder.CloseElement(); // end span
// child content
builder.AddContent(index++, button.ChildContent);
builder.CloseElement(); // end button
builder.AddContent(index++, new RenderFragment(builder =>
{
var i = 0;
if (button is TableToolbarButton)
{
builder.OpenComponent<Button>(i++);
builder.AddAttribute(i++, nameof(Button.ChildContent), button.ChildContent);
builder.AddAttribute(i++, nameof(Button.OnClick), button.OnClick);
builder.AddAttribute(i++, nameof(Button.Color), button.Color);
builder.CloseComponent();
}
else if (button is TableToolbarPopconfirmButton)
{
var b = button as TableToolbarPopconfirmButton;
if (b != null)
{
builder.OpenComponent<PopConfirmButton>(i++);
builder.AddMultipleAttributes(i++, b.AdditionalAttributes);
builder.AddAttribute(i++, nameof(PopConfirmButton.ConfirmIcon), b.ConfirmIcon);
builder.AddAttribute(i++, nameof(PopConfirmButton.Color), b.Color);
builder.AddAttribute(i++, nameof(PopConfirmButton.Icon), b.Icon);
builder.AddAttribute(i++, nameof(PopConfirmButton.OnBeforeClick), b.OnBeforeClick);
builder.AddAttribute(i++, nameof(PopConfirmButton.OnClose), b.OnClose);
builder.AddAttribute(i++, nameof(PopConfirmButton.OnConfirm), b.OnConfirm);
builder.CloseComponent();
}
}
}));
}
builder.CloseElement();
@ -74,6 +81,8 @@ namespace BootstrapBlazor.Components
foreach (var button in Toolbar.Buttons)
{
/*
builder.OpenElement(index++, "div");
builder.AddAttribute(index++, "class", "dropdown-item");
builder.AddAttribute(index++, "title", button.Title);
@ -83,11 +92,14 @@ namespace BootstrapBlazor.Components
builder.OpenElement(index++, "i");
// class="fa fa-plus" aria-hidden="true"
builder.AddAttribute(index++, "class", button.Icon);
builder.AddAttribute(index++, "aria-hidden", "true");
builder.CloseElement(); // end i
builder.CloseElement(); // end div
*/
}
builder.CloseElement(); // end dropdown-menu
builder.CloseElement(); // end div

View File

@ -0,0 +1,26 @@
using Microsoft.AspNetCore.Components;
namespace BootstrapBlazor.Components
{
/// <summary>
///
/// </summary>
public class TableToolbarPopconfirmButton : PopConfirmButtonBase
{
/// <summary>
/// 获得/设置 Table Toolbar 实例
/// </summary>
[CascadingParameter]
protected TableToolbar? Toolbar { get; set; }
/// <summary>
/// OnInitialized 方法
/// </summary>
protected override void OnInitialized()
{
base.OnInitialized();
Toolbar?.AddButtons(this);
}
}
}