Asset-form-making NPM

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

src/components/Container.vue

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

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 传入到这里。

src/components/GenerateForm.vue

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

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

src/components/componentsConfig.js

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

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

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

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 传入，可直接进行配置。

src/components/WidgetConfig.vue

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 文件夹下的文件

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

1.npm run build-bundle

2.npm publish

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

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

FormMaking 可视化表单设计器

介绍

二次开发

目录解析

扩展表单属性

1. 添加配置参数

2. 设计器中配置

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

扩展表单组件

1. 添加组件配置

2. 显示左侧字段

3. 配置组件

4. 扩展组件字段属性

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

自定义设计器图标

子表单说明

打包 lib 步骤

npm 其他命令