AISln/Platform/AI.Platform.Page/Pages/Site/Screen.razor

@page "/site/screen"
@using AI.Platform.Core.Entity.Site
@using AI.Platform.Page.Pages.Site.Model
@attribute [ReuseTabsPage(Title = "设备管理")]

<Spin Spinning="Loading">
    <div  class="filter_box">
        <div class="filter_row" style="justify-content:start">
            <span>站名</span><Input Placeholder="请输入要查找的站名" @bind-Value="filterData.siteName" Style="width:30%" />
            <span>设备码</span><Input Placeholder="请输入要查找的设备码" @bind-Value="filterData.sn" Style="width:30%" />
        </div>

        <div class="filter_row" style="justify-content:start">
            <Button Icon="search" OnClick="Query" Style="margin-right:2%">查询</Button>
            <Button Icon="reload" OnClick="HandleReset" Style="margin-right:2%">重置</Button>
            <Button Icon="upload" OnClick="@(() => ShowDialog(1, null))">新增</Button>
        </div>
    </div>

    <UpdateScreenDialog onCallback="OnDialogCallback" onVisibleCallback="OnDialogVisibleCallback" @bind-IsVisible="isOpen" @bind-model="model" />

    <Table @ref="_Table" AutoHeight TItem="SnInfo" DataSource="_DataSource" PageSize="filterData.pageSize" Total="Total"
    OnChange="OnChange">
        <ColumnDefinitions Context="row">
            <PropertyColumn Property="c => c.siteName" Title="站名" />
            <PropertyColumn Property="c => c.sn" Title="设备码" />
            <PropertyColumn Property="c => c.CreateTime" Title="创建时间" />
            <PropertyColumn Property="c => c.EditTime" Title="修改时间" />
            <PropertyColumn Property="c => c.Remark" Title="备注" />

            <ActionColumn Width="180" Title="操作" Fixed="ColumnFixPlacement.Right">
                <Button Type="ButtonType.Primary" Color="Color.Blue6" OnClick="@(() => ShowDialog(2, row))">编辑</Button>
                <Button Type="ButtonType.Primary" Color="Color.Red6" OnClick="@(() => ShowDialog(3, row))">删除</Button>
            </ActionColumn>
        </ColumnDefinitions>

        <PaginationTemplate>
            <Pagination Class="@(context.PaginationClass + " my-custom-pagination")"
                        Total="Total"
                        PageSize="filterData.pageSize"
                        Current="filterData.currentPage"
                        ShowSizeChanger="true"
                        ShowQuickJumper="true"
                        OnChange="OnPageChange"
                        ShowTotal="showTotal" />
        </PaginationTemplate>
    </Table>
</Spin>

<style>
    .filter_box{
        display:flex;
        flex-direction:column;
        align-items:center;
        background:#ffffff;
        padding:2%;
    }

    .filter_row{
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
        width:100%;
        margin-top:2%;
    }

</style>