form-making

动态表单

新增特制组件包步骤

小幺鸡模块

1. 制作拖拽组件模块
2. 渲染表单模块

制作拖拽组件模块

结构

1. 所有渲染表单子item全部入口为componentsConfig.js文件，
   目前包含basicComponents，advanceComponents，layout
   Components， specialComponents四种组件类库，分别对应
   首页左侧的基础，高级，布局，特制组件。
   每一个配置组件的属性大致如下，也可以修改源码根据自己的
   逻辑添加特定的配置属性。

    type: 需要渲染的元素类型
    name: 标题
    icon: 显示的icon
    width: 宽度
    height: 宽度
    size: 大小
    placeholder: 占位内容
    inline: 布局方式
    showInput: 显示输入框
    min: 最小值
    max: 最大值
    step: 步长
    multiple: 是否多选
    filterable: 是否可搜索
    allowHalf: 是否允许半选
    showAlpha: 支持透明度选择
    showLabel: 是否显示label
    remote: 是否从远程拿数据
    remoteFunc: 从远程拿数据的方法
    props: { // 远程拿数据的对象
      value: 映射的value,
      label: 显示的label,
      children: 级联选择时的下一级属性
    }
    defaultValue: 默认值
    startPlaceholder: 起始时间占位符
    endPlaceholder: 结束时间占位符
    等等可配置的属性, 具体可参照widgetConfig.vue文件中  
    的根据上述属性渲染对应dom元素的代码

2. 在Container.vue文件中, 由于使用了vuedraggable插件的
   原因, 目前已经实现拖拽的过程中并能获取组件的配置属性的功能。 具体的运行大致流程如下：
   1. Container.vue文件中的左侧拖拽组件至WidgetForm.vue组件
   2. WidgetForm.vue组件中的data属性深度监听获取新拖拽的表单item
      配置数据，在此组件中可以针对上述说的一句话也可以修改源码根据自己的逻辑添加特定的配置属性进行修改handleWidgetAdd方法, 主旨:
      保证里面的data.list数组中的每一个元素的配置信息与基础的保持一致
   3. 完成组件信息配置的配置后, 使用WidgetFormItem.vue和WidgetElementItem.vue
      一同渲染元素至WidgetForm.vue组件中(即中间可视化部分)
   4. 右侧的组件，表单配置信息是WidgetConfig.vue(包括表单的验证规则rules)组件中
      做的事, 按照目前小幺鸡的实现逻辑来看, 只有被选择中的组件才能初始化它的配置
      信息, 而当我们制作特制组件包时我们需要初始化该组件包的所有配置信息, 这是小
      幺鸡的一个bug

渲染表单模块

主要核心

  主要核心思想就是在GenerateForm.vue组件中对生成的表单json串进行渲染，  
  这一步骤主要包括表单rules的校验、双向数据的绑定以及特定业务逻辑功能的  
  添加和校验等等。

修改源码后如何应用到portal端的项目

• 有兴趣的可以自己研究下npm发布开源项目
• 这里介绍下如何采用不发布开源项目的形式引入修改过后的源码
  1. 拉取小幺鸡项目

    git clone git@dev.zgyn.net:cisdi-yn-farmer/form-making.git -b sprint-1.5.4

  2. 本地修改代码后运行

    npm run build-bundle

  3. 将dist文件夹替换node_modules/cisdi-making-form/dist文件夹, 若 node_modules中无cisdi-making-form文件夹, 先执行以下命令安装依赖

    npm install cisdi-making-form --save