自定义流程节点

下面将以定义一个抄送节点为例：

配置自定义图标

import { defineConfig } from 'vite';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import path from 'path';
 
export default defineConfig({
  plugins: [
    createSvgIconsPlugin({
      iconDirs: [
      	// 指定qx-easy-process图标文件目录
      	path.resolve(process.cwd(), 'node_modules/qx-easy-process/dist/assets/icons'),
      	// 指定自定义图标文件目录
      	path.resolve(process.cwd(), 'src/assets/icons'),
      ],
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]',
    })
  ],
});

添加节点图标

将notify.svg图标添加到src/assets/icons目录下。

如果你导入的svg图标设置颜色不生效，使用IDE打开图标文件，找到并删除fill属性（可能存在多个）并保存。

定义节点

app.use(EasyProcess, {
  nodeConfig: [
  	{
      "nodeType": "notify", // 节点类型
      "nodeName": "抄送",  // 节点名称
      "color": "#FFFFFF", // 节点标题颜色
      "bgColor": "#8225e4", // 节点标题背景颜色
      "enable": true, // 节点是否可用
      "canAdd": true, // 节点是否可以增加
    	"canRemoved": true, // 节点是否能够移除
      "hasDrawer": true, // 节点是否可以进行配置
      "icon": { // 图标
        "name": "notify", // 图标名
        "color": "#8225e4" // 颜色
    	}
    }
  ]
})

实现节点视图组件

在/src/views/node/notify目录下创建notify-node.vue文件, 内容如下：

<template>
  <div>
    抄送人: {{node.config.name}}
  </div>
</template>

<script setup name="notify-node">
import {getCurrentInstance, inject} from "vue";
import {KEY_PROCESS_DATA, KEY_VALIDATOR} from "qx-easy-process/dist/config/provide-keys.js"

const props = defineProps({
  node: { // 传入的流程配置数据
    type: Object,
    default: {}
  }
});

const { proxy } = getCurrentInstance();

// 获取流程数据
const processData = inject(KEY_PROCESS_DATA)
// 获取流程验证器实例
const validator = inject(KEY_VALIDATOR)

// 注册验证器
validator.register(props.node.tmpNodeId, () => {
  return {
    "valid": props.node.config.name ? true : false,
    "message": "请选择抄送人"
  }
})
</script>

<style lang="less" scoped>

</style>

实现节点配置组件

在/src/views/node/notify目录下创建notify-drawer.vue文件, 内容如下：

<template>
  <div>
    抄送人：<input v-model="props.config.name" />
  </div>
</template>

<script setup name="start-drawer">
import {getCurrentInstance, inject} from "vue";
import {KEY_PROCESS_DATA} from "qx-easy-process/dist/config/provide-keys.js"

const props = defineProps({
  config: { // 传入的流程配置数据
    type: Object,
    default: {}
  },
});

const { proxy } = getCurrentInstance();

// 获取流程数据
const processData = inject(KEY_PROCESS_DATA)
</script>

<style lang="less" scoped>

</style>