表单渲染

在使用设计好的规则进行表单设计和回显时，正确地处理 JSON 数据格式是至关重要的。以下文档详细介绍了如何渲染表单，并包含了动态加载和保存表单配置的高级用法示例。

注意!!!!!

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

表单渲染

要渲染表单，您需要挂载 FormCreate 到 Vue 应用中，并加载表单规则和配置。

挂载 formCreate 示例

//从设计器中导入 formCreate
import {formCreate} from 'path/to/fcDesignerPro';
//挂载 formCreate
app.use(formCreate);

表单渲染示例

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

<template>
    <div id="app">
        <form-create v-if="rule.length" v-model="formData" v-model:api="api" @submit="handleSubmit" :rule="rule"
                     :option="option"></form-create>
    </div>
</template>
<script setup>
    import {formCreate} from 'path/to/fcDesignerPro';
    const rule = ref([]);
    const option = ref({});
    const api = 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: initFormData} = response.data;
                rule.value = formCreate.parseJson(ruleJson);
                option.value = formCreate.parseJson(optionsJson);
                formData.value = initFormData || {};
            })
            .catch(error => {
                console.error('加载表单规则失败:', error);
            });
    });
</script>

加载表单数据

表单渲染解决的是 rule/option，而“加载表单数据”解决的是给表单字段赋初始值（例如编辑已有记录、草稿恢复、从 URL 带默认值等）。

方式一：通过 v-model 直接绑定对象（推荐默认用法）

当你已经有一份数据对象（例如接口返回的详情）时，直接赋值给 formData 即可触发表单回显。

<template>
  <form-create
    v-if="rule.length"
    v-model="formData"
    v-model:api="api"
    :rule="rule"
    :option="option"
  />
</template>

<script setup>
import {formCreate} from 'path/to/fcDesignerPro';

const rule = ref([]);
const option = ref({});
const api = ref(null);
const formData = ref({});

async function loadSchema() {
  const res = await axios.get('/api/getFormRules');
  const {ruleJson, optionsJson} = res.data;
  rule.value = formCreate.parseJson(ruleJson);
  option.value = formCreate.parseJson(optionsJson);
}

async function loadRecord(recordId) {
  const res = await axios.get('/api/getRecordDetail', {params: {id: recordId}});
  // 这里的 key 应与 rule 中的字段 field 对应
  formData.value = res.data || {};
}

onMounted(async () => {
  await loadSchema();
  await loadRecord('10001');
});
</script>

Vue2 提示（使用 value.sync）

如果你在 Vue2 项目中使用表单渲染，常见做法是使用 :value.sync="formData" 来实现双向绑定。

<template>
  <form-create
    v-if="rule.length"
    :value.sync="formData"
    v-model="api"
    :rule="rule"
    :option="option"
  />
</template>

方式二：使用 api 主动设置值（适合“分批加载/局部更新”）

有些场景数据是分段到达的（例如先渲染再异步补充某些字段），或只想更新少数字段，这时可以使用 api 设置值。

// 等表单实例可用后（rule 渲染完成），再 setValue
await nextTick();
api.value?.setValue({
  name: '张三',
  age: 18,
});

// 或者只更新单个字段
api.value?.setValue('name', '李四');

注意事项

• 确保从后端返回的 JSON 数据格式正确，以保证 formCreate.parseJson 的正常工作。
• 在实际实现时，根据你的 API 结构调整请求URL和数据字段名称。
• 表单回显的关键是：数据对象的 key 需要与规则中字段的 field 一致，否则不会映射到对应组件。

通过这些示例和说明，开发者可以在 Vue 应用中实现动态表单渲染与数据持久化提交，高效管理表单的设计和使用。