发布即封神!5.6k Star的表单设计工具，维护6年了，终于出大招了！
在数字化成为现代生活与工作常态的今天，表单设计工具开始发挥越来越重要的作用。优秀的表单设计工具，不仅能提高工作效率、简化复杂性、提升用户体验，还易于维护、更新，并支持多平台甚至无代码开发。
表单设计工具广泛应用于多个领域，包括但不限于网站开发、企业内部系统、电子商务平台、教育行业、医疗行业、市场调研以及政府服务。在这些领域中，无论行业性质如何，只要存在信息收集和整理的需求，表单设计工具都能发挥其关键作用。
对于程序员来说，一个优秀的表单设计器无疑是个得力助手。它能帮助他们节省编写和测试表单的时间，简化复杂的代码编写工作，提供丰富的UI元素和交互组件，提升用户体验。更为重要的是，这样的工具通常具有模块化和组件化的设计，使得表单的维护更新变得更为方便。
今天给大家带来一款优秀的表单设计器，开源6年，目前用户超40万+，GitHub目前5.6K star，一款超能打的表单设计器。
GitHub 地址：
FormCreate是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持5个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。
是一款基于Vue3.0的低代码可视化表单设计器工具，通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。
FormCreate近期发布的FormCreate设计器Pro版更是强的离谱。
接下来，让我们一起走近 FormCreate设计器Pro版这款强大的设计工具
- 介绍
FormCreate设计器Pro版一款基于Vue3.0的低代码可视化表单设计器工具，通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。目前，在OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。
项目采用Vue3.0 和 ElementPlus 进行页面构建，内置多语言解决方案，支持二次扩展开发，支持自定义组件扩展。
项目分为设计器 form-create-designer 和 渲染器 form-create，用户可以通过可视化界面快速高效地创建表单，并输出为JSON。并且通过加载JSON，渲染器可以渲染并输出相应的表单。
- 特性
- 国际化
产品充分考虑了全球化需求，内置了中文、英文和日文三种语言选项，无论是在对外交流还是跨国业务进行中都可提供强大的语言支持，使您在应对全球化的过程中无忧无虑，轻松自如。
- 绑定事件
产品提供了可配置的组件和表单事件功能，为您处理各种动态交互提供了便利。无论用户需求何种复杂度与多样性，我们都能迎刃而解，提供满足使用者需求的解决方案。
- 丰富的组件
产品内置了45种常用组件，广泛覆盖多种场景需求，以满足不同的用户需求。更为重要的是，我们支持灵活扩展自定义组件，以满足您独特、个人化的需求，为您提供更丰富的使用体验。
灵活的布局
产品提供了多种复杂表单布局方式，包括栅格、弹性盒子、表格等，这些功能让复杂的表单布局变得趋于简洁明了。此举不仅拓宽用户选择范围，更是为用户提供了贴心可靠的使用体验。
- 阅读模式
致力于实现表单编辑与数据查看模式的无缝切换，高效地提升代码复用性。这种改进将大大提高生产效率，同时也能让用户在任何情况下都能享受到流畅的使用体验。
- 公式计算
内置了52种常用的函数计算公式，这不仅可以大幅度提高数据分析效率，而且也能够灵活满足您在实际业务中的特定计算需求，从而保证数据的准确有效性。
- 可视化
产品以可视化操作为主导，使您可以轻而易举地完成表单页面的编辑。通过直观的图形界面，无需深入繁琐复杂的代码便可完成操作，大大降低了使用门槛，让编辑工作变得更轻松、更高效。
- 版本对比
在开源版本的基础上，为了满足更多复杂场景和提供更好的优质服务推出了Pro版本。
开源版 vs Pro版
FormCreate官网：FormCreate-动态表单
帮助文档：介绍 | FcDesigner Pro
体验地址：FcDesigner Pro在线演示
- 入门（相当简单）
安装
- 下载代码包
- 在项目中创建一个fcDesignerPro目录
- 解压代码包,将dist目录复制到刚刚创建的fcDesignerPro目录中
更多步骤可以一步帮助文档，傻瓜式教程一看就会。
- 数据结构
拖拽组件的描述规则
ts
//多语言读取函数
type t = (name, ...args) => string;
//拖拽组件描述规则结构
interface DragRule {
//组件id，不能重复
name: string;
//组件的名称
label: string;
//组件的图标
icon: string;
//插入的分类
menu?: 'main' | 'aide' | 'layout' | string;
//如果是子表单组件，需要定义`value`的类型
subForm?: 'object' | 'array';
//组件，不建议使用
component?: Component;
//组件的生成规则
rule(arg: { t: t }): Rule;
//组件属性配置的规则
props(rule: Rule, arg: { t: t, api: Api }): Rule[];
//导出规则时通过这个方法转成最终规则
parseRule?: (rule: Rule) => void;
//导入规则时通过这个方法转成设计器中的渲染规则
loadRule?: (rule: Rule) => void;
//当props中的字段变化时触发
watch?: {
[key: string]: (arg: { value: any, rule: Rule, api: Api, field: string }) => void;
};
//是否有配套的子组件，例如Row和Col
children?: string;
//初始化时渲染几个子组件
childrenLen?: number;
//当前组件的操作容器是否显示在组件内部，为false时操作容器包裹当前组件
inside?: true | boolean;
//是否可以拖入其他组件到当前组件内部
drag?: true | string | boolean;
//是否显示拖拽按钮
dragBtn?: false | boolean;
//控制操作操作按钮是否显示，显示哪些
handleBtn?: true | boolean | Array<'create' | 'copy' | 'addChild' | 'delete'>;
//是否显示遮罩，避免对组件操作. 建议有子组件时为true，其他为false
mask?: false | boolean;
//是否只能拖入一个
only?: boolean;
//是否支持样式配置
style?: boolean;
//当前组件支持的事件
event?: string[];
//当前组件`value`的数据类型
validate?: string[];
}-
描述规则用于定义对拖拽组件的生成规则，配置规则其他信息
-
定义好描述规则后通过
designer.addComponent方法导入，例如addComponent(dragRule)或者addComponent([dragRule,dragRule,dragRule])批量导入
拖拽模板的描述规则
ts
//拖拽模板描述规则结构
interface DragTemplateRule {
//固定
menu: 'template';
//模板的id，不能重复
name: string;
//模板的名称
label: string;
//是否只能拖入一个
only?: boolean;
//是否自动替换规则中的字段名，表单中可能存在多个时建议为true，只支持自动生成的字段ID!
autoField?: false | boolean;
//模板的渲染规则，或者json规则，或者通过函数返回json规则
template: Rule[] | string | ((arg: { t: t }) => string);
}-
模板会固定显示在左侧最顶部，拖拽渲染时会自动解析规则中的组件，并对齐可以操作.
-
定义好描述规则后通过
designer.addComponent方法导入，例如addComponent(dragRule)或者addComponent([dragRule,dragRule,dragRule])批量导入
设计器左侧菜单列表的描述规则
ts
//拖拽组件
interface MenuItem {
//拖拽组件名
label: string;
//拖拽组件id
name: string;
//拖拽组件图标
icon: string;
}
//菜单
interface Menu {
//菜单名
title: string;
//菜单id
name: string;
//拖拽组件列表
list: MenuItem[];
}
type MenuList = Menu[];内置的菜单id分别是template，main，subform，aide，layout5个
- template 模板组件
- main 基础组件
- subform 子表单组件
- aide 辅助组件
- layout 布局组件
设计器配置的描述规则
设计器的props.config的详细数据结构
ts
//定义函数返回规则或者通过rule字段返回规则
type extendRule = ((arg: { t: t }) => Rule[]) | { rule: (arg: { t: t }) => Rule[], append?: boolean };
//field选择项
type FieldItem = {
value?: string;
label: string;
children?: FieldItem[];
}
//设计器的props.config配置
interface Config {
//配置field是否可以编辑
fieldReadonly?: boolean;
//field选择项,支持多级
fieldList?: FieldItem[];
//是否显示右侧的配置界面
showConfig?: boolean;
//是否显示组件的基础配置表单
showBaseForm?: boolean;
//是否显示组件的属性配置表单
showPropsForm?: boolean;
//是否显示组件的样式配置表单
showStyleForm?: boolean;
//是否显示组件的事件配置表单
showEventForm?: boolean;
//是否显示组件的验证配置表单
showValidateForm?: boolean;
//是否显示表单配置
showFormConfig?: boolean;
//是否显示左侧的模板列表
showTemplate?: boolean;
//是否显示多端适配选项
showDevice?: boolean;
//基础配置的渲染规则，可以覆盖默认规则.append为true时追加到默认规则后面
formRule?: extendRule;
//组件配置的渲染规则，可以覆盖默认规则.append为true时追加到默认规则后面
baseRule?: extendRule;
//验证配置的渲染规则，可以覆盖默认规则.append为true时追加到默认规则后面
validateRule?: extendRule;
//表单的渲染规则，可以覆盖默认规则.append为true时追加到默认规则后面
componentRule?: {
//id组件拖拽组件规则的id，rule为当前组件的生成规则
[id: string]: (rule: Rule, arg: { t: t }) => Rule[] | {
rule: (rule: Rule, arg: { t: t }) => Rule[],
append?: boolean
}
};
}全局数据源的描述规则
ts
interface StaticDataItem {
//数据名称
label: string;
//数据类型
type: 'static';
//数据
result: any;
}
interface FetchDataItem {
//数据名称
label: string;
//数据类型
type: 'fetch'
//请求链接
action: string,
//请求方式
method: 'GET' | 'POST',
//请求头部
headers?: Object,
//附带数据
data?: Object,
//远程数据解析
parse?: string | ((res: any) => any),
//远程异常处理
onError?: string | ((e) => void),
}
export interface GlobalData {
[id:string] : StaticDataItem | FetchDataItem;
}可以通过setGlobalData方法导入预设的数据，或者表单配置options.globalData
全局事件的描述规则
ts
interface GlobalEvent {
[id: string]: {
//数据名称
label: string;
//回调事件
handle: string | (($inject: Object) => void);
}
}可以通过setGlobalEvent方法导入预设的数据，或者表单配置options.globalEvent
全局样式的描述规则
ts
interface GlobalClass {
[className: string]: {
//数据名称
label: string;
//回调事件
style: Obejct;
}
}可以通过setGlobalClass方法导入预设的数据，或者表单配置options.globalClass
扩展操作规则
typescript
type Handle = Array<{
//按钮名称
label: string;
//回调函数
callback: Function;
}>可以通过config.handle扩展设计器的操作
设计表单的规则描述
typescript
type TreeData = Array<{
//唯一值
_fc_uni: string;
//组件类型
type: string;
//字段ID
field?: string;
//字段名称
title?: string;
//插槽
slot?: string;
//属性
props: Object;
//子级
children?: TreeData;
}>可以通过getTree和getFormTree方法获取描述规则
计算函数的规则描述
typescript
type Formula = {
//菜单
menu: 'math' | 'string' | 'date' | 'collection' | 'condition';
//计算函数名
name: string;
//计算函数说明
info: string;
//计算函数使用示例
example: string;
//计算函数
handle: Function;
};可以通过FcDesigner.setFormula方法扩展计算规则
- 关于组件的配置、组件的方法、组件的事件、原型方案、常见问题等可以在此看到完成方案
总之，很齐全。
完整文档：介绍 | FcDesigner Pro
- 结束
倾心6年，FormCreate在低代码表单技术上深耕细研，无数次的尝试和优化，铸就今日的FormCreate设计器Pro版本。
FormCreate旨在让表单设计更加轻松，通过我们的技术沉淀，您将能体验到从未有过的便捷与高效，也真切感受到FormCreate带您更进一步，走向智能化设计的承诺。
https://github.com/xaboy/form-create项目QQ讨论群629709230
如果您认为FormCreat出色，别忘了推荐给您身边的朋友们，FormCreate有丰厚的奖励🧧给您。也请持续关注FormCreate，这里总有新鲜的事情和惊喜等待你去发现。
再次，感谢您的支持和信任！
传送门：
FormCreate官网：FormCreate-动态表单
帮助文档：介绍 | FcDesigner Pro
体验地址：FcDesigner Pro在线演示
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
