Atomx/Atomx.Admin/Atomx.Admin.Client/Pages/Systems/RoleList.razor

@page "/system/role/list"
@attribute [Authorize]
@inject ILogger<RoleList> Logger

<PageTitle>角色管理</PageTitle>

<Title Level="4">角色管理</Title>

<Card Class="mt-3">
    <Table DataSource="PagingList.Items" PageSize="100" HidePagination="true" Resizable>
        <TitleTemplate>
            <Flex Justify="FlexJustify.SpaceBetween">
                角色列表
                <div>
                    <Button Class="me-3" OnClick="OnCreateClick" Type="ButtonType.Primary">新增</Button>
                </div>
            </Flex>
        </TitleTemplate>
        <ColumnDefinitions>
            <PropertyColumn Property="c => c.Name" Title="角色">
            </PropertyColumn>
            <PropertyColumn Property="c => c.Description" Title="说明" />
            <PropertyColumn Property="c => c.IsSystemRole" Title="系统" Width="80px" Align="ColumnAlign.Center">
                @if (context.IsSystemRole)
                {
                    <AntDesign.Text Type="TextElementType.Success"><Icon Type="check" Theme=" IconThemeType.Outline" Width="1.3em" Height="1.3em" /></AntDesign.Text>
                }
                else
                {
                    <AntDesign.Text Type="TextElementType.Secondary"><Icon Type="minus" Theme="IconThemeType.Outline" Width="1.3em" Height="1.3em" /></AntDesign.Text>
                }
            </PropertyColumn>
            <PropertyColumn Property="c => c.Count" Title="用户数" Width="100px" />
            <PropertyColumn Property="c => c.Enabled" Title="状态" Width="80px" Align="ColumnAlign.Center">
                @if (context.Enabled)
                {
                    <AntDesign.Text Type="TextElementType.Success"><Icon Type="check" Theme=" IconThemeType.Outline" Width="1.3em" Height="1.3em" /></AntDesign.Text>

                }
                else
                {
                    <Icon Type="close" Theme="IconThemeType.Outline" Width="1.3em" Height="1.3em" />
                }
            </PropertyColumn>

            <PropertyColumn Property="c => c.UpdateTime" Title="最后更新" Width="190px" />
            <ActionColumn Title="操作" Align="ColumnAlign.Right" Width="160px">
                <Space>
                    <SpaceItem>
                        <Button Type="ButtonType.Link" OnClick="() => OnEditPermissionClick(context)">权限管理</Button>
                    </SpaceItem>
                    <SpaceItem>
                        <Dropdown Trigger="@(new Trigger[] { Trigger.Click })">
                            <Overlay>
                                <Menu>

                                    <MenuItem>
                                        <a @onclick="(e) => OnEditClick(context)"> <Icon Type="@IconType.Outline.Edit" /> 编辑</a>
                                    </MenuItem>
                                    @if (!context.IsSystemRole)
                                    {
                                        <MenuDivider />
                                        <MenuItem>
                                            <Popconfirm Placement="@Placement.Left" Title="@("删除这条数据无法恢复，您确定要删除吗?")"
                                                        OnConfirm="@(e=>HandleDeleteConfirmAsync(e,context.Id))"
                                                        OkText="确定"
                                                        CancelText="取消">
                                                <a> <Icon Type="@IconType.Outline.Delete" /> 删除</a>
                                            </Popconfirm>
                                        </MenuItem>
                                    }
                                </Menu>
                            </Overlay>
                            <ChildContent>
                                <a class="ant-dropdown-link" @onclick:preventDefault>
                                    <Icon Type="@IconType.Outline.Menu" />
                                </a>
                            </ChildContent>
                        </Dropdown>
                    </SpaceItem>
                </Space>
            </ActionColumn>
        </ColumnDefinitions>
    </Table>
    <br />
    <Row Justify="RowJustify.End">
        <Pagination PageIndex="pager.Index" Total="PagingList.Count" PageSize="PagingList.Size" ShowSizeChanger="false" OnChange="OnPageChanged"></Pagination>
    </Row>
</Card>

