FormMaking 可视化表单设计器

介绍

本项目使用 vue-cli 3 搭建，基于 vue 和 element-ui 实现，使用了最新的前端技术栈，内置了 i18 国际化解决方案。

二次开发

二次开发需要 vue 的基础，如果还不了解 vue 请查看 Vue官方文档

目录解析

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

扩展表单属性

1. 添加配置参数

src/components/Container.vue

export default{
  data () {
    return {
      widgetForm: {
        list: [],
        config: {
          // 在此处扩展表单的配置信息，例如：
          // width: '100%'
        },
      }
    }
  }
}

2. 设计器中配置

src/components/FormConfig.vue

<el-form>
  <el-form-item label="宽度" >
    <el-input v-model="data.width" clearable></el-input>
  </el-form-item>
</el-form>

添加新增属性的配置，上面添加的 width 属性，在这里通过 props.data 传入到这里。

3. 在生成器中添加该属性渲染

src/components/GenerateForm.vue

<div :style="{width: data.config.width}" class="fm-form">...</div>

表单配置的属性通过 props.data.config 进行配置即可。

扩展表单组件

1. 添加组件配置

src/components/componentsConfig.js

{
  type: 'input', // 组件类型，保持唯一
  name: '单行文本', //组件展示名称
  icon: 'icon-input', //组件展示icon, 如果需要自定义，请参考 如何自定义图标
  options: { // 组件配置信息，根据自定义组件自己添加配置
    defaultValue: '', // 该值表示组件的默认值
    // 根据自己的组件自定义添加配置参数
  }
}

2. 显示左侧字段

src/components/Container.vue 下配置左侧展示组件的默认值

export default {
  props: {
    basicFields: {
      type: Array,
      default: () => ['input']
    }
  }
}

3. 配置组件

src/components/WidgetElementItem.vue 下引入组件

<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>

引入组件后，在模板中进行渲染，组件配置参数已通过 props.element 传入，可直接进行配置。

4. 扩展组件字段属性

src/components/WidgetConfig.vue

参考前面表单属性配置

5. 生成器中添加该组件的渲染

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>

自定义设计器图标

项目使用的是阿里字体图标库 iconfont , 如果需要自定义图标配置，请将图标加入到自己的项目中，然后选择Font class，将代码下载到本地替换 src/iconfont 文件夹下的文件