开源的 AntDesignVue 表单设计器使用教程

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

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

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

核心功能🔥

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

安装

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

sh 复制代码

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

引入

CDN 引入

如果您选择使用 CDN，可以按照以下步骤在 HTML 文件中引入相关依赖：

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 项目中引入并配置：

js 复制代码

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 组件：

html 复制代码

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

显示保存按钮

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

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

js 复制代码

{
    config: {
        showSaveBtn: true
    }
}

保存数据

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

保存数据示例

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

html 复制代码

<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 接口。

回显数据

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

html 复制代码

<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 数据，以确保数据格式正确。

js 复制代码

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

表单渲染示例

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

html 复制代码

<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>