FcDesigner：低代码可视化AI表单设计器，3.5版升级+多版本适配提升开发效率

FcDesigner低代码可视化AI表单设计器功能升级且多版本适配提升开发效率FcDesigner版是一款基于Vue的低代码可视化AI表单设计器工具通过数据驱动表单渲染。它能让开发者通过拖拽的方式快速创建表单提高开发效率、节省时间广泛应用于政务系统、OA系统、ERP系统、电商系统、流程管理等领域。源码地址: Github | Gitee | 文档 | 在线演示核心功能内置表单多语言体系打破语言隔阂。提供30 常用组件涵盖表单、布局、辅助类等实用模块。支持灵活扩展自定义组件可进行二次扩展开发实现个性化与深度定制。支持组件样式配置能动态调整组件尺寸、颜色、间距等样式属性。支持事件交互配置可灵活配置组件事件响应逻辑实现复杂交互场景。内置AI表单助理让表单开发更快、更稳、更智能。具备表单大纲、操作记录、数据录入、组件生成、事件配置、表单验证、栅格布局、表格布局等功能。3.5版本更新内容字段ID支持下拉级联选择新版中字段ID支持下拉级联选择能更快速完成字段关联与映射降低手动输入错误率提升大型业务表单配置效率。选项组件新增多种录入方式选项类组件新增文本录入、JSON数据录入两种模式同时重新调整了选项配置区域布局。大纲支持拖拽排序现在大纲列表支持拖拽排序开发者可在大纲面板中直接调整组件位置系统会实时同步画布结构。beforeUnmount生命周期支持新增beforeUnmount生命周期用于组件销毁前的处理逻辑。设计器新增Header插槽设计器顶部区域支持通过插槽扩展可用于扩展品牌信息、快捷操作入口或业务按钮使设计器更贴合使用场景。代码编辑器增强增加代码提示代码编辑器新增API与代码提示能力编写事件函数或逻辑时可减少记忆成本。功能优化及BUG修复新增设计规则导入功能。新增支持快捷查看组件配置项的field。新增左侧菜单支持默认收起。新增样式支持配置背景图。新增表格布局增加表格表单样式。优化拖入限制功能增加递归校验。优化样式录入交互。优化表格表单组件功能。Element UI版本表单设计器本项目采用Vue2.7和Element UI进行页面构建内置多语言解决方案支持二次扩展开发支持自定义组件扩展。演示站安装要开始使用form-create/designer需将其安装到项目中可通过npm安装npm install form-create/designer^1 npm install form-create/element-ui^2.7 npm install element-ui如已安装旧版本渲染器执行以下命令更新至最新版npm update form-create/element-ui^2.7请检查当前Vue版本若版本低于2.7请执行以下升级命令npm update vue^2.7引入Node.js引入对于Node.js项目需通过npm安装相关依赖并在项目中引入并配置import Vue from vue; import FcDesigner from form-create/designer; import ELEMENT from element-ui; import element-ui/lib/theme-chalk/index.css; // 使用Element UI Vue.use(ELEMENT); // 使用form-create和designer Vue.use(FcDesigner); Vue.use(FcDesigner.formCreate);CDN引入若通过CDN方式引入FcDesigner需先引入Vue.js和Element UI再引入form-create/element-ui和form-create/designer并在Vue实例中进行配置!-- 引入Vue.js -- script srchttps://unpkg.com/vue2.7.16/dist/vue.js/script !-- 引入Element UI样式 -- link relstylesheet hrefhttps://unpkg.com/element-ui/lib/theme-chalk/index.css !-- 引入Element UI -- script srchttps://unpkg.com/element-ui/lib/index.js/script !-- 引入form-create和designer -- script srchttps://unpkg.com/form-create/element-ui/dist/form-create.min.js/script script srchttps://unpkg.com/form-create/designer/dist/index.min.js/script div idapp fc-designer height100vh/fc-designer /div script Vue.use(FcDesigner); Vue.use(FcDesigner.formCreate); new Vue().$mount(#app); /script使用在Vue组件中可像下面这样使用fc-designer组件template fc-designer refdesigner height100vh / /templateElement Plus版本表单设计器form-create/designer支持Vue 3环境以下是在Vue 3项目中安装和使用该库的指南。演示站安装首先安装form-create/designer的Vue 3版本npm install form-create/designer^3 npm install form-create/element-ui^3 npm install element-plus如已安装旧版本渲染器执行以下命令更新至最新版npm update form-create/element-ui^3引入Node.js引入对于使用Node.js的项目按以下步骤在Vue 3项目中引入并配置import { createApp } from vue; import FcDesigner from form-create/designer; import ElementPlus from element-plus; import element-plus/dist/index.css; // 创建Vue应用 const app createApp(App); // 使用Element Plus和FcDesigner app.use(ElementPlus); app.use(FcDesigner); app.use(FcDesigner.formCreate); // 挂载应用 app.mount(#app);CDN引入若选择使用CDN按以下步骤在HTML文件中引入相关依赖!-- 引入Element Plus样式 --link hrefhttps://unpkg.com/element-plus/dist/index.css relstylesheet /!-- 引入Vue 3 --script srchttps://unpkg.com/vue/script!-- 引入Element Plus --script srchttps://unpkg.com/element-plus/dist/index.full.js/script!-- 引入form-create和designer --script srchttps://unpkg.com/form-create/element-uinext/dist/form-create.min.js/scriptscript srchttps://unpkg.com/form-create/designernext/dist/index.umd.js/scriptdiv idapp fc-designer height100vh/fc-designer/divscript const { createApp } Vue; const app createApp({}); app.use(ElementPlus); app.use(FcDesigner); app.use(FcDesigner.formCreate); app.mount(#app); /script使用在Vue 3组件中可通过以下方式使用fc-designer组件template fc-designer refdesigner height100vh //templatescript setup import { ref } from vue; // 可以在此处获取设计器实例或进行其他操作 const designer ref(null); /scriptAntDesignVue版本PC端表单设计器本项目采用Vue3.0和Ant Design Vue进行页面构建内置多语言解决方案支持二次扩展开发支持自定义组件扩展。演示站安装首先安装form-create/antd-designernpm install form-create/antd-designer^3 npm install form-create/ant-design-vue^3 npm install ant-design-vue如已安装旧版本渲染器执行以下命令更新至最新版npm update form-create/ant-design-vue^3引入Node.js引入对于使用Node.js的项目按以下步骤在Vue 3项目中引入并配置import FcDesigner from form-create/antd-designerimport antd from ant-design-vue; import ant-design-vue/dist/reset.css; // 创建Vue应用const app createApp(App); app.use(antd) app.use(FcDesigner) app.use(FcDesigner.formCreate) // 挂载应用 app.mount(#app);CDN引入若选择使用CDN按以下步骤在HTML文件中引入相关依赖link relstylesheet hrefhttps://unpkg.com/ant-design-vue4/dist/reset.css/linklink relstylesheet hrefhttps://fastly.jsdelivr.net/npm/vant4/lib/index.css/link!-- 引入Vue及所需组件 --script srchttps://unpkg.com/dayjs/dayjs.min.js/scriptscript srchttps://unpkg.com/dayjs/plugin/customParseFormat.js/scriptscript srchttps://unpkg.com/dayjs/plugin/weekday.js/scriptscript srchttps://unpkg.com/dayjs/plugin/localeData.js/scriptscript srchttps://unpkg.com/dayjs/plugin/weekOfYear.js/scriptscript srchttps://unpkg.com/dayjs/plugin/weekYear.js/scriptscript srchttps://unpkg.com/dayjs/plugin/advancedFormat.js/scriptscript srchttps://unpkg.com/dayjs/plugin/quarterOfYear.js/scriptscript srchttps://unpkg.com/vue/scriptscript srchttps://unpkg.com/ant-design-vue4/dist/antd.min.js/scriptscript srchttps://fastly.jsdelivr.net/npm/vant4/lib/vant.min.js/script!-- 引入form-create及fcDesigner --script srchttps://unpkg.com/form-create/ant-design-vue^3/dist/form-create.min.js/scriptscript srchttps://unpkg.com/form-create/vant^3/dist/form-create.min.js/scriptscript srchttps://unpkg.com/form-create/antd-designer^3/dist/index.umd.js/scriptdiv idapp fc-designer height100vh/fc-designer/div!-- 挂载组件 --script // 创建Vue应用实例 const app Vue.createApp({}); // 挂载AntDesignVue app.use(antd); // 挂载fcDesignerPro组件 app.use(FcDesigner); // 挂载formCreate app.use(FcDesigner.formCreate); // 挂载Vue应用 app.mount(#app); /script使用在Vue 3组件中可通过以下方式使用fc-designer组件template fc-designer refdesigner height100vh //templatescript setup import { ref } from vue; // 可以在此处获取设计器实例或进行其他操作 const designer ref(null); /script移动端表单设计器本项目采用Vue3.0和ElementPlus进行移动端页面构建移动端使用的是vant4.0版本内置多语言解决方案支持二次扩展开发支持自定义组件扩展。演示站安装首先安装form-create/vant-designernpm install form-create/vant-designer^3 npm install form-create/element-ui^3 npm install form-create/vant^3 npm install element-plus npm install vant如已安装旧版本渲染器执行以下命令更新至最新版npm update form-create/element-ui^3 npm update form-create/vant^3引入Node.js引入对于使用Node.js的项目按以下步骤在Vue 3项目中引入并配置import FcDesignerMobile from form-create/vant-designerimport ELEMENT from element-plus; import vant from vant; import vant/lib/index.css; import element-plus/dist/index.css; // 创建Vue应用 const app createApp(App); app.use(ELEMENT) app.use(vant) app.use(FcDesignerMobile) app.use(FcDesignerMobile.formCreate) // 挂载应用 app.mount(#app);CDN引入若选择使用CDN按以下步骤在HTML文件中引入相关依赖link relstylesheet hrefhttps://unpkg.com/element-plus/dist/index.css/linklink relstylesheet hrefhttps://unpkg.com/vant4/lib/index.css/script srchttps://unpkg.com/vue/scriptscript srchttps://unpkg.com/element-plus/dist/index.full.js/scriptscript srchttps://unpkg.com/vant4/lib/vant.min.js/scriptscript srchttps://unpkg.com/form-create/element-uinext/dist/form-create.min.js/scriptscript srchttps://unpkg.com/form-create/vantnext/dist/form-create.min.js/scriptscript srchttps://unpkg.com/form-create/vant-designernext/dist/index.umd.js/scriptdiv idapp fc-designer-mobile height100vh/fc-designer-mobile/divscript const { createApp } Vue; const app createApp({}); app.use(ElementPlus); app.use(vant); app.use(FcDesignerMobile); app.use(FcDesignerMobile.formCreate); app.mount(#app); /script使用在Vue 3组件中可通过以下方式使用fc-designer组件template fc-designer-mobile refdesigner height100vh //templatescript setup import { ref } from vue; // 可以在此处获取设计器实例或进行其他操作 const designer ref(null); /script获取设计表单的数据在表单设计器中可通过以下方法获取表单的生成规则和配置这些数据通常会被保存到数据库中以便后续加载和回显//获取表单的生成规则 const ruleJson this.$refs.designer.getJson(); //获取表单的配置 const optionsJson this.$refs.designer.getOptionsJson(); //todo 保存JSON数据到数据库中这些数据可用来保存到数据库中确保表单的状态和配置可在页面刷新或重新加载时恢复。回显设计表单当需要回显设计好的表单时需加载之前保存的JSON规则和配置并将其应用到设计器中//todo 加载表单JSON规则 //回显表单 this.$refs.designer.setOptions(optionsJson); this.$refs.designer.setRule(ruleJson);通过这些方法可将之前保存的表单规则和配置应用到设计器中恢复表单的状态。表单渲染要渲染表单需挂载form-create到Vue应用中并加载表单规则和配置//从设计器中导入formCreate import {formCreate} from form-create/designer; //挂载formCreate app.use(formCreate);表单渲染示例template div idapp form-create v-modelformData v-model:apifApi :rulerule :optionoption/form-create /div/templatescript import {formCreate} from form-create/designer; export default { data() { return { //实例对象 fApi: {}, //表单数据 formData: {}, //表单生成规则 rule: [], //组件参数配置 option: {} } }, beforeCreate(){ const rule,option; // todo 加载表单JSON规则 this.rule formCreate.parseJson(rule); this.option formCreate.parseJson(option); } } /script动态加载和保存表单配置可通过API请求动态加载表单规则和配置并将表单数据保存到服务器import axios from axios; // 加载表单配置async function loadFormConfig() { try { const response await axios.get(/api/form-config); return response.data; } catch (error) { console.error(加载表单配置失败, error); return { rule: [], option: {} }; } } // 保存表单配置async function saveFormConfig(ruleJson, optionsJson) { try { await axios.post(/api/form-config, { rule: ruleJson, options: optionsJson }); } catch (error) { console.error(保存表单配置失败, error); } }