使用fc-designer回显表单

最新推荐文章于 2025-12-04 08:34:38 发布

原创最新推荐文章于 2025-12-04 08:34:38 发布 · 485 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #开发语言 #fc-designer

在这里插入图片描述

<template>
    <fc-designer ref="designer" :config="config" @save="handleSave" />
</template>

<script setup>
import { ref, nextTick, onMounted } from 'vue'
import { formCreate } from '@form-create/designer'

const designer = ref(null)

onMounted(() => {
    // 正确格式：rule 是数组，options 是对象
    const ruleJson = formCreate.toJson(
        [
            {
                type: 'input',
                field: 'Fv1fm9qur3drabc',
                title: '输入框',
                info: '',
                $required: false,
                _fc_id: 'id_Fx6mm9qur3dracc',
                name: 'ref_Fpabm9qur3dradc',
                display: true,
                hidden: false,
                _fc_drag_tag: 'input',
            }
        ]
    )

    const optionsJson = formCreate.toJson({
        form: {
            inline: false,
            hideRequiredAsterisk: false,
            labelPosition: 'right',
            size: 'default',
            labelWidth: '125px'
        },
        resetBtn: {
            show: false,
            innerText: '重置'
        },
        submitBtn: {
            show: true,
            innerText: '提交'
        }
    }
    )

    nextTick(() => {
        if (designer.value) {
          
            designer.value.setRule(ruleJson)
            designer.value.setOptions(optionsJson)
        }
    })
})

// 表单保存事件
function handleSave({ rule, options }) {
    console.log('表单保存成功', rule)
    console.log('表单保存成功 options', options)

    // 示例：调用接口保存
    // axios.post('/api/saveForm', {
    //   rules: rule,
    //   options: options
    // }).then(() => {
    //   console.log('保存成功')
    // }).catch(error => {
    //   console.error('保存失败', error)
    // })
}

// 控制设计器按钮
const config = {
    showSaveBtn: true
}


</script>