UserPointManagement/src/UserPointManagement.Web/Pages/UserManagement/UserManagement.razor

137 lines
3.7 KiB
Plaintext

@inherits MyAntDesignAppServer.Pages.UserManagement.UserManagementBase
@page "/"
@using UserPointManagement.Application.Services
@using UserPointManagement.Model.Dtos
@using UserPointManagement.Model.Entities
@using System.ComponentModel.DataAnnotations
@using System.Text.Json
@inject IJSRuntime JS
@inject IUserService UserService;
<PageContainer Title="用户管理">
<GridRow Style="margin: 10px 0">
<GridCol Span="12">
<Space Direction="@DirectionVHType.Horizontal">
<SpaceItem>
<Search Placeholder="姓名或手机号" WrapperStyle="width: 200px;" OnSearch="OnSearch" ClassicSearchIcon/>
</SpaceItem>
</Space>
</GridCol>
<GridCol Span="12">
<Space Direction="@DirectionVHType.Horizontal" Style="display: flex; justify-content: flex-end">
<SpaceItem>
<Button type="primary" OnClick="@ShowModal">新增用户</Button>
</SpaceItem>
</Space>
</GridCol>
</GridRow>
<Table TItem="User" DataSource="@_users"
Total="_total"
Loading="_loading"
PageIndex="@_pageIndex"
PageSize="@_pageSize"
OnPageIndexChange="OnPageIndexChanged"
OnPageSizeChange="OnPageSizeChange">
<PropertyColumn Property="c => c.Name" title="姓名"/>
<PropertyColumn Property="c => c.Mobile" title="手机号" Width="80"/>
<ActionColumn Title="操作" Width="220">
<Space Size=@("middle")>
<SpaceItem>
<button>编辑</button>
</SpaceItem>
</Space>
</ActionColumn>
</Table>
</PageContainer>
<Modal Title="@("新增用户")"
Visible="@_visible"
OnOk="@HandleOk"
OnCancel="@HandleCancel">
<Form Loading="loading" Model="@model"
LabelColSpan="8"
WrapperColSpan="16"
OnFinish="OnFinish"
OnFinishFailed="OnFinishFailed"
@ref="@_form">
<FormItem Label="姓名">
<Input @bind-Value="@context.Name" />
</FormItem>
<FormItem Label="手机号">
<Input @bind-Value="@context.Mobile" />
</FormItem>
</Form>
</Modal>
@code {
#region original form coding
public class Model
{
[Required]
public string Name { get; set; }
public string Mobile { get; set; }
}
private Model model = new Model();
private void OnFinishFailed(EditContext editContext)
{
Console.WriteLine($"Failed:{JsonSerializer.Serialize(model)}");
}
bool loading = false;
void toggle(bool value) => loading = value;
#endregion
#region original modal coding
bool _visible = false;
private void ShowModal()
{
_visible = true;
}
private void HandleCancel(MouseEventArgs e)
{
_visible = false;
}
#endregion
/*
* Careful!
*
* next bind submit event to modal OK button
*/
private Form<Model> _form;
/// <summary>
/// when form is submited, close the modal
/// </summary>
/// <param name="args"></param>
private void OnFinish(EditContext editContext)
{
Console.WriteLine("e");
_visible = false;
}
/// <summary>
/// on modal OK button is click, submit form manually
/// </summary>
/// <param name="e"></param>
private async Task HandleOk(MouseEventArgs e)
{
_form.Submit();
await UserService.CreateUser(new User()
{
Name = model.Name,
Mobile = model.Mobile
}).ConfigureAwait(false);
await RefreshTable().ConfigureAwait(false);
}
}