拖拽式表单设计
直观的拖拽式表单设计器，让您轻松创建各种复杂表单，无需编写代码。支持实时预览，所见即所得。
- 拖拽操作 - 从组件库拖拽到设计区域即可
- 实时预览 - 设计过程中实时查看效果
- 多种布局 - 支持单列、多列、栅格布局
- 快速复制 - 支持组件复制和批量操作
- 撤销重做 - 支持操作历史记录
丰富的组件库
提供30+种表单组件，涵盖各种常见和高级表单元素，满足各种业务场景需求。
- 基础组件 - 单行文本、多行文本、数字输入、静态文本、分隔符
- 选择组件 - 下拉选择、单选框、多选框、开关、滑块、评分、颜色选择器
- 日期时间 - 日期选择器、时间选择器、日期时间选择器
- 上传组件 - 文件上传、图片上传，支持多文件上传
- 高级组件 - 富文本编辑器、表格、自动完成、级联选择、城市选择器
- 布局组件 - 栅格布局、插槽组件
- 自定义组件 - 支持开发和集成自定义组件
每个组件都支持丰富的配置：
- 标题、占位符、默认值
- 显示/隐藏控制
- 宽度、样式自定义
- 数据校验规则
- 计算公式和联动
- 内置参数高级配置
计算公式与数据联动
强大的计算公式功能，支持复杂的数据联动和自动计算，让表单更加智能。
- 公式计算 - 支持数学运算、逻辑判断、字符串处理
- 数据联动 - 组件之间可以相互引用和联动
- 远程函数 - 支持调用后端接口获取数据
- 本地函数 - 内置常用函数，如百分比转换、四舍五入等
- 表格计算 - 表格内支持行列汇总、公式计算
- 全局触发器 - 表单变更时自动触发计算和联动
示例场景：
- 订单金额 = 单价 × 数量
- 根据商品ID自动填充商品信息
- 根据部门选择自动筛选人员列表
- 表格自动计算合计、平均值
强大的表格组件
功能完善的表格组件，支持动态行、数据联动、公式计算等高级功能。
- 动态行 - 支持添加、删除、复制行
- 多种列类型 - 支持文本、数字、日期、选择、上传等列类型
- 列内公式 - 每列都可以设置计算公式
- 数据联动 - 表格内外数据可以相互联动
- 数据验证 - 支持单元格级别的数据验证
- 汇总统计 - 支持列汇总、行汇总
- 导入导出 - 支持Excel导入导出
- 样式定制 - 支持自定义表格样式
响应式设计
生成的表单自动适配各种设备，提供最佳的用户体验。
- 自适应布局 - 自动适配不同屏幕尺寸
- 移动端优化 - 针对移动端优化交互体验
- 触摸友好 - 支持触摸操作
- 多端预览 - 设计时可预览PC、平板、手机效果
- 独立配置 - 支持为不同设备设置不同的布局参数
高级功能
提供多种高级功能，满足复杂业务场景需求。
- 全局触发器 - 表单变更时自动触发自定义逻辑
- 按钮事件 - 按钮组件支持自定义点击事件
- 内置参数 - 支持配置组件的高级参数
- 插槽组件 - 支持插入自定义Vue组件
- 远程数据源 - 支持从后端API获取数据
- 默认值函数 - 支持通过函数动态生成默认值
- 数据回收站 - 删除的组件可以恢复
示例代码：
// 全局表单变更触发器
({
"default": function ({
nowFormItemSet, // 当前表单设置
nowValue, // 当前值
Models, // 表单全部值
FormConfig, // 表单设置
RecursiveFormList, // 转换工具
HttpRequest // http访问函数
}) {
// 根据条件隐藏/显示组件
RecursiveFormList(FormConfig.list, (ele) => {
if (ele.key == 'target_key') {
ele.hide = nowValue === 'hide';
}
});
// 调用后端接口填充数据
if (nowFormItemSet.key == 'product_id') {
HttpRequest({
url: '/api/product/detail',
data: { id: nowValue },
method: 'post'
}).then(({ data }) => {
Models['product_name'] = data.name;
Models['product_price'] = data.price;
});
}
}
})