背景
上一篇，对表单设计器进行了技术预研，在三款组件form-generator、FormMaking、form-create-designer中初步选择了form-create-designer，接下来的工作，是需要深入了解，进行技术验证，确保该组件功能基本功能能满足我们的平台集成需求，有良好的开放性可以满足未来的扩展。这样可以避免投入了大量时间精力，集成工作进行了大半，突然发现功能受限，特别是关键性或核心需求实现不了，意味着已经做的集成工作实际是无效劳动，需要更换技术组件，开发成本增加，开发周期变长。
基础资料
官网：http://www.form-create.com/
文档：http://www.form-create.com/v3/guide/
预览：http://form-create.com/v3/designer
简介：form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持3个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。
注意：这里有个重要的概念不要混淆，form-create 和form-create-designer并不是指的同一个组件，这是两个组件，前者是内核，能独立使用，可以视为表单的模型+API，并没有UI部分；后者是在前者基础上二次封装提供出来的表单设计器，有界面，如下图所示：
前者文档资料比较详细，后者文档资料比较少，二者有联系但也不完全等同，特别是API方面，在这地方踩坑花费了较多的时间，后面会详细说。
换个角度理解这两个组件更合适，form-create是运行时，而form-create-designer是设计时（或称之为组态时/开发时）。form-create-designer是基于form-create的模型和API二次封装出来的，用于表单设计的工具，其输出的表单配置，以json数据的方式赋给form-create组件，在页面运行时由form-create解析json数据，生成表单，展示并运行。
基本使用
首先来说下form-create组件。
对于vue3版本，除了支持element-plus外，还支持其他几套UI库，
- ant-design-vue
- naive-ui
- arco-design
- TDesign
安装
执行命令安装
pnpm i @form-create/element-ui@next
安装完成，前端项目中package.json中增加了如下库引用：
"@form-create/element-ui": "^3.1.24",
配置
采用全局配置的模式，修改main.js，加入以下配置：
// 表单构建器
import FormCreate from '@form-create/element-ui'
……
// 创建实例
const setupAll = async () => {
const app = createApp(App)
await setupI18n(app)
setupStore(app)
setupGlobCom(app)
setupRouter(app)
setupPermission(app)
// 全量注册element-plus组件
app.use(ElementPlus)
// 表单构造器
app.use(FormCreate)
…………
// echart图表
app.component('v-chart', ECharts)
app.mount('#app')
}
注意，这里官方文档没提，但经测试只能采用上面这种全局配置模式，若在某个具体页面，引用
import FormCreate from '@form-create/element-ui’后使用，加载环节就会直接报错，无法正常运行。
若要在具体使用该组件的vue页面，获取到组件实例，可以直接使用this.$formCreate这种方式。
使用
<div id="app">
<form-create v-model="value" v-model:api="fApi" :rule="rule" :option="option"></form-create>
</div>
export default {
data() {
return {
//实例对象
fApi: {},
//表单数据
value: {},
//表单生成规则
rule: [
{
type: 'input',
field: 'goods_name',
title: '商品名称'
},
{
type: 'datePicker',
field: 'created_at',
title: '创建时间'
}
],
//组件参数配置
option: {
//表单提交事件
onSubmit: function (formData) {
alert(JSON.stringify(formData))
}
}
}
}
}
运行效果如下：
可以正常输入文本和选择日期，点击提交按钮，获取的表单数据如下图所示：
技术验证
平台已实现的低代码配置部分，可以通过实体和视图的元数据配置+模板化技术生成前端vue页面，封装了大量的自定义组件，如依托于数据字典的下拉列表和单选按钮组、部门选择、用户选择、实体参照等。
引入表单设计器，需要考虑二者的关系，是视为两种独立的表单配置模式，还是二者相互协作。
自定义组件
虽然form-create内置了大量的组件，但这些组件是独立运行的，有着自己的运行模式。以常见常用的下拉列表为例，内置组件提供了fetch方法，用于向后端服务获取字典数据，因此要设置后端的服务地址，并且需要处理认证问题。
平台已封装的基于数据字典的下拉列表，只需要直接使用一个组件，赋予字典类型编码即可，如下所示：
<dictionary-select v-model="onSaleFlag" code="YesOrNo" />
官方文档明确指出，form-create 支持的在表单内部生成任何 vue 组件。
我们要进行技术验证，就拿平台已封装的基于数据字典的下拉列表DictionarySelect来进行尝试。
参照官方说明，自定义组件在使用时，需要先挂载，相当于向form-create组件注册，通过下面这种方式挂载
this.$formCreate.component(
'DictionarySelect', DictionarySelect)
即调用form-create组件的API，使用component方法，第一个参数是组件类型的命名，第二个参数是组件。
另外，还有一种更便捷的方式，是指定form-create组件的rule属性的时候，在component属性中直接指定组件，同时配置type属性指定组件的类型的命名
const rule = {
type:'DictionarySelect',
component: DictionarySelect
}
需要注意的是，后面这种方式并不能完全替代挂载的方式，在基于API方式构建表单组件的情况下，还是需要前面那种注册组件的方式，后面集成的时候会给出范例。
在官方示例基础上，添加了字典下拉列表组件，前端测试页面的源码如下：
<template>
<form-create v-model="value" v-model:api="fApi" :rule="rule" :option="option" v-show="true" />
</template>
<script lang="ts">
import DictionarySelect from '@/components/abc/DictionarySelect/DictionarySelect.vue'
export default {
components: { DictionarySelect },
data() {
return {
//实例对象
fApi: {},
//表单数据
value: {},
//表单生成规则
rule: [
{
type: 'input',
field: 'goods_name',
title: '商品名称'
},
{
type: 'datePicker',
field: 'created_at',
title: '创建时间'
},
{
type: 'DictionarySelect',
component: DictionarySelect,
field: 'onSaleFlag',
title: '是否在售',
props: {
code: 'YesOrNo'
}
}
],
//组件参数配置
option: {
//表单提交事件
onSubmit: function (formData) {
alert(JSON.stringify(formData))
}
}
}
},
mounted() {},
methods: {}
}
</script>
<style></style>
运行效果如下：
页面功能测试正常，可以自动请求后端拿到字典数据，不过浏览器显示了警告：
大概意思是组件自身已经是响应式的了，没必要再包一层，影响性能，建议使用markRaw，因此做了改造：
import { markRaw } from 'vue'
……
{
type: 'DictionarySelect',
component: markRaw(DictionarySelect),
field: 'onSaleFlag',
title: '是否在售',
props: {
code: 'YesOrNo'
}
}
调整后浏览器控制台干净了。
这部分处理是自己摸索解决的，官方文档并没有提到。
在上面基础上，又验证了平台封装的几个典型组件，包括实体参照，即弹出对话框选择其他实体对象，如组织机构，功能正常。
综上，自定义组件的支持没问题。
组件属性
对于vue组件，属性很重要，这块form-create（以下统一简称为fc）组件通过props属性来适配，无论是ElementPlus的组件，还是自封装的组件，属性都可以方便的设置，这方面fc的设计上考虑周到，用起来友好，赞一个。
以平台已封装的基于数据字典的下拉列表DictionarySelect为例，组件上有个属性code，用于指明数据字典的类型编码，通过form-create的内置属性props解决。
{
type: 'DictionarySelect',
component: DictionarySelect,
field: 'onSaleFlag',
title: '是否在售',
props: {
// 在这里指定属性及值
code: 'YesOrNo'
}
}
再举一个例子，对于日期时间选择，平台进行了二次封装，通过元数据配置，基于自定义的js方法来设置el-datetimePicker的属性，经测试通常可以正常运行。
valueFormat: this.$dateFormatter.getDatetimeFormat(item.formatPattern),
type: this.$dateFormatter.getDatetimeType(item.formatPattern)
开发平台资料
平台名称：一二三开发平台
简介： 企业级通用开发平台
设计资料：csdn专栏
开源地址：Gitee
开源协议：MIT
开源不易，欢迎收藏、点赞、评论。
