Form-making pit climbing notes (jeecg project replaces the form designer)

material

version comparison

	base version	premium version
Function	Provides some basic form controls, form validation, data acquisition and other basic functions.	Compared with the basic version, the advanced version provides richer functions: the page is more beautiful
		Quickly add fields with a click;
		More property settings, including data sources and form events;
		More control fields (subforms, custom components, etc.);
		More layout containers, and can be nested (grid, table, tab);
		More APIs to meet more complex business needs;
		By adding custom fields, you can quickly introduce your own developed components;
		Quickly add custom styles;
		Support data source, convenient form data configuration;
		Support action events, which can make the form more flexible configuration;
		Multi-terminal adaptation display;
		Ant Design-style components are provided (modified by introducing antd vue);
demo address	http://form.making.link/basic-version	http://form.making.link/sample
Is it open source	yes	no
Use Agreement	LGPL	License Agreement
Can it be used commercially?	no	yes
address	Github 、Gitee	official website
document	Github	official document
Serve	Update and fix bugs from time to time	Regular updates and bug fixes
Technical Support		Relevant opinions will be our primary consideration

result

Since the custom form designer component is most needed in our project, the advanced version is recorded in my notes.

Getting Started

form-makingPut the source code downloaded in the console libinto the project directory

Note: If your project does not have liba directory, just create a new one

├── lib                       # 项目lib目录，用于放置FormMaking产品
│   │── vue-form-making       # 从网站下载的FormMaking程序包
│   │   │── src				  # FormMaking 源码包，源码版本才有该目录										
│   │   │── dist              # FormMaking 打包后的文件目录
│   │   │── package.json	  # 配置文件
├── src                       # 项目代码
├── package.json              # package.json
├── vue.config.js             # vue-cli 配置

Full version directory analysis

├── 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 配置

import Vuefull version

in vue.config.jsthe file

chainWebpack: config => {
      
      
    config.resolve.alias.set('vue$', 'vue/dist/vue.esm.js')
}

Install and importelement-ui

yarn add element-ui

main.jsThen import and register globally in the project's file

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

introduceFormMaking

in main.jsthe file

import FormMaking from '@/lib/vue-form-making'
import '@/lib/vue-form-making/dist/FormMaking.css'

Vue.use(FormMaking)

There are babelconfigurations to be modified in the official documentation, but I haven't made any changes here

There are two ways to choose one according to your own project situation.

// 在package.json中如下配置，适用于项目babel配置在package.json中
"babel": {
      
      
"sourceType": "unambiguous"
}

// 在 babel.config.js 中如下配置，适用于项目 babel 配置在单独的 babel.config.js 文件中
module.exports = {
      
      
sourceType: 'unambiguous'
}

The demo page uses

<template>
<fm-making-form 
    ref="makingform" 
    style="height: 500px;" 
    preview 
    generate-code 
    generate-json
>
</fm-making-form>
</template>

Modify code configuration

a few pits stepped on
1. Note: Since the component directly refers to distthe code in , not srcthe code in , every change needs to be repackaged to take effect
2. Need to install locally vue-cli:npm install -g @vue/cli
3. Then you need to install this part node_modules. You can see that this part of the source code is available package.json, distbut the package for you is not.node_modules
  
  However, if there is no need to modify the code, there is no need to modify it, just refer to dist normally
4. Then it needs to be packaged in the root directory of the source code (note that it is not the root directory of the project):npm run build-bundle
  
  If it fails here (I have failed in several situations), try the following methods
  1. node_modulesReinstall after deleting and then package
  2. If that doesn't work, npminstall with, don't use cnpmandyarn
5. After successfully packaging here dist, your project will theoretically be re-updated and built
  
  But it is not ruled out that an error will be reported, saying that some modules or files cannot be found. In this case, just restart the project (this is also the case for me)
According to the above steps, distafter you have the modified code in it, you can see it takes effect normally.
Modified several configuration file paths
1. Form properties: [Form Properties], [Field Properties] on the right side of the designer
  1. src/components/Container.vue: Add configuration (add fields)
```
export default{
          
          
data () {
          
          
    return {
          
          
    widgetForm: {
          
          
        list: [],
        config: {
          
          
        // 在此处扩展表单的配置信息，例如：
        // width: '100%'
        },
    }
    }
}
}
```
  2. src/components/FormConfig.vue: Add ui components in the form designer (assign values to the added fields)
```
<el-form>
<el-form-item label="宽度" >
    <el-input v-model="data.width" clearable></el-input>
</el-form-item>
</el-form>
```
  3. src/components/GenerateForm.vue: How to render the form generated by the designer (the added field value is used to control the form)
```
<div :style="{width: data.config.width}" class="fm-form">...</div>
```
2. Form component: [Form Component] on the left side of the designer
  1. src/components/componentsConfig.js: Add a new component configuration (add field)
