FormMaking 1.3.0 新版发布,自定义表单支持数据源配置__Vue.js
发布于 2 个月前 作者 banyungong 187 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

简介

FormMaking 是基于 Vue 的可视化表单设计器,赋能企业实现低代码开发模式;帮助开发者从传统枯燥的表单代码中解放出来,更多关注业务,快速提高效率,节省研发成本。在OA系统、考试系统、报表系统、流程管理等系统中应用广泛。基于 vue 和 element-ui 实现,使用了最新的前端技术栈,内置了 i18n 国际化解决方案,支持二次开发,支持自定义组件引入。

提供 表单设计器(MakingForm)和表单生成器(GenerateForm)两个组件,通过表单设计器快速设计出表单页面,生成可配置json和可直接运行的代码,使用表单生成器快速渲染出表单页面,并提供了丰富的操作API。

技术文档

更新内容

数据源

这次更新主要为表单设计器加上了数据源,让表单和后端数据间实现了方便的交互,通过配置数据源可以方便的拿到后端的数据,数据源配置也是采用通用的接口配置模式。

可以通过下方动图来感受下数据源如何配置:

详细的配置方法可以查看官方文档 配置数据源

设计器初始化配置

表单设计器可以在初始化时进行一些全局的配置,比如使用的ui库、表单的样式表、数据源等。

<template>
  <fm-making-form ref="makingForm" clearable upload preview generate-code generate-json
    :global-config="globalConfig"
  >
  </fm-making-form>
</template>

<script>
export default {
  data() {
    return {
      globalConfig: {
        // 可以将表单预设的样式放入到设计器中
        styleSheets: '.a .el-form-item__label{color: red;}',
        dataSource: [
          {
            key: 'getoptions', // 指定的唯一值
            name: 'Get Options', // 数据源名称,唯一值
            url: 'http://tools-server.making.link/api/new/options', // 请求接口地址
            method: 'GET',
            auto: true, // 是否表单初始化时发送请求
            responseFunc: 'return res.data', // 数据处理函数内容
            headers: {}, // 数据请求头部,可选
            params: {}, // 数据请求参数,可选
            
            // 当 method == 'GET' 时,params会以查询参数方式提交,其它情况在 body 中提交。
          }
        ]
      }
    }
  }
}
</script>

更多的配置可以查看API Global Config Options

其它已知问题修复与优化

根据用户反馈的问题进行优化与修复。

最后的话

FormMaking 会一直进行功能完善,帮助企业快速实现表单的自定义,如果大家有任何疑问,建议和需求都可以联系我们

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: GavinZhulei43052 原文链接:https://juejin.im/post/6951594151443955749

回到顶部