feat: 增加 Select 组件

This commit is contained in:
Argo Window10 2019-11-28 17:07:13 +08:00
parent 193b73f0be
commit 8bda9c416f
6 changed files with 148 additions and 7 deletions

View File

@ -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();
}
}
}

View File

@ -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);
}
}
}

View File

@ -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);

View File

@ -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" />

View File

@ -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 {
}

View File

@ -0,0 +1,6 @@
@inherits SelectItemBase
<div class="@(Active ? "dropdown-item active" : "dropdown-item")" data-val="@Value" @onclick="ClickItem">@Text</div>
@code {
}