自定义流程图

功能

• 新增节点，新增可新增条件节点和流程节点
• 删除节点（选中后按删除键删除节点）或者点击删除icon删除
• 修改节点，点击查看后弹出抽屉进行节点属性的编辑
• 多选，按住shift键合并生成控制节点
• 反选，流程节点可反选，菜单中选择反选目标节点
• 保存位置，拖拽后保存位置
• 实现流程节点的颜色配置（失败/成功/正常）
• 流程图中是否可以点击canvas关闭抽屉
• 流程图界面的宽高配置
• 抽屉的宽度配置
• 返回了节点选择改变的事件
• 返回了更新节点数据的方法
• 返回了切换抽屉状态的方法
• 返回了获取当前流程图数据的方法

安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用

npm i name -S

快速上手

<template>
  <div id="app">
    <FlowChart
      ref="flowChart"
      :data="data"
      :height="height"
      :width="width"
      :closeSideBarClickCanvas="true"
      :statusColor ="statusColor"
      @node-selected="nodeSelecSted"
    >
    <!-- 插槽 -->
      <template v-slot:sideBar>
        <div class="rightMsg">
          <div class="title">查看</div>
          <input type="text" v-model="selectedNodes.label" placeholder="请输入标题">
          <input type="text" v-model="selectedNodes.propertyOne" placeholder="节点属性">
          <input type="text" v-model="selectedNodes.propertyTwo" placeholder="节点属性">
          <input type="text" v-model="selectedNodes.propertyThree" placeholder="节点属性">
          <input type="text" v-model="type" placeholder="各个项目中所存储的参数(类型)">
          <input type="text" v-model="tell" placeholder="各个项目中所存储的参数(方式)">
          <input type="text" v-model="people" placeholder="各个项目中所存储的参数(对象)">
          <Button @click="saveNodeData">保存节点数据</Button>
          <Button @click="closeSidebar">取消</Button>
        </div>
      </template>
    </FlowChart>
    <button @click="getData">保存流程图数据</button>
  </div>
</template>

<script>
import FlowChart from './components/FlowChart.vue' // 引入组件

export default {
  name: 'App',
  components: {
    FlowChart
  },
  data () {
    return {
      selectedNodes: {},
      statusColor: { // 状态颜色得配置
        success: { color: 'pink' }, // 成功
        error: { color: 'yellow' }, // 失败
        normal: { color: 'green' }, // 正常
        start: { color: 'red' }, // 开始
        end: { color: 'red' } // 结束
      },
      width: 1500, // 宽度
      height: 600, // 高度
      data: {}, // 流程图数据
      type: '', // 各个项目中所需存储得字段
      tell: '', // 各个项目中所需存储得字段
      people: '' // 各个项目中所需存储得字段
    }
  },
  methods: {
    // 选择节点事件
    nodeSelecSted (nodes) {
      console.log(nodes)
      this.selectedNodes = nodes // 拿到当前点击得节点数据
    },
    // 保存节点数据
    saveNodeData () {
      if (this.selectedNodes) {
        this.selectedNodes.task = { // *各个项目需求中所存储得内容请放进task对象
          type: this.type,
          tell: this.tell,
          people: this.people
        }
        this.$refs.flowChart.updateItem(this.selectedNodes) // 更新图表节点方法调用，传入更改后得节点信息
        this.$refs.flowChart.toggleSidebar() // 调用更改抽屉状态的方法
      }
    },
    // 更改抽屉关闭/打开状态
    closeSidebar () {
      this.$refs.flowChart.toggleSidebar()
    },
    // 获取流程图数据保存
    getData () {
      console.log(this.$refs.flowChart.getData()) // 获取流程图中数据调用getData()方法
    }
  }
}
</script>

API

FlowChart Attributes

| 参数 | 说明 | 类型 | 默认值 | | --------------- | ---------------------------------------------------------------- | ------ | ------ | | width | 指定画布宽度，单位为 'px' | number | 1200 | | height | 指定画布高度，单位为 'px' | number | 600 | | sliderWidth | 指定抽屉宽度，单位为 'px' | number | 400 | | data | 显示的图表数据 配置项 | object | {nodes: [], edges: []} |closeSideBarClickCanvas | closeSideBarClickCanvas| 是否可以通过点击 canvas 关闭抽屉 | boolean | true | | statusColor | 节点状态颜色 (success/error/normal/start/end) | object | {success: { color:'#67C23A' }, error: { color: '#F56C6C' }, normal: { color: '#409EFF' }start: { color: '#909399' }, start: { color: '#909399' }} |

data

• 数据格式如下，分为nodes(节点)和edges(关系)，

data: {
      nodes: [
        {
          id: 'start',
          type: 'flowNode',
          label: '开始',
          state: 'start',
          x: 100,
          y: 100,
          propertyOne: '节点属性',
          propertyTwo: '节点属性',
          propertyThree: '节点属性',
          task: {}
        },
        {
          id: 'xxx1',
          type: 'flowNode',
          label: '第一个节点',
          state: 'normal',
          x: 480,
          y: 100,
          propertyOne: '节点属性',
          propertyTwo: '节点属性',
          propertyThree: '节点属性',
          task: {}
        },
        {
          id: 'xxx2',
          type: 'flowNode',
          label: '第二个节点',
          state: 'normal',
          x: 480,
          y: 140,
          propertyOne: '节点属性',
          propertyTwo: '节点属性',
          propertyThree: '节点属性',
          task: {}
        }
      ],
      edges: [
        {
          source: "start",
          target: "xxx1"
        },
        
        {
          source: "xxx1",
          target: "xxx2"
        }
      ]
  }

• 如若当前节点的状态需要更改，请更改节点中字段state, state的值如下 成功：success 异常：error 正常：normal 开始：start 结束：end
• ID, TYPE, X, Y,不可修改
• 修改标题，请修改节点中label字段
• 节点属性分为三点，入需修改，请修改propertyOne，propertyTwo，propertyThree字段
• 各个项目中需求所需绑定改节点的数据，请添加进task，避免组件与业务混淆

FlowChart Events

| 事件名 | 说明 | 参数 | | --------------- | ---------------------------------------------------------------- | ------ | | node-selected | 当用户手动点击当前节点查看按钮触发的事件 | node |

FlowChart Methods

| 方法名 | 说明 | 参数 | | --------------- | -------------------------------------------- | ------ | | updateItem | 用于更新节点数据 | node | | toggleSidebar | 用于切换抽屉的状态 | - | | getData | 用于用户获取当前数据 | - |

FlowChart Slot

| slot name | 说明 | | --------------- | -------------------------------------------- | | sideBar | 抽屉的内容，如果需要编辑当前节点，需要自定义 dom ，并且提交数据的时候调用 updateItem 方法更新节点信息｜