FcDesigner 版是一款基于 Vue 的低代码可视化表单设计器工具，通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。并广泛应用于在政务系统、OA 系统、ERP 系统、电商系统、流程管理等领域。
源码地址: Github | Gitee | 文档 | 在线演示
核心功能🔥
- 内置表单多语言体系，轻松打破语言隔阂。
- 提供 30+ 常用组件，涵盖表单组件、布局组件、辅助类组件等各类实用模块。
- 支持灵活扩展自定义组件，个性化开发轻松拿捏。支持二次扩展开发，深度定制不在话下。
- 支持组件样式配置，动态调整组件尺寸、颜色、间距等样式属性。
- 支持事件交互配置，灵活配置组件事件响应逻辑，实现复杂交互场景。
- 表单大纲、操作记录、数据录入、组件生成、事件配置、表单验证、栅格布局、表格布局等。
✨ 新增功能:
![]()
-
config 增加 hiddenFormConfig, disabledFormConfig 配置项控制表单配置项的显示和禁用状态
-
config 增加 validateOnlyRequired 配置项, 组件的验证模块是否只显示必填
-
增加全局的菜单和拖拽规则导入方法, FcDesigner.addMenu 和 FcDesigner.addDragRule
-
config 增加 nameReadonly 配置项, 控制编号是否可以编辑
🔧 功能优化:
-
select 组件增加 placeholder 配置项(vant)
-
tableOptions 和 treeOptions 组件支持禁用
-
优化内置菜单加载逻辑
-
粘贴组件时默认重置 field 和 name(不兼容的更新)
-
隔离组件的 hook 配置执行
🐞 问题修复：
-
✅ 修复组件事件删除后,不能重新添加的问题
-
✅ 修复html内容保存时可能报错问题
-
✅ 修复 showControl 配置项失效问题
-
✅ 修复栅格中组件移动时可能报错问题(Vue2)
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 src="https://unpkg.com/vue@2.7.16/dist/vue.js"></script>
<!-- 引入 Element UI 样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入 Element UI -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入 form-create 和 designer -->
<script src="https://unpkg.com/@form-create/element-ui/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/designer/dist/index.min.js"></script>
<div id="app">
<fc-designer height="100vh"></fc-designer>
</div>
<script>
Vue.use(FcDesigner);
Vue.use(FcDesigner.formCreate);
new Vue().$mount('#app');
</script>
使用
在 Vue 组件中，您可以像下面这样使用 fc-designer 组件：
<template>
<fc-designer ref="designer" height="100vh" />
</template>
Element 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 href="https://unpkg.com/element-plus/dist/index.css" rel="stylesheet" />
<!-- 引入 Vue 3 -->
<script src="https://unpkg.com/vue"></script>
<!-- 引入 Element Plus -->
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
<!-- 引入 form-create 和 designer -->
<script src="https://unpkg.com/@form-create/element-ui@next/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/designer@next/dist/index.umd.js"></script>
<div id="app">
<fc-designer height="100vh"></fc-designer>
</div>
<script>
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 ref="designer" height="100vh" />
</template>
<script setup>
import { ref } from 'vue';
// 可以在此处获取设计器实例或进行其他操作
const designer = ref(null);
</script>
AntDesignVue 版本 PC 端表单设计器
演示站
本项目采用 Vue3.0 和 Ant Design Vue 进行页面构建，内置多语言解决方案，支持二次扩展开发，支持自定义组件扩展。
![]()
安装
首先，安装 @form-create/antd-designer
npm 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-designer'
import 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 rel="stylesheet" href="https://unpkg.com/ant-design-vue@4/dist/reset.css"></link>
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"></link>
<!-- 引入 Vue 及所需组件 -->
<script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
<script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekday.js"></script>
<script src="https://unpkg.com/dayjs/plugin/localeData.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/ant-design-vue@4/dist/antd.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>
<!-- 引入 form-create 及 fcDesigner -->
<script src="https://unpkg.com/@form-create/ant-design-vue@^3/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/vant@^3/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/antd-designer@^3/dist/index.umd.js"></script>
<div id="app">
<fc-designer height="100vh"></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 ref="designer" height="100vh" />
</template>
<script setup>
import { ref } from 'vue';
// 可以在此处获取设计器实例或进行其他操作
const designer = ref(null);
</script>
移动端表单设计器
![demo1]()
演示站
本项目采用 Vue3.0 和 ElementPlus 进行移动端页面构建，移动端使用的是 vant4.0 版本，内置多语言解决方案，支持二次扩展开发，支持自定义组件扩展。
安装
首先，安装 @form-create/vant-designer
npm 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-designer'
import 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 rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css"></link>
<link rel="stylesheet" href="https://unpkg.com/vant@4/lib/index.css"/>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
<script src="https://unpkg.com/vant@4/lib/vant.min.js"></script>
<script src="https://unpkg.com/@form-create/element-ui@next/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/vant@next/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/vant-designer@next/dist/index.umd.js"></script>
<div id="app">
<fc-designer-mobile height="100vh"></fc-designer-mobile>
</div>
<script>
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 ref="designer" height="100vh" />
</template>
<script 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 id="app">
<form-create v-model="formData" v-model:api="fApi" :rule="rule" :option="option"></form-create>
</div>
</template>
<script>
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);
}
}
