表单设计器

概述

表单设计器是一个可视化拖拽式工具，用于设计表单的字段布局、验证规则、交互逻辑。设计结果保存为 form_config（JSONB），供表单渲染器使用。

设计流程

表单编辑采用 4 步骤向导：

步骤1: 基础信息     → 名称、编码、类型（普通/工作流）
步骤2: 数据库配置   → 选择主表、配置从表（数据源浏览器）
步骤3: 表单设计     → 拖拽字段、配置属性（FormDesign 组件）
步骤4: 列表设计     → 查询字段、列表字段、操作按钮（ListDesign 组件）

组件结构

form-manager/
├── index.vue                    # 卡片列表入口页面
└── modules/
    ├── form-editor-modal.vue    # 4步骤向导弹窗
    ├── data-source-config.vue   # 数据源配置（步骤2）
    ├── list-design.vue          # 列表设计（步骤4）
    ├── publish-dialog.vue       # 发布配置弹窗
    └── preview-dialog.vue       # 预览弹窗

components/form-design/          # 表单设计器核心组件（步骤3）
components/form-editor/          # 表单字段编辑器

数据源配置

data-source-config.vue 提供数据库浏览和表结构配置：

• 树形浏览数据库连接 → Schema → 表
• 选择主表和从表
• 配置从表外键关系
• 支持创建新表、编辑表结构

TableConfig 类型

interface TableConfig {
  id: string;
  type: 'main' | 'sub';
  tableName: string;
  alias: string;
  foreignKey: string;        // 从表外键字段
  relatedField: string;      // 主表关联字段
  relationType: string;
  fields: TableField[];
  meta: any;
}

interface TableField {
  name: string;
  type: string;
  comment: string;
  nullable: boolean;
  isPrimaryKey: boolean;
  maxLength: number;
  precision: number;
  scale: number;
}

表单设计器 (FormDesign)

核心的拖拽式表单设计组件，支持 40+ 字段类型。

字段类型

基础字段：

类型	说明
input	单行输入
textarea	多行输入
number	数字输入
select	下拉选择
radio	单选
checkbox	多选
switch	开关
date	日期
datetime	日期时间
time	时间
date-range	日期范围

高级字段：

类型	说明
rich-text	富文本编辑器
code-editor	代码编辑器
json-editor	JSON 编辑器
file	文件上传
image	图片上传
signature	手写签名
color	颜色选择器
rate	评分
slider	滑块

关联字段：

类型	说明
user-selector	用户选择器
dept-selector	部门选择器
role-selector	角色选择器
post-selector	岗位选择器
region-selector	省市区选择（5级）
form-selector	表单数据选择器
table-selector	表数据选择器

布局组件：

类型	说明
row	栅格行
col	栅格列
tabs	标签页容器
collapse	折叠面板容器
card	卡片容器
divider	分割线
sub-table	子表格

form_config 输出

{
  "items": [
    {
      "type": "input",
      "field": "name",
      "label": "姓名",
      "required": true,
      "placeholder": "请输入姓名",
      "maxLength": 50,
      "rules": [{ "required": true, "message": "姓名不能为空" }]
    },
    {
      "type": "row",
      "children": [
        { "type": "col", "span": 12, "children": [{ "type": "date", "field": "start_date" }] },
        { "type": "col", "span": 12, "children": [{ "type": "date", "field": "end_date" }] }
      ]
    },
    {
      "type": "sub-table",
      "field": "items",
      "tableName": "order_items",
      "minRows": 1,
      "children": [
        { "type": "input", "field": "product_name", "label": "产品名称" },
        { "type": "number", "field": "quantity", "label": "数量" }
      ]
    }
  ],
  "tableConfigs": [...],
  "labelWidth": 120,
  "labelPosition": "left",
  "size": "default"
}

列表设计 (ListDesign)

list-design.vue 配置表单数据的列表展示方式。

功能

• 查询字段配置：选择哪些字段可用于搜索过滤
• 列表字段配置：拖拽排序、设置列宽、格式化、标签映射
• 展示模式：表格模式 / 卡片模式
• 容器模式：Drawer / Dialog / Page / Layout
• 操作按钮：新增 / 编辑 / 删除 / 查看 / 导出 / 导入 / 批量删除
• 子表操作按钮：子表的独立操作配置
• 自定义按钮：扩展操作
• AI 助手配置：集成 AI 助手

list_config 输出

{
  "columns": [
    { "field": "name", "label": "姓名", "width": 120, "sortable": true },
    { "field": "status", "label": "状态", "tagOptions": [...], "filterable": true }
  ],
  "queryFields": ["name", "status", "date_range"],
  "listType": "table",
  "containerType": "drawer",
  "buttons": {
    "showAdd": true,
    "showEdit": true,
    "showDelete": true,
    "showView": true,
    "showExport": true,
    "showImport": true,
    "showBatchDelete": true
  },
  "table": {
    "showIndex": true,
    "showSelection": false,
    "stripe": true,
    "border": false,
    "pageSize": 20,
    "defaultSort": { "prop": "sys_create_datetime", "order": "descending" }
  },
  "card": {
    "columnNum": 3,
    "pageSize": 12,
    "shadow": "hover"
  }
}

表单验证

formValidator.ts 提供表单验证工具：

• 必填校验
• 类型校验（邮箱、手机号、URL 等）
• 长度/范围校验
• 正则校验
• 自定义校验函数

数据处理 Hook

useFormData.ts 封装表单数据处理：

方法	说明
initFormData(formConfig)	递归初始化表单默认值
extractMainData(formData, formConfig)	提取主表数据（排除子表字段）
extractSubTables(formData, formConfig)	提取子表数据
resetFormData(formData)	重置表单数据

默认值规则：

• checkbox → []
• number → 0
• switch → false
• sub-table → [{}]（至少 minRows 行）