Skip to content

表格与运行时操作

在字段或列上配置单元格

field.cellRenderer 提供默认渲染,column.renderer 可在某个实例中覆盖。内置名称为 texttagsstatuslinkdate-timenumber,也可以直接组合对应的独立 React 组件。

ts
import type {
  RecordColumn,
  ViewFieldDefinition,
} from '@ahoo-wang/fetcher-view-engine';

const amount: ViewFieldDefinition = {
  field: 'amount',
  label: '金额',
  type: 'number',
  sortable: true,
  cellRenderer: { name: 'number' },
  numberFormat: { style: 'currency', currency: 'CNY' },
  summaryFunctions: ['SUM', 'AVG'],
};
const column: RecordColumn = {
  id: 'amount',
  kind: 'field',
  field: 'amount',
  summary: ['SUM', 'AVG'],
};

数字格式由单元格与汇总共用,计算保留原始数值。文本复制使用原始值,即使界面显示枚举标签或省略号;成功提示在 2 秒后恢复。危险链接协议呈现为文本,新标签页链接带有 noopener noreferrer

fieldrowKey 都相对于每条返回记录,例如 customer.nameitems.0.skumeta.id。返回对象的属性名不能包含点号;字段路径中的点号只作为导航分隔符,也支持数组下标。每一段只读取自有属性。表格不会自动加 state. 等后端前缀;应按实际响应结构配置路径,并独立确认后端支持对应查询字段。

列与选择

列身份、显隐、顺序、宽度、固定位置和汇总选择保存在 presentation.table.columns。主键固定左侧,操作列固定右侧。列宽通过拖动表格边界调整,列设置中没有数值宽度输入。普通列只能沿连续固定列的相邻位置固定,固定边缘显示阴影。

设置 selectable 开启选择。批处理收到的是当前已加载页的选中键,不代表整个查询匹配集。行键必须是唯一的字符串或有限数字;缺失、重复或无效键属于数据错误。

页码分页查询返回的总数若已不足以覆盖当前页,引擎会清空该页并重新查询第一页。纠正查询失败时保留查询错误,重试仍查询第一页;期间发起的新导航或查询优先。游标分页继续使用独立的游标协议。

汇总范围与失败

数字列可多选 SUM/AVG/MIN/MAX,并受 summaryFunctions 限制。“本页”汇总已加载记录,“所有”基于已应用筛选调用数据源可选的 aggregate()。选中行不会改变汇总范围。每个范围只在标签旁显示一个错误入口,展开可查看原因并重试;refreshSummary() 不会重新查询记录。缺失数字保持占位,不虚构为零。

全局运行时工具

手动刷新、自动刷新与页面展开放在顶部全局工具栏。自动刷新提供 30 秒、1 分钟、5 分钟和倒计时,不会修改已保存的查询配置。业务写入期间在页面上可传入 record.autoRefreshPaused(独立 RecordView 使用 autoRefreshPaused);页面不可见或已有工作时,运行时会阻止重叠的自动查询。

展开覆盖页面区域,Escape 退出,不调用浏览器原生 Fullscreen API。查询、汇总和操作错误各自保留对应恢复入口。后台刷新期间保留最近一次成功记录,首次加载使用 Spin,空结果使用图标。

Record View → 表格与汇总 / 运行时工具 / 布局与主题单元格 → 内置组件 验证。属性细节见组件参考

卡片布局与默认配置

通过 ViewDefinition.record.defaultPresentation.card 预设标题、可选封面、摘要字段和行操作,通过 record.defaultPresentation.table 预设表格列。本地定义和远程 JSON 使用同一契约。实例已有配置优先,切换布局不覆盖设置,也不重新查询记录。

ts
const defaultPresentation = {
  card: {
    title: { id: 'title', field: 'id' },
    fields: [
      { id: 'amount', field: 'amount', renderer: { name: 'number' } },
      { id: 'status', field: 'status' },
    ],
  },
};

将该对象放入声明了对应字段的定义。构造实例时调用 resolveRecordPresentation(definition, 'card'),或使用内置“表格/卡片”切换按钮。仅当前布局配置必填。engine.record(id).setLayout('card') 切到卡片,engine.record(id).setCardConfig(config) 修改卡片设置。切换回来恢复该模式上次已应用的配置,包括尚未保存的修改。保存同时保留布局及已配置的两种展示,重载不重新套预设。

卡片设置使用本地草稿;应用更新实例,取消丢弃草稿。行操作使用 actions: { renderer: { name: 'custom' } },或 {} 继承 definition.record.recordActions.row。隐藏只设置 visible: false,保留渲染器以便重新开启。预设只含 JSON 引用,实际组件仍注册到 extensions.cells / rowActions

标题缺失时回退记录主键,0 和 false 是有效值。封面必须引用 string 字段,值为 http/https 或相对图片地址;地址无效或图片加载失败时显示占位。卡片与表格共用本页选择。卡片不执行汇总,返回表格按配置重新计算汇总,不重新查询记录。

ViewDefinition.record.allowedLayouts 为必填的非空、不重复数组:['table']['card'] 或同时开启。仅允许一种布局时,顶部不显示切换入口;引擎和实例加载均拒绝未允许的活动布局。切换保留各模式配置。卡片使用右上角选择按钮(aria-pressed),不占独立行;自定义内容应避让该角标。顶部通用操作使用图标及提示,菜单保留文字。

共享记录工具栏提供排序入口,以规则列表从上到下确定优先级,支持拖动/键盘调整、添加、移除和清除全部;与表头使用同一个 instance.config.sort,仅允许 Card 时仍可使用。同一分页查询的手动刷新保留已有记录,避免卸载行操作;筛选、排序、翻页和游标刷新仍重新加载。

基于 Apache License 2.0 发布。