FlowFormCreateDesigner 表单设计器

FormCreate 动态表单设计器。封装 @form-create/designer 的 FcDesigner，提供在线可视化设计，支持与 forge 业务组件集成、表单规则双向绑定。

基本用法

<template>
  <FlowFormCreateDesigner
    v-model="formRules"
    height="600px"
    @save="handleSave"
  />
</template>

<script setup>
import { FlowFormCreateDesigner } from '@/components/form-create/FlowFormCreateDesigner.vue'
import { ref } from 'vue'

const formRules = ref([])

const handleSave = (rules) => {
  console.log('保存的规则:', rules)
}
</script>

Props

属性	类型	默认值	说明
modelValue	Array | String	[]	表单规则数组，支持 v-model
height	String	'100%'	设计器高度

Events

事件名	参数	说明
update:modelValue	rules: Array	表单规则变更
save	rules: Array	点击「保存配置」按钮时触发

Expose 方法

方法	说明
getRules()	获取当前表单规则数组

---

FlowFormCreateRenderer 表单渲染器

将 form-create 规则 JSON 渲染为实际可提交的表单。支持字段权限控制、自适应栅格、隐藏/禁用字段动态控制。

基本用法

<template>
  <FlowFormCreateRenderer
    v-model="formData"
    :schema="formRules"
    :read-only="readonly"
    :grid-cols="2"
    label-placement="top"
    @change="handleChange"
  />
</template>

<script setup>
import { FlowFormCreateRenderer } from '@/components/form-create/FlowFormCreateRenderer.vue'
import { ref } from 'vue'

const formData = ref({})
const formRules = ref([])
const readonly = ref(false)

const handleChange = (data) => {
  console.log('表单数据变更:', data)
}
</script>

Props

属性	类型	默认值	说明
schema	Array | String	[]	表单规则数组
modelValue	Object	{}	表单数据对象，支持 v-model
options	Object | String	{}	form-create 选项配置
readOnly	Boolean	false	只读模式（禁用所有字段）
fieldPermissions	Array | String | Object	[]	字段权限配置，控制可见性/可写性/必填
gridCols	Number	2	表单列数（1-4）
labelPlacement	String	'top'	标签位置：'top' = 顶部，其他 = 右侧
labelWidth	String | Number	'110px'	标签宽度（非 top 模式）

Events

事件名	参数	说明
update:modelValue	data	表单数据变更
change	data	表单数据变更

Expose 方法

方法	说明
validate()	手动触发表单验证，返回 Promise<boolean>
getData()	获取当前表单数据深拷贝
submit()	验证并获取数据（validate + getData）