012. 通用业务表格平台

学习目标

这一节介绍第一个实战项目里的核心能力：通用业务表格。

学完后，你应该能理解：

• 为什么后台系统里表格能力很重要；
• Ant Design 表格为什么还需要业务封装；
• 新建、编辑、删除、查询为什么要做成通用能力；
• 行内编辑和表单编辑适合不同场景；
• 复杂查询为什么需要后端配合；
• AI 如何参与表单填写和批量创建。

后台系统离不开业务表格

很多企业系统的核心页面，本质上都是表格：

• 项目管理；
• 用户管理；
• 订单管理；
• 报销单管理；
• 商品管理；
• 客户资料管理；
• 审批记录管理。

前端可以直接用 Ant Design 的 Table，但真实业务往往不只是展示数据。

常见需求包括：

• 新建一条数据；
• 批量新建；
• 编辑单行数据；
• 批量编辑；
• 删除数据；
• 查询数据；
• 按字段筛选；
• 按多个字段排序；
• 根据字段配置调整显示。

这些能力如果每个页面都重新写一遍，代码会越来越重复。

行内编辑和表单编辑

编辑数据有两种常见方式。

字段少的时候，行内编辑更直接：

• 用户不用离开表格；
• 哪一行要改就改哪一行；
• 适合少量字段快速调整。

字段多的时候，表单编辑更清晰：

• 可以按区域组织字段；
• 校验信息更明显；
• 适合复杂对象；
• 移动端或窄屏也更好处理。

所以通用表格不只封装 Table，还要同时支持行内编辑和表单编辑。

查询能力不能只靠前端

简单搜索可以在前端做，但复杂查询必须后端支持。

例如：

• 项目预算在 60 万到 80 万之间；
• 某个字段包含多个关键词；
• 日期在某个范围内；
• 多个条件同时生效；
• 查询后还要分页、排序。

如果数据量很大，前端拿不到全部数据，也不应该在浏览器里自己过滤。

所以通用表格背后还要有通用查询接口。前端把查询条件组织成结构化参数，后端按这些参数生成对应查询。

通用增删改查接口

项目里不希望每张表都手写一套接口。

更理想的方式是：只要建好表，后端就能按表结构提供通用的增删改查能力。

这类封装要处理：

• 创建数据；
• 批量创建；
• 编辑数据；
• 批量编辑；
• 删除数据；
• 分页查询；
• 字段筛选；
• 排序；
• 范围查询。

对前端开发者来说，可以把它理解成一套更通用的后端数据服务。前端页面不再强依赖某一个固定接口，而是通过统一规则描述要操作哪张表、哪些字段和哪些条件。

AI 智能填写表单

AI 能力会接入表单编辑。

传统表单需要用户一个字段一个字段填。AI 填写表单的思路是：

1. 用户输入一段自然语言；
2. 前端把当前表单字段和用户文本发给模型服务；
3. 模型理解文本里有哪些信息；
4. 模型返回结构化字段值；
5. 前端把字段值自动填回表单。

这对字段多、用户输入不规则的场景很有用。

例如用户只写一句“给项目 A 新增一个预算 70 万、负责人张三的记录”，系统就可以尝试把项目名、预算、负责人等字段填出来。

AI 批量创建数据

智能填写不只用于单条数据。

如果用户复制一大段文本、表格内容，甚至后续上传图片或 PDF，AI 可以先解析其中的信息，再生成多条结构化数据。

这个能力的目标是减少手工录入。

但要注意：AI 负责把非结构化信息转换成结构化信息，最终写入数据库前仍然需要前端展示、用户确认、后端校验。

排序和字段配置

普通表格通常只支持单字段排序。

业务表格可能需要更强的排序和显示配置：

• 多字段排序；
• 升序 / 降序切换；
• 字段显示和隐藏；
• 固定列；
• 调整列顺序；
• 保存用户偏好的字段配置。

这些能力看起来像前端交互，但背后会影响查询参数、接口设计和用户使用效率。

这个项目要练什么

通用业务表格不是一个简单组件，而是一个前端、后端、AI 能力合在一起的项目。

它会练到：

• Ant Design 表格封装；
• 表单编辑封装；
• 通用 CRUD 接口；
• 通用查询表达式；
• 多字段排序；
• AI 表单填写；
• AI 批量创建；
• 模型服务抽象。

如果你只有 JS 经验，可以先把它理解成“高级后台管理系统组件”。后面再逐步看清它如何和后端、数据库、模型服务连接起来。