可视化表单组件目前只有基础的表单控件，每个公司都有自己独特业务与通用的组件，或者开源优秀的组件需要集成，那如何集成到可视化表单呢？ 集成步骤分四步走：

第一步：组件全局注册

我们的html随意定义个标签，vue是无法解析的，只有将对应的组件注册了，vue才能解析渲染，所以第一步就需要进行组件全局注册。

注册的方式找到程序的主入口main.js

如下示例

    import dataV from '@jiaminghi/data-view'
    Vue.use(dataV)

这是将datav的组件全局进行了注册，这样vue的template中有对应的datav 标签，就会渲染对应组件的效果。

第二步：设计器组件注册

设计器组件注册就是将组件如何注册到设计器控件库中，提供用户可以进行拖拽。

我需要找到:/components/formdesign/controlconfig.js 文件

layoutComponents：布局组件分类，主要是plane面板组件，tabs组件,collapse抽屉组件

*******备注：增加该类型组件需要在src\components\formdesign\widgetForm.vue文件中编写完成第三步可视化设计渲染。*****

basicComponents：基础组件分类，主要是文本框，多行文本框，单选框，多选框，下拉列表，选颜色，富文本，上传控件，日期控件，列表控件等。

**备注：增加该类型组件需要在src\components\formdesign\widgetFormItem.vue文件中编写完成第三步可视化设计渲染。 如果明细列表想多显示一种组件，渲染需要在： src\components\formdesign\WidgetDetailItem.vue编写

platformComponents：平台组件分类， 目前选人，选部门控件，选机构，选角色，关联数据控件，关联查询控件，局部布局控件，子表控件，列表控件等等。

*******备注：增加该类型组件需要在src\components\formdesign\widgetFormItem.vue文件中编写完成第三步可视化设计渲染。*****

如文本框组件结构json代码如下：

{
    type: 'input',
    name: '单行文本',
    dragType: 'control',
    icon: 'fa fa-text-width',
    isShowCheck: true,
    isShowSpanSetting: true,
    layout: 'inline',
    eventlist: [],
    title: '单行文本',
    options: {   -----    右侧控件属性设置的属性基本放置在options对象中
      defaultValue: '',
      placeholder: '',
      dataType: 'string',
      dataLength: '50',
      lg: commProperty.lg,
      md: commProperty.md,
      xs: commProperty.xs,
      titleRow: commProperty.titleRow,
      labelwidth: 100,
      filed: '',
      required: false,
      disabled: false,
      password: false,
      clearable: false,
      showwordlimit: false,
      suffixicon: '',
      prefixicon: '',
      tagattr: '',
      butsize: 'small',
      ruleslist: []
    }
  }

我们可以根据文本框的组件json格式定义我们自定义组件的json格式，定义好后复制到对应的：layoutComponents、basicComponents，platformComponents 中 设计器组件测试完成。

第三步：组件在可视化设计布画中渲染

可视化设计布画主要由三个文件组成：

布局组件渲染页面：src\components\formdesign\widgetForm.vue

基础自定义渲染页面：src\components\formdesign\widgetFormItem.vue

明细列表渲染页面：src\components\formdesign\WidgetDetailItem.vue

根据type等于某个组件类型进行渲染

如下图

第四步：组件对应vue源码生成

流程表单代码生成模板：public\buildFlowFrom.html

element UI代码生成模板：public\buildpublish.html

Ant Ui代码生成模板：public\buildpublishAntDesign.html

问卷调查生成模板：public\buildquestionnaire.html

大屏展示代码生成模板：public\buildscreenanalyse.html

首先找到你使用的表单生成引擎模板是哪个，然后打开对应页面，

基础控件生成代码位置，下面标签内。

javascript   <script id="basecontrolcodetmpl" type="type/x-jquery-tmpl">

明细列表生成代码位置

javascript   <script id="listviewbasecodetmpl" type="type/x-jquery-tmpl">

布局组件生成vue代码位置

javascript      <script id="panelcodetmpl" type="type/x-jquery-tmpl">

根据对应第二步组件的json内容，type增加一段生成vue源码内容，如下是文本框源码生成的例子：

整个自定义组件集成完毕，就可以拖拽布局，设置对应属性，生成对应源码，并进行预览。