用户编辑和角色编辑几乎一模一样，这里先直接贴代码。

@page "/user"
@using BlazorLearn.Entity
@using Furion.DataEncryption

<Table TItem="UserEntity" IsBordered="true" ShowAddButton="true" ShowToolbar="true"
       ShowExtendButtons="true" ShowEditButtonCallback="entity => entity.Id != 1" ShowDeleteButtonCallback="entity => entity.Id != 1"
       OnQueryAsync="OnQueryAsync" OnSaveAsync="OnSaveAsync">
    <TableColumns>
        <TableColumn @bind-Field="@context.UserName"></TableColumn>
        <TableColumn @bind-Field="@context.Name"></TableColumn>
        <TableColumn @bind-Field="@context.RoleId" Lookup="Roles"></TableColumn>
    </TableColumns>
    <RowButtonTemplate>
        <TableCellButton Color="Color.Success" Icon="fa fa-edit" Text="重置密码" OnClickWithoutRender="() => ShowModal(context)"></TableCellButton>
    </RowButtonTemplate>
</Table>

<Modal @ref="PasswordModal">
    <ModalDialog Title="重置密码">
        <BodyTemplate>
            <BootstrapInput @bind-Value="SelectedUser.Password" DisplayText="请输入新密码"></BootstrapInput>
        </BodyTemplate>
        <FooterTemplate>
            <Button OnClick="ResetPassword">重置密码</Button>
        </FooterTemplate>
    </ModalDialog>
</Modal>

@code {

    private List<SelectedItem>? Roles { get; set; }

    private Modal? PasswordModal { get; set; }

    private UserEntity? SelectedUser { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        SelectedUser = new UserEntity();
        Roles = RoleEntity.Select.ToList().Select(x => new SelectedItem(x.Id.ToString(), x.Name!)).ToList();
    }

    private Task<QueryData<UserEntity>> OnQueryAsync(QueryPageOptions arg)
    {
        var users = UserEntity.Select.Count(out var count)
            .Page(arg.PageIndex, arg.PageItems).ToList();
        return Task.FromResult(new QueryData<UserEntity>()
        {
            Items = users,
            TotalCount = (int)count
        });
    }

    private Task<bool> OnSaveAsync(UserEntity arg1, ItemChangedType arg2)
    {
        if (arg2 == ItemChangedType.Add)
        {
            arg1.Password = MD5Encryption.Encrypt(arg1.UserName);
        }
        arg1.Save();
        return Task.FromResult<bool>(true);
    }

    private void ResetPassword()
    {
        SelectedUser.Password = MD5Encryption.Encrypt(SelectedUser.Password);
        SelectedUser?.Save();
        PasswordModal?.Toggle();
    }

    private Task ShowModal(UserEntity userEntity)
    {
        SelectedUser = userEntity;
        SelectedUser.Password = "";
        PasswordModal?.Toggle();
        StateHasChanged();
        return Task.CompletedTask;
    }

}

这里解释几个地方。

一个是Lookup，这个东西还是很好用的，可以直接使用SelectedItem把Id类的东西直接转成名字，同时修改新增等等功能也会一同使用。

这里我们直接在初始化的时候拿出所有的角色转换成SelectedItem

private List<SelectedItem>? Roles { get; set; }

Roles = RoleEntity.Select.ToList().Select(x => new SelectedItem(x.Id.ToString(), x.Name!)).ToList();

然后我们只需要将User绑定的RoleId列的Lookup指向Roles就行了。

<TableColumn @bind-Field="@context.RoleId" Lookup="Roles"></TableColumn>

另一个就是修改密码的时候我偷懒了，不应该直接把整个UserEntity拿过来去掉密码字段。这里应该单独拿出密码来处理完再Update进去更好，不过例子嘛，这样写也行。

第三个就是我这里在添加新用户的时候默认使用了用户名相同的密码，这个要根据安全需求来，并且第一次是否需要改密码之类的可以都在这里处理。

代码在github:https://github.com/j4587698/BlazorLearn，分支lesson11。