表单渲染器

概述

表单渲染器根据 form_config 和 list_config 动态渲染表单数据的列表和详情页面，是表单引擎的前端运行时。

入口组件

form-render/index.vue

从路由获取 formCode，根据 containerType 选择渲染模式：

菜单点击 → /app/{appCode}/form-render/{code}
         → index.vue 解析 formCode
         → FormDataList 渲染列表
         → 新增/编辑/查看 → 根据 containerType 选择容器

containerType	说明
drawer	抽屉（默认）
dialog	弹窗
page	独立页面（支持新标签页）
layout	页面内条件渲染 / 路由渲染

核心组件

FormDataList（106KB）

表单数据列表的核心组件，支持表格和卡片双模式。

Props：

Prop	类型	说明
formCode	string	表单编码
showToolbar	boolean	显示工具栏
onAdd/onView/onEdit	Function	操作回调（覆盖默认行为）
initialFilters	object	初始过滤条件
defaultFormData	object	新增时默认值
selectionMode	boolean	选择模式（用于 form-selector）
heightOffset	number	高度偏移量

初始化流程：

1. loadFormMeta(formCode)          → 获取表单配置
2. loadUserPermissions()           → 获取操作权限（view/add/edit/delete/export/import）
3. loadFieldPermissions()          → 获取字段权限（write/read/hidden/masked）
4. 动态生成 tableColumns/cardFields → 根据 list_config 构建列定义
5. 加载数据 → getFormDataListApi   → 渲染列表

权限控制：

// 有效按钮 = 配置的按钮 AND 用户权限
const effectiveButtons = computed(() => ({
  showAdd: listConfig.buttons.showAdd && userPermissions.add,
  showEdit: listConfig.buttons.showEdit && userPermissions.edit,
  showDelete: listConfig.buttons.showDelete && userPermissions.delete,
  // ...
}));

表格模式：

• 使用 zq-table 组件（增强版 ElTable）
• 动态生成列（cellRenderer 处理 Tag/图片/文件/头像/链接）
• 后端排序（sortable='custom'）
• 后端过滤（filterable + filterQueryType）
• 查询表单（formSchema 动态生成）
• 分页、索引列、选择列、条纹、边框

卡片模式：

• 网格布局
• cardFields 映射（icon/title/subtitle/description/tags/footer）
• 格式化（date/datetime/money/percent/number）
• 可配置列数、间距、阴影

子表操作：

• 子表可独立配置操作按钮
• 支持 Layout 条件渲染/路由渲染/Dialog/Drawer/Page 五种展示方式
• 子表自动传递外键过滤条件和默认值

选择模式：

• 用于 form-selector 组件
• 支持单选/多选
• checkbox/radio 选择交互
• selectedValues 高亮

FormDataDialog

新增/编辑/查看弹窗容器。

Props：

Prop	类型	说明
mode	string	add / edit / view
formCode	string	表单编码
editId	string	编辑记录 ID
containerType	string	dialog / drawer
formType	string	normal / workflow
enableStartWorkflowOnAdd	boolean	新增时发起工作流
defaultFormData	object	默认数据

数据流：

编辑模式：
  loadFieldPermissions() → getFormDataApi(editId) → 回显数据
  → 用户编辑 → extractMainData() + extractSubTables()
  → updateFormDataApi()

新增模式（工作流表单）：
  填写表单 → extractMainData() + extractSubTables()
  → startWorkflowApi() → 发起流程

form-page.vue / form-layout.vue

Page 模式和 Layout 路由模式的独立页面，从路由获取 code/mode/id，使用 PreviewItem 渲染表单。

导入导出

ExportConfigDialog

导出配置对话框：

• 字段选择（勾选要导出的列）
• 子表导出开关
• 调用 POST /form-data/{code}/export/task

导入

• 下载模板（GET /form-data/{code}/import/template）
• 上传 Excel（POST /form-data/{code}/import/excel）
• label → field 自动映射

关联表单详情

点击 form-selector 类型的列链接时：

• 弹出 ZqDialog
• 加载关联表单的 form_config
• 使用 PreviewItem 只读渲染关联数据

数据查询参数

列表查询支持的参数格式：

filter_name__like=张          # 模糊匹配
filter_status__eq=active      # 精确匹配
filter_amount__gte=1000       # 大于等于
filter_date__range=2024-01-01,2024-12-31  # 范围
sort=-sys_create_datetime,name  # 多字段排序（-降序）