挑选框 (Picker)

点击按钮弹出对话框挑选数据组件。

概述

  • 点击弹出窗口双击选择数据
  • 支持ID隐藏字段和显示字段
  • 支持回调对象和字符串

代码演示

1.默认示例

namespace WebSite.Docus.Inputs.Pickers;

class Picker1 : BaseComponent
{
    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Field<Picker>("客户:", "Picker1")
               .Set(f => f.Pick, new CustomerList())
               .Build();
    }
}

class KmCustomer
{
    [Column("编码")] public string? Code { get; set; }
    [Column("名称")] public string? Name { get; set; }

    public override string ToString() => Name;
}

//在客户列表页面实现IPicker接口
class CustomerList : DataGrid<KmCustomer>, IPicker
{
    public CustomerList()
    {
        Name = string.Empty;//设为空不添加访问日志
    }

    public CustomerList(string separator) :this()
    {
        Separator = separator;
    }

    [Parameter] public string? Separator { get; set; }

    #region IPicker
    public string Title => "选择客户";

    public Size Size => new(500, 400);

    public void BuildPick(RenderTreeBuilder builder)
    {
        builder.Component<CustomerList>()
               .Set(c => c.Separator, Separator)
               .Set(c => c.OnPicked, OnPicked)
               .Build();
    }

    public override void OnRowDoubleClick(int row, KmCustomer item)
    {
        if (!string.IsNullOrWhiteSpace(Separator))
            OnPicked.Invoke($"{item.Code}{Separator}{item.Name}");
        else
            OnPicked?.Invoke(item);
        UI.CloseDialog();
    }
    #endregion

    protected override Task InitPageAsync()
    {
        //建造栏位
        var builder = new ColumnBuilder<KmCustomer>();
        builder.Field(r => r.Code);
        builder.Field(r => r.Name, true);
        Columns = builder.ToColumns();
        //测试数据
        Data = new List<KmCustomer> {
            new KmCustomer { Code = "C001", Name = "客户一" },
            new KmCustomer { Code = "C002", Name = "客户二" },
            new KmCustomer { Code = "C003", Name = "客户三" }
        };
        return base.InitPageAsync();
    }
}

2.控制示例

namespace WebSite.Docus.Inputs.Pickers;

class Picker2 : BaseComponent
{
    private Picker? picker;

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Component<FieldControl>()
               .Set(c => c.OnVisibleChanged, OnVisibleChanged)
               .Set(c => c.OnEnabledChanged, OnEnabledChanged)
               .Set(c => c.OnReadOnlyChanged, OnReadOnlyChanged)
               .Set(c => c.SetValue, SetValue)
               .Set(c => c.GetValue, GetValue)
               .Build();

        builder.Field<Picker>("客户:", "Picker2")
               .Set(f => f.Pick, new CustomerList())
               .Build(value => picker = value);
    }

    private void OnVisibleChanged(bool value) => picker?.SetVisible(value);
    private void OnEnabledChanged(bool value) => picker?.SetEnabled(value);
    private void OnReadOnlyChanged(bool value) => picker?.SetReadOnly(value);
    private void SetValue() => picker?.SetValue("test");
    private string? GetValue() => picker?.Value;
}

3.回调分隔符示例

namespace WebSite.Docus.Inputs.Pickers;

class Picker3 : BaseComponent
{
    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Field<Picker>("客户:", "Picker3")
               .Set(f => f.TextField, "Picker3Name")
               .Set(f => f.Pick, new CustomerList("#"))
               .Set(f => f.PickSeparator, "#")
               .Build();
    }
}

4.回调属性名示例

namespace WebSite.Docus.Inputs.Pickers;

class Picker4 : BaseComponent
{
    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Field<Picker>("客户:", "Picker4")
               .Set(f => f.TextField, "Picker4Name")
               .Set(f => f.Pick, new CustomerList())
               .Set(f => f.PickIdKey, nameof(KmCustomer.Code))
               .Set(f => f.PickTextKey, nameof(KmCustomer.Name))
               .Build();
    }
}