动态表单 FormCreate 对接后端设计、配置、全局数据源设置保存;填写信息记录

近期有个项目需要对接FormCreate 实现将设计信息、表单配置与全局数据源保存到数据库。并且需要在数据库中保存填写的数据并提供相应接口返回

1.设计信息与表单配置信息可单独保存在数据库中直接使用两个字段保存即可。如图:

在这里插入图片描述

2.数据填写数据存储与设计信息关联

在提交设计信息时可以从设计中将非设计元素的Json串提取出来(属性对照可参照FormCreate说明)

{
  "type": "input",
  "field": "F9wzmhstyu3oabc",
  "title": "输入框",
  "$required": false,
  "_fc_id": "id_Fydamhstyu3oacc",
  "name": "ref_Fpvemhstyu3oadc",
  "display": true,
  "hidden": false,
  "_fc_drag_tag": "input"
}

这里我们需要先生成一个填写业务数据表名称保存到设计信息表中,业务数据表的列则从提取出来的非设计元素的Json串中获取,如图:
在这里插入图片描述
此处由于设计信息是用户自行完成,自由度比较高所以不能使用固定的拆分逻辑,需要使用递归来
筛选出所有非设计元素的Json串

3.表单填写的业务数据查询

以上说到的是设计信息与业务表的生成与关联。在使用中填写的数据会存储到业务数据表中使用主键关联即可查询出填写的数据列表来返回。我这的业务表生成的列是使用_fc_id的值,但前端数据绑定使用的是field,前期确认时发现使用_fc_id比较保险不会重复,所以这里需要使用_fc_id到设计信息中获取对应的field的值作为Key返回,而value就是_fc_id对应列的内容

4.针对分步表单的特殊处理

针对分步表单的处理,其实可使用上面说的逻辑来实现,只是需要将步骤拆分新增设计信息与生成业务表。因为分步表单可能会涉及到填写权限的问题,所以需要拆分生成来控制填写权限,
分步表单的填写同样需要拆分保存 最后可以生成一个总表来用来查询回显数据

总结

其实开发过程中遇到许多坑,东西比较多这里就不一一赘述了,发布这个帖子就是跟大家交流一下,给刚刚开始对接的朋友一些建议
如果有好的建议欢迎大家留言讨论

### 基于后端数据 Vue 动态创建 Form 表单 为了实现基于后端数据动态生成表单的功能,`form-create` 提供了一种简便的方法来处理复杂的表单逻辑。此开源项目允许通过 JSON 配置文件定义表单项及其属性,从而简化了开发流程并提高了灵活性[^2]。 #### 安装 `form-create` 首先,在项目中安装 `form-create` 及其依赖项: ```bash npm install @form-create/element-ui --save ``` 接着引入必要的模块到 Vue 项目中: ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import FormCreate from '@form-create/element-ui'; Vue.use(ElementUI); Vue.use(FormCreate); ``` #### 获取后端数据 假设有一个 API 接口 `/api/formConfig` 返回如下结构的数据作为表单配置: ```json { "fields": [ { "type": "input", "field": "name", "title": "姓名" }, { "type": "select", "field": "gender", "title": "性别", "options": ["男", "女"] } ] } ``` 可以通过 Axios 或其他 HTTP 请求库获取这些配置信息: ```javascript axios.get('/api/formConfig') .then(response => this.formOptions = response.data.fields) .catch(error => console.error('Error fetching form config:', error)); ``` #### 创建动态表单组件 利用上述获得的字段列表构建一个响应式的表单模板。这里展示了一个简单的例子说明如何根据接收到的数据渲染相应的输入控件: ```html <template> <el-form :model="formData"> <!-- 循环遍历 fields 数组 --> <fc-form-item v-for="(item, index) in formOptions" :key="index" :rule="item"></fc-form-item> </el-form> </template> <script> export default { data() { return { formData: {}, formOptions: [] }; }, created() { axios.get('/api/formConfig').then((response) => (this.formOptions = response.data.fields)); } }; </script> ``` 在这个过程中,`v-for` 指令用于迭代来自服务器的每一项配置,并将其传递给 `<fc-form-item>` 组件以生成具体的 HTML 输入元素。同时,`:model` 属性绑定了整个表单的状态对象 `formData`,使得用户提交的信息可以直接映射至 JavaScript 对象上[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值