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

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传递下去 ， 切记 --记得全局注册组件

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

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