feat: 增加 Select 组件
This commit is contained in:
parent
193b73f0be
commit
8bda9c416f
|
@ -0,0 +1,61 @@
|
|||
using Microsoft.AspNetCore.Components;
|
||||
using System;
|
||||
|
||||
namespace Bootstrap.Admin.Components
|
||||
{
|
||||
/// <summary>
|
||||
/// Select 组件基类
|
||||
/// </summary>
|
||||
public class SelectBase : ComponentBase
|
||||
{
|
||||
/// <summary>
|
||||
///
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public RenderFragment? ChildContent { get; set; }
|
||||
|
||||
/// <summary>
|
||||
///
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public string PlaceHolder { get; set; } = "请选择 ...";
|
||||
|
||||
/// <summary>
|
||||
/// 当前选择项实例
|
||||
/// </summary>
|
||||
public SelectItemBase? SelectedItem { get; set; }
|
||||
|
||||
/// <summary>
|
||||
///
|
||||
/// </summary>
|
||||
public Action<SelectItemBase>? ClickItemCallback { get; set; }
|
||||
|
||||
/// <summary>
|
||||
///
|
||||
/// </summary>
|
||||
public Action<SelectItemBase>? ActiveChanged { get; set; }
|
||||
|
||||
/// <summary>
|
||||
///
|
||||
/// </summary>
|
||||
/// <param name="firstRender"></param>
|
||||
protected override void OnAfterRender(bool firstRender)
|
||||
{
|
||||
if (firstRender)
|
||||
{
|
||||
ClickItemCallback = UpdateItem;
|
||||
ActiveChanged = UpdateItem;
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
///
|
||||
/// </summary>
|
||||
/// <param name="item"></param>
|
||||
protected void UpdateItem(SelectItemBase item)
|
||||
{
|
||||
SelectedItem = item;
|
||||
StateHasChanged();
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,55 @@
|
|||
using Bootstrap.Admin.Shared;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace Bootstrap.Admin.Components
|
||||
{
|
||||
/// <summary>
|
||||
///
|
||||
/// </summary>
|
||||
public class SelectItemBase : ComponentBase
|
||||
{
|
||||
/// <summary>
|
||||
///
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public bool Active { get; set; }
|
||||
|
||||
/// <summary>
|
||||
///
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public string Text { get; set; } = "";
|
||||
|
||||
/// <summary>
|
||||
///
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public string Value { get; set; } = "";
|
||||
|
||||
/// <summary>
|
||||
///
|
||||
/// </summary>
|
||||
[CascadingParameter]
|
||||
public Select? Select { get; set; }
|
||||
|
||||
/// <summary>
|
||||
///
|
||||
/// </summary>
|
||||
/// <param name="firstRender"></param>
|
||||
protected override void OnAfterRender(bool firstRender)
|
||||
{
|
||||
if (firstRender)
|
||||
{
|
||||
if (Active) Select?.ActiveChanged?.Invoke(this);
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
///
|
||||
/// </summary>
|
||||
protected void ClickItem()
|
||||
{
|
||||
Select?.ClickItemCallback?.Invoke(this);
|
||||
}
|
||||
}
|
||||
}
|
|
@ -13,12 +13,11 @@
|
|||
</div>
|
||||
<div class="form-group col-sm-6 col-md-auto">
|
||||
<label class="control-label" for="txt_dict_define">字典类别</label>
|
||||
<input class="form-control" data-toggle="lgbSelect" />
|
||||
<select data-toggle="lgbSelect" class="d-none" id="txt_dict_define">
|
||||
<option value="">全部</option>
|
||||
<option value="0">系统使用</option>
|
||||
<option value="1">自定义</option>
|
||||
</select>
|
||||
<Select @ref="DictCate">
|
||||
<SelectItem Text="全部" Value="" Active="true"></SelectItem>
|
||||
<SelectItem Text="系统使用" Value="0"></SelectItem>
|
||||
<SelectItem Text="自定义" Value="1"></SelectItem>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="form-group col-sm-6 col-md-auto flex-sm-fill justify-content-sm-end align-self-sm-end">
|
||||
<button type="button" id="btn_query" class="btn btn-primary btn-fill" @onclick="e => Query(1)"><i class="fa fa-search" aria-hidden="true"></i><span>查询</span></button>
|
||||
|
@ -52,7 +51,7 @@
|
|||
<th>字典标签</th>
|
||||
<th>字典名称</th>
|
||||
<th>字典代码</th>
|
||||
<th>字典分类</th>
|
||||
<th>字典类型</th>
|
||||
</TableHeader>
|
||||
<RowTemplate>
|
||||
<td>@context.Category</td>
|
||||
|
@ -128,6 +127,8 @@
|
|||
[Parameter]
|
||||
public int PageIndex { get; set; } = 1;
|
||||
|
||||
protected Select? DictCate { get; set; }
|
||||
|
||||
protected int PageItem { get; set; } = 20;
|
||||
|
||||
protected Pagination? Pagination { get; set; }
|
||||
|
@ -152,6 +153,7 @@
|
|||
protected void Query(int pageIndex)
|
||||
{
|
||||
var data = DataAccess.DictHelper.RetrieveDicts();
|
||||
if (!string.IsNullOrEmpty(DictCate?.SelectedItem?.Value)) data = data.Where(d => d.Define.ToString() == DictCate?.SelectedItem?.Value);
|
||||
ItemsCount = data.Count();
|
||||
Items = data.Skip((pageIndex - 1) * PageItem).Take(PageItem);
|
||||
PageCount = (int)Math.Ceiling(data.Count() * 1.0d / PageItem);
|
||||
|
|
|
@ -33,6 +33,7 @@
|
|||
<link href="~/lib/overlayscrollbars/OverlayScrollbars.min.css" rel="stylesheet" />
|
||||
</environment>
|
||||
<link href="~/lib/captcha/slidercaptcha.css" rel="stylesheet" />
|
||||
<link href="~/lib/longbow-select/longbow-select.css" rel="stylesheet" />
|
||||
<link href="~/css/theme.css" rel="stylesheet" asp-append-version="true" />
|
||||
<link href="~/css/theme-responsive.css" rel="stylesheet" asp-append-version="true" />
|
||||
<link href="~/css/site.css" rel="stylesheet" asp-append-version="true" />
|
||||
|
|
|
@ -0,0 +1,16 @@
|
|||
@inherits SelectBase
|
||||
|
||||
<div data-toggle="lgbSelect" class="form-select dropdown">
|
||||
<input type="text" readonly="readonly" class="form-control form-select-input" data-toggle="dropdown" placeholder="@PlaceHolder" value="@SelectedItem?.Text">
|
||||
<span class="form-select-append"><i class="fa fa-angle-up"></i></span>
|
||||
<div class="dropdown-menu-arrow"></div>
|
||||
<div class="dropdown-menu">
|
||||
<CascadingValue Value="this">
|
||||
@ChildContent
|
||||
</CascadingValue>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
|
||||
}
|
|
@ -0,0 +1,6 @@
|
|||
@inherits SelectItemBase
|
||||
|
||||
<div class="@(Active ? "dropdown-item active" : "dropdown-item")" data-val="@Value" @onclick="ClickItem">@Text</div>
|
||||
|
||||
@code {
|
||||
}
|
Loading…
Reference in New Issue