form-making爬坑笔记(jeecg项目替换表单设计器)
资料
官网
在线演示网站-基础版
基础版-文档
在线演示网站-高级版
高级版-文档
版本对比
基础版本 | 高级版本 | |
---|---|---|
功能 | 提供了一些基础表单控件,表单校验,获取数据等基础功能。 | 相较于基础版本,高级版本提供了更丰富的功能:页面更加美观 |
通过点击即可快速添加字段; | ||
更多的属性设置,包括数据源与表单事件; | ||
更多的控件字段(子表单、自定义组件等); | ||
更多的布局容器,并且可以相互嵌套(栅格、表格、标签页); | ||
更多的API,满足更复杂的业务需求; | ||
加入自定义字段,可以快速将自己开发的组件引入; | ||
可快速添加自定义样式; | ||
支持数据源,方便表单数据配置; | ||
支持动作事件,可以让表单更加灵活配置; | ||
多终端适配展示; | ||
提供了 Ant Design 风格的组件(通过引入 antd vue 修改); | ||
演示地址 | http://form.making.link/basic-version | http://form.making.link/sample |
是否开源 | 是 | 否 |
使用协议 | LGPL | 授权许可协议 |
是否能商用 | 否 | 是 |
地址 | Github 、Gitee | 官网 |
文档 | Github | 官方文档 |
服务 | 不定期更新修复bug | 定期更新和修复bug |
技术支持 | 相关意见将被我们作为首要考虑 |
结果
由于我们项目中最需要的就是自定义表单设计器组件,所以我笔记中记录的就是高级版的。
起步准备工作
将在
form-making
控制台下载的源码放到项目的lib
目录下注意:如果你的项目没有
lib
目录的话,新建即可├── lib # 项目lib目录,用于放置FormMaking产品 │ │── vue-form-making # 从网站下载的FormMaking程序包 │ │ │── src # FormMaking 源码包,源码版本才有该目录 │ │ │── dist # FormMaking 打包后的文件目录 │ │ │── package.json # 配置文件 ├── src # 项目代码 ├── package.json # package.json ├── vue.config.js # vue-cli 配置
完整版目录解析
├── public # 静态资源 │ │── lib # 第三方插件库 │ │── index.html # html模板 ├── src # 源代码 │ │── assets # 图片等静态资源 │ │── components # 组件库 │ │ │── AntdvGenerator # Ant Design Vue 生成器目录 │ │ │── CodeEditor # 代码编辑器组件 │ │ │── Editor # 富文本编辑器组件 │ │ │── FormTable # 子表单生成器组件 │ │ │── Upload # 上传组件 │ │ │── CodeDialog.vue # 代码编辑器弹框组件 │ │ │── componentsConfig.js # 设计器字段配置 │ │ │── Container.vue # 设计器入口组件 │ │ │── CusDialog.vue # 封装的公用的弹框组件 │ │ │── FormConfig.vue # 设计器表单属性配置 │ │ │── generateCode.js # 生成代码js文件 │ │ │── GenerateColItem.vue # 生成栅格布局 │ │ │── GenerateElementItem.vue # 生成表单子项对应的组件 │ │ │── GenerateForm.vue # 生成器入口组件 │ │ │── GenerateFormItem.vue # 生成表单子项 │ │ │── GenerateReport.vue # 生成表格组件 │ │ │── GenerateTabItem.vue # 生成标签组件 │ │ │── WidgetColItem.vue # 栅格设计组件 │ │ │── WidgetConfig.vue # 设计器字段属性配置 │ │ │── WidgetElementItem.vue # 设计器表单子项内部详细组件 │ │ │── WidgetForm.vue # 设计器表单设计区域 │ │ │── WidgetFormItem.vue # 设计器表单子项设计 │ │ │── WidgetReport.vue # 设计器表格组件 │ │ │── WidgetTabItem.vue # 设计器标签组件 │ │ │── WidgetTable.vue # 设计器子表单组件 │ │ │── WidgetTableItem.vue # 设计器子表单内部组件 │ │── demo # 示例demo │ │ │── CustomComponent.vue # 演示自定义组件 │ │ │── Home.vue # 演示设计器 │ │ │── Test.vue # 测试功能 │ │── directive # 全局指令 │ │── iconfont # iconfont 字体库 │ │── lang # 国际化配置 │ │── router # 路由 │ │── styles # 全局样式 │ │── util # 全局公用方法 │ │── App.vue # 入口页面 │ │── editorBundle.js # 打包 VueEditor │ │── index.js # 设计器打包入口 │ │── main.js # 入口文件 加载组件 初始化等 ├── package.json # package.json ├── vue.config.js # vue-cli 配置
引入
Vue
完整版本在
vue.config.js
文件中chainWebpack: config => {config.resolve.alias.set('vue$', 'vue/dist/vue.esm.js') }
安装和引入
element-ui
yarn add element-ui
然后在项目的
main.js
文件中引入和全局注册import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);
引入
FormMaking
在
main.js
文件中import FormMaking from '@/lib/vue-form-making' import '@/lib/vue-form-making/dist/FormMaking.css'Vue.use(FormMaking)
官方文档中有要修改
babel
配置的,但是我这里没有做更改两种方式根据自己项目情况选择一种就行
// 在package.json中如下配置,适用于项目babel配置在package.json中 "babel": {"sourceType": "unambiguous" }// 在 babel.config.js 中如下配置,适用于项目 babel 配置在单独的 babel.config.js 文件中 module.exports = {sourceType: 'unambiguous' }
demo页面使用
<template> <fm-making-form ref="makingform" style="height: 500px;" preview generate-code generate-json > </fm-making-form> </template>
修改代码配置
几个踩过的坑
说明:由于组件直接引用的是
dist
中的代码,而不是src
中的代码,所以每次改动都需要重新打包才能够生效需要本地安装了
vue-cli
:npm install -g @vue/cli
然后需要给这部分安装
node_modules
,可以看到这部分源码是有package.json
和dist
的,但是给你的包是没有node_modules
不过如果没有修改代码的需求是不用修改的,直接正常引用dist就好
然后需要使用在源码根目录(注意不是项目根目录哦)进行打包:
npm run build-bundle
这里如果失败(我自己失败了好几种情况),进行下面几种方式的尝试
删除
node_modules
之后重新安装然后打包如果还不行,使用
npm
进行安装,不要使用cnpm
和yarn
这边成功打包好了
dist
之后,你的项目理论上来说会重新更新构建但是不排除会报错,说某些模块或者文件找不到,这种情况将项目重启即可(我也是这种情况)
根据上述步骤,
dist
里面有了你改动之后的代码之后就可以正常看到生效了修改的几种配置文件路径
表单属性:设计器右侧的【表单属性】、【字段属性】
src/components/Container.vue
:增加配置(增加字段)export default{data () {return {widgetForm: {list: [],config: {// 在此处扩展表单的配置信息,例如:// width: '100%'},}} } }
src/components/FormConfig.vue
:在表单设计器中增加ui组件(为增加的字段赋值)<el-form> <el-form-item label="宽度" ><el-input v-model="data.width" clearable></el-input> </el-form-item> </el-form>
src/components/GenerateForm.vue
:设计器生成的表单如何渲染(将增加的字段值用于控制表单)<div :style="{width: data.config.width}" class="fm-form">...</div>
表单组件:设计器左侧的【表单组件】
src/components/componentsConfig.js
:增加新的组件配置(增加字段){type: 'input', // 组件类型,保持唯一name: '单行文本', //组件展示名称icon: 'icon-input', //组件展示icon, 如果需要自定义,请参考 如何自定义图标options: { // 组件配置信息,根据自定义组件自己添加配置defaultValue: '', // 该值表示组件的默认值// 根据自己的组件自定义添加配置参数} }
src/components/Container.vue
:在表单设计器中左侧拖拽组件中增加该组件export default {props: {basicFields: {type: Array,default: () => ['input']} } }
src/components/WidgetElementItem.vue
:引用组件,即拖拉拽组件在设计器中该如何渲染<template v-if="element.type == 'input'"> <custom-compontnetsv-model="element.options.defaultValue" ></custom-compontnets> </template><script> import CustomComponent from '...' export default {components: {CustomComponent} } </script>
src/components/WidgetConfig.vue
:为表单组件增加属性配置参考前面表单属性配置
这里需要额外增加一步,就是在
src/components
下新建一个目录或文件,用于定义你新增加的组件src/components/GenerateElementItem.vue
:引用上一步中增加的组件,生成器生成的该表单组件如何渲染<template v-if="widget.type == 'input'"> <div :style="{width: isTable ? '100%' : widget.options.width}"><custom-compontnets v-model="dataModel"></custom-compontnets> </div> </template><script> import CustomComponent from '...' export default {components: {CustomComponent} } </script>
需要补充的是,中文描述位于
lib\vue-form-making\src\lang\zh-CN.js
这个文件里面布局组件(也是表单组件的一种)
我这里是按照
inline
行内组件的实现方式进行模仿的,是个很好的主意前几步同表单组件
src/components/componentsConfig.js
:增加新的组件配置(增加字段)src/components/Container.vue
:在表单设计器中左侧拖拽组件中增加该组件zh-CN.js
:增加对应的中文描述
接下来新的几个步骤
设计器相关
src\components\FormMaking
目录下新增设计器组件实现文件,如:src\components\FormMaking\WidgetCard.vue
src\components\FormMaking\WidgetColItem.vue
:生成器栅格设计增加该组件的引用和渲染src\components\FormMaking\WidgetConfig.vue
:生成器组件配置文件加该组件的渲染src\components\FormMaking\WidgetForm.vue
:生成器表单设计区域增加该组件的引用和渲染src\components\FormMaking\WidgetReport.vue
:生成器表格增加该组件的引用和渲染src\components\FormMaking\WidgetTabItem.vue
:生成器标签增加该组件的引用和渲染src\components\FormMaking\WidgetReport.vue
:生成器子表单增加该组件的引用和渲染
生成器相关
src\components\FormMaking
目录下新增生成器组件实现文件,如:src\components\FormMaking\GenerateCard.vue
src\components\FormMaking\GenerateForm.vue
:生成器入口组件中增加该组件src\components\FormMaking\GenerateColItem.vue
:生成栅格布局组件中增加该组件src\components\FormMaking\GenerateReport.vue
:生成表格组件组件中增加该组件src\components\FormMaking\GenerateTabItem.vue
:生成器标签组件中增加该组件
样式相关
styles/index.cscc
:样式文件里面需要增加相应的样式
生成代码相关
src\components\FormMaking\generateCode.js
:生成代码里面增加对于容器组件的判断
表单的校验配置实现方式
设计器组件的配置设置组件校验字段配置:
src/components/WidgetConfig.vue
这里是:右边设置的字段配置
搜索这一段代码:
<el-form-item :label="$t('fm.config.widget.validate')">
,大概在1400行左右设计器组件规则的相关生成函数:
src/components/WidgetConfig.vue
这里是将设置的字段配置进行校验和整理为一个数组
validateRequired
validateDataType
valiatePattern
generateRule
生成器组件规则整理为
element-ui
中form需要的格式文件位置:
src/components/GenerateForm.vue
格式化函数:
generateModel
使用位置:
el-form
组件的rules
属性rules
规则使用的是element
的form
的rules,具体在https://github.com/yiminghe/async-validator
一些小技巧
表单校验首次清空之后多了英文提示
原因:
elemenet-ui
的el-form-item
组件中如果require
属性为true
的话会对于这个表单绑定的字段进行校验,但是实际上我们一般情况下都是对于表单里面的具体组件进行添加校验规则的,这里就重复且多余了,就会多一条默认的英文提示解决:因为我们自己添加了自定义的精确到表单具体组件的校验规则,那么
this.setData()方法在只读模式下不生效
官方文档少了一个参数的,代码里面支持第二个参数(这个参数表示是否在只读模式下执行setData,默认是true表示不执行)
setData(value, addOnly = true) { // addOnly 仅编辑状态下执行if (!addOnly || this.edit) {Object.keys(value).forEach((item) => {this.$set(this.models, item, value[item]);});} }
调整后使用如下
// 原来的使用 this.setData({name: 123});// 现在的使用 this.setData({name: 123}, false);
form-making爬坑笔记(jeecg项目替换表单设计器)相关推荐
- 非常实用表单设计器及智能表单引擎(项目源码)
非常实用表单设计器及智能表单引擎(项目源码) 项目集成了智能表单设计.工作流可视化设计(js源码可直接引用)以及统计的定制设计 介绍一个非常实用(已经应用许多项目)表单设计器及智能表单引擎的开发平台, ...
- 替换雷劈网表单设计器使用的默认主题,使用neditor
替换步骤: 1.前往雷劈网下载demo,快速通道http://formdesign.leipi.org/downloads.html 2.下载neditor,快速通道:https://www.osch ...
- 报表服务器项目交叉表,报表设计器
报表设计器 12/15/2008 本文内容 更新日期: 2006 年 4 月 14 日 报表设计器是一组宿主在 Microsoft Visual Studio 环境中的设计图面和图形工具.报表设计器提 ...
- vue集成Variant Form表单设计器
1.安装 npm install vform-builds 2.引入并全局注册VForm组件 import Vue from 'vue' import App from './App.vue'impo ...
- Turtlebot3调试必看——爬坑笔记
设备及系统版本: PC端: Lenovo Y7000P + Ubuntu18.04 + ROS Melodic. 如果使用电脑也为此型号,系统建议安装Ubuntu18.04,因为安装16.04后会缺少 ...
- Oracle项目业务表单设计:Oracle PrimaveraUnifier BP
目录 基本介绍 Basic Introduction 业务流程组件 Business Process Components 数据定义 Data Definitions 数据要素 Data Elemen ...
- SpringMVC:学习笔记(5)——数据绑定及表单标签
SpringMVC--数据绑定及表单标签 理解数据绑定 为什么要使用数据绑定 基于HTTP特性,所有的用户输入的请求参数类型都是String,比如下面表单: 按照我们以往所学,如果要获取请求的所有参数 ...
- JavaScript自学笔记(1)---表单验证,let和const,JSON文件
今天开个JS自学笔记,本身JS的语法很简单,如果学过Java或者C系的都很容易,就不讨论了.主要是讨论实际应用的问题. 1.表单验证: a.html自动验证: HTML 表单验证可以通过浏览器来自动完 ...
- bootstrap学习笔记(2)表单设计
1.表单设计 表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通.表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. (1) 基 ...
- 《Dreamweaver CS6 完全自学教程》笔记 第十章:表单的使用
文章目录 第十章:表单的使用 10.1表单概述 技术专题:表单的工作流程 10.2表单的创建及设置 10.2.1 创建表单 10.2.2 设置表单属性 10.3 创建表单对象 10.3.1 创建文本域 ...
最新文章
- java学习笔记13--反射机制与动态代理
- golang中base64编码_Go语言教程:Base64编码
- 模板标签及模板的继承与引用
- 合租房资金管理系统--会议纪要
- postgre查询表最后更新日期_Power BI 10月份功能更新浅译
- [swift] LeetCode 94. Binary Tree Inorder Traversal
- W3Cschoool菜鸟教程
- 东芝抢先一步,推出了全球首款16TB容量的硬盘MG08系列
- linux 改变用户组、文件拥有者、文件属性
- POJ 3233 Matrix Power Series(java)
- 40种顶级思维模型,学会任何1种都让你受用无穷,赶紧点赞收藏
- 怎样在百度UMeditor编辑器中插入腾讯和爱奇艺网站视频?
- 深入浅出计算机组成原理04 | 穿越功耗墙,我们该从哪些方面提升“性能”
- Windows11 C盘清理-系统休眠文件占用15G
- 【菜菜子力扣刷题】1.两数之和
- 常用的arm汇编指令(3) -学无止尽,积土成山,积水成渊
- 图片和文字对齐的方法
- 基础五:光的量子纠缠
- Ubuntu 20.04安装百度拼音输入法
- 【名片制作】深灰色背景·简单名片设计