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

@page "/media/list"
@using AI.Platform.Core.Entity.Media
@using AI.Platform.Page.Pages.Media.Model;
@attribute [ReuseTabsPage(Title = "广告列表")]

<Spin Spinning="Loading">
    <div  class="filter_box">
        <div class="filter_row">
            <span>文件名</span><Input Placeholder="请输入要查找的文件名" @bind-Value="filterData.searchFileName" Style="width:30%" />
            <span>操作人</span><Input Placeholder="操作人" @bind-Value="filterData.searchMediaUploader" Style="width:30%" />
        </div>
        
        <div class="filter_row">
            <span>广告状态</span>
            <SimpleSelect OnSelectedItemChanged="OnSelectItemChange" Style="width:30%">
                <SelectOptions>
                    <SimpleSelectOption Value="-1" Label="全部" style="width:30%" />
                    <SimpleSelectOption Value="0" Label="禁用" style="width:30%" />
                    <SimpleSelectOption Value="1" Label="可用" style="width:30%" />
                </SelectOptions>
            </SimpleSelect>

           <span>油机状态</span>
            <SimpleSelect Mode="SelectMode.Multiple" OnSelectedItemsChanged="OnSelectItemsChange" style="width:30%">
                <SelectOptions>
                    <SimpleSelectOption Value="idle" Label="空闲" />
                    <SimpleSelectOption Value="lock" Label="锁枪" />
                    <SimpleSelectOption Value="offline" Label="脱机" />
                    <SimpleSelectOption Value="lift" Label="提枪" />
                    <SimpleSelectOption Value="authorised" Label="授权" />
                    <SimpleSelectOption Value="start" Label="开始" />
                    <SimpleSelectOption Value="fueling" Label="加油中" />
                </SelectOptions>
            </SimpleSelect>
        </div>

        <div class="filter_row">
            <span>有效时间段</span><RangePicker TValue="DateTime?[]" OnChange="@(date => onDateChage(date, 1))" style="width:30%" />
            <span>更新时间</span><RangePicker TValue="DateTime?[]" OnChange="@(date => onDateChage(date, 2))" style="width:30%" />
        </div>
        
        <div class="filter_row">
            <span>播放时段</span><RangePicker TValue="DateTime?[]" OnChange="@(date => onDateChage(date, 3))" Picker="DatePickerType.Time" Format="@("HH")" style="width:30%" />
            <span>油站</span><Input Placeholder="油站" @bind-Value="filterData.searchSiteName" 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>

    <UpdateMediaDialog onCallback="OnDialogCallback" onVisibleCallback="@((data) => OnDialogVisibleCallback(1,data))" @bind-IsVisible="isOpen" @bind-model="model" />
    <MediaPreview onVisibleCallback="@((data) => OnDialogVisibleCallback(2, data))" @bind-IsVisible="isPreviewOpen" @bind-media="previewModel" />


    <Table @ref="_Table" AutoHeight TItem="MediaInfoModel" DataSource="_DataSource" PageSize="filterData.pageSize" Total="Total"
    OnChange="OnChange">
        <ColumnDefinitions Context="row">
            <PropertyColumn Property="c => c.FileName" Title="文件名" />
            <PropertyColumn Property="c => c.MediaUploader" Title="操作人" />
            <PropertyColumn Property="c => c.SiteName" Title="油站" />
            <PropertyColumn Property="c=>c.MediaState" Title="文件状态">
                @{
                    var tag = row.MediaState == 1 ? "可用" : "禁用";
                    var color = row.MediaState == 1 ? TagColor.Green : TagColor.Red;
                }
                <Tag Color="@color">@tag</Tag>
            </PropertyColumn>
            <PropertyColumn Property="c => Utils.MachineStateJsonToString(c.MachineStateList)" Title="油机状态" />
            <PropertyColumn Property="c => c.StartTime" Title="播放时段">
                @{
                    var tag = $"{row.StartTime}-{row.EndTime}";
                }
                <Tag>@tag</Tag>
            </PropertyColumn>
            <PropertyColumn Property="c => Utils.JoinDateTime(c.EffecitiveTime,c.FailureTime)" 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="@(() => ShowPreviewDialog(row))">预览</Button>
                <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>