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

@page "/system/locale/resource/list/{Id:int}"
@inject ILogger<LocaleResourceList> Logger
@attribute [Authorize]


<PageTitle>本地化语言资源</PageTitle>
<Title Level="4">多语言本地资源管理</Title>
<Spin Spinning="loading">
    <Card>
        <Form @ref="searchForm" Model="search" Layout="FormLayout.Inline" Class="search-form" OnFinish="OnSearchFinish">
            <Row Justify="RowJustify.Start" Gutter="16">
                <Col>
                <FormItem Label="名称">
                    <Input @bind-Value="search.Name" Placeholder="名称" AllowClear />
                </FormItem>
                </Col>
                <Col>
                <FormItem Label="内容">
                    <Input @bind-Value="search.Value" Placeholder="名称" AllowClear />
                </FormItem>
                </Col>
                <Col>
                <div class="ant-form-item" style="width:200px;display:flex;">
                    <Button Type="ButtonType.Primary" HtmlType="submit">查询</Button>
                    <Button Style="margin: 0 8px;" OnClick="OnSearchReset">重置</Button>
                </div>
                </Col>
            </Row>
        </Form>
    </Card>
    <br />
    <Card Class="mt-3">
        <Table DataSource="PagingList.Items" PageSize="100" HidePagination="true" Resizable>
            <TitleTemplate>
                <Flex Justify="FlexJustify.SpaceBetween">
                    @(@language.Name)语言资源列表
                    <div>
                        <Button Class="me-3" OnClick="OnCreateClick" Type="ButtonType.Primary">新增</Button>
                    </div>
                </Flex>
            </TitleTemplate>
            <ColumnDefinitions>
                <PropertyColumn Property="c => c.Name" Title="资源Key">
                </PropertyColumn>
                <PropertyColumn Property="c => c.Value" Title="内容">

                </PropertyColumn>
                <PropertyColumn Property="c => c.UpdateTime" Title="最后更新" Width="120px" />
                <ActionColumn Title="操作" Align="ColumnAlign.Right" Width="120px">
                    <Space>
                        <SpaceItem>
                            <a @onclick="(e) => OnEditClick(context)"> <Icon Type="@IconType.Outline.Edit" /> 编辑</a>
                        </SpaceItem>
                        <SpaceItem>
                            <Dropdown Trigger="@(new Trigger[] { Trigger.Click })">
                                <Overlay>
                                    <Menu>

                                        <MenuItem>
                                            <a href="@($"/system/locale/resource/detail/{context.Name}")"> <Icon Type="@IconType.Outline.Edit" /> 其他语言比对</a>
                                        </MenuItem>
                                        <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>
</Spin>

<Modal Title="@("语言资源设置")" Visible="@modalVisible" Width="700" MaskClosable="true" OkText="@("保存")" CancelText="@("取消")" OnOk="@HandleModalOk" OnCancel="@HandleCancel">
    <Form Model="@model" @ref="@editform" LabelCol="new ColLayoutParam { Span = 5 }" WrapperCol="new ColLayoutParam { Span = 15 }" Name="modalForm" OnFinish="OnFormFinish">
        <FluentValidationValidator />
        <FormItem Label="语言文字">
            @language.Name
        </FormItem>
        <FormItem Label="资源名称">
            <Input Placeholder="资源名称" @bind-Value="@context.Name" />
        </FormItem>
        <FormItem Label="资源内容">
            <TextArea Placeholder="资源内容" @bind-Value="@context.Value" />
        </FormItem>
    </Form>
</Modal>

@code {

    bool loading = false;

    [Parameter]
    public int Id { get; set; }

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

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

    [SupplyParameterFromForm]
    LocaleResourceSearch search { get; set; } = default!;
    Form<LocaleResourceSearch> searchForm = null!;

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

    Language language = new();
    PagingList<LocaleResource> PagingList = new();

    bool modalVisible = false;

    protected override void OnInitialized()
    {
        search ??= new LocaleResourceSearch() { LanguageId = Id };
        model ??= new LocaleResourceModel() { LanguageId = Id };
        base.OnInitialized();
    }

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

    private async Task LoadLanguage()
    {
        var url = $"/api/language/{Id}";
        var apiResult = await HttpService.Get<ApiResult<Language>>(url);
        if (apiResult.Success)
        {
            if (apiResult.Data != null)
            {
                language = apiResult.Data;
            }
        }
    }

    private async Task LoadList()
    {
        loading = true;

        var url = $"/api/localeresource/search";

        var apiResult = await HttpService.GetPagingList<LocaleResource>(url, search, Page.GetValueOrDefault(1), PageSize.GetValueOrDefault(20));
        if (apiResult.Success)
        {
            if (apiResult.Data != null)
            {
                PagingList = apiResult.Data;
            }
        }

        loading = false;
        StateHasChanged();
    }

    void OnSearchFinish()
    {
        Page = Page.GetValueOrDefault(1) - 1;

        OnSearch(Page.Value);
    }

    void OnSearchReset()
    {
        search = new() { LanguageId = Id };
        searchForm?.Reset();
        OnSearchFinish();
    }

    void OnCreateClick()
    {
        Console.WriteLine("OnCreateClick");
        model = new() { Culture = LanguageCulture.zhHans, LanguageId = Id };
        modalVisible = true;
    }

    void OnEditClick(LocaleResource data)
    {
        this.model = data.Adapt<LocaleResourceModel>();
        modalVisible = true;
    }

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

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

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

    void HandleModalOk()
    {
        editform.Submit();
    }

    async Task OnFormFinish()
    {
        if (editform.Validate())
        {
            var result = new ApiResult<bool>();

            var url = $"api/localeresource/save";
            result = await HttpService.Post<ApiResult<bool>>(url, model);

            if (result.Success)
            {
                modalVisible = false;
                _ = LoadList();
            }
            else
            {
                await ModalService.ErrorAsync(new ConfirmOptions() { Title = "服务异常", Content = result.Message });
            }
        }
    }

    void HandleCancel()
    {
        modalVisible = false;
    }
}