事件监听

// <ep-designer ref="process" :data="processData"/>

<script setup>
import {getCurrentInstance, onMounted} from "vue";
const { proxy } = getCurrentInstance();

onMounted(async () => {
  // 绑定事件
  proxy.$refs.process.bindEvent('事件key', (params) => {
    // 业务逻辑
  })
})

</script>

示例

<template>
  <ep-designer ref="process" :data="processData"/>
</template>

<script setup name="WorkFlow">
import {getCurrentInstance, onMounted, ref} from "vue";
import {
  ON_DESIGNER_MOUNTED, ON_PRE_ADD_NODE, ON_AFTER_ADD_NODE,
  ON_PRE_REMOVE_NODE, ON_AFTER_REMOVE_NODE,
  ON_PRE_UPDATE_NODE_CONFIG, ON_AFTER_UPDATE_NODE_CONFIG
} from "qx-easy-process/dist/config/event-keys.js"
const { proxy } = getCurrentInstance();

// 流程数据
let processData = ref({})

onMounted(async () => {
  // 绑定事件
  bindEvent()
})

/**
 * 绑定事件
 */
const bindEvent = () => {
  proxy.$refs.process.bindEvent(ON_DESIGNER_MOUNTED, () => {
    console.log("触发流程设计器加载完成事件")
  })
  proxy.$refs.process.bindEvent(ON_PRE_ADD_NODE, (params) => {
    console.log("触发新增节点之前事件", params)
    return true
  })
  proxy.$refs.process.bindEvent(ON_AFTER_ADD_NODE, (params) => {
    console.log("触发新增节点之后事件", params)
  })
  proxy.$refs.process.bindEvent(ON_PRE_REMOVE_NODE, (params) => {
    console.log("触发移除节点之前事件", params)
    return true
  })
  proxy.$refs.process.bindEvent(ON_AFTER_REMOVE_NODE, (params) => {
    console.log("触发移除节点之后事件", params)
  })
  proxy.$refs.process.bindEvent(ON_PRE_UPDATE_NODE_CONFIG, (params) => {
    console.log("触发更新节点配置之前事件", params)
    return true
  })
  proxy.$refs.process.bindEvent(ON_AFTER_UPDATE_NODE_CONFIG, (params) => {
    console.log("触发更新节点配置之后事件", params)
  })
}
</script>