bpmn-viewer

下载

 npm install @99cloud/bpmn-viewer --save

该组件有 11 个传出方法，1 个调用方法。

   <bpmn-viewer ref="bpmn" @select-task="selectTask"></bpmn-viewer>

11 个调用方法：

  /**
   * 获取所有bpmn流程图所有信息，包括线，节点，开始结束事件等等。
   */
  getAllbpmn(){
    let obj = this.$refs.bpmn.getAllbpmn()
  }
  /**
   * 通过类型获得节点
   * 传入参数：类型
   */
  getEventList(type) {
    this.$refs.bpmn.getEventList(type)
  },
  /**
   * 获得所有上下链接信息
   */
  getSequenceList() {
    this.$refs.bpmn.getSequenceList()
  },
  /**
   * 获得该事件id前的所有任务节点
   * 传入参数：节点id
   */
  getBeforeTaskNodes(id) {
    this.$refs.bpmn.getBeforeTaskNodes(id)
  },
  /**
   * 获得该事件id前的所有节点
   * 传入参数：节点id
   */
  getBeforeNodes(id) {
    this.$refs.bpmn.getBeforeNodes(id)
  },
  /**
   * 获得节点元素的上一个节点列表
   * 传入参数：节点id
   */
  getLastNode(id) {
    this.$refs.bpmn.getLastNode(id)
  },
  /**
   * 修改节点颜色
   * 传入参数要修改的节点id、改变的颜色
   */
  changeNodeColor(id, color) {
    this.$refs.bpmn.getTaskNameById(id, {
      stroke:'red'
    })
  },
  /**
   * 通过节点Id获得节点名称
   * 传入节点id
   */
  getTaskNameById(id) {
    this.$refs.bpmn.getTaskNameById(id)
  },
  /**
   * 节点回复到初始位置
   */
  fitViewport() {
    this.$refs.bpmn.fitViewport()
  },
  /**
   * 放大
   */
  zoomIn() {
    this.$refs.bpmn.zoomIn()
  },
  /**
   * 缩小
   */
  zoomOut() {
    this.$refs.bpmn.zoomOut()
  },

1 个组件传出方法：

  /**
   * 监听节点变化，当点击节点，节点发送改变时触发
   * 返回数据，当前节点的ID
   */
  selectTask(bpm) {
    console.log(bpm, '点击');

  },