```
{
          
          
    type: 'input', // 组件类型，保持唯一
    name: '单行文本', //组件展示名称
    icon: 'icon-input', //组件展示icon, 如果需要自定义，请参考 如何自定义图标
    options: {
          
           // 组件配置信息，根据自定义组件自己添加配置
        defaultValue: '', // 该值表示组件的默认值
        // 根据自己的组件自定义添加配置参数
    }
}
```
  2. src/components/Container.vue: Add this component to the left drag component in the form designer
```
export default {
          
          
props: {
          
          
    basicFields: {
          
          
    type: Array,
    default: () => ['input']
    }
}
}
```
  3. src/components/WidgetElementItem.vue: Reference component, that is, how to render the drag and drop component in the designer
```
<template v-if="element.type == 'input'">
<custom-compontnets
    v-model="element.options.defaultValue"
></custom-compontnets>
</template>

<script>
import CustomComponent from '...'
export default {
            
            
    components: {
            
            
        CustomComponent
    }
}
</script>
```
  4. src/components/WidgetConfig.vue: Add attribute configuration for form components
    
    Refer to the previous form attribute configuration
  5. Here you need to add an extra step, which is to create a new directory or file src/componentsbelow to define your newly added components
  6. src/components/GenerateElementItem.vue: Refer to the components added in the previous step, how to render the form components generated by the generator
```
<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>
```
3. What needs to be added is that the Chinese description is located lib\vue-form-making\src\lang\zh-CN.jsin this file
4. Layout component (also a type of form component)
  
  Here I am inlineimitating the implementation of inline components, which is a very good idea
  
  The first few steps are the same as the form component
  1. src/components/componentsConfig.js: Add a new component configuration (add field)
  2. src/components/Container.vue: Add this component to the left drag component in the form designer
  3. zh-CN.js: Add corresponding Chinese description
  The next few steps
  
  designer related
  1. src\components\FormMakingAdd a new designer component implementation file under the directory, such as:src\components\FormMaking\WidgetCard.vue
  2. src\components\FormMaking\WidgetColItem.vue:builder-griddesign adds references and renders for this component
  3. src\components\FormMaking\WidgetConfig.vue: Builder component configuration file plus rendering of the component
  4. src\components\FormMaking\WidgetForm.vue: The builder form design area adds the reference and rendering of this component
  5. src\components\FormMaking\WidgetReport.vue: The builder form adds references and renders to the component
  6. src\components\FormMaking\WidgetTabItem.vue: builder tag adds reference and render of this component
  7. src\components\FormMaking\WidgetReport.vue: builder subform adds references and renders to this component
  Generator related
  1. src\components\FormMakingAdd a generator component implementation file under the directory, such as:src\components\FormMaking\GenerateCard.vue
  2. src\components\FormMaking\GenerateForm.vue: Add this component to the generator entry component
  3. src\components\FormMaking\GenerateColItem.vue: Add this component in the generated grid layout component
  4. src\components\FormMaking\GenerateReport.vue: Add this component in the generated table component component
  5. src\components\FormMaking\GenerateTabItem.vue: Add this component to the generator tag component
  style related
  1. styles/index.cscc: The corresponding style needs to be added in the style file
  Generate code related
  1. src\components\FormMaking\generateCode.js: Increase the judgment of the container component in the generated code

Form validation configuration implementation

The configuration of the designer component sets the component validation field configuration:src/components/WidgetConfig.vue

Here it is: the field configuration set on the right

Search for this piece of code: <el-form-item :label="$t('fm.config.widget.validate')">, about 1400 lines
Relevant generator functions for designer component rules:src/components/WidgetConfig.vue

Here is to check and organize the set field configuration into an array
1. validateRequired
2. validateDataType
3. valiatePattern
4. generateRule
The generator component rules are sorted into element-uithe format required by the form
1. File location:src/components/GenerateForm.vue
2. Formatting function:generateModel
3. Where to use: el-formComponent's rulesproperties
4. rulesThe rules use the elementrules form, specifically https://github.com/yiminghe/async-validator

some tips

After the form verification is cleared for the first time, there are more English prompts

Reason: If the attribute in elemenet-uithe component is , the field bound to the form will be verified, but in fact, we generally add verification rules to the specific components in the form, which is repeated and redundant here. There will be one more default English promptel-form-itemrequiretrue

Solution: Because we have added our own custom verification rules that are accurate to the specific components of the form, then

this.setData() method does not take effect in read-only mode

If there is one parameter missing in the official document, the code supports the second parameter (this parameter indicates whether to execute setData in read-only mode, and the default is true to indicate not to execute)

setData(value, addOnly = true) {
      
       // addOnly 仅编辑状态下执行
  if (!addOnly || this.edit) {
      
      
    Object.keys(value).forEach((item) => {
      
      
      this.$set(this.models, item, value[item]);
    });
  }
}

Adjusted to use as follows

// 原来的使用
this.setData({
      
      name: 123});

// 现在的使用
this.setData({
      
      name: 123}, false);