npm install @form-create/designer@^3

npm install @form-create/element-ui@^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');

//获取表单的生成规则
const ruleJson = this.$refs.designer.getJson();
//获取表单的配置
const optionsJson = this.$refs.designer.getOptionsJson();


//todo 保存JSON数据到数据库中

这些数据可以用来保存到数据库中，确保表单的状态和配置可以在页面刷新或重新加载时恢复。

//todo 加载表单JSON规则


//回显表单
this.$refs.designer.setOptions(optionsJson);
this.$refs.designer.setRule(ruleJson);

//从设计器中导入 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>

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