基于Vue的低代码可视化表单设计器 FcDesigner 3.2.11更新说明

低代码研究员

于 2025-03-28 11:18:10 发布

阅读量1.1k

点赞数 16

分类专栏： FormCreate 文章标签： vue.js 低代码前端开源表单设计器

本文链接：https://blog.youkuaiyun.com/weixin_40487467/article/details/146590687

版权

FormCreate 专栏收录该内容

47 篇文章

订阅专栏

FcDesigner版是一款基于Vue3.0的低代码可视化表单设计器工具，通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。并广泛应用于在政务系统、OA系统、ERP系统、电商系统、流程管理等领域。

源码地址: Github | Gitee | 文档 | 在线演示

@form-create/designer 是基于 @form-create/element-ui 和 ElementPlus 实现的低代码表单设计器组件。支持Vue2和Vue3

@form-create/vant-designer 是基于 @form-create/vant 和 Vant 实现的移动端低代码表单设计器组件。支持Vue3

@form-create/antd-designer 是基于 @form-create/ant-design-vue 和 AntDesignVue 实现的低代码表单设计器组件。支持Vue3

本项目采用 Vue3.0 和 Ant Design Vue 进行页面构建，内置多语言解决方案，支持二次扩展开发，支持自定义组件扩展。

核心功能🔥

内置表单多语言体系，轻松打破语言隔阂。
提供 30+ 常用组件，涵盖表单组件、布局组件、辅助类组件等各类实用模块。
支持灵活扩展自定义组件，个性化开发轻松拿捏。支持二次扩展开发，深度定制不在话下。
支持组件样式配置，动态调整组件尺寸、颜色、间距等样式属性。
支持事件交互配置，灵活配置组件事件响应逻辑，实现复杂交互场景。
适配 ElementPlus 所有功能，表单大纲、操作记录、数据录入、组件生成、事件配置、表单验证、栅格布局、表格布局等。

更新说明

新增设计器增加功能介绍提示
新增操作快捷键
新增 config.showComponentName 配置项,控制组件编码的显示
新增 config.device 配置默认设计区域显示, changeDevice事件和setDevice方法
新增 mergeOptions 方法合并更新表单配置
优化内置组件适配多语言
优化拖拽规则增加input配置项, 配置组件是否为表单组件, 避免出现无法配置field的情况
优化 html 导出
优化表格表单组件
优化 switch 组件支持配置多类型的值
优化验证配置项显示条件
优化多语言选择样式
优化大纲中名称显示
修复表单事件清空失效问题
修复图标不显示问题 #182
修复 JSON预览时规则没有同步更新问题(Vue2)

安装

首先，安装 @form-create/antd-designer

npm install @form-create/antd-designer@^3

引入

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>

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');

使用

在 Vue 3 组件中，您可以通过以下方式使用 fc-designer 组件：

<template>
    <fc-designer ref="designer" height="100vh" />
</template>
<script setup>
    import { ref } from 'vue';
    // 可以在此处获取设计器实例或进行其他操作
    const designer = ref(null);
</script>

显示保存按钮

设计器中内置了一个保存按钮，通过 config.showSaveBtn 配置项来控制其显示。此功能允许用户在表单设计完成后方便地触发保存操作。

在这里插入图片描述

以下代码展示了如何在配置中启用保存按钮：

{
    config: {
        showSaveBtn: true
    }
}

保存数据

当用户点击保存按钮时，会触发 save 事件。开发者可以自定义处理该事件以实现保存功能，将设计好的表单规则和配置发送到服务器或本地存储。

保存数据示例

以下是保存数据的一个简单实现示例：

<template>
    <fc-designer ref="designer" @save="handleSave" :config="config"/>
</template>
<script setup>
    const config = {
        showSaveBtn: true
    }
    function handleSave ({rule, options}) {
        // 示例：调用后端接口保存表单规则和配置
        axios.post('/api/saveForm', {
            rules: rule, //JSON字符串
            options: options //JSON字符串
        }).then(response => {
            // 处理保存成功的逻辑
            console.log('表单保存成功', response.data);
        }).catch(error => {
            // 错误处理
            console.error('表单保存失败', error);
        });
    }
</script>

通过上述代码，当用户点击保存按钮时，表单的规则和配置以 JSON 格式发送到指定的 API 接口。

回显数据

以下是回显数据的实现示例：

<template>
    <fc-designer ref="designer" @save="handleSave" :config="config"/>
</template>
<script setup>
    const designer = ref(null)
    onMounted(() => {
        try {
            // 示例：从服务器端获取保存的JSON规则
            const { data } = await axios.get('/api/getForm');
            const { ruleJson, optionsJson } = data;
            // 回显设计的表单
            designer.value.setOptions(optionsJson);
            designer.value.setRule(ruleJson);
        } catch (error) {
            console.error('加载表单数据失败', error);
        }
    });
</script>

在以上代码中，应用程序会在组件挂载后立即从服务器加载之前保存的数据，并将其应用到当前的设计器实例以恢复表单状态。

表单渲染

必须使用 formCreate.parseJson 代替 JSON.parse 方法，使用 formCreate.toJson 代替 JSON.stringify 方法来转换 JSON 数据，以确保数据格式正确。

//从设计器中导入 formCreate
import {formCreate} from '@form-create/designer';
//挂载 formCreate
app.use(formCreate);

表单渲染示例

以下示例演示如何获取后端存储的表单规则，并通过 formCreate 渲染表单。

<template>
    <div id="app">
        <form-create v-if="rule.length" v-model="formData" v-model:api="fApi" @sumbit="handleSubmit" :rule="rule"
                     :option="option"></form-create>
    </div>
</template>
<script setup>
    import {formCreate} from '@form-create/designer';
    const rule = ref([]);
    const options = ref({});
    const fApi = ref(null);
    //表单数据
    const formData = ref({});
    function handleSubmit(formData) {
        // 模拟提交表单数据到后端
        axios.post('/api/submitFormData', formData)
            .then(response => {
                console.log('提交成功:', response.data);
            })
            .catch(error => {
                console.error('提交失败:', error);
            });
    }
    onMounted(() => {
        // 模拟从后端加载表单JSON规则
        axios.get('/api/getFormRules')
            .then(response => {
                const {ruleJson, optionsJson, formData} = response.data;
                rule.value = formCreate.parseJson(ruleJson);
                options.value = formCreate.parseJson(optionsJson);
                formData.value = formData;
            })
            .catch(error => {
                console.error('加载表单规则失败:', error);
            });
    });
</script>