FormMaking 可视化表单设计器

介绍

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

二次开发

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

目录解析

1├── public                                       # 静态资源
2│   │── lib                                      # 第三方插件库
3│   │── index.html                               # html模板
4├── src                                          # 源代码
5│   │── assets                                   # 图片等静态资源
6│   │── components                               # 组件库
7│   │   │── AntdvGenerator                       # Ant Design Vue 生成器目录
8│   │   │── CodeEditor                           # 代码编辑器组件
9│   │   │── Editor                               # 富文本编辑器组件
10│   │   │── FormTable                            # 子表单生成器组件
11│   │   │── Upload                               # 上传组件
12│   │   │── CodeDialog.vue                       # 代码编辑器弹框组件
13│   │   │── componentsConfig.js                  # 设计器字段配置
14│   │   │── Container.vue                        # 设计器入口组件
15│   │   │── CusDialog.vue                        # 封装的公用的弹框组件
16│   │   │── FormConfig.vue                       # 设计器表单属性配置
17│   │   │── generateCode.js                      # 生成代码js文件
18│   │   │── GenerateColItem.vue                  # 生成栅格布局
19│   │   │── GenerateElementItem.vue              # 生成表单子项对应的组件
20│   │   │── GenerateForm.vue                     # 生成器入口组件
21│   │   │── GenerateFormItem.vue                 # 生成表单子项
22│   │   │── GenerateReport.vue                   # 生成表格组件
23│   │   │── GenerateTabItem.vue                  # 生成标签组件
24│   │   │── WidgetColItem.vue                    # 栅格设计组件
25│   │   │── WidgetConfig.vue                     # 设计器字段属性配置
26│   │   │── WidgetElementItem.vue                # 设计器表单子项内部详细组件
27│   │   │── WidgetForm.vue                       # 设计器表单设计区域
28│   │   │── WidgetFormItem.vue                   # 设计器表单子项设计
29│   │   │── WidgetReport.vue                     # 设计器表格组件
30│   │   │── WidgetTabItem.vue                    # 设计器标签组件
31│   │   │── WidgetTable.vue                      # 设计器子表单组件
32│   │   │── WidgetTableItem.vue                  # 设计器子表单内部组件
33│   │── demo                                     # 示例demo
34│   │   │── CustomComponent.vue                  # 演示自定义组件
35│   │   │── Home.vue                             # 演示设计器
36│   │   │── Test.vue                             # 测试功能
37│   │── directive                                # 全局指令
38│   │── iconfont                                 # iconfont 字体库
39│   │── lang                                     # 国际化配置
40│   │── router                                   # 路由
41│   │── styles                                   # 全局样式
42│   │── util                                     # 全局公用方法
43│   │── App.vue                                  # 入口页面
44│   │── editorBundle.js                          # 打包 VueEditor
45│   │── index.js                                 # 设计器打包入口
46│   │── main.js                                  # 入口文件 加载组件 初始化等
47├── package.json                                 # package.json
48├── vue.config.js                                # vue-cli 配置

扩展表单属性

1. 添加配置参数

src/components/Container.vue

1export default {
2  data() {
3    return {
4      widgetForm: {
5        list: [],
6        config: {
7          // 在此处扩展表单的配置信息，例如：
8          // width: '100%'
9        },
10      },
11    };
12  },
13};

2. 设计器中配置

src/components/FormConfig.vue

1<el-form>
2  <el-form-item label="宽度">
3    <el-input v-model="data.width" clearable></el-input>
4  </el-form-item>
5</el-form>

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

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

src/components/GenerateForm.vue

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

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

扩展表单组件

1. 添加组件配置

src/components/componentsConfig.js

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

2. 显示左侧字段

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

1export default {
2  props: {
3    basicFields: {
4      type: Array,
5      default: () => ["input"],
6    },
7  },
8};

3. 配置组件

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

1<template v-if="element.type == 'input'">
2  <custom-compontnets v-model="element.options.defaultValue"></custom-compontnets>
3</template>
4
5<script>
6  import CustomComponent from "...";
7  export default {
8    components: {
9      CustomComponent,
10    },
11  };
12</script>

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

4. 扩展组件字段属性

src/components/WidgetConfig.vue

参考前面表单属性配置

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

src/components/GenerateElementItem.vue

1<template v-if="widget.type == 'input'">
2  <div :style="{width: isTable ? '100%' : widget.options.width}">
3    <custom-compontnets v-model="dataModel"></custom-compontnets>
4  </div>
5</template>
6
7<script>
8  import CustomComponent from "...";
9  export default {
10    components: {
11      CustomComponent,
12    },
13  };
14</script>

自定义设计器图标

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

子表单说明

新的组件如果不想支持拖拽到子表单，需要修改 Container.vue 中的组件样式，包含 no-put

打包 lib 步骤

1.npm run build-bundle

2.npm publish

npm 其他命令

删除指定版本：npm unpublish asset-form-making@1.0.79

删除整个包：npm unpublish 包名 --force