发布即封神!5.6k Star的表单设计工具，维护6年了，终于出大招了！

发布即封神!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，渲染器可以渲染并输出相应的表单。

• 特性

1. 国际化​

产品充分考虑了全球化需求，内置了中文、英文和日文三种语言选项，无论是在对外交流还是跨国业务进行中都可提供强大的语言支持，使您在应对全球化的过程中无忧无虑，轻松自如。

1. 绑定事件​

产品提供了可配置的组件和表单事件功能，为您处理各种动态交互提供了便利。无论用户需求何种复杂度与多样性，我们都能迎刃而解，提供满足使用者需求的解决方案。

1. 丰富的组件​

产品内置了45种常用组件，广泛覆盖多种场景需求，以满足不同的用户需求。更为重要的是，我们支持灵活扩展自定义组件，以满足您独特、个人化的需求，为您提供更丰富的使用体验。

灵活的布局​

产品提供了多种复杂表单布局方式，包括栅格、弹性盒子、表格等，这些功能让复杂的表单布局变得趋于简洁明了。此举不仅拓宽用户选择范围，更是为用户提供了贴心可靠的使用体验。

1. 阅读模式​

致力于实现表单编辑与数据查看模式的无缝切换，高效地提升代码复用性。这种改进将大大提高生产效率，同时也能让用户在任何情况下都能享受到流畅的使用体验。

1. 公式计算​

内置了52种常用的函数计算公式，这不仅可以大幅度提高数据分析效率，而且也能够灵活满足您在实际业务中的特定计算需求，从而保证数据的准确有效性。

1. 可视化​

产品以可视化操作为主导，使您可以轻而易举地完成表单页面的编辑。通过直观的图形界面，无需深入繁琐复杂的代码便可完成操作，大大降低了使用门槛，让编辑工作变得更轻松、更高效。

• 版本对比

在开源版本的基础上，为了满足更多复杂场景和提供更好的优质服务推出了Pro版本。

开源版 vs Pro版

FormCreate官网：FormCreate-动态表单

帮助文档：介绍 | FcDesigner Pro

体验地址：FcDesigner Pro在线演示

• 入门（相当简单）

安装​

1. 下载代码包
2. 在项目中创建一个fcDesignerPro目录
3. 解压代码包,将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[];
}

1. 描述规则用于定义对拖拽组件的生成规则，配置规则其他信息

2. 定义好描述规则后通过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);
}

1. 模板会固定显示在左侧最顶部，拖拽渲染时会自动解析规则中的组件，并对齐可以操作.

2. 定义好描述规则后通过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带您更进一步，走向智能化设计的承诺。

GitHub 地址：GitHub - xaboy/form-create: :fire::fire::fire: 强大的动态表单生成器，通过数据驱动表单渲染，支持可视化设计。提高开发者对表单的开发效率。目前在OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。:fire::fire::fire: 强大的动态表单生成器，通过数据驱动表单渲染，支持可视化设计。提高开发者对表单的开发效率。目前在OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。 - xaboy/form-createhttps://github.com/xaboy/form-create

项目QQ讨论群629709230

如果您认为FormCreat出色，别忘了推荐给您身边的朋友们，FormCreate有丰厚的奖励🧧给您。也请持续关注FormCreate，这里总有新鲜的事情和惊喜等待你去发现。

再次，感谢您的支持和信任！

传送门：
FormCreate官网：FormCreate-动态表单

帮助文档：介绍 | FcDesigner Pro

体验地址：FcDesigner Pro在线演示

开源项目：xaboy (FormCreate) · GitHub