<Drawer Closable="true" Width="520" Visible="drawerVisible" Title='(model.Id == 0 ? "新增角色" : "编辑角色")' OnClose="_ => CloseDrawer()">
    <Form LabelColSpan="5" @ref="@editform" Model="@model" OnFinish="OnFormFinish">
        <FluentValidationValidator />
        <FormItem Label="角色名称">
            <Input @bind-Value="model.Name" For="(()=>model.Name)" Placeholder="角色名称" />
        </FormItem>
        <FormItem Label="角色说明">
            <Input @bind-Value="model.Description" For="(()=>model.Culture)" Placeholder="角色说明" />
        </FormItem>
        <FormItem Label="可用状态">
            <Checkbox T="bool" Label="启用" @bind-value="model.Enabled" Size="InputSize.Small" Class="ps-0" />
        </FormItem>
        <FormItem WrapperColOffset="4">
            <Button Type="ButtonType.Primary" HtmlType="submit" Style="width: 100%;">保存</Button>
        </FormItem>
    </Form>
</Drawer>

@code {
    [SupplyParameterFromQuery]
    int? Page { get; set; }

    [SupplyParameterFromQuery(Name = "size")]
    int? PageSize { get; set; }

    [SupplyParameterFromForm]
    RoleSearch search { get; set; } = default!;

    [SupplyParameterFromForm]
    RoleModel model { get; set; } = default!;
    Form<RoleModel> editform = null!;

    PagingList<Role> PagingList = new();
    bool loading { get; set; } = true;

    bool drawerVisible;
    bool isSave = false;

    protected override void OnInitialized()
    {
        search ??= new RoleSearch();
        model ??= new RoleModel();
        base.OnInitialized();
    }

    protected override async Task OnParametersSetAsync()
    {
        await LoadList();
    }


    private async Task LoadList()
    {

        loading = true;
        var url = "/api/role/search";
        var apiResult = await HttpService.GetPagingList<Role>(url, search ?? new RoleSearch(), Page.GetValueOrDefault(1), PageSize.GetValueOrDefault(20));
        if (apiResult.Success)
        {
            if (apiResult.Data != null)
            {
                PagingList = apiResult.Data;
            }
        }
        loading = false;
        StateHasChanged();
    }

    private void OnSearch(int page)
    {
        var queryString = search.BuildQueryString();
        if (string.IsNullOrEmpty(queryString))
        {
            if (page > 1)
            {
                Navigation.NavigateTo($"/system/role/list?page={page}");
            }
            else
            {
                Navigation.NavigateTo($"/system/role/list");
            }
        }
        else
        {
            if (page > 1)
            {
                Navigation.NavigateTo($"/system/role/list?page={page}&{queryString}");
            }
            else
            {
                Navigation.NavigateTo($"/system/role/list?{queryString}");
            }
        }
    }

    void OnCreateClick()
    {
        model = new();
        drawerVisible = true;
    }

    void OnEditPermissionClick(Role role)
    {
        Navigation.NavigateTo($"/system/role/permission/{role.Id}");
    }

    void OnEditClick(Role role)
    {
        model = role.Adapt<RoleModel>();
        drawerVisible = true;
    }

    async Task HandleDeleteConfirmAsync(MouseEventArgs e, long id)
    {
        var url = $"/api/role/delete/{id}";
        var apiResult = await HttpService.Post<ApiResult<string>>(url, new());
        if (apiResult.Success)
        {
            await LoadList();
            await ModalService.InfoAsync(new ConfirmOptions() { Title = "操作提示", Content = "删除数据成功" });
        }
        else
        {
            await ModalService.ErrorAsync(new ConfirmOptions() { Title = "操作提示", Content = $"数据删除失败.{apiResult.Message}" });
        }
    }

    async Task OnFormFinish()
    {
        if (editform.Validate())
        {
            var apiResult = new ApiResult<string>();
            if (model != null)
            {
                if (model.Id > 0)
                {
                    var url = $"api/role/edit";
                    apiResult = await HttpService.Post<ApiResult<string>>(url, model);
                }
                else
                {
                    var url = $"api/role/add";
                    apiResult = await HttpService.Post<ApiResult<string>>(url, model);
                }
                if (apiResult.Success)
                {
                    ModalService.Success(new ConfirmOptions() { Title = "提示", Content = "数据提交成功!" });
                    CloseDrawer();
                    await LoadList();
                }
                else
                {
                    await ModalService.ErrorAsync(new ConfirmOptions() { Title = "服务异常", Content = apiResult.Message });
                }
            }
        }
        StateHasChanged();
    }

    private void OnPageChanged(PaginationEventArgs args)
    {
        OnSearch(args.Page);
    }

    void CloseDrawer()
    {
        drawerVisible = false;
        editform.Reset();
    }
}