npm install hd-flow-setting

import hdDlowSetting from 'hd-flow-setting'
import 'hd-flow-setting/lib/hd-flow-setting.css'
Vue.use(hdDlowSetting)

<template>
  <div id="app">
    ...
    <hd-flow-setting ref="hdFlowSetting" @saveAction="saveAction" @saveInParamAction="saveInParamAction"></hd-flow-setting>
    ...
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      leftNodeMenu: [
        {
          id: '2',
          type: 'group',
          name: '条件模块',
          ico: 'ivu-icon ivu-icon-md-arrow-dropright',
          open: true,
          children: [
            {
              id: '21777',
              type: 'task',
              name: '任务1',
              ico: 'ivu-icon ivu-icon-md-arrow-dropright',
              class: '',
              componentType: '1',
              // 自定义覆盖样式
              style: {},
              inParams: {
                'root': {
                  'type': 'object',
                  'title': '条11件',
                  'id': '',
                  'properties': {},
                  'required': []
                }
              }
            }, {
              id: '22232323',
              type: 'over',
              name: '数据清理',
              ico: 'ivu-icon ivu-icon-ios-cart-outline',
              class: '',
              // 自定义覆盖样式
              style: {},
              inParams: {

              }
            }
          ]
        }
      ]
    }
  },
  methods: {
    saveAction (data) {
      console.log(data, 'saveAction')
    },
    saveInParamAction (data, type) {
      console.log(data, type, 'saveInParamAction')
    },
    loadData () {
      this.$refs.hdFlowSetting.loadingData({ name: 'ddd',
        nodeList: [],
        lineList: [] })
    }
  },
  mounted () {
    this.loadData()
  }
}
</script>

更新说明：

####0.1.2 更新内容

1.增加对外保存功能

2.增加设置数据项到本地功能

####0.1.3 更新内容

1.增加动态左侧组件功能

2.增加右侧表单属性

####0.1.4 更新内容

1.增加node扩展属性

2.增加样式显示

####0.1.5 更新内容

1.修复常规内容

####0.1.7 更新内容

1.更新入参组件，可以添加list类型的值

####0.1.8 更新内容

1.参数设置值和编辑结构分开处理，更新入参的结构组件

####0.1.9 更新内容

1.增加链接默认id功能

2.增加事件自定义参数功能

####0.1.10 更新内容

1.入参选择节点的数据，过滤掉自己的出参选择

2.入参节点数据，只能选择其他节点的出参数据

####0.1.11 更新内容

1.选择节点的时候还是显示参数名

####0.1.12 更新内容

1.增加预览组件，可以根据不同状态显示不同的样式

####0.1.13 更新内容

1.更新左侧组件可以滚动，跟新中间的面板可以滚动并且缩放

####0.1.14 更新内容

1.修改产生的随机数

####0.1.15 更新内容

1.修改节点的样式，增加节点的参数

####0.1.16 更新内容

1.增加删除，可以删除本地参数数据

2.修复入参参数tab不默认显示的问题

3.修改显示的名称

####0.1.17 更新内容

1.增加出参默认配置

####0.1.18 更新内容

1.增加复制功能

####0.1.19 更新内容

1.增加历史功能

2.增加自动保存

####0.1.20 更新内容

1.修复显示提示问题的功能

2.修改左侧显示样式问题

####0.1.21 更新内容

1.增加是否显示左侧图表的参数

####0.1.22 更新内容

1.增加参数id

2.增加本地存储规则

####0.1.23 更新内容

1.保存的时候增加是系统保存还是人为保存

####0.1.24 更新内容

1.更新显示组件

####0.1.25 更新内容

1.预览组件注释初始化数据

####0.1.26 更新内容

1.增加显示滚动功能

####0.1.27 更新内容

1.取消初始化数据

####0.1.28 更新内容

1.新增概况预览按钮

####0.1.29 更新内容

1.新增执行事件

####0.1.30 更新内容

1.表单滚动

####0.1.31 更新内容

1.判断节点不存在

####0.1.32 更新内容

1.修改参数选择节点title报错的问题

2.修改入参标题的宽度

3.修改右键弹出慢的问题，把逻辑放入到弹出层中

####0.1.33 更新内容

1.解决初入参数的问题

2.增加删除节点参数的判断

####0.1.34 更新内容

1.增加验证

####0.1.35 更新内容

1.增加数据选择其他节点数组值的功能

2.增加拖拽网格功能，拖拽像素10

3.修改显示组件的线的粗细

####0.1.36 更新内容

1.增加每个节点的参数

1.增加缩展表单

####0.1.38 更新内容

1.更改参数

####0.1.38 更新内容

1.更改tab