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

@page "/site/list"
@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;margin-top:-3%;">
            <div class="filter_row" style="width:50%">
                <span>站名</span><Input Placeholder="请输入要查找的站名" @bind-Value="filterData.siteName" Style="width:75%" />
            </div>
        </div>

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

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

    <Table class="compact-table" @ref="_Table" TItem="SiteOutput" DataSource="_DataSource" PageSize="filterData.pageSize" Total="Total"
           OnChange="OnChange">
        <ColumnDefinitions Context="row">
            <PropertyColumn Property="c => c.Name" Title="站名" />
            <PropertyColumn Property="c => c.Address" Title="地址" />
            <PropertyColumn Property="c => c.ParentName" Title="归属集团" />
            <PropertyColumn Property="c => c.Contact" 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;
    }

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

    .compact-table {
            min-height:30vh;
     }

    .compact-table .ant-table-thead > tr > th,
    .compact-table .ant-table-tbody > tr > td {
        padding: 6px 8px; 
        font-size: 12px; 
        line-height: 1.2;
    }

    .compact-table .ant-btn {
        height: 24px; 
        padding: 0 8px;
        font-size: 12px;
    }

</style>