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: 确认对话框服务