AdminFilePicker 组件
功能概述
AdminFilePicker 是一个文件选择器组件,提供以下功能:
- 文件分组管理(添加/选择分组)
- 文件列表展示与分页
- 文件上传(支持多文件)
- 文件删除(支持多选删除)
- 文件重命名选项
- 文件选择回调
UI结构
<div id="fileDialog">
<Card class="filebox">
<!-- 头部:标题 -->
<HeaderTemplate>文件选择</HeaderTemplate>
<!-- 主体:左右分栏 -->
<BodyTemplate>
<Split Basis="200px">
<!-- 左侧:分组树 -->
<FirstPaneTemplate>
<h5>分组 <a @onclick="OpenGroupInput">添加分组</a></h5>
<TreeView Items="@groups" OnTreeItemClick="@OnTreeItemClick"/>
</FirstPaneTemplate>
<!-- 右侧:文件列表 -->
<SecondPaneTemplate>
<ListView @ref="child" TItem="SysFile" IsPagination>
<!-- 列表头部:操作区 -->
<HeaderTemplate>
<ButtonUpload @ref="buttonUpload" IsMultiple ShowProgress/>
<Switch @bind-Value="fileReName"/>
<Button @onclick="OnDeleteFiles"/>
</HeaderTemplate>
<!-- 列表项:文件展示 -->
<BodyTemplate>
<img src="@context.LinkUrl" @onclick="OnListViewItemClick"/>
<p>@context.FileName</p>
<Checkbox @bind-Value="context.IsSelect"/>
</BodyTemplate>
</ListView>
</SecondPaneTemplate>
</Split>
</BodyTemplate>
<!-- 底部:取消按钮 -->
<FooterTemplate>
<Button OnClick="OnCloseFilePicker">取消</Button>
</FooterTemplate>
</Card>
</div>
核心方法
文件查询
async Task<QueryData<SysFile>> OnQueryAsync(QueryPageOptions options)
{
// 根据选择的分组筛选文件
var select = repo.Select
.WhereIf(selectTree != null, x => x.LinkUrl.Contains(selectTree.Text))
.OrderByDescending(x => x.CreatedTime)
.Page(options.PageIndex, options.PageItems);
return new QueryData<SysFile>(){
Items = await select.ToListAsync(),
TotalCount = await select.CountAsync()
};
}
文件上传
async Task OnClickToUpload(UploadFile file)
{
if(file != null){
var result = await fileService.UploadFileAsync(file, selectTree?.Text, fileReName);
if(result != null) file.PrevUrl = result.LinkUrl;
uploadFiles.Add(file);
}
}
文件删除
async Task OnDeleteFiles()
{
var selectIdList = child.Items.Where(x => x.IsSelect);
if(await SwalService.ShowModal(...) == false) return;
foreach(var item in selectIdList){
await fileService.DeleteAsync(item.Id);
}
await child.QueryAsync();
}
数据绑定
groups
: 文件分组列表selectTree
: 当前选中的分组fileReName
: 是否重命名文件uploadFiles
: 上传中的文件列表
依赖服务
IAggregateRootRepository<SysFile>
: 文件数据访问FileService
: 文件操作服务SwalService
: 确认对话框服务