开源表单设计器form-create-designer提供了保存表单设计的功能，使开发者能够持久化存储表单设计，以便用户在页面刷新或重载后能够恢复先前的状态。这对于复杂表单的管理和持久化至关重要。
源码地址: Github | Gitee | 文档
必须使用 formCreate.parseJson 代替 JSON.stringify 方法，使用 formCreate.toJson 代替 JSON.parse 方法来转换 JSON 数据，以确保数据格式正确。
显示保存按钮
设计器中内置了一个保存按钮，通过 config.showSaveBtn 配置项来控制其显示。此功能允许用户在表单设计完成后方便地触发保存操作。
以下代码展示了如何在配置中启用保存按钮：
{config: {showSaveBtn: true}
}
保存数据
当用户点击保存按钮时，会触发 save 事件。开发者可以自定义处理该事件以实现保存功能，将设计好的表单规则和配置发送到服务器或本地存储。
保存数据示例
以下是保存数据的一个简单实现示例：
<template><fc-designer ref="designer" @save="handleSave" :config="config"/>
</template>
<script setup>const config = {showSaveBtn: true}function handleSave ({ruleJson, optionsJson}) {// 示例：调用后端接口保存表单规则和配置axios.post('/api/saveForm', {rules: ruleJson,options: optionsJson}).then(response => {// 处理保存成功的逻辑console.log('表单保存成功', response.data);}).catch(error => {// 错误处理console.error('表单保存失败', error);});}
</script>
通过上述代码，当用户点击保存按钮时，表单的规则和配置以 JSON 格式发送到指定的 API 接口。
回显数据
为了在加载页面时回显之前设计的表单，需要从存储中加载之前保存的 JSON 规则和配置，将其应用到设计器中。
回显数据示例
以下是回显数据的实现示例：
<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>
在以上代码中，应用程序会在组件挂载后立即从服务器加载之前保存的数据，并将其应用到当前的设计器实例以恢复表单状态。
通过这些方法和实践，开发者可以轻松构建一个功能完善的表单管理系统，支持表单的创建、保存、加载及更新，使用户能够更高效地使用设计工具。