从零开始Blazor Server(10)--编辑角色

例图

目前的样式是这样的：

其中角色在一个table里，然后可以增删改查，并且可以给指定的用户分配权限。

创建文件

首先我们在Pages/Admin目录下新建一个Role.razor。因为我们的Admin目录已经使用了_Import来给整个文件夹添加了授权特性，所以我们就无需再次添加了。

添加table

这里添加一个table来显示所有的角色。

<Table TItem="RoleEntity" IsBordered="true" ShowAddButton="true" ShowToolbar="true"
       ShowExtendButtons="true" ShowDeleteButtonCallback="entity =>  entity.Id != 1"
       OnQueryAsync="OnQueryAsync" OnSaveAsync="OnSaveAsync">
    <TableColumns>
        <TableColumn @bind-Field="@context.Name">TableColumn>
    TableColumns>
    <RowButtonTemplate>
        <TableCellButton Color="Color.Success" Icon="fa fa-edit" Text="编辑权限" OnClick="() => RoleClick(context)">TableCellButton>
    RowButtonTemplate>
Table>

这里稍微解释一下这个Table。

ShowAddButton="true" ShowToolbar="true"让table显示工具栏并且显示添加按钮。

ShowExtendButtons="true"显示每行的扩展按钮。

ShowDeleteButtonCallback="entity => entity.Id != 1"这个注意一下，我们要保留一个管理员权限不能删除，所以我们这里强制让RoleId=1的列不显示删除按钮，这样我们就不能删除这一列了。

OnQueryAsync="OnQueryAsync" OnSaveAsync="OnSaveAsync"这两个方法一个是查询时使用的，返回数据。一个是保存时使用的，修改的数据入库。

这里我们新增一个按钮，这个按钮就叫编辑权限，里面我们可以给这个角色赋权。

编写方法

OnQueryAsync:

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

这里没啥说的，就是使用分页参数来分页，并且返回总行数和分页数据。这里我们不涉及搜索之类的高级选项，所以整体非常简单。

OnSaveAsync：

private Task<bool> OnSaveAsync(RoleEntity arg1, ItemChangedType arg2)
    {
        arg1.Save();
        return Task.FromResult<bool>(true);
    }

这个处理更简单，直接Save就好了。

RoleClick:

private void RoleClick(RoleEntity roleEntity)
    {
        RoleEntity = roleEntity;
        Menus = CascadingTree(MenuEntity.Select.ToList(), roleEntity.Permissions, new TreeViewItem<MenuEntity>(new MenuEntity())).ToList();
        RoleModal?.Toggle();
    }
    
    private IEnumerable<TreeViewItem<MenuEntity>> CascadingTree(IEnumerable<MenuEntity> items, IEnumerable<MenuEntity>? selectedItems, TreeViewItem<MenuEntity> parent) => items.Where(i => i.ParentId == parent.Value.Id).Select(i =>
    {
        var item = new TreeViewItem<MenuEntity>(i)
        {
            Text = i.Name,
            Icon = i.Icon,
            Value = i
        };
        item.Items = CascadingTree(items, selectedItems, item).ToList();
        item.Parent = parent;
        if (selectedItems?.Any(x => x.Id == i.Id) == true)
        {
            item.CheckedState = CheckboxState.Checked;
        }
        return item;
    });

这里的分配权限点击后有两个事要做，一个是获取到所有的Menu，并且做成TreeItem的List，并且根据本身的权限给tree进行勾选。另一个就是打开Modal。

添加Modal

这里我们直接使用Modal来做了，理解起来相对比较简单，如果是正式项目，建议还是使用Dialog来做，更清晰一些。

这里我们在项目里继续加上Modal

<Modal @ref="RoleModal">
    <ModalDialog Title="编辑权限">
        <BodyTemplate>
            <TreeView TItem="MenuEntity" Items="@Menus" ShowCheckbox="true" AutoCheckParent="true" AutoCheckChildren="true">TreeView>
        BodyTemplate>
        <FooterTemplate>
            <Button OnClick="SavePermission">保存Button>
        FooterTemplate>
    ModalDialog>
Modal>

这个Modal只有一个功能，就是在Save的时候获取到所有的已勾选权限，存库。

private void SavePermission()
    {
        if (RoleEntity == null)
        {
            return;
        }
        var menus = new List();
        SaveRole(Menus!.Where(x => x.CheckedState != CheckboxState.UnChecked), menus);
        RoleEntity.Permissions = menus;
        RoleEntity.SaveMany(nameof(RoleEntity.Permissions));
        RoleModal?.Toggle();
    }

    private void SaveRole(IEnumerable> items, List menus)
    {
        menus.AddRange(items.Select(x => x.Value));
        foreach (var treeViewItem in items)
        {
            if (treeViewItem.Items.Any(x => x.CheckedState != CheckboxState.UnChecked))
            {
                SaveRole(treeViewItem.Items.Where(x => x.CheckedState != CheckboxState.UnChecked), menus);
            }
        }
    }

代码在Github：https://github.com/j4587698/BlazorLearn，分支lesson10。