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

需求背景

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

实现过程：

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

解决思路

1. 几种将字符串当做js脚本运行的方法，主要有定时器和eval，考虑到this指向问题，抛弃安全性和性能问题，这里用的eval。
2. 在把eval放在合适的位置执行，和平时的代码写法一样，通过this和控件的字段名直接取到值。（或通过ref取到控件的虚拟dom也行）
3. 因为是简单的dome，只需要在特定的某个按钮点击前后或控件值改变后做特殊处理，这里用select选择框列举了几个事件位置供开发人员使用。（如果想整篇插入新vue文件，比如生成新的控件之类的，可以使用jsx动态插入，或者动态引入vue组件）
4. 在子控件输入值的时候，设计器是统一通过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 })