feat: 增加高级查询按钮弹窗

This commit is contained in:
Argo Zhang 2020-01-23 11:14:40 +08:00
parent c3cee0dc58
commit af80525198
No known key found for this signature in database
GPG Key ID: 152E398953DDF19F
4 changed files with 76 additions and 5 deletions

View File

@ -78,6 +78,12 @@ namespace Bootstrap.Admin.Components
[Parameter]
public RenderFragment<TItem>? EditTemplate { get; set; }
/// <summary>
/// 获得/设置 SearchTemplate 实例
/// </summary>
[Parameter]
public RenderFragment<TItem>? SearchTemplate { get; set; }
/// <summary>
/// 获得/设置 是否固定表头 默认为 false 不固定表头
/// </summary>

View File

@ -49,6 +49,12 @@ namespace Bootstrap.Admin.Components
[Parameter]
public RenderFragment<TItem>? EditTemplate { get; set; }
/// <summary>
/// 获得/设置 SearchTemplate 实例
/// </summary>
[Parameter]
public RenderFragment<TItem>? SearchTemplate { get; set; }
/// <summary>
/// 获得/设置 表格 Toolbar 按钮模板
/// </summary>
@ -143,6 +149,15 @@ namespace Bootstrap.Admin.Components
[Parameter]
public Action<TItem>? OnEdit { get; set; }
/// <summary>
/// 高级查询按钮点击时调用此方法
/// </summary>
protected void AdvancedSearchClick()
{
// 弹出高级查询弹窗
SearchModal?.Toggle();
}
/// <summary>
/// 保存按钮回调方法
/// </summary>
@ -178,11 +193,22 @@ namespace Bootstrap.Admin.Components
/// </summary>
protected Modal? ConfirmModal { get; set; }
/// <summary>
/// 高级查询弹窗
/// </summary>
protected Modal? SearchModal { get; set; }
#nullable disable
/// <summary>
/// 获得/设置 EditModel 实例
/// </summary>
protected TItem EditModel { get; set; }
/// <summary>
/// 获得/设置 QueryModel 实例
/// </summary>
[Parameter]
public TItem QueryModel { get; set; }
#nullable restore
/// <summary>
@ -196,6 +222,12 @@ namespace Bootstrap.Admin.Components
[Parameter]
public string SubmitModalTitle { get; set; } = "";
/// <summary>
/// 查询组件模板
/// </summary>
[Parameter]
public RenderFragment<TItem>? SearchContent { get; set; }
/// <summary>
/// OnInitialized 方法
/// </summary>
@ -389,5 +421,15 @@ namespace Bootstrap.Admin.Components
/// 获取 Id 字符串
/// </summary>
public string RetrieveId() => $"{Id}_table";
protected void OnSearch()
{
}
protected void ResetSearchClick()
{
}
}
}

View File

@ -9,7 +9,7 @@
查询结果
</div>
<div class="card-body">
<Table @ref="Table" Id="@Id" FixedHeader="@FixedHeader" ShowSearch="@ShowSearch" TItem="TItem" SubmitModalTitle="@SubmitModalTitle" OnQuery="QueryData" OnAdd="OnAdd" OnDelete="OnDelete" OnSave="OnSave">
<Table @ref="Table" Id="@Id" FixedHeader="@FixedHeader" ShowSearch="@ShowSearch" QueryModel="QueryModel" TItem="TItem" SubmitModalTitle="@SubmitModalTitle" OnQuery="QueryData" OnAdd="OnAdd" OnDelete="OnDelete" OnSave="OnSave">
<TableToolbarTemplate>
@TableToolbarTemplate
</TableToolbarTemplate>
@ -29,6 +29,9 @@
<EditTemplate>
@EditTemplate?.Invoke(context)
</EditTemplate>
<SearchTemplate>
@SearchTemplate?.Invoke(context)
</SearchTemplate>
</Table>
</div>
</div>

View File

@ -14,14 +14,14 @@
</div>
<div class="float-right @(ShowSearch ? "search btn-group" : "search btn-group d-none")">
<div class="input-group">
<input class="form-control search-input" type="text" placeholder="搜索" data-original-title="" title="">
<input class="form-control search-input" type="text" placeholder="搜索" />
<div class="input-group-append">
<button class="btn btn-secondary" type="button" name="search" title="搜索">
<button class="btn btn-secondary" type="button" title="搜索">
<i class="fa fa-search"></i><span>搜索</span>
</button>
<button class="btn btn-secondary" type="button" name="clearSearch" title="清空过滤">
<button class="btn btn-secondary" type="button" title="清空过滤">
<i class="fa fa-trash"></i> <span>清空过滤</span>
</button><button class="btn btn-secondary" type="button" name="advancedSearch" title="高级搜索">
</button><button class="btn btn-secondary" type="button" title="高级搜索" @onclick="AdvancedSearchClick">
<i class="fa fa-search-plus"></i><span>高级搜索</span>
</button>
</div>
@ -169,4 +169,24 @@
</ModalBody>
</SubmitModal>
<Modal @ref="SearchModal" Id="@($"{Id}_search")" Title="查询条件">
<ModalBody>
<LgbEditForm class="form-inline" Id="@Id" Model="QueryModel">
<div class="row">
@SearchContent?.Invoke(QueryModel)
</div>
</LgbEditForm>
</ModalBody>
<ModalFooter>
<button type="button" class="btn btn-info" @onclick="ResetSearchClick">
<i class="fa fa-trash-o"></i>
<span>重置</span>
</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">
<i class="fa fa-search"></i>
<span>查询</span>
</button>
</ModalFooter>
</Modal>
<Toast @ref="Toast" Id="@($"{Id}_toast")"></Toast>