2022-04-24 表单设计器动态插入脚本【低代码平台】

需求背景

目前低代码平台中的表单设计器很方便的帮助我们快速开发出表单，但是衍生项目里某些表单有很多特殊需求，不得不在核心文件parser里进行编辑（按特殊情况处理），使文件很乱。所以需要在构建表单时，可以手动在配置页面输入特殊处理代码，动态插入到generator的某处。这样就实现了个别表单的特殊需求。

实现过程：

获取字符串，并作为js脚本运行
在js脚本获取设计器表单中某个控件的值
添加变更事件（js脚本运行在文件何处）
通过js脚本改变某个控件的值（比如实现控件值的联动）
引入在线编辑器插件（markdown：mavon-editor 代码编辑器（高亮）： vue-codemirror-lite
）

解决思路

几种将字符串当做js脚本运行的方法，主要有定时器和eval，考虑到this指向问题，抛弃安全性和性能问题，这里用的eval。
在把eval放在合适的位置执行，和平时的代码写法一样，通过this和控件的字段名直接取到值。（或通过ref取到控件的虚拟dom也行）
因为是简单的dome，只需要在特定的某个按钮点击前后或控件值改变后做特殊处理，这里用select选择框列举了几个事件位置供开发人员使用。（如果想整篇插入新vue文件，比如生成新的控件之类的，可以使用jsx动态插入，或者动态引入vue组件）
在子控件输入值的时候，设计器是统一通过parser父组件改变vuex数据实现的，考虑到值的来源唯一性。在实际使用时候写脚本时，我们需要监听控件的值的改变，在脚本里触发emit，依旧通过parser改变相应控件的值。

// 对102做必填校验
if(!this[this.formConf.formModel].field102){this.msgError('您没有填写')flag = false
}

// js脚本：通过104和105联动103
this.$set(this[this.formConf.formModel],'field103',this[this.formConf.formModel].field104 + '-' + this[this.formConf.formModel].field105
)
this.$set(this.formInfo,'field103',{type: 'wf-input',value: this[this.formConf.formModel].field104 + '-' + this[this.formConf.formModel].field105}
)
this.$store.commit('SET_EVENT', { type: 'blur', id: 'field103', tag: 'wf-input', value: this[this.formConf.formModel].field104 + '-' + this[this.formConf.formModel].field105 })

2022-04-24 表单设计器动态插入脚本【低代码平台】相关推荐

通过表单设计器动态生成数据库表以及动态查询的功能实现
表单设计器动态生成数据库表以及动态查询的功能实现前言 1. 功能实现 1.1 效果说明 1.2 功能流程图 1.3 具体后端实现 1.4 实现效果 2. 尾声前言前两天安排了作为Java小码农的 ...
Vue——formcreate表单设计器自定义组件实现
form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成组件.支持3个UI框架,并且支持生成任何 Vue 组件.内置20种常用表单组件和自定义组件,再复杂 ...
Silverlight Forms Builder表单设计器FreeForm 简介
2019独角兽企业重金招聘Python工程师标准>>> FreeForm 简介 FreeForm 是昕友软件开发的免费表单设计器,是亿方智能平台的其中一个组件. 是一个基于 .N ...
基于vue Ant-Design 的表单设计器，快速开发
基于vue Ant-Design 的表单设计器,快速开发https://gitee.com/kcz66/k-form-design/ 表单设计器 k-form-design image 简介参考项目 ...
.net erp（办公oa）开发平台架构概要说明之表单设计器
2019独角兽企业重金招聘Python工程师标准>>> 背景:搭建一个适合公司erp业务的开发平台. 架构概要图: 表单设计开发部署示例图表单设计开发部署示例说明 1)每个开发 ...
Antd Vue 表单生成快速开发指南，内附强大的表单设计器
之前发布了一款基于Element的表单设计器,可以快速设计和生成表单,设计器地址:http://form.making.link/.现在我可以告诉大家,Antd表单支持来了,可以使用设计器设计好表单后 ...
不得不说，还是这款开源工作流表单设计器较合心意！
近几年,低代码的热潮持续不断.且不说之前的阿里钉钉跨平台写作方式.飞书上的审批流程,就说现在我们大部分人接触到的表单审批.投票的模板等,几乎都是以低代码的方式来呈现在大家面前的.在数字化转型的浪潮下, ...
流程设计器与表单设计器(Wxd.WF,BPM.Foundation,Wxwinter.WF 升级用)
流程设计器针对前一版本有如下变化: 1.重构了流程设计器的架构,重写了功能类库,第一个版本(红版)只是一个为实现各种功能和例子拼凑,本版则是正式设计版 2.将一些选项卡变为独立页面 3.将原有的对S ...
什么是开源表单设计器？
在现代化办公场所里,提升办公效率是很多企业需要解决的一个课题.在业务量激增的当下,面对众多表格.表单需要制作,如何才能提升表格的制作效率和数据的使用率?一款开源表单设计器就可以派上用场了.今天,我们就 ...
要想工作流程更简便，试试开源web表单设计器
繁杂的工作流程,让您头疼不已?传统的表单制作效率低?内部数据迟迟得不到有效管理?-作为职场人的你,是否经常遇到上述问题.别着急,在如今的快节奏发展时代,传统的表单制作已经满足不了行业和市场的需求了,想 ...

2022-04-24 表单设计器动态插入脚本【低代码平台】

需求背景

实现过程：

解决思路

2022-04-24 表单设计器动态插入脚本【低代码平台】相关推荐

最新文章

热门文章