Form-Generator拖拽表单的使用+二次修改

2023-12-25 18:09:34

Form-Generator拖拽表单

本文讲述了form-generator项目基于Vue框架以及ElementUI组件实现拖拽表单完成项目及二次开发
gitee地址： https://gitee.com/mrhj/form-generator?_from=gitee_search

简介

Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单。

使用

在左侧点击组件或拖拽组件到画板，生成对应组件
根据业务所需在右侧属性面板设置组件及表单属性
点击查看json可以查看当前画布组件及表单的json生成，用于存储于后端
点击运行可以以画布组件及右侧属性配置生成对应页面内容及vue模板代码，可修改代码点击运行生成最新页面（json不会更改），也可直接生成vue文件放入项目中运行

项目原理

采用vuedraggable第三方资源包在Vue项目中实现组件的拖拽
在src/components/generator/config.js中配置表单以及组件的json配置(下方有代码)
拖拽至画板中将每一个组件的json配置统一push进统一渲染数组，通过vue的render函数进行画板中的组件渲染

前提：项目中以全局注册element UI组件，这样才可以直接生成el-input等标签组件
点击运行时生成页面，项目使用iframe嵌入同项目中的priview页面（在vue.config.js中配置有两个页面入口）
- priview页面在src/views/priview/main.js重新new Vue ，通过src/components/generator/js.js 以及html.js生成对应的template模板以及script脚本（html以及js的生成请查看详细代码）
- 通过new Vue时的components以及template属性将生成的字符串模板生成对应vue文件页面

下方为组件以及表单的json配置

config.js的配置

// 表单属性【右面板】
export const formConf = {
  formRef: 'elForm',
  formModel: 'formData',
  size: 'medium',
  labelPosition: 'right',
  labelWidth: 100,
  formRules: 'rules',
  gutter: 15,
  disabled: false,
  span: 24,
  formBtns: true
}
// 输入型组件 【左面板】
export const inputComponents = [
  {
    // 组件的自定义配置
    __config__: {
      label: '单行文本',
      labelWidth: null,
      showLabel: true,
      changeTag: true,
      tag: 'el-input',
      tagIcon: 'input',
      defaultValue: undefined,
      required: true,
      layout: 'colFormItem',
      span: 24,
      document: 'https://element.eleme.cn/#/zh-CN/component/input',
      // 正则校验规则
      regList: []
    },
    // 组件的插槽属性
    __slot__: {
      prepend: '',
      append: ''
    },
    // 其余的为可直接写在组件标签上的属性
    placeholder: '请输入',
    style: { width: '100%' },
    clearable: true,
    'prefix-icon': '',
    'suffix-icon': '',
    maxlength: null,
    'show-word-limit': false,
    readonly: false,
    disabled: false
  }]

项目二次开发

修改原有的Element组件

添加属性：在config.js中添加所需属性（需为element当前组件支持属性）

如果需要新增属性可配置，需在src/views/index/RightPanel.vue中设置对应的配置表单组件
删除属性：根据RightPanel.vue中的属性展示条件来判断对应组件json中的属性来做删除和修改

添加新组件

添加Element其他组件，在config中添加新的组件json配置，属性根据新增Element组件的属性来配置并在RightPanel中设置其显示属性
添加自定义组件（非Element）
- 在config中添加组件json ， tag设置为组件注册名
- 在两个页面的入口main.js中全局注册需要添加的自定义组件

添加实体对应

可与后端配合添加实体与表单相对应，然后修改组件字段名为下拉框选择实体并与之对应

如果支持多层级一对一或者一对多的实体时需要在生成对应的js时修改data生成，原项目为扁平化data字符串生成，笔者建议使用Object对象生成形式逐层级生成对象，最后JSON.stringfly()转化为字符串抛出

添加组件示例（以部门组件为例）

config.js中添加json配置

{
        // 组件的自定义配置
        modelArr: [],
        codeModelArr: [],
        __config__: {
            label: '详情展示',
            labelWidth: null,
            showLabel: true,
            tag: 'look-detail',
            tagIcon: 'detail',
            // defaultValue: undefined,
            required: true,
            layout: 'colFormItem',
            span: 24,
            // 正则校验规则
            regList: [],
        },
        process: false,
        processKey: '',
        // 其余的为可直接写在组件标签上的属性
    }

拖动至画布中的样式展示为tag全局组件look-detail ， process以及processKey则相当于组件的props传递下去，切记 --记得全局注册组件

下图为左侧组件列表，拖拽至画布生成组件效果

下图为详情显示及标签显示组件拖拽后展示效果，参数文本可根据字段修改

码农公寓