├── src
    ├── App.vue
    ├── easy-process
    │   ├── config
    │   │   ├── provide-keys.js
    │   │   ├── default-node-type.js
    │   │   ├── event-keys.js
    │   │   ├── gateway-type.js
    │   │   ├── node-component.js
    │   │   └── node-config.js
    │   ├── assets
    │   │   └── icons
    │   │   │   ├── ep-subtract.svg
    │   │   │   ├── ep-exclusive-gateway.svg
    │   │   │   ├── ep-start.svg
    │   │   │   ├── ep-close.svg
    │   │   │   ├── ep-plus.svg
    │   │   │   ├── ep-edit.svg
    │   │   │   ├── ep-terminate.svg
    │   │   │   ├── ep-left.svg
    │   │   │   ├── ep-right.svg
    │   │   │   ├── ep-condition.svg
    │   │   │   ├── ep-tips.svg
    │   │   │   ├── ep-task.svg
    │   │   │   ├── ep-gateway.svg
    │   │   │   ├── ep-parallel-gateway.svg
    │   │   │   └── ep-setting.svg
    │   ├── tools
    │   │   ├── common-tools.js
    │   │   ├── z-index-tools.js
    │   │   ├── node-tools.js
    │   │   ├── process-ctrl.js
    │   │   └── validator.js
    │   ├── components
    │   │   ├── svg-icon
    │   │   │   ├── index.js
    │   │   │   └── ep-svg-icon.vue
    │   │   ├── button
    │   │   │   └── ep-button.vue
    │   │   └── drawer
    │   │   │   └── ep-drawer.vue
    │   ├── node
    │   │   ├── end
    │   │   │   └── end-node.vue
    │   │   ├── node-wrap.vue
    │   │   ├── base
    │   │   │   ├── base-drawer.vue
    │   │   │   ├── add-node.vue
    │   │   │   └── base-node.vue
    │   │   └── gateway
    │   │   │   └── gateway-node.vue
    │   ├── index.js
    │   └── ep-designer.vue
    ├── views
    │   ├── node
    │   │   ├── terminate
    │   │   │   └── terminate-node.vue
    │   │   ├── start
    │   │   │   ├── start-drawer.vue
    │   │   │   └── start-node.vue
    │   │   ├── notify
    │   │   │   ├── notify-drawer.vue
    │   │   │   └── notify-node.vue
    │   │   ├── task
    │   │   │   ├── task-drawer.vue
    │   │   │   └── task-node.vue
    │   │   └── condition
    │   │   │   ├── condition-drawer.vue
    │   │   │   └── condition-node.vue
    │   ├── test.vue
    │   └── index.vue
    ├── router
    │   └── index.js
    └── main.js
├── vite
    └── plugins
    │   ├── setup-extend.js
    │   ├── auto-import.js
    │   ├── svg-icon.js
    │   ├── copy.js
    │   ├── index.js
    │   └── compression.js
├── .gitignore
├── index.html
├── LICENSE
├── package.json
├── vite.config.js
├── public
    └── mock
    │   └── data.json
└── README.md


/src/App.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <router-view />
3 | </template>
4 | 
5 | <script setup>
6 | 
7 | </script>


--------------------------------------------------------------------------------
/vite/plugins/setup-extend.js:
--------------------------------------------------------------------------------
1 | import setupExtend from 'vite-plugin-vue-setup-extend'
2 | 
3 | export default function createSetupExtend() {
4 |     return setupExtend()
5 | }
6 | 


--------------------------------------------------------------------------------
/src/easy-process/config/provide-keys.js:
--------------------------------------------------------------------------------
 1 | // 依赖注入数据的key
 2 | 
 3 | // 流程控制器KEY
 4 | export const KEY_PROCESS_CTRL = 'processCtrl'
 5 | 
 6 | // 节点验证器KEY
 7 | export const KEY_VALIDATOR = 'validator'
 8 | 
 9 | // 流程数据KEY
10 | export const KEY_PROCESS_DATA = 'processData'


--------------------------------------------------------------------------------
/src/easy-process/config/default-node-type.js:
--------------------------------------------------------------------------------
 1 | // 网关节点
 2 | export const GATEWAY = 'gateway'
 3 | // 条件节点
 4 | export const CONDITION = 'condition'
 5 | // 开始节点
 6 | export const START = 'start'
 7 | // 任务节点
 8 | export const TASK = 'task'
 9 | // 终止节点
10 | export const TERMINATE = 'terminate'
11 | 
12 | 


--------------------------------------------------------------------------------
/vite/plugins/auto-import.js:
--------------------------------------------------------------------------------
 1 | import autoImport from 'unplugin-auto-import/vite'
 2 | 
 3 | export default function createAutoImport() {
 4 |     return autoImport({
 5 |         imports: [
 6 |             'vue',
 7 |             'vue-router',
 8 |             'pinia'
 9 |         ],
10 |         dts: false
11 |     })
12 | }
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | dist-lib
14 | *.local
15 | 
16 | 
17 | # Editor directories and files
18 | .vscode/*
19 | !.vscode/extensions.json
20 | .idea
21 | .DS_Store
22 | *.suo
23 | *.ntvs*
24 | *.njsproj
25 | *.sln
26 | *.sw?
27 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Easy Process</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.js"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/easy-process/assets/icons/ep-subtract.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688451455059" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22420" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M128 479.2h768v65.6H128z" p-id="22421"></path></svg>


--------------------------------------------------------------------------------
/src/easy-process/tools/common-tools.js:
--------------------------------------------------------------------------------
 1 | import {v4 as uuidv4 } from 'uuid'
 2 | 
 3 | /**
 4 |  * 获取UUID
 5 |  * @returns {*}
 6 |  */
 7 | export const getUUID = () =>{
 8 |     return uuidv4()
 9 | }
10 | 
11 | /**
12 |  * 复制对象(深拷贝)
13 |  * @param source
14 |  */
15 | export const copy = (source) => {
16 |     if(source) {
17 |         const str = JSON.stringify(source);
18 |         return JSON.parse(str);
19 |     }
20 |     return null;
21 | }


--------------------------------------------------------------------------------
/vite/plugins/svg-icon.js:
--------------------------------------------------------------------------------
 1 | import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 2 | import path from 'path'
 3 | 
 4 | export default function createSvgIcon(isBuild) {
 5 |     return createSvgIconsPlugin({
 6 | 		iconDirs: [path.resolve(process.cwd(), 'src/easy-process/assets/icons')],
 7 |         symbolId: 'icon-[dir]-[name]',
 8 |         customDomId: '__EASY_PROCESS_SVG_ICONS__',
 9 |         svgoOptions: isBuild
10 |     })
11 | }
12 | 


--------------------------------------------------------------------------------
/src/easy-process/assets/icons/ep-exclusive-gateway.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1756447887664" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7633" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M1024 125.7472L896 0 512 395.264 128 0 0 125.7472l384 395.264L0 898.2528 128 1024l384-377.2416L896 1024l128-125.7472-384-377.2416z" p-id="7634"></path></svg>


--------------------------------------------------------------------------------
/src/easy-process/components/svg-icon/index.js:
--------------------------------------------------------------------------------
 1 | let iconPrefix = '#icon-'
 2 | 
 3 | 
 4 | /**
 5 |  * 加载图标配置
 6 |  * @param iconConfig
 7 |  */
 8 | export const loadIconConfig = (iconConfig) => {
 9 |     let {prefix} = iconConfig || {}
10 |     setIconPrefix(prefix)
11 | }
12 | 
13 | /**
14 |  * 设置图标前缀
15 |  * @param prefix
16 |  */
17 | const setIconPrefix = (prefix) => {
18 |     if (prefix) {
19 |         iconPrefix = prefix
20 |     }
21 | }
22 | 
23 | /**
24 |  * 获取图标前缀
25 |  * @returns {string}
26 |  */
27 | export const getIconPrefix = () => {
28 |     return iconPrefix
29 | }


--------------------------------------------------------------------------------
/src/easy-process/assets/icons/ep-start.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688026377405" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8498" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 512c123.776 0 224-100.224 224-224S635.776 64 512 64a223.936 223.936 0 0 0-224 224C288 411.776 388.224 512 512 512z m0 64c-149.504 0-448 85.76-448 256v128h896v-128c0-170.24-298.496-256-448-256z" p-id="8499"></path></svg>


--------------------------------------------------------------------------------
/src/easy-process/config/event-keys.js:
--------------------------------------------------------------------------------
 1 | // 绑定事件的key
 2 | 
 3 | // 设计器加载完毕KEY
 4 | export const ON_DESIGNER_MOUNTED = 'on_designer_mounted'
 5 | // 新增节点之前KEY
 6 | export const ON_PRE_ADD_NODE = 'on_pre_add_node'
 7 | // 新增节点之后KEY
 8 | export const ON_AFTER_ADD_NODE = 'on_after_add_node'
 9 | // 移除节点之前KEY
10 | export const ON_PRE_REMOVE_NODE = 'on_pre_remove_node'
11 | // 移除节点之后KEY
12 | export const ON_AFTER_REMOVE_NODE = 'on_after_remove_node'
13 | // 更新节点配置之前KEY
14 | export const ON_PRE_UPDATE_NODE_CONFIG = 'on_pre_update_node_config'
15 | // 更新节点配置之后KEY
16 | export const ON_AFTER_UPDATE_NODE_CONFIG = 'on_after_update_node_config'
17 | 


--------------------------------------------------------------------------------
/src/easy-process/assets/icons/ep-close.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688344699167" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2280" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M576 512l277.333333 277.333333-64 64-277.333333-277.333333L234.666667 853.333333 170.666667 789.333333l277.333333-277.333333L170.666667 234.666667 234.666667 170.666667l277.333333 277.333333L789.333333 170.666667 853.333333 234.666667 576 512z" p-id="2281"></path></svg>


--------------------------------------------------------------------------------
/src/views/node/terminate/terminate-node.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <!-- 抄送人节点 -->
 3 |   <div>
 4 |     流程驳回
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script setup name="notify-node">
 9 | import {getCurrentInstance, inject} from "vue";
10 | import {KEY_PROCESS_DATA, KEY_VALIDATOR} from "@/easy-process/config/provide-keys.js"
11 | 
12 | const props = defineProps({
13 |   node: { // 传入的流程配置数据
14 |     type: Object,
15 |     default: {}
16 |   }
17 | });
18 | 
19 | const { proxy } = getCurrentInstance();
20 | 
21 | // 获取流程数据
22 | const processData = inject(KEY_PROCESS_DATA)
23 | </script>
24 | 
25 | <style lang="less" scoped>
26 | 
27 | </style>
28 | 


--------------------------------------------------------------------------------
/vite/plugins/copy.js:
--------------------------------------------------------------------------------
 1 | import copy from 'rollup-plugin-copy'
 2 | 
 3 | export default function createCopy() {
 4 |     return copy({
 5 |         hook: 'closeBundle',
 6 |         targets: [
 7 |             { src: 'src/easy-process/assets/*', dest: 'dist/assets' },
 8 |             { src: 'src/easy-process/config/event-keys.js', dest: 'dist/config' },
 9 |             { src: 'src/easy-process/config/gateway-type.js', dest: 'dist/config' },
10 |             { src: 'src/easy-process/config/default-node-type.js', dest: 'dist/config' },
11 |             { src: 'src/easy-process/config/provide-keys.js', dest: 'dist/config' },
12 |         ]
13 |     })
14 | }


--------------------------------------------------------------------------------
/src/easy-process/assets/icons/ep-plus.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688451587857" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23394" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M939.939489 459.072557 562.339502 459.072557 562.339502 83.519182 462.055494 83.519182 462.055494 459.072557 84.455507 459.072557 84.455507 559.356564 462.055494 559.356564 462.055494 939.003164 562.339502 939.003164 562.339502 559.356564 939.939489 559.356564Z" p-id="23395"></path></svg>


--------------------------------------------------------------------------------
/src/views/node/start/start-drawer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <!-- 发起人配置 -->
 3 |   <div>
 4 |     发起人：<input v-model="props.config.name" />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script setup name="start-drawer">
 9 | import {getCurrentInstance, inject} from "vue";
10 | import {KEY_PROCESS_DATA} from "@/easy-process/config/provide-keys.js"
11 | 
12 | const props = defineProps({
13 |   config: { // 传入的流程配置数据
14 |     type: Object,
15 |     default: {}
16 |   },
17 | });
18 | 
19 | const { proxy } = getCurrentInstance();
20 | 
21 | // 获取流程数据
22 | const processData = inject(KEY_PROCESS_DATA)
23 | </script>
24 | 
25 | <style lang="less" scoped>
26 | 
27 | </style>
28 | 


--------------------------------------------------------------------------------
/src/views/node/notify/notify-drawer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <!-- 抄送人配置 -->
 3 |   <div>
 4 |     抄送人：<input v-model="props.config.name" />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script setup name="notify-drawer">
 9 | import {getCurrentInstance, inject} from "vue";
10 | import {KEY_PROCESS_DATA} from "@/easy-process/config/provide-keys.js"
11 | 
12 | const props = defineProps({
13 |   config: { // 传入的流程配置数据
14 |     type: Object,
15 |     default: {}
16 |   }
17 | });
18 | 
19 | const { proxy } = getCurrentInstance();
20 | 
21 | // 获取流程数据
22 | const processData = inject(KEY_PROCESS_DATA)
23 | </script>
24 | 
25 | <style lang="less" scoped>
26 | 
27 | </style>
28 | 


--------------------------------------------------------------------------------
/src/views/node/task/task-drawer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <!-- 审核人配置 -->
 3 |   <div>
 4 |     审核人：<input v-model="props.config.name" />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script setup name="approver-drawer">
 9 | import {getCurrentInstance, inject} from "vue";
10 | import { KEY_PROCESS_DATA } from "@/easy-process/config/provide-keys.js"
11 | 
12 | const props = defineProps({
13 |   config: { // 传入的流程配置数据
14 |     type: Object,
15 |     default: {}
16 |   }
17 | });
18 | 
19 | const { proxy } = getCurrentInstance();
20 | 
21 | // 获取流程数据
22 | const processData = inject(KEY_PROCESS_DATA)
23 | </script>
24 | 
25 | <style lang="less" scoped>
26 | 
27 | </style>
28 | 


--------------------------------------------------------------------------------
/src/views/node/condition/condition-drawer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <!-- 条件配置 -->
 3 |   <div>
 4 |     请假天数&lt;<input v-model="props.config.days" />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script setup name="condition-drawer">
 9 | import {getCurrentInstance, inject} from "vue";
10 | import { KEY_PROCESS_DATA } from "@/easy-process/config/provide-keys.js"
11 | 
12 | const props = defineProps({
13 |   config: { // 传入的流程配置数据
14 |     type: Object,
15 |     default: {}
16 |   }
17 | });
18 | 
19 | const { proxy } = getCurrentInstance();
20 | 
21 | // 获取流程数据
22 | const processData = inject(KEY_PROCESS_DATA)
23 | </script>
24 | 
25 | <style lang="less" scoped>
26 | 
27 | </style>
28 | 


--------------------------------------------------------------------------------
/vite/plugins/index.js:
--------------------------------------------------------------------------------
 1 | import vue from '@vitejs/plugin-vue'
 2 | 
 3 | import createAutoImport from './auto-import'
 4 | import createSvgIcon from './svg-icon'
 5 | import createCompression from './compression'
 6 | import createSetupExtend from './setup-extend'
 7 | import createCopy from './copy'
 8 | 
 9 | export default function createVitePlugins(viteEnv, isBuild = false) {
10 |     const vitePlugins = [vue()]
11 |     vitePlugins.push(createAutoImport())
12 | 	vitePlugins.push(createSetupExtend())
13 |     vitePlugins.push(createSvgIcon(isBuild))
14 |     vitePlugins.push(createCopy())
15 | 	isBuild && vitePlugins.push(...createCompression(viteEnv))
16 |     return vitePlugins
17 | }
18 | 


--------------------------------------------------------------------------------
/src/easy-process/config/gateway-type.js:
--------------------------------------------------------------------------------
 1 | const EXCLUSIVE = 'exclusive'
 2 | const PARALLEL = 'parallel'
 3 | 
 4 | const GATEWAY_TYPE_LIST = [
 5 |     {
 6 |         type: EXCLUSIVE,
 7 |         name: '排他网关',
 8 |         icon: 'ep-exclusive-gateway',
 9 |         desc: '按照分支顺序（从左向右）进行计算，选择第一个条件计算为true的分支继续流程，未设置条件时默认通过。'
10 |     },
11 |     {
12 |         type: PARALLEL,
13 |         name: '并行网关',
14 |         icon: 'ep-parallel-gateway',
15 |         desc: '计算所有分支条件，符合条件的分支可并列执行，未设置条件时默认通过。'
16 |     }
17 | ]
18 | 
19 | const GATEWAY_TYPE_MAP = new Map()
20 | GATEWAY_TYPE_LIST.forEach(item => {
21 |     GATEWAY_TYPE_MAP.set(item.type, item)
22 | })
23 | 
24 | export {GATEWAY_TYPE_LIST, GATEWAY_TYPE_MAP, EXCLUSIVE, PARALLEL}
25 | 
26 | 


--------------------------------------------------------------------------------
/src/easy-process/assets/icons/ep-edit.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1737514367775" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4330" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M109.568 673.792L30.208 963.072l288.768-80.384 456.192-455.168L563.2 220.672zM740.864 43.52l-113.664 113.664L839.68 363.008l110.08-110.08c57.856-57.856 57.856-151.552 0-209.408-57.344-57.856-151.552-57.856-208.896 0zM949.76 1024H382.464c-24.064 0-43.52-19.456-43.52-43.52s19.456-43.52 43.52-43.52h567.808c24.064 0 43.52 19.456 43.52 43.52s-19.968 43.52-44.032 43.52z" p-id="4331"></path></svg>


--------------------------------------------------------------------------------
/src/easy-process/tools/z-index-tools.js:
--------------------------------------------------------------------------------
 1 | let zIndex = 2000
 2 | let zIndexFunction = null
 3 | 
 4 | /**
 5 |  * 加载zIndex配置
 6 |  */
 7 | export const loadZIndexConfig = ({initZIndexValue, bindZIndexFunction}) => {
 8 |     if (bindZIndexFunction) {
 9 |         if (typeof bindZIndexFunction === 'function') {
10 |             zIndexFunction = bindZIndexFunction
11 |         } else {
12 |             throw new Error('zIndexFunction must be a function')
13 |         }
14 |     } else if (initZIndexValue) {
15 |         zIndex = initZIndexValue
16 |     }
17 | }
18 | 
19 | /**
20 |  * 获取下一个zIndex
21 |  */
22 | export const nextZIndex = () => {
23 |     if (zIndexFunction && typeof zIndexFunction === 'function') {
24 |         return zIndexFunction()
25 |     }
26 |     return zIndex++;
27 | }


--------------------------------------------------------------------------------
/src/easy-process/assets/icons/ep-terminate.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1756455301556" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17408" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 1024C229.23 1024 0 794.77 0 512S229.23 0 512 0s512 229.23 512 512-229.23 512-512 512z m0-68.267c245.067 0 443.733-198.666 443.733-443.733S757.067 68.267 512 68.267 68.267 266.933 68.267 512 266.933 955.733 512 955.733zM560.272 512l168.951 168.951-48.272 48.272L512 560.272 343.049 729.223l-48.272-48.272L463.728 512 294.777 343.049l48.272-48.272L512 463.728l168.951-168.951 48.272 48.272L560.272 512z" p-id="17409"></path></svg>


--------------------------------------------------------------------------------
/src/easy-process/assets/icons/ep-left.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688431424328" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20403" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M269.9 513.5c0-4.3 1.1-8.5 3.3-12.4l219.7-385.7c6.8-12 22.1-16.2 34.1-9.3 12 6.8 16.2 22.1 9.3 34.1L323.7 513.4 536.3 883c6.9 12 2.8 27.3-9.2 34.1s-27.3 2.8-34.1-9.2l-219.7-382c-2.3-3.8-3.4-8.1-3.4-12.4z" p-id="20404"></path><path d="M484.5 513.5c0-4.3 1.1-8.5 3.3-12.4l219.7-385.7c6.8-12 22.1-16.2 34.1-9.3 12 6.8 16.2 22.1 9.3 34.1L538.3 513.4 750.9 883c6.9 12 2.8 27.3-9.2 34.1-12 6.9-27.3 2.8-34.1-9.2l-219.7-382c-2.3-3.8-3.4-8.1-3.4-12.4z" p-id="20405"></path></svg>


--------------------------------------------------------------------------------
/src/easy-process/assets/icons/ep-right.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688431468116" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20613" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M754.2 509.7c0 4.3-1.1 8.5-3.3 12.4L531.2 907.8c-6.8 12-22.1 16.2-34.1 9.3-12-6.8-16.2-22.1-9.3-34.1l212.6-373.3-212.6-369.5c-6.9-12-2.8-27.3 9.2-34.1s27.3-2.8 34.1 9.2l219.7 382c2.3 3.8 3.4 8.1 3.4 12.4z" p-id="20614"></path><path d="M539.6 509.7c0 4.3-1.1 8.5-3.3 12.4L316.6 907.8c-6.8 12-22.1 16.2-34.1 9.3-12-6.8-16.2-22.1-9.3-34.1l212.6-373.3-212.6-369.5c-6.9-12-2.8-27.3 9.2-34.1 12-6.9 27.3-2.8 34.1 9.2l219.7 382c2.3 3.8 3.4 8.1 3.4 12.4z" p-id="20615"></path></svg>


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import { createWebHistory, createRouter } from 'vue-router'
 2 | 
 3 | // 公共路由
 4 | export const constantRoutes = [
 5 |   {
 6 |     path: '',
 7 |     redirect: '/index',
 8 |     children: [
 9 |       {
10 |         path: '/index',
11 |         component: () => import('@/views/index'),
12 |         name: 'Index'
13 |       }
14 |     ]
15 |   },
16 |   {
17 |     path: '/test',
18 |     children: [
19 |       {
20 |         path: '/test',
21 |         component: () => import('@/views/test'),
22 |         name: 'Test'
23 |       }
24 |     ]
25 |   },
26 | ]
27 | 
28 | const router = createRouter({
29 |   history: createWebHistory(),
30 |   routes: constantRoutes,
31 |   scrollBehavior(to, from, savedPosition) {
32 |     if (savedPosition) {
33 |       return savedPosition
34 |     } else {
35 |       return { top: 0 }
36 |     }
37 |   },
38 | });
39 | 
40 | export default router;
41 | 


--------------------------------------------------------------------------------
/src/views/node/start/start-node.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <!-- 发起人节点 -->
 3 |   <div>
 4 |     发起人: {{node.config.name}}
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script setup name="start-node">
 9 | import {getCurrentInstance, inject} from "vue";
10 | import {KEY_PROCESS_DATA, KEY_VALIDATOR} from "@/easy-process/config/provide-keys.js"
11 | 
12 | const props = defineProps({
13 |   node: { // 传入的流程配置数据
14 |     type: Object,
15 |     default: {}
16 |   }
17 | });
18 | 
19 | const { proxy } = getCurrentInstance();
20 | 
21 | // 获取流程数据
22 | const processData = inject(KEY_PROCESS_DATA)
23 | // 获取流程验证器实例
24 | const validator = inject(KEY_VALIDATOR)
25 | 
26 | // 注册验证器
27 | validator.register(props.node.tmpNodeId, () => {
28 |   return {
29 |     "valid": props.node.config.name ? true : false,
30 |     "message": "请选择发起人"
31 |   }
32 | })
33 | </script>
34 | 
35 | <style lang="less" scoped>
36 | 
37 | </style>
38 | 


--------------------------------------------------------------------------------
/src/views/node/notify/notify-node.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <!-- 抄送人节点 -->
 3 |   <div>
 4 |     抄送人: {{node.config.name}}
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script setup name="notify-node">
 9 | import {getCurrentInstance, inject} from "vue";
10 | import {KEY_PROCESS_DATA, KEY_VALIDATOR} from "@/easy-process/config/provide-keys.js"
11 | 
12 | const props = defineProps({
13 |   node: { // 传入的流程配置数据
14 |     type: Object,
15 |     default: {}
16 |   }
17 | });
18 | 
19 | const { proxy } = getCurrentInstance();
20 | 
21 | // 获取流程数据
22 | const processData = inject(KEY_PROCESS_DATA)
23 | // 获取流程验证器实例
24 | const validator = inject(KEY_VALIDATOR)
25 | 
26 | // 注册验证器
27 | validator.register(props.node.tmpNodeId, () => {
28 |   return {
29 |     "valid": props.node.config.name ? true : false,
30 |     "message": "请选择抄送人"
31 |   }
32 | })
33 | </script>
34 | 
35 | <style lang="less" scoped>
36 | 
37 | </style>
38 | 


--------------------------------------------------------------------------------
/src/views/node/task/task-node.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <!-- 审批人节点 -->
 3 |   <div>
 4 |     审批人: {{node.config.name}}
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script setup name="approver-node">
 9 | import {getCurrentInstance, inject} from "vue";
10 | import { KEY_VALIDATOR, KEY_PROCESS_DATA } from "@/easy-process/config/provide-keys.js"
11 | 
12 | const props = defineProps({
13 |   node: { // 传入的流程配置数据
14 |     type: Object,
15 |     default: {}
16 |   },
17 | });
18 | 
19 | const { proxy } = getCurrentInstance();
20 | 
21 | // 获取流程数据
22 | const processData = inject(KEY_PROCESS_DATA)
23 | // 获取流程验证器实例
24 | const validator = inject(KEY_VALIDATOR)
25 | 
26 | // 注册验证器
27 | validator.register(props.node.tmpNodeId, () => {
28 |   return {
29 |     "valid": props.node.config.name ? true : false,
30 |     "message": "请选择审批人"
31 |   }
32 | })
33 | </script>
34 | 
35 | <style lang="less" scoped>
36 | 
37 | </style>
38 | 


--------------------------------------------------------------------------------
/src/easy-process/tools/node-tools.js:
--------------------------------------------------------------------------------
 1 | import {nodeConfig} from '../config/node-config.js'
 2 | import {START, GATEWAY, CONDITION} from '../config/default-node-type.js'
 3 | import {getUUID} from '../tools/common-tools.js'
 4 | 
 5 | /**
 6 |  * 创建节点
 7 |  * @param nodeType
 8 |  */
 9 | export const createNode = (nodeType = START) => {
10 |     let config = nodeConfig[nodeType]
11 |     let node = generateNodeObj(config)
12 |     if (nodeType === GATEWAY) {
13 |         let conditionConfig = nodeConfig[CONDITION]
14 |         node.branchList = [generateNodeObj(conditionConfig), generateNodeObj(conditionConfig)]
15 |     }
16 |     return node
17 | }
18 | 
19 | const generateNodeObj = (config) => {
20 |     return {
21 |         // 生成临时节点ID
22 |         tmpNodeId: getUUID(),
23 |         nodeName: config.nodeName,
24 |         nodeType: config.nodeType,
25 |         config: config.config || {},
26 |         childNode: null
27 |     }
28 | }


--------------------------------------------------------------------------------
/src/easy-process/assets/icons/ep-condition.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688345131947" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3479" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M669.964 198.627c7.81-7.81 20.474-7.81 28.284 0 7.81 7.81 7.81 20.474 0 28.284L546.274 378.886c-7.81 7.81-20.474 7.81-28.285 0-7.81-7.81-7.81-20.474 0-28.285l151.975-151.974z" fill="#85A5FF" p-id="3480"></path><path d="M544 451.58a30 30 0 0 1 8.8-21.228L823.508 160H203.493L472.2 428.355A30 30 0 0 1 481 449.582v347.127l63 63v-408.13z m60 12.437V930c0 16.569-13.431 30-30 30h-2.135a30 30 0 0 1-21.213-8.787L429.787 830.348A30 30 0 0 1 421 809.135V462.02L109.8 151.227C90.884 132.334 104.264 100 131 100h765c26.737 0 40.117 32.334 21.2 51.227L604 464.017z" p-id="3481"></path></svg>


--------------------------------------------------------------------------------
/vite/plugins/compression.js:
--------------------------------------------------------------------------------
 1 | import compression from 'vite-plugin-compression'
 2 | 
 3 | export default function createCompression(env) {
 4 |     const { VITE_BUILD_COMPRESS } = env
 5 |     const plugin = []
 6 |     if (VITE_BUILD_COMPRESS) {
 7 |         const compressList = VITE_BUILD_COMPRESS.split(',')
 8 |         if (compressList.includes('gzip')) {
 9 |             // #使用gzip解压缩静态文件
10 |             plugin.push(
11 |                 compression({
12 |                     ext: '.gz',
13 |                     deleteOriginFile: false
14 |                 })
15 |             )
16 |         }
17 |         if (compressList.includes('brotli')) {
18 |             plugin.push(
19 |                 compression({
20 |                     ext: '.br',
21 |                     algorithm: 'brotliCompress',
22 |                     deleteOriginFile: false
23 |                 })
24 |             )
25 |         }
26 |     }
27 |     return plugin
28 | }
29 | 


--------------------------------------------------------------------------------
/src/easy-process/assets/icons/ep-tips.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1689065637763" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2284" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 0.44544C229.47712 0.44544 0.44544 229.47712 0.44544 512.00256c0 282.5216 229.03168 511.552 511.55456 511.552s511.55456-229.03168 511.55456-511.552C1023.55456 229.47712 794.52288 0.44544 512 0.44544zM512 900.78336c-47.08736 0-85.25952-39.41632-85.25952-88.03584S464.91264 724.7104 512 724.7104c47.0848 0 85.25696 39.41632 85.25696 88.03712S559.08608 900.78336 512 900.78336zM578.2016 583.85536c0 48.6208-26.94528 88.03456-60.18304 88.03456l-12.03584 0c-33.23904 0-60.18304-39.41376-60.18304-88.03456L409.6896 231.71584c0-48.6208 26.944-88.032 60.18176-88.032l84.25728 0c33.23904 0 60.18304 39.41248 60.18304 88.032L578.2016 583.85536z" p-id="2285"></path></svg>


--------------------------------------------------------------------------------
/src/easy-process/components/svg-icon/ep-svg-icon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg :class="svgClass" aria-hidden="true">
 3 |     <use :xlink:href="iconName" :fill="color" />
 4 |   </svg>
 5 | </template>
 6 | 
 7 | <script setup name="ep-svg-icon">
 8 | import { computed } from 'vue'
 9 | import { getIconPrefix } from './index.js'
10 | 
11 | const props = defineProps({
12 |   iconClass: {
13 |     type: String,
14 |     required: true
15 |   },
16 |   className: {
17 |     type: String,
18 |     default: ''
19 |   },
20 |   color: {
21 |     type: String,
22 |     default: ''
23 |   },
24 | });
25 | 
26 | const iconName = computed(() => getIconPrefix() + `${props.iconClass}`)
27 | const svgClass = computed(() => {
28 |   if (props.className) {
29 |     return `svg-icon ${props.className}`
30 |   }
31 |   return 'svg-icon'
32 | })
33 | </script>
34 | 
35 | <style scope lang="less">
36 | .svg-icon {
37 |   width: 1em;
38 |   height: 1em;
39 |   position: relative;
40 |   fill: currentColor;
41 |   vertical-align: -2px;
42 | }
43 | </style>
44 | 


--------------------------------------------------------------------------------
/src/easy-process/node/end/end-node.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <!-- 结束节点 -->
 3 |   <div class="ep-node-end">
 4 |     <div class="ep-node-end-icon"></div>
 5 |     <div class="ep-node-end-text">流程结束</div>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script setup name="end-node">
10 | import {ref, reactive, onMounted, getCurrentInstance} from "vue";
11 | 
12 | const props = defineProps({
13 |   node: { // 传入的流程配置数据
14 |     type: Object,
15 |     default: {}
16 |   },
17 | });
18 | 
19 | const { proxy } = getCurrentInstance();
20 | 
21 | // 流程配置数据
22 | let config = ref({});
23 | 
24 | onMounted(async () => {
25 | 
26 | });
27 | 
28 | </script>
29 | 
30 | <style lang="less" scoped>
31 | .ep-node-end {
32 |   display: flex;
33 |   flex-direction: column;
34 |   justify-content: center;
35 |   align-items: center;
36 | 
37 | 
38 |   .ep-node-end-icon {
39 |     width: 15px;
40 |     height: 15px;
41 |     border-radius: 10px;
42 |     background-color: #cacaca;
43 |   }
44 |   .ep-node-end-text {
45 |     color: #5a5e66;
46 |     margin-bottom: 100px;
47 |   }
48 | }
49 | </style>
50 | 


--------------------------------------------------------------------------------
/src/views/test.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="app-container">
 3 |     <svg class="svg-icon1" aria-hidden="true" viewBox="0 0 1024 1024">
 4 |       <use :xlink:href="icons.close" fill="red"/>
 5 |     </svg>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script setup name="Test">
10 | import {ref} from "vue";
11 | const icons = ref({})
12 | const namePattern = /([^/]+)\.svg$/i
13 | function init() {
14 |   let files = import.meta.glob('../assets/icons/svg/*', {eager: true, as: 'url'});
15 |   console.log(files);
16 |   Object.keys(files).forEach(key => {
17 |     let fileName = getFileName(namePattern, key)
18 |     if (fileName) {
19 |       icons.value[fileName] = files[key]
20 |     }
21 |   })
22 |   console.log("icons.value", icons.value)
23 | }
24 | 
25 | const getFileName = (pattern, path) => {
26 |   let result = pattern.exec(path)
27 |   if (result !== null) {
28 |     return result[1]
29 |   }
30 |   return null
31 | }
32 | init()
33 | </script>
34 | 
35 | <style lang="less" scoped>
36 | .svg-icon1 {
37 |   width: 25px;
38 |   height: 25px;
39 |   font-size: 50px;
40 | }
41 | </style>
42 | 


--------------------------------------------------------------------------------
/src/easy-process/assets/icons/ep-task.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688031509628" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22639" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M858.5 763.6c-18.9-44.8-46.1-85-80.6-119.5-34.5-34.5-74.7-61.6-119.5-80.6-0.4-0.2-0.8-0.3-1.2-0.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-0.4 0.2-0.8 0.3-1.2 0.5-44.8 18.9-85 46-119.5 80.6-34.5 34.5-61.6 74.7-80.6 119.5C146.9 807.5 137 854 136 901.8c-0.1 4.5 3.5 8.2 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c0.1 4.4 3.6 7.8 8 7.8h60c4.5 0 8.1-3.7 8-8.2-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z" p-id="22640"></path></svg>


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 gaoyang
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/views/node/condition/condition-node.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <!-- 条件节点 -->
 3 |   <div class="ep-node-condition">
 4 |     <div v-if="node.config.days">
 5 |       请假天数&lt;{{node.config.days}}天
 6 |     </div>
 7 |     <div v-else>
 8 |       未设置条件
 9 |     </div>
10 |   </div>
11 | 
12 | </template>
13 | 
14 | <script setup name="condition-node">
15 | import {getCurrentInstance, inject} from "vue";
16 | import {KEY_PROCESS_DATA, KEY_VALIDATOR} from "@/easy-process/config/provide-keys.js"
17 | 
18 | const props = defineProps({
19 |   node: { // 传入的流程配置数据
20 |     type: Object,
21 |     default: {}
22 |   },
23 |   isLastCondition: {
24 |     type: Boolean,
25 |     default: false
26 |   }
27 | });
28 | 
29 | const { proxy } = getCurrentInstance();
30 | 
31 | // 获取流程数据
32 | const processData = inject(KEY_PROCESS_DATA)
33 | // 获取流程验证器实例
34 | const validator = inject(KEY_VALIDATOR)
35 | 
36 | // 注册验证器
37 | validator.register(props.node.tmpNodeId, () => {
38 |   let valid = true;
39 | 
40 |   return {
41 |     "valid": valid,
42 |     "message": "请选择条件"
43 |   }
44 | })
45 | 
46 | </script>
47 | 
48 | <style lang="less" scoped>
49 | .ep-node-condition {
50 | 
51 | }
52 | </style>
53 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "qx-easy-process",
 3 |   "private": false,
 4 |   "version": "3.0.10",
 5 |   "type": "module",
 6 |   "description": "easy-process流程设计器，基于vue3 + vite4实现，具备低代码、快速应用及扩展的特点。【工作流】【流程引擎】",
 7 |   "keywords": [
 8 |     "process",
 9 |     "process designer",
10 |     "qx-easy-process",
11 |     "流程引擎",
12 |     "流程设计器",
13 |     "工作流"
14 |   ],
15 |   "main": "dist/easy-process.umd.js",
16 |   "module": "dist/easy-process.es.js",
17 |   "files": [
18 |     "dist"
19 |   ],
20 |   "license": "MIT",
21 |   "author": {
22 |     "name": "GaoYang",
23 |     "email": "331607151@qq.com"
24 |   },
25 |   "scripts": {
26 |     "dev": "vite",
27 |     "build": "vite build",
28 |     "preview": "vite preview"
29 |   },
30 |   "dependencies": {
31 |     "fast-glob": "^3.3.3",
32 |     "less": "^4.1.3",
33 |     "less-loader": "^11.1.0",
34 |     "uuid": "^9.0.0",
35 |     "vue": "^3.2.47",
36 |     "vue-router": "4.1.4"
37 |   },
38 |   "devDependencies": {
39 |     "@vitejs/plugin-vue": "^4.1.0",
40 |     "sass": "1.56.1",
41 |     "unplugin-auto-import": "0.11.4",
42 |     "vite": "^4.3.9",
43 |     "vite-plugin-compression": "0.5.1",
44 |     "vite-plugin-svg-icons": "2.0.1",
45 |     "vite-plugin-vue-setup-extend": "0.4.0",
46 |     "rollup-plugin-copy": "^3.5.0"
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/src/easy-process/tools/process-ctrl.js:
--------------------------------------------------------------------------------
 1 | 
 2 | /**
 3 |  * 流程控制器
 4 |  * @returns {{}}
 5 |  */
 6 | export const createProcessCtrl = () => {
 7 |     let ctrl = {};
 8 |     // 节点信息
 9 |     ctrl.nodes = new Map()
10 |     // 事件绑定
11 |     ctrl.events = new Map()
12 | 
13 |     // 添加节点
14 |     ctrl.addNode = (nodeId, nodeConfig) => {
15 |         ctrl.nodes.set(nodeId, nodeConfig)
16 |     }
17 | 
18 |     // 获取节点
19 |     ctrl.getNode = (nodeId) => {
20 |         return ctrl.nodes.get(nodeId)
21 |     }
22 | 
23 |     // 移除节点
24 |     ctrl.removeNode = (nodeId) => {
25 |         ctrl.nodes.delete(nodeId)
26 |     }
27 | 
28 |     // 绑定事件
29 |     ctrl.bindEvent = (key, callback) => {
30 |         if (key && callback && typeof callback === 'function') {
31 |             ctrl.events.set(key, callback)
32 |         }
33 |     }
34 | 
35 |     // 解除绑定事件
36 |     ctrl.unbindEvent = (key) => {
37 |         ctrl.events.delete(key)
38 |     }
39 | 
40 |     // 获取绑定事件
41 |     ctrl.getBindEvent = (key) => {
42 |         return ctrl.events.get(key)
43 |     }
44 |     // 触发事件
45 |     ctrl.triggerEvent = (key, params) => {
46 |         let f = ctrl.getBindEvent(key)
47 |         if (f) {
48 |             return f(params)
49 |         }
50 |         return null
51 |     }
52 |     // 触发事件结果是否为真
53 |     ctrl.eventReturnIsTrue = (result) => {
54 |         if (typeof result === 'boolean') {
55 |             return result
56 |         }
57 |         return true
58 |     }
59 | 
60 |     return ctrl
61 | }
62 | 


--------------------------------------------------------------------------------
/src/easy-process/assets/icons/ep-gateway.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688028528395" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12336" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M938.666667 684.813333V522.666667a53.393333 53.393333 0 0 0-53.333334-53.333334H554.666667V339.186667c48.626667-9.906667 85.333333-53.006667 85.333333-104.52 0-58.813333-47.853333-106.666667-106.666667-106.666667s-106.666667 47.853333-106.666666 106.666667c0 51.513333 36.706667 94.613333 85.333333 104.52V469.333333H181.333333a53.393333 53.393333 0 0 0-53.333333 53.333334v162.146666c-48.626667 9.906667-85.333333 53.006667-85.333333 104.52 0 58.813333 47.853333 106.666667 106.666666 106.666667s106.666667-47.853333 106.666667-106.666667c0-51.513333-36.706667-94.613333-85.333333-104.52V522.666667a10.666667 10.666667 0 0 1 10.666666-10.666667h330.666667v172.813333c-48.626667 9.906667-85.333333 53.006667-85.333333 104.52 0 58.813333 47.853333 106.666667 106.666666 106.666667s106.666667-47.853333 106.666667-106.666667c0-51.513333-36.706667-94.613333-85.333333-104.52V512h330.666666a10.666667 10.666667 0 0 1 10.666667 10.666667v162.146666c-48.626667 9.906667-85.333333 53.006667-85.333333 104.52 0 58.813333 47.853333 106.666667 106.666666 106.666667s106.666667-47.853333 106.666667-106.666667c0-51.513333-36.706667-94.613333-85.333333-104.52z" p-id="12337"></path></svg>


--------------------------------------------------------------------------------
/src/easy-process/config/node-component.js:
--------------------------------------------------------------------------------
 1 | import { shallowRef, defineAsyncComponent } from 'vue'
 2 | export const nodeComponents = shallowRef({});
 3 | export const drawerComponents = shallowRef({});
 4 | 
 5 | const nodePattern = /([^/]+)-node\.vue$/i
 6 | const drawerPattern = /([^/]+)-drawer\.vue$/i
 7 | 
 8 | export const initNodes = (extNodes) => {
 9 |     // 加载本地节点组件
10 |     initComponents(import.meta.glob('../node/*/*.vue'))
11 |     // 加载扩展节点组件
12 |     if (extNodes) {
13 |         initComponents(extNodes)
14 |     }
15 | }
16 | 
17 | const initComponents = (components) => {
18 |     Object.keys(components).forEach(key => {
19 |         loadNodeComponents(components, key);
20 |         loadDrawerComponents(components, key);
21 |     })
22 | }
23 | 
24 | const loadNodeComponents = (components, key) => {
25 |     let nodeType = getNodeType(nodePattern, key)
26 |     if (nodeType) {
27 |         let component = components[key]
28 |         nodeComponents.value[nodeType] = defineAsyncComponent(component)
29 |     }
30 | }
31 | const loadDrawerComponents = (components, key) => {
32 |     let nodeType = getNodeType(drawerPattern, key)
33 |     if (nodeType) {
34 |         let component = components[key]
35 |         drawerComponents.value[nodeType] = defineAsyncComponent(component)
36 |     }
37 | }
38 | 
39 | const getNodeType = (pattern, path) => {
40 |     let result = pattern.exec(path)
41 |     if (result !== null) {
42 |         return result[1]
43 |     }
44 |     return null
45 | }
46 | 
47 | export const getNodeComponent = () => {
48 | 
49 | }


--------------------------------------------------------------------------------
/src/easy-process/assets/icons/ep-parallel-gateway.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1756452745479" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15617" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M750.161067 905.813333A118.186667 118.186667 0 1 1 868.347733 1024a118.186667 118.186667 0 0 1-118.186666-118.186667z m-78.677334 39.253334H356.433067l-7.509334-0.682667a38.656 38.656 0 0 1-27.818666-20.992l-68.266667-135.765333H80.379733l-7.082666-0.682667a39.338667 39.338667 0 0 1 7.082666-77.994667h196.864l7.338667 0.682667a39.509333 39.509333 0 0 1 27.818667 20.992l68.266666 135.765333h290.645334l7.082666 0.682667a39.338667 39.338667 0 0 1-6.656 77.994667z m78.677334-433.152a118.186667 118.186667 0 1 1 118.186666 118.186666A118.186667 118.186667 0 0 1 750.161067 512z m-669.525334 39.424a39.338667 39.338667 0 0 1-7.082666-77.994667l7.082666-0.682667h590.848a39.338667 39.338667 0 0 1 7.082667 77.994667l-7.082667 0.682667z m0-236.373334a39.338667 39.338667 0 0 1-7.082666-77.994666l7.082666-0.682667h172.458667l68.266667-135.765333A38.826667 38.826667 0 0 1 349.179733 79.36l7.509334-0.768h315.050666a39.424 39.424 0 0 1 7.082667 78.250667l-7.082667 0.512H380.8384l-68.266667 135.936a39.082667 39.082667 0 0 1-27.818666 20.992l-7.338667 0.682666z m669.525334-196.864a118.186667 118.186667 0 1 1 118.186666 118.186667 118.186667 118.186667 0 0 1-118.186666-118.101333z" p-id="15618"></path></svg>


--------------------------------------------------------------------------------
/src/easy-process/tools/validator.js:
--------------------------------------------------------------------------------
 1 | import { reactive } from "vue";
 2 | export const createValidator = () => {
 3 |     let validator = {};
 4 |     validator.nodeRules = new Map()
 5 |     validator.results = reactive(new Map())
 6 | 
 7 |     // 注册节点验证规则
 8 |     validator.register = (nodeId, validatorFun) => {
 9 |         if(validatorFun && validatorFun instanceof Function) {
10 |             validator.nodeRules.set(nodeId, validatorFun)
11 |         }
12 |     }
13 | 
14 |     // 移除节点验证规则
15 |     validator.remove = (nodeId) => {
16 |         validator.nodeRules.delete(nodeId)
17 |         validator.results.delete(nodeId)
18 |     }
19 | 
20 |     // 验证节点
21 |     validator.validate = () => {
22 |         let valid = true
23 |         let messages = []
24 |         validator.nodeRules.forEach((value, key) => {
25 |             let fun = value
26 |             if(fun && fun instanceof Function) {
27 |                 let result = fun()
28 |                 if(!result.valid) {
29 |                     valid = false
30 |                     validator.results.set(key, result)
31 |                     messages.push(result.message)
32 |                 } else {
33 |                     validator.results.delete(key)
34 |                 }
35 |             }
36 |         })
37 |         return {valid, messages}
38 |     }
39 | 
40 |     // 获取指定节点的结果
41 |     validator.getResult = (nodeId) => {
42 |         let result = validator.results.get(nodeId)
43 |         if(result) {
44 |             return result
45 |         }
46 |     }
47 | 
48 |     return validator
49 | }
50 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | 
 5 | // svg图标
 6 | import 'virtual:svg-icons-register'
 7 | // easy-process
 8 | import ProcessDesigner from '@/easy-process/index'
 9 | 
10 | const app = createApp(App)
11 | app.use(router)
12 | app.use(ProcessDesigner, {
13 |     nodeImplPath: import.meta.glob('@/views/node/**'),
14 |     nodeConfig: [
15 |         {
16 |             "nodeType": "start",
17 |             "nodeName": "发起人",
18 |             "config": {
19 |                 name: '张三'
20 |             },
21 |         },
22 |         {
23 |             "nodeType": "task",
24 |             "nodeName": "审批人",
25 |         },
26 |         {
27 |             "nodeType": "terminate",
28 |             "hasDrawer": false, // 禁用节点配置功能
29 |         },
30 |         {
31 |             "nodeType": "notify",
32 |             "nodeName": "抄送",
33 |             "color": "#FFFFFF", // 节点标题颜色
34 |             "bgColor": "#8225e4", // 节点标题背景颜色
35 |             "hasDrawer": true, // 节点是否可以进行配置
36 |             "icon": { // 图标
37 |                 "name": "ep-terminate", // 图标名
38 |                 "color": "#8225e4" // 颜色
39 |             },
40 |             "config": {
41 |                 name: '主管'
42 |             },
43 |         }
44 |     ],
45 |     zIndexConfig: {
46 |         initZIndexValue: 1000,
47 |         bindZIndexFunction: () => {
48 |             if (!window.zIndex) {
49 |                 window.zIndex = 500
50 |             }
51 |             return window.zIndex++
52 |         }
53 |     },
54 |     iconConfig: {
55 |         prefix: '#icon-'
56 |     }
57 | })
58 | app.mount('#app')
59 | 


--------------------------------------------------------------------------------
/src/easy-process/components/button/ep-button.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div :class="['button', props.type]">
 3 |     <slot></slot>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script setup name="ep-button">
 8 | import {ref, reactive, onMounted, getCurrentInstance} from "vue";
 9 | const props = defineProps({
10 |   type: {
11 |     type: String,
12 |     default: 'default'
13 |   },
14 | });
15 | 
16 | const { proxy } = getCurrentInstance();
17 | 
18 | </script>
19 | 
20 | <style lang="less" scoped>
21 | .button {
22 |   display: inline-flex;
23 |   justify-content: center;
24 |   align-items: center;
25 |   line-height: 1;
26 |   height: 32px;
27 |   white-space: nowrap;
28 |   cursor: pointer;
29 |   color: #606266;
30 |   box-sizing: border-box;
31 |   outline: 0;
32 |   vertical-align: middle;
33 |   background-color: #FFFFFF;
34 |   border: 1px solid #dcdfe6;
35 |   padding: 8px 15px;
36 |   font-size: 14px;
37 |   border-radius: 4px;
38 |   -webkit-appearance: none;
39 |   user-select: none;
40 | }
41 | 
42 | .button+.button {
43 |   margin-left: 12px;
44 | }
45 | 
46 | // 默认样式
47 | .default {
48 |   color: #606266;
49 |   background-color: #FFFFFF;
50 |   border: 1px solid #dcdfe6;
51 | 
52 |   &:hover {
53 |     color: #79bbff;
54 |     background-color: #ecf5ff;
55 |     border: 1px solid #79bbff;
56 |   }
57 |   &:active {
58 |     color: #337ecc;
59 |     background-color: #ecf5ff;
60 |     border: 1px solid #337ecc;
61 |   }
62 | }
63 | 
64 | // 主样式
65 | .primary {
66 |   color: #FFFFFF;
67 |   background-color: #409EFF;
68 |   border: 1px solid #409EFF;
69 | 
70 |   &:hover {
71 |     color: #FFFFFF;
72 |     background-color: #79bbff;
73 |     border: 1px solid #79bbff;
74 |   }
75 |   &:active {
76 |     color: #FFFFFF;
77 |     background-color: #337ecc;
78 |     border: 1px solid #337ecc;
79 |   }
80 | }
81 | </style>


--------------------------------------------------------------------------------
/src/easy-process/index.js:
--------------------------------------------------------------------------------
 1 | import {initNodes} from './config/node-component.js'
 2 | import {loadNodeConfig} from './config/node-config.js'
 3 | import {loadZIndexConfig} from './tools/z-index-tools.js'
 4 | import {loadIconConfig} from './components/svg-icon/index.js'
 5 | 
 6 | const requireGlobalComponent = import.meta.glob([
 7 |     './ep-designer.vue',
 8 |     './components/svg-icon/ep-svg-icon.vue',
 9 | ], { eager: true });
10 | 
11 | /**
12 |  * 安装组件
13 |  * @param app
14 |  * @param options
15 |  */
16 | const install = (app, options) => {
17 |     console.log("run install")
18 |     if (install.installed) {
19 |         return;
20 |     }
21 | 
22 |     install.installed;
23 | 
24 |     // 加载配置
25 |     loadOptions(app, options)
26 | 
27 |     //注册全局组件
28 |     registerGlobalComponent(app, options);
29 | 
30 | };
31 | 
32 | /**
33 |  * 注册全局组件
34 |  * @param app
35 |  * @param options
36 |  */
37 | const registerGlobalComponent = (app, options) => {
38 |     Object.keys(requireGlobalComponent).forEach((fileName) => {
39 |         const component = requireGlobalComponent[fileName];
40 |         //获取组件名
41 |         const componentName = component.default.name;
42 |         app.component(componentName, component.default || component);
43 |     });
44 | }
45 | 
46 | /**
47 |  * 加载配置
48 |  * @param app
49 |  * @param options
50 |  */
51 | const loadOptions = (app, options) => {
52 |     let {nodeImplPath, nodeConfig, zIndexConfig, iconConfig} = options;
53 |     // 加载节点组件
54 |     initNodes(nodeImplPath)
55 |     // 加载节点配置
56 |     loadNodeConfig(nodeConfig)
57 |     // 加载z-index配置
58 |     loadZIndexConfig(zIndexConfig)
59 |     // 加载图标配置
60 |     loadIconConfig(iconConfig)
61 | }
62 | 
63 | //环境检测
64 | if (typeof window !== "undefined" && window.Vue) {
65 |     install(window.Vue);
66 | }
67 | 
68 | //对外暴露install方法
69 | export default {
70 |     install,
71 | }


--------------------------------------------------------------------------------
/src/easy-process/node/node-wrap.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="ep-node-wrap" v-if="props.node">
 3 |     <!-- 路由节点 -->
 4 |     <gateway-node :node="props.node" @removeNode="removeNode" v-if="props.node.nodeType === GATEWAY" :key="props.node.tmpNodeId"/>
 5 |     <!-- 普通节点 -->
 6 |     <base-node :node="props.node" :branchList="props.branchList" :conditionIndex="props.conditionIndex" @removeNode="removeNode" :key="props.node.tmpNodeId" v-else/>
 7 |     <!-- 子节点 -->
 8 |     <node-wrap :node="props.node.childNode" @removeNode="removeChildNode" v-if="props.node.childNode && props.node.childNode.nodeType" />
 9 |   </div>
10 | </template>
11 | 
12 | <script setup name="NodeWrap">
13 | import BaseNode from "./base/base-node.vue";
14 | import GatewayNode from "./gateway/gateway-node.vue";
15 | import {getCurrentInstance, onMounted, ref} from "vue";
16 | import {GATEWAY} from "../config/default-node-type.js"
17 | 
18 | const props = defineProps({
19 |   node: { // 当前流程节点数据
20 |     type: Object,
21 |     default: {}
22 |   },
23 |   branchList: { // 条件集合，当节点类型为condition时有效
24 |     type: Array,
25 |     default: []
26 |   },
27 |   conditionIndex: { // 当前条件节点的顺序，当节点类型为condition时有效
28 |     type: Number,
29 |     default: 0
30 |   },
31 |   canRemoved: { // 当前节点是否可以移除
32 |     type: Boolean,
33 |     default: true
34 |   }
35 | });
36 | 
37 | const { proxy } = getCurrentInstance();
38 | 
39 | // 流程配置数据
40 | let config = ref({});
41 | 
42 | onMounted(async () => {
43 | 
44 | });
45 | 
46 | // 移除当前节点
47 | const emit = defineEmits(["removeNode"]);
48 | const removeNode = () => {
49 |   emit("removeNode");
50 | }
51 | 
52 | // 移除子节点
53 | const removeChildNode = () => {
54 |   if (props.node.childNode.nodeType === GATEWAY) {
55 |     let nextNode = props.node.childNode.branchList[0].childNode
56 |     if (nextNode) {
57 |       nextNode.childNode = props.node.childNode.childNode
58 |     } else {
59 |       nextNode = props.node.childNode.childNode
60 |     }
61 |     props.node.childNode = nextNode ? nextNode : null
62 |   } else {
63 |     props.node.childNode = props.node.childNode.childNode
64 |   }
65 | }
66 | </script>
67 | 
68 | <style lang="less" scoped>
69 | 
70 | </style>
71 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig, loadEnv } from 'vite'
 2 | import path from 'path'
 3 | import createVitePlugins from './vite/plugins'
 4 | 
 5 | // https://vitejs.dev/config/
 6 | export default defineConfig(({ mode, command }) => {
 7 |   const env = loadEnv(mode, process.cwd())
 8 |   const { VITE_APP_ENV } = env
 9 |   return {
10 |     // 部署生产环境和开发环境下的URL。
11 |     // 默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上
12 |     // 例如 https://www.quxiou.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.quxiou.vip/admin/，则设置 baseUrl 为 /admin/。
13 |     base: '/',
14 |     plugins: createVitePlugins(env, command === 'build'),
15 |     build: {
16 |       outDir: "dist", // 打包输出目录
17 |       lib: {
18 |         // 指定库入口文件
19 |         entry: path.resolve(__dirname, "src/easy-process/index.js"),
20 |         // 指定库的名称
21 |         name: "easy-process",
22 |         fileName: (format) => `easy-process.${format}.js` // 输出文件名格式化函数。例如，'my-vue-plugin.es.js' 和 'my-vue-plugin.umd.js'。
23 |       },
24 |       rollupOptions: {
25 |         external: ["vue"], // 防止将vue打包进库
26 |         output: {
27 |           globals: {
28 |             vue: "Vue",
29 |           },
30 |           assetFileNames: (assetInfo) => {
31 |             if (assetInfo.name.endsWith(".css")) {
32 |               return "css/[name][extname]";
33 |             }
34 |             return "[name].[hash][extname]";
35 |           },
36 |         },
37 |       },
38 |     },
39 |     resolve: {
40 |       // https://cn.vitejs.dev/config/#resolve-alias
41 |       alias: {
42 |         // 设置路径
43 |         '~': path.resolve(__dirname, './'),
44 |         // 设置别名
45 |         '@': path.resolve(__dirname, './src')
46 |       },
47 |       // https://cn.vitejs.dev/config/#resolve-extensions
48 |       extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
49 |     },
50 |     // vite 相关配置
51 |     server: {
52 |       port: 80,
53 |       host: true,
54 |       open: true,
55 |     },
56 |     optimizeDeps: {
57 |       exclude: ["fsevents"],
58 |     },
59 |     //fix:error:stdin>:7356:1: warning: "@charset" must be the first rule in the file
60 |     css: {
61 |       postcss: {
62 |         plugins: [
63 |           {
64 |             postcssPlugin: 'internal:charset-removal',
65 |             AtRule: {
66 |               charset: (atRule) => {
67 |                 if (atRule.name === 'charset') {
68 |                   atRule.remove();
69 |                 }
70 |               }
71 |             }
72 |           }
73 |         ]
74 |       }
75 |     }
76 |   }
77 | })
78 | 


--------------------------------------------------------------------------------
/public/mock/data.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "nodeConfig": {
 3 |     "tmpNodeId": "ab173ea9-d776-4b8a-8e84-ee6d6fe07b44",
 4 |     "nodeName": "发起人",
 5 |     "nodeType": "start",
 6 |     "config": {
 7 |       "name": "张三"
 8 |     },
 9 |     "childNode": {
10 |       "tmpNodeId": "1632f624-8b04-4b62-93fc-7cef5b124189",
11 |       "nodeName": "网关",
12 |       "nodeType": "gateway",
13 |       "config": { },
14 |       "childNode": {
15 |         "tmpNodeId": "c4787616-3666-406e-bb10-75eca8a72a86",
16 |         "nodeName": "抄送",
17 |         "nodeType": "notify",
18 |         "config": {
19 |           "name": "HR"
20 |         },
21 |         "childNode": null
22 |       },
23 |       "branchList": [
24 |         {
25 |           "tmpNodeId": "f34a892f-e3a5-4503-ac95-fadf8f72cd20",
26 |           "nodeName": "条件",
27 |           "nodeType": "condition",
28 |           "config": {
29 |             "days": "3"
30 |           },
31 |           "childNode": {
32 |             "tmpNodeId": "6af25285-ad47-4b19-ba20-401d5660a49b",
33 |             "nodeName": "审批人",
34 |             "nodeType": "task",
35 |             "config": {
36 |               "name": "项目经理"
37 |             },
38 |             "childNode": null
39 |           }
40 |         },
41 |         {
42 |           "tmpNodeId": "46c9248b-64b4-491e-848c-b208ebb09d18",
43 |           "nodeName": "条件",
44 |           "nodeType": "condition",
45 |           "config": {
46 |             "days": "5"
47 |           },
48 |           "childNode": {
49 |             "tmpNodeId": "3e83d699-7f9d-4814-83de-f073f05f0e7a",
50 |             "nodeName": "审批人",
51 |             "nodeType": "task",
52 |             "config": {
53 |               "name": "项目经理"
54 |             },
55 |             "childNode": {
56 |               "tmpNodeId": "0d17edf9-1acb-4b35-a1a8-a049c0dea37d",
57 |               "nodeName": "审批人",
58 |               "nodeType": "task",
59 |               "config": {
60 |                 "name": "总监"
61 |               },
62 |               "childNode": null
63 |             }
64 |           }
65 |         },
66 |         {
67 |           "tmpNodeId": "80569c58-6b66-4bfc-bb4b-cee6ca376650",
68 |           "nodeName": "条件",
69 |           "nodeType": "condition",
70 |           "config": { },
71 |           "childNode": {
72 |             "tmpNodeId": "8d0f7822-36df-49b0-8dcd-19d11fce6429",
73 |             "nodeName": "终止",
74 |             "nodeType": "terminate",
75 |             "config": { },
76 |             "childNode": null
77 |           }
78 |         }
79 |       ],
80 |       "gatewayType": "exclusive"
81 |     }
82 |   }
83 | }


--------------------------------------------------------------------------------
/src/easy-process/node/base/base-drawer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-if="node" class="ep-node-drawer-container">
 3 |     <EpDrawer v-model="isShow" title="设置" width="600px">
 4 |       <template #default>
 5 |         <component :is="drawerComponents[node.nodeType]" :config="node.config"/>
 6 |       </template>
 7 |       <template #footer>
 8 |         <ep-button @click="cancelUpdateConfig">取消</ep-button>
 9 |         <ep-button type="primary" @click="updateConfig">确定</ep-button>
10 |       </template>
11 |     </EpDrawer>
12 |   </div>
13 | </template>
14 | <script setup name="base-drawer">
15 | import EpDrawer from "@/easy-process/components/drawer/ep-drawer.vue";
16 | import EpButton from "@/easy-process/components/button/ep-button.vue";
17 | import {defineAsyncComponent, getCurrentInstance, nextTick, ref, shallowRef} from "vue";
18 | import {nodeConfig} from "../../config/node-config.js";
19 | import { drawerComponents } from "../../config/node-component.js";
20 | import {KEY_PROCESS_CTRL} from "../../config/provide-keys.js"
21 | import {ON_PRE_UPDATE_NODE_CONFIG, ON_AFTER_UPDATE_NODE_CONFIG} from "../../config/event-keys.js"
22 | import {copy} from "../../tools/common-tools.js";
23 | 
24 | const props = defineProps({
25 | 
26 | });
27 | 
28 | const { proxy } = getCurrentInstance();
29 | 
30 | // 节点数据的副本
31 | let node = ref(null);
32 | // 节点配置数据
33 | const config = ref(null)
34 | // 是否显示配置界面
35 | let isShow = ref(false);
36 | // 流程控制器实例
37 | const processCtrl = inject(KEY_PROCESS_CTRL)
38 | 
39 | // 显示节点配置组件
40 | const show = (data) => {
41 |   // 复制数据
42 |   node.value = copy(data)
43 |   config.value = nodeConfig[node.value.nodeType]
44 | 
45 |   isShow.value = true
46 | }
47 | 
48 | const emit = defineEmits(["updateConfig", "cancelUpdateConfig"]);
49 | 
50 | // 更新节点配置数据
51 | const updateConfig = () => {
52 |   // 触发修改节点配置之前事件
53 |   let isAllowUpdate = processCtrl.triggerEvent(ON_PRE_UPDATE_NODE_CONFIG, {
54 |     tmpNodeId: node.value.tmpNodeId,
55 |     config: node.value.config
56 |   })
57 |   if(!processCtrl.eventReturnIsTrue(isAllowUpdate)) {
58 |     return
59 |   }
60 |   isShow.value = false
61 |   emit("updateConfig", copy(node.value.config));
62 |   nextTick(() => {
63 |     // 触发修改节点配置之后事件
64 |     processCtrl.triggerEvent(ON_AFTER_UPDATE_NODE_CONFIG, {
65 |       tmpNodeId: node.value.tmpNodeId
66 |     })
67 |   })
68 | }
69 | 
70 | // 取消更新节点配置数据
71 | const cancelUpdateConfig = () => {
72 |   isShow.value = false
73 |   emit("cancelUpdateConfig");
74 | }
75 | 
76 | defineExpose({
77 |   show
78 | });
79 | </script>
80 | 
81 | <style lang="less" scoped>
82 | 
83 | .ep-node-drawer {
84 | 
85 | }
86 | </style>
87 | 


--------------------------------------------------------------------------------
/src/views/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="app-container">
  3 |     <div class="header">
  4 |       <div class="title">{{processData.processName}}</div>
  5 |       <div class="publish">
  6 |         <button @click="publish">发布</button>
  7 |       </div>
  8 |     </div>
  9 |     <div class="body">
 10 |       <ep-designer ref="process" :data="processData"/>
 11 |     </div>
 12 |   </div>
 13 | </template>
 14 | 
 15 | <script setup name="WorkFlow">
 16 | import {getCurrentInstance, onMounted, ref} from "vue";
 17 | import {
 18 |   ON_DESIGNER_MOUNTED, ON_PRE_ADD_NODE, ON_AFTER_ADD_NODE,
 19 |   ON_PRE_REMOVE_NODE, ON_AFTER_REMOVE_NODE,
 20 |   ON_PRE_UPDATE_NODE_CONFIG, ON_AFTER_UPDATE_NODE_CONFIG
 21 | } from "@/easy-process/config/event-keys.js"
 22 | const { proxy } = getCurrentInstance();
 23 | import mockData from '~/public/mock/data.json'
 24 | 
 25 | // 审批数据
 26 | let processData = ref({})
 27 | 
 28 | onMounted(async () => {
 29 |   // 获取流程数据
 30 |   processData.value = mockData;
 31 |   // 绑定事件
 32 |   bindEvent()
 33 | })
 34 | 
 35 | /**
 36 |  * 绑定事件
 37 |  */
 38 | const bindEvent = () => {
 39 |   proxy.$refs.process.bindEvent(ON_DESIGNER_MOUNTED, () => {
 40 |     console.log("触发流程设计器加载完成事件")
 41 |   })
 42 |   proxy.$refs.process.bindEvent(ON_PRE_ADD_NODE, (params) => {
 43 |     console.log("触发新增节点之前事件", params)
 44 |     return true
 45 |   })
 46 |   proxy.$refs.process.bindEvent(ON_AFTER_ADD_NODE, (params) => {
 47 |     console.log("触发新增节点之后事件", params)
 48 |   })
 49 |   proxy.$refs.process.bindEvent(ON_PRE_REMOVE_NODE, (params) => {
 50 |     console.log("触发移除节点之前事件", params)
 51 |     return true
 52 |   })
 53 |   proxy.$refs.process.bindEvent(ON_AFTER_REMOVE_NODE, (params) => {
 54 |     console.log("触发移除节点之后事件", params)
 55 |   })
 56 |   proxy.$refs.process.bindEvent(ON_PRE_UPDATE_NODE_CONFIG, (params) => {
 57 |     console.log("触发更新节点配置之前事件", params)
 58 |     return true
 59 |   })
 60 |   proxy.$refs.process.bindEvent(ON_AFTER_UPDATE_NODE_CONFIG, (params) => {
 61 |     console.log("触发更新节点配置之后事件", params)
 62 |   })
 63 | }
 64 | 
 65 | /**
 66 |  * 发布流程
 67 |  */
 68 | const publish = () => {
 69 |   proxy.$refs.process.validate((valid, messages) => {
 70 |     if(valid) {
 71 |       let result = proxy.$refs.process.getResult();
 72 |       console.info("发布流程:", result)
 73 |       alert(JSON.stringify(result))
 74 |     } else {
 75 |       alert(JSON.stringify(messages))
 76 |     }
 77 | 
 78 |   })
 79 | 
 80 | }
 81 | </script>
 82 | 
 83 | <style lang="less" scoped>
 84 | .app-container {
 85 |   position: absolute;
 86 |   top: 0;
 87 |   left: 0;
 88 |   width: 100%;
 89 |   height: 100%;
 90 | 
 91 | }
 92 | .header {
 93 |   position: fixed;
 94 |   z-index: 2;
 95 |   width: 100%;
 96 |   height: 50px;
 97 |   background-color: #1c84c6;
 98 |   display: flex;
 99 |   align-items: center;
100 |   justify-content: space-between;
101 |   padding: 0px 16px;
102 |   box-sizing: border-box;
103 | 
104 |   .title {
105 |     color: #FFFFFF;
106 |     font-weight: bold;
107 |   }
108 |   .publish {
109 | 
110 |   }
111 | }
112 | .body {
113 |   position: absolute;
114 |   top: 0;
115 |   left: 0;
116 |   padding-top: 50px;
117 |   //width: 100%;
118 |   min-width: 100%;
119 |   height: 100%;
120 |   width: 100%;
121 |   box-sizing: border-box;
122 | }
123 | </style>
124 | 


--------------------------------------------------------------------------------
/src/easy-process/config/node-config.js:
--------------------------------------------------------------------------------
  1 | import { GATEWAY, CONDITION, START, TASK, TERMINATE } from "./default-node-type.js"
  2 | import {copy} from "@/easy-process/tools/common-tools.js";
  3 | 
  4 | // 节点配置
  5 | const nodeConfig = {}
  6 | 
  7 | // 路由节点配置
  8 | nodeConfig[GATEWAY] = {
  9 |     "nodeType": GATEWAY,
 10 |     "nodeName": "网关", // 节点标题
 11 |     "enable": true, // 节点是否可用
 12 |     "canAdd": true, // 节点是否可以增加
 13 |     "hasDrawer": false, // 节点是否可以进行配置
 14 |     "icon": { // 图标
 15 |         "name": "ep-gateway", // 图标名
 16 |         "color": "#3CB371" // 颜色
 17 |     },
 18 |     "branchList": []
 19 | }
 20 | 
 21 | // 条件节点配置
 22 | nodeConfig[CONDITION] = {
 23 |     "nodeType": CONDITION,
 24 |     "nodeName": "条件", // 节点标题
 25 |     "color": "#FFFFFF", // 节点标题颜色
 26 |     "bgColor": "#3CB371", // 节点标题背景颜色
 27 |     "enable": true, // 节点是否可用
 28 |     "canAdd": false, // 节点是否可以增加
 29 |     "canRemoved": true, // 节点是否能够移除
 30 |     "hasDrawer": true, // 节点是否可以进行配置
 31 |     "icon": { // 图标
 32 |         "name": "ep-condition", // 图标名
 33 |         "color": "#3CB371" // 颜色
 34 |     }
 35 | }
 36 | 
 37 | // 开始节点配置
 38 | nodeConfig[START] = {
 39 |     "nodeType": START,
 40 |     "nodeName": "开始", // 节点标题
 41 |     "color": "#FFFFFF", // 节点标题颜色
 42 |     "bgColor": "#1e83e9", // 节点标题背景颜色
 43 |     "enable": true, // 节点是否可用
 44 |     "canAdd": false, // 节点是否可以增加
 45 |     "canRemoved": false, // 节点是否能够移除
 46 |     "hasDrawer": true, // 节点是否可以进行配置
 47 |     "icon": { // 图标
 48 |         "name": "ep-start", // 图标名
 49 |         "color": "#1e83e9" // 颜色
 50 |     }
 51 | }
 52 | 
 53 | // 任务节点配置
 54 | nodeConfig[TASK] = {
 55 |     "nodeType": TASK,
 56 |     "nodeName": "任务", // 节点标题
 57 |     "color": "#FFFFFF", // 节点标题颜色
 58 |     "bgColor": "#FF8C00", // 节点标题背景颜色
 59 |     "enable": true, // 节点是否可用
 60 |     "canAdd": true, // 节点是否可以增加
 61 |     "canRemoved": true, // 节点是否能够移除
 62 |     "hasDrawer": true, // 节点是否可以进行配置
 63 |     "icon": { // 图标
 64 |         "name": "ep-task", // 图标名
 65 |         "color": "#FF8C00" // 颜色
 66 |     }
 67 | }
 68 | 
 69 | // 终止节点配置
 70 | nodeConfig[TERMINATE] = {
 71 |     "nodeType": TERMINATE,
 72 |     "nodeName": "终止", // 节点标题
 73 |     "color": "#FFFFFF", // 节点标题颜色
 74 |     "bgColor": "#F56C6C", // 节点标题背景颜色
 75 |     "enable": true, // 节点是否可用
 76 |     "canAdd": true, // 节点是否可以增加
 77 |     "canRemoved": true, // 节点是否能够移除
 78 |     "hasDrawer": true, // 节点是否可以进行配置
 79 |     "icon": { // 图标
 80 |         "name": "ep-terminate", // 图标名
 81 |         "color": "#F56C6C" // 颜色
 82 |     }
 83 | }
 84 | 
 85 | /**
 86 |  * 加载节点配置
 87 |  * @param externalConfig
 88 |  */
 89 | const loadNodeConfig = (externalConfig) => {
 90 |     if (externalConfig && externalConfig.length > 0) {
 91 |         externalConfig.forEach(item => {
 92 |             if (!item.nodeType) {
 93 |                 throw new Error('加载自定义配置：nodeType节点类型不能为空')
 94 |             }
 95 |             if (!nodeConfig[item.nodeType] && !item.nodeName) {
 96 |                 throw new Error('加载自定义配置：nodeName节点类型不能为空')
 97 |             }
 98 |             let node = nodeConfig[item.nodeType] || copy(nodeDefaultValue)
 99 |             nodeConfig[item.nodeType] =  { ...node, ...item}
100 |         })
101 |     }
102 | }
103 | 
104 | // 默认节点值
105 | const nodeDefaultValue = {
106 |     "enable": true, // 节点是否可用
107 |     "color": "#FFFFFF", // 节点标题颜色
108 |     "bgColor": "#8225e4", // 节点标题背景颜色
109 |     "canAdd": true, // 节点是否可以增加
110 |     "canRemoved": true, // 节点是否能够移除
111 |     "hasDrawer": true, // 节点是否可以进行配置
112 |     "icon": { // 图标
113 |         "name": "task", // 图标名
114 |         "color": "#8225e4" // 颜色
115 |     }
116 | }
117 | 
118 | export {nodeConfig, loadNodeConfig}


--------------------------------------------------------------------------------
/src/easy-process/components/drawer/ep-drawer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <Teleport to="body" v-if="props.modelValue">
  3 |     <div class="drawer">
  4 |       <!-- header -->
  5 |       <div class="drawer-header" v-if="!props.hideHeader">
  6 |         <ep-svg-icon :icon-class="props.icon" class="drawer-header-icon" color="#5a5e66" v-if="props.icon"/>
  7 |         <div class="drawer-header-title">{{props.title}}</div>
  8 |         <ep-svg-icon icon-class="ep-close" class="drawer-header-close" color="#5a5e66" @click="close" v-if="!props.hideCloseBtn"/>
  9 |       </div>
 10 |       <!-- body -->
 11 |       <div class="drawer-body">
 12 |         <slot></slot>
 13 |       </div>
 14 |       <!-- footer -->
 15 |       <div class="drawer-footer">
 16 |         <slot name="footer"></slot>
 17 |       </div>
 18 |     </div>
 19 |     <!-- 遮罩 -->
 20 |     <div class="drawer-overlay"></div>
 21 |   </Teleport>
 22 | </template>
 23 | 
 24 | <script setup name="ep-drawer">
 25 | import {ref, reactive, onMounted, onUnmounted, getCurrentInstance} from "vue";
 26 | import {nextZIndex} from "../../tools/z-index-tools";
 27 | 
 28 | const props = defineProps({
 29 |   modelValue: {
 30 |     type: Boolean,
 31 |     default: false
 32 |   },
 33 |   title: {
 34 |     type: String,
 35 |     default: null
 36 |   },
 37 |   icon: {
 38 |     type: String,
 39 |     default: 'ep-setting'
 40 |   },
 41 |   'hide-header': { // 控制是否显示 header 栏, 默认为 false
 42 |     type: Boolean,
 43 |     default: false
 44 |   },
 45 |   'hide-close-btn': { // 控制是否显示 关闭按钮, 默认为 false
 46 |     type: Boolean,
 47 |     default: false
 48 |   },
 49 |   width: {
 50 |     type: String,
 51 |     default: '500px'
 52 |   },
 53 | });
 54 | 
 55 | const { proxy } = getCurrentInstance();
 56 | 
 57 | let zIndexOverlay = nextZIndex();
 58 | let zIndexDrawer = nextZIndex();
 59 | 
 60 | 
 61 | onMounted(() => {
 62 |   window.addEventListener('keydown', escListener);
 63 | });
 64 | 
 65 | onUnmounted(() => {
 66 |   window.removeEventListener('keydown', escListener);
 67 | });
 68 | 
 69 | // 监听ESC事件
 70 | const escListener = (event) => {
 71 |   if (event.keyCode === 27) {
 72 |     close()
 73 |   }
 74 | }
 75 | 
 76 | const emit = defineEmits(["update:modelValue", "close"]);
 77 | const close = () => {
 78 |   // proxy.$emit("update:modelValue", false)
 79 |   emit("update:modelValue", false)
 80 |   emit("close");
 81 | }
 82 | 
 83 | </script>
 84 | 
 85 | <style lang="less" scoped>
 86 | .drawer {
 87 |   position: fixed;
 88 |   width: v-bind("props.width");
 89 |   height: 100%;
 90 |   background-color: #FFFFFF;
 91 |   box-shadow: -5px -5px 10px 2px rgba(0, 0, 0, 0.2);
 92 |   top: 0;
 93 |   right: 0;
 94 |   z-index: v-bind("zIndexDrawer");
 95 |   display: flex;
 96 |   flex-direction: column;
 97 | }
 98 | 
 99 | .drawer-header {
100 |   padding: 16px;
101 |   border-bottom: 1px solid #cacaca;
102 |   min-height: 30px;
103 |   display: flex;
104 |   flex-direction: row;
105 |   width: 100%;
106 |   align-items: center;
107 |   box-sizing: border-box;
108 | 
109 |   .drawer-header-icon {
110 |     width: 20px;
111 |     height: 20px;
112 |     font-size: 16px;
113 |     padding-right: 10px;
114 |   }
115 |   .drawer-header-title {
116 |     flex: 1;
117 |     color: #5a5e66;
118 |     font-size: 16px;
119 |     font-weight: bold;
120 |   }
121 |   .drawer-header-close {
122 |     width: 20px;
123 |     height: 20px;
124 |     font-size: 16px;
125 |     cursor: pointer;
126 |   }
127 | }
128 | 
129 | .drawer-body {
130 |   flex: 1;
131 |   padding: 16px;
132 |   overflow-y: auto;
133 | }
134 | 
135 | .drawer-footer {
136 |   padding: 16px;
137 |   display: flex;
138 |   flex-direction: row;
139 |   width: 100%;
140 |   align-items: center;
141 |   box-sizing: border-box;
142 |   justify-content: right;
143 | }
144 | .drawer-overlay {
145 |   position: fixed;
146 |   top: 0;
147 |   right: 0;
148 |   bottom: 0;
149 |   left: 0;
150 |   z-index: v-bind("zIndexOverlay");
151 |   height: 100%;
152 |   background-color: rgba(0, 0, 0, 0.5);
153 |   overflow: auto;
154 | }
155 | </style>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Easy Process V3
  2 | Easy Process 流程设计器，基于vue3 + vite4 实现，提供易用的流程管理框架和组件，支持快速集成与定制，适用于多种应用场景。
  3 | 
  4 | 
  5 | ## 开源许可协议
  6 | - MIT
  7 | 
  8 | 
  9 | ## 体验入口
 10 | [http://process.uncode.vip](http://process.uncode.vip)
 11 | 
 12 | 
 13 | 
 14 | ## 传送门
 15 | **项目源码：**[easy-process](https://gitee.com/quxiu-code/easy-process)
 16 | 
 17 | **示例源码：**[easy-process-demo](https://gitee.com/quxiu-code/easy-process-demo)
 18 | 
 19 | **使用手册：** [http://docs.process.uncode.vip](http://docs.process.uncode.vip)
 20 | 
 21 | 
 22 | ## 开发环境
 23 | 
 24 | ```
 25 | Node >= 14
 26 | ```
 27 | 
 28 | ## 技术选型
 29 | 
 30 | - vue3
 31 | - vite4
 32 | 
 33 | 
 34 | 
 35 | ## 安装
 36 | 
 37 | 
 38 | 
 39 | ### 安装qx-easy-process
 40 | 
 41 | ```shell
 42 | npm install qx-easy-process
 43 | ```
 44 | 
 45 | 
 46 | 
 47 | ### 安装vite-plugin-svg-icons
 48 | 
 49 | ```shell
 50 | npm install vite-plugin-svg-icons -D
 51 | ```
 52 | 
 53 | 
 54 | 
 55 | 
 56 | 
 57 | ## 快速开始
 58 | 
 59 | ### 导入组件
 60 | 
 61 | ```js
 62 | // main.js
 63 | import { createApp } from 'vue'
 64 | import App from './App.vue'
 65 | 
 66 | // easy-process
 67 | import EasyProcess from 'qx-easy-process'
 68 | import 'qx-easy-process/dist/css/style.css'
 69 | 
 70 | // svg图标
 71 | import 'virtual:svg-icons-register'
 72 | 
 73 | const app = createApp(App)
 74 | 
 75 | app.use(EasyProcess, {
 76 |   // 指定节点视图实现和节点配置实现目录
 77 |   nodeImplPath: import.meta.glob('src/views/node/**')
 78 | })
 79 | app.mount('#app')
 80 | ```
 81 | 
 82 | 
 83 | 
 84 | ### 配置vite-plugin-svg-icons
 85 | 
 86 | ```js
 87 | // vite.config.js
 88 | import { defineConfig } from 'vite';
 89 | import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
 90 | import path from 'path';
 91 |  
 92 | export default defineConfig({
 93 |   plugins: [
 94 |     createSvgIconsPlugin({
 95 |       // 指定qx-easy-process图标文件夹
 96 |       iconDirs: [path.resolve(process.cwd(), 'node_modules/qx-easy-process/dist/assets/icons')],
 97 |       // 指定symbolId格式
 98 |       symbolId: 'icon-[dir]-[name]',
 99 |     })
100 |   ],
101 | });
102 | ```
103 | 
104 | 
105 | 
106 | ### 实现节点组件
107 | 
108 | 为了提高可扩展性，内置的各类型节点仅是定义了其存在，并未实现节点在流程设计器中展示的内容及配置内容，需要使用者自行实现。
109 | 
110 | 注意：**网关节点** 为内置逻辑组件不需要对其实现节点视图和节点配置组件。
111 | 
112 | 
113 | 
114 | #### 节点命名规范
115 | 
116 | **节点视图组件文件格式：** [nodeType]-node.vue
117 | 
118 | **节点配置组件文件格式：** [nodeType]-drawer.vue
119 | 
120 | 
121 | 
122 | #### 实现节点视图组件
123 | 
124 | 以**开始节点**为例，开始节点的**nodeType=start**，则在/src/views/node/start目录下创建start-node.vue文件, 内容如下：
125 | 
126 | ```vue
127 | // start-node.vue
128 | <template>
129 |   <!-- 发起人节点 -->
130 |   <div>
131 |     发起人: {{node.config.name}}
132 |   </div>
133 | </template>
134 | 
135 | <script setup name="start-node">
136 | import {getCurrentInstance, inject} from "vue";
137 | import {KEY_PROCESS_DATA, KEY_VALIDATOR} from "qx-easy-process/dist/config/provide-keys.js"
138 | 
139 | const props = defineProps({
140 |   node: { // 传入的流程配置数据
141 |     type: Object,
142 |     default: {}
143 |   }
144 | });
145 | 
146 | const { proxy } = getCurrentInstance();
147 | 
148 | // 获取流程数据
149 | const processData = inject(KEY_PROCESS_DATA)
150 | // 获取流程验证器实例
151 | const validator = inject(KEY_VALIDATOR)
152 | 
153 | // 注册验证器
154 | validator.register(props.node.tmpNodeId, () => {
155 |   return {
156 |     "valid": props.node.config.name ? true : false,
157 |     "message": "请选择发起人"
158 |   }
159 | })
160 | </script>
161 | 
162 | <style lang="less" scoped>
163 | 
164 | </style>
165 | 
166 | ```
167 | 
168 | #### 实现节点配置组件
169 | 
170 | 以开始节点为例，开始节点的nodeType=start，则在/src/views/node/start目录下创建start-drawer.vue文件, 内容如下：
171 | 
172 | ```vue
173 | <template>
174 |   <!-- 发起人配置 -->
175 |   <div>
176 |     发起人：<input v-model="props.config.name" />
177 |   </div>
178 | </template>
179 | 
180 | <script setup name="start-drawer">
181 | import {getCurrentInstance, inject} from "vue";
182 | import {KEY_PROCESS_DATA} from "qx-easy-process/dist/config/provide-keys.js"
183 | 
184 | const props = defineProps({
185 |   config: { // 传入的流程配置数据
186 |     type: Object,
187 |     default: {}
188 |   },
189 | });
190 | 
191 | const { proxy } = getCurrentInstance();
192 | 
193 | // 获取流程数据
194 | const processData = inject(KEY_PROCESS_DATA)
195 | </script>
196 | 
197 | <style lang="less" scoped>
198 | 
199 | </style>
200 | 
201 | ```
202 | 
203 | 
204 | 
205 | ### 使用组件
206 | 
207 | ```vue
208 | <ep-designer ref="process" :data="processData"/>
209 | ```
210 | 
211 | processData：流程数据，为空时会默认创建一个开始节点
212 | 
213 | 
214 | 
215 | ### 获取流程数据结果
216 | 
217 | ```js
218 | import {getCurrentInstance} from "vue";
219 | const { proxy } = getCurrentInstance();
220 | 
221 | let result = proxy.$refs.process.getResult();
222 | ```
223 | 
224 | 
225 | 
226 | ## 截图
227 | 
228 | ![1.png](https://file.uncode.vip/easy-process/image/demo/1.png)
229 | 
230 | ![1.png](https://file.uncode.vip/easy-process/image/demo/2.png)
231 | 
232 | ![1.png](https://file.uncode.vip/easy-process/image/demo/3.png)
233 | 
234 | ![1.png](https://file.uncode.vip/easy-process/image/demo/4.png)
235 | 
236 | ![1.png](https://file.uncode.vip/easy-process/image/demo/5.png)
237 | 
238 | 
239 | 
240 | 


--------------------------------------------------------------------------------
/src/easy-process/ep-designer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="ep-container" class="ep-container" @mousedown="startDragging">
  3 |     <!-- 流程 -->
  4 |     <div class="ep-process" :style="`transform: scale(${ zoom / 100});`">
  5 |       <!-- 递归节点 -->
  6 |       <node-wrap v-if="processData && processData.nodeConfig" :node="processData.nodeConfig"/>
  7 |       <!-- 结束节点 -->
  8 |       <end-node/>
  9 |     </div>
 10 |     <!-- 缩放 -->
 11 |     <div class="ep-zoom">
 12 |       <ep-svg-icon icon-class="ep-subtract" class="ep-zoom-icon" color="#ffffff" @click="setZoom(1)"/>
 13 |       <span>{{ zoom }}%</span>
 14 |       <ep-svg-icon icon-class="ep-plus" class="ep-zoom-icon" color="#ffffff" @click="setZoom(2)"/>
 15 |     </div>
 16 |   </div>
 17 | </template>
 18 | 
 19 | <script setup name="ep-designer">
 20 | import NodeWrap from "./node/node-wrap.vue";
 21 | import EndNode from "./node/end/end-node.vue";
 22 | 
 23 | import {ref, onMounted, getCurrentInstance, watch, provide, nextTick} from "vue";
 24 | import { copy } from "./tools/common-tools.js";
 25 | import { createNode } from "./tools/node-tools.js";
 26 | import { createProcessCtrl } from "./tools/process-ctrl.js";
 27 | import { createValidator } from "./tools/validator.js";
 28 | import { KEY_PROCESS_CTRL, KEY_VALIDATOR, KEY_PROCESS_DATA } from "./config/provide-keys.js"
 29 | import { ON_DESIGNER_MOUNTED } from "./config/event-keys.js"
 30 | 
 31 | const { proxy } = getCurrentInstance();
 32 | 
 33 | const props = defineProps({
 34 |   data: { // 传入的流程节点数据
 35 |     type: Object,
 36 |     default: {}
 37 |   }
 38 | });
 39 | 
 40 | // 缩放值
 41 | let zoom = ref(100);
 42 | // 创建流程控制器实例
 43 | let processCtrl = createProcessCtrl()
 44 | // 依赖注入: 流程控制器实例
 45 | provide(KEY_PROCESS_CTRL, processCtrl)
 46 | // 创建节点验证器实例
 47 | let validator = createValidator()
 48 | // 依赖注入: 节点验证器实例
 49 | provide(KEY_VALIDATOR, validator)
 50 | 
 51 | // 流程数据
 52 | let processData = ref({});
 53 | // 依赖注入: 流程数据
 54 | provide(KEY_PROCESS_DATA, processData)
 55 | 
 56 | watch(
 57 |     () => props.data,
 58 |     (val) => {
 59 |       init()
 60 |     }
 61 | );
 62 | 
 63 | 
 64 | onMounted(async () => {
 65 |   init()
 66 | });
 67 | 
 68 | /**
 69 |  * 设置缩放
 70 |  * @param type
 71 |  */
 72 | const setZoom = (type) => {
 73 |   if (type === 1) {
 74 |     if (zoom.value === 40) {
 75 |       return;
 76 |     }
 77 |     zoom.value -= 10;
 78 |   } else {
 79 |     if (zoom.value === 100) {
 80 |       return;
 81 |     }
 82 |     zoom.value += 10;
 83 |   }
 84 | };
 85 | 
 86 | /**
 87 |  * 初始化流程设计器
 88 |  */
 89 | const init = () => {
 90 |   if(props.data.nodeConfig) {
 91 |     processData.value = copy(props.data)
 92 |   } else {
 93 |     processData.value.nodeConfig = createNode()
 94 |   }
 95 |   nextTick(() => {
 96 |     validate()
 97 |     // 触发设计器加载完成事件
 98 |     processCtrl.triggerEvent(ON_DESIGNER_MOUNTED)
 99 |   })
100 | }
101 | 
102 | /**
103 |  * 验证流程数据
104 |  * @param callback
105 |  */
106 | const validate = (callback) => {
107 |   let result = validator.validate()
108 |   if (callback && typeof callback === 'function') {
109 |     callback(result.valid, result.messages)
110 |   }
111 | }
112 | 
113 | /**
114 |  * 获取流程配置结果
115 |  */
116 | const getResult = () => {
117 |   return copy(processData.value)
118 | }
119 | 
120 | const getProcessCtrl = () => {
121 |   return processCtrl
122 | }
123 | //=====================================画布拖动功能-开始==========================================
124 | // 是否正在拖动
125 | const isDragging = ref(false)
126 | // 鼠标按下时的坐标
127 | const startX = ref(0)
128 | const startY = ref(0)
129 | // 初始滚动位置
130 | const scrollX = ref(0)
131 | const scrollY = ref(0)
132 | 
133 | const startDragging = (event) => {
134 |   isDragging.value = true;
135 |   // 鼠标按下的位置
136 |   startX.value = event.clientX;
137 |   startY.value = event.clientY;
138 |   const element = document.getElementById("ep-container");
139 |   scrollX.value = element.scrollLeft; // 记录初始滚动位置
140 |   scrollY.value = element.scrollTop; // 记录初始滚动位置
141 |   document.addEventListener('mousemove', doDragging);
142 |   document.addEventListener('mouseup', stopDragging);
143 | }
144 | const doDragging = (event) => {
145 |   if (isDragging.value) {
146 |     let deltaX = event.clientX - startX.value; // 计算鼠标移动的距离
147 |     let deltaY = event.clientY - startY.value; // 计算鼠标移动的距离
148 |     const element = document.getElementById("ep-container");
149 |     element.scrollLeft = scrollX.value - deltaX; // 更新滚动位置
150 |     element.scrollTop = scrollY.value - deltaY; // 更新滚动位置
151 |   }
152 | }
153 | const stopDragging = () => {
154 |   isDragging.value = false;
155 |   document.removeEventListener('mousemove', doDragging);
156 |   document.removeEventListener('mouseup', stopDragging);
157 | }
158 | //=====================================画布拖动功能-结束==========================================
159 | 
160 | /**
161 |  * 绑定事件
162 |  * @param key
163 |  * @param callback
164 |  */
165 | const bindEvent = (key, callback) => {
166 |   processCtrl.bindEvent(key, callback)
167 | }
168 | 
169 | defineExpose({
170 |   validate,
171 |   getResult,
172 |   getProcessCtrl,
173 |   bindEvent,
174 | });
175 | </script>
176 | <style lang="less" scoped>
177 | 
178 | .ep-container {
179 |   box-sizing: border-box;
180 |   width: 100%;
181 |   height: 100%;
182 |   background-color: #f5f5f7;
183 |   overflow-x: auto;
184 |   overflow-y: auto;
185 |   padding: 16px;
186 |   &:active {
187 |     cursor: all-scroll;
188 |   }
189 | }
190 | 
191 | .ep-process {
192 |   position: relative;
193 |   width: max-content;
194 |   height: 100%;
195 |   margin: auto;
196 | }
197 | 
198 | .ep-zoom {
199 |   display: flex;
200 |   position: absolute;
201 |   align-items: center;
202 |   justify-content: space-between;
203 |   height: 40px;
204 |   width: 125px;
205 |   right: 40px;
206 |   top: 70px;
207 |   z-index: 10
208 | }
209 | 
210 | .ep-zoom-icon {
211 |   width: 20px;
212 |   height: 20px;
213 |   cursor: pointer;
214 |   background-color: #5a5e66;
215 |   border-radius: 5px;
216 |   padding: 3px;
217 | }
218 | </style>
219 | 


--------------------------------------------------------------------------------
/src/easy-process/assets/icons/ep-setting.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1689576394366" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2273" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M545.784454 962.539206l-65.943898 0c-29.341259 0-54.624085-25.281803-54.624085-54.615898L425.216471 868.462574c0-9.623171-7.826246-20.911262-16.690124-23.680329l-1.566682-0.611937-55.725162-23.104207-0.880043-0.494257c-8.153704-4.41045-22.017456-2.376117-28.55229 4.187369l-28.17469 28.123524c-9.930163 9.977235-23.239284 15.494902-37.432541 15.494902-14.195304 0-27.507494-5.517667-37.487799-15.541975l-46.682205-46.630017c-20.60427-20.603247-20.6319-54.233182-0.069585-74.974575l28.15013-28.106128c6.637164-6.574742 8.676613-20.599154 4.253884-28.909423l-0.831948-1.768273-23.164582-56.128345-0.26913-0.682545c-2.803859-9.03477-14.279215-17.394159-23.611767-17.394159l-39.631626 0c-29.391401 0-52.861952-24.065092-52.861952-53.193503l0-65.943898c0-28.770254 22.998807-51.754734 52.919257-51.754734l39.575344 0c9.081843 0 20.803815-8.830109 23.666002-18.057261l0.567935-1.476631 23.163559-57.088206 0.505513-0.913812c4.40431-8.220219 2.319835-22.224164-4.2897-28.830629l-28.04166-28.087709c-9.964956-9.921977-15.486716-23.216771-15.502066-37.396725-0.01535-14.201443 5.492084-27.53717 15.507182-37.552268l46.6556-46.614667c9.94142-9.985422 23.248494-15.503089 37.432541-15.503089 0.001023 0 0 0 0.001023 0 14.184047 0 27.490098 5.51869 37.46938 15.540951l28.039613 28.05087c6.557346 6.525624 20.500916 8.596795 28.655643 4.231371l0.893346-0.478907 57.375755-23.64963c8.836249-2.731204 16.634866-14.037714 16.634866-23.719214l0-39.632649c0-28.967752 24.777313-52.095495 54.624085-52.095495L545.784454 64.076364c29.161157 0 52.370765 22.636556 52.370765 52.095495l0 39.632649c0 9.127891 8.709359 20.85498 17.767666 23.674189l1.51654 0.577145 56.639998 23.113417 0.923022 0.509606c8.202822 4.424776 22.184255 2.353604 28.788673-4.254907l28.163433-27.912723c9.895371-9.94142 23.179932-15.33936 37.352723-15.33936 0.019443 0 0.040932 0 0.060375 0 14.18814 0 27.508517 5.375427 37.516452 15.384385l46.709835 46.554292c10.004865 9.960863 15.524578 23.254633 15.524578 37.47552 0 14.18814-5.498224 27.506471-15.479553 37.532825l-28.16855 28.152177c-6.580882 6.610558-8.640798 20.771069-4.204765 29.107945l0.478907 0.896416 23.654746 57.956993c2.902096 9.255805 14.635325 18.114566 23.686469 18.114566l39.132252 0 0-0.573051c27.629267 0 52.188616 22.984481 52.188616 52.327786l0 65.998133c0 29.590945-22.985504 53.138244-51.746548 53.138244l-39.630602 0c-9.337669 0-20.84884 8.372691-23.686469 17.423835l-0.580215 1.51654-23.086811 56.240909-0.468674 0.860601c-4.419659 8.30413-2.393513 22.320355 4.169973 28.855188l28.135804 28.02017c10.031471 10.029424 15.539928 23.350824 15.537881 37.541011-0.004093 14.186094-5.514597 27.505447-15.518438 37.505195l-46.747697 46.682205c-9.920954 9.964956-23.219841 15.506159-37.406958 15.506159-0.019443 0-0.040932 0-0.060375 0-14.192234 0-27.514657-5.514597-37.518498-15.517415l-28.039613-28.095895c-6.490831-6.490831-20.807908-8.575306-28.887934-4.206812l-0.951675 0.514723-57.93755 23.680329c-9.087982 2.859118-17.823947 14.594393-17.823947 23.691585l0 39.460734C598.155219 937.76394 574.45954 962.539206 545.784454 962.539206zM421.86719 806.892287c25.192775 8.370645 44.282552 34.650171 44.282552 61.570287l0 39.460734c0 7.114025 6.569626 13.68365 13.691837 13.68365L545.784454 921.606958c6.496971 0 12.461823-6.043646 12.461823-13.68365L558.246277 868.462574c0-26.273387 19.516496-53.131081 44.901653-61.58052l53.859675-22.062482c23.62814-12.116969 56.342216-7.098675 75.118861 11.6749l28.009937 28.1532c2.432399 2.430352 5.678326 3.837398 9.179057 3.837398 0.00614 0 0.011256 0 0.01535 0 3.482311 0 6.726192-1.39886 9.135054-3.820002l46.780443-46.738487c2.436492-2.436492 3.783163-5.724375 3.78521-9.224082 0-3.495614-1.344624-6.774287-3.787256-9.216919l-28.106128-27.998681c-18.693758-18.609847-23.762193-51.349505-11.773138-75.036997l22.083971-53.603849c8.374738-25.167193 35.224246-44.51382 61.578474-44.51382l39.630602 0c7.745405 0 10.8143-7.086395 10.8143-13.229303l0-65.998133c0-6.862291-5.116531-12.07399-11.256368-12.302187l0 1.479701-39.132252 0c-26.236548 0-53.099359-20.149922-61.585637-45.735647l-22.083971-54.261834c-11.960403-23.654746-6.913457-56.502875 11.728112-75.228355l28.16855-28.192086c2.430352-2.441609 3.78828-5.764284 3.78828-9.295714 0-3.498684-1.334391-6.762007-3.759627-9.17394l-46.741557-46.577828c-2.462075-2.462075-5.736655-3.734044-9.234315-3.734044-0.004093 0-0.010233 0-0.013303 0-3.465938 0-6.700609 1.255597-9.105379 3.671623l-28.198226 28.037567c-18.703991 18.710131-51.417043 23.734564-75.000158 11.69025l-53.865815-22.072715c-25.403576-8.388041-44.934398-35.255968-44.934398-61.60508l0-39.632649c0-7.253194-5.517667-12.186554-12.461823-12.186554l-65.943898 0c-7.517207 0-13.691837 5.51869-13.691837 12.186554l0 39.632649c0 27.027563-19.107173 53.336766-44.325531 61.643965l-53.501518 21.99699c-23.834848 12.168134-55.857169 7.234775-74.878384-11.69639l-28.130687-28.115338c-2.441609-2.451842-5.690606-3.787256-9.152451-3.787256-3.462868-0.001023-6.704702 1.334391-9.117658 3.758604l-46.690392 46.64639c-2.438539 2.438539-3.784186 5.710049-3.781116 9.207709 0.004093 3.474125 1.339508 6.716982 3.762697 9.128915l28.068266 28.121478c18.698874 18.690688 23.782659 51.389414 11.808954 74.973552l-22.124903 54.813397c-8.413624 25.616424-35.281551 45.783743-61.603033 45.783743l-39.575344 0c-6.630001 0-13.010315 3.411703-13.010315 10.822486l0 65.943898c0 6.942109 5.753027 13.284561 12.95301 13.284561l39.631626 0c26.380834 0 53.195549 19.35072 61.524239 44.537356l22.182208 53.629431c12.027941 23.731494 6.918573 56.449663-11.863189 75.05644l-28.022217 27.949562c-5.021364 5.066389-5.048993 13.348006 0.010233 18.409279l46.713928 46.653553c2.452865 2.464121 5.695722 3.794419 9.168824 3.794419 3.472078 0 6.711865-1.336438 9.124821-3.759627l28.181853-28.122501c18.641569-18.730597 51.440579-23.752983 75.011414-11.642155L421.86719 806.892287z" p-id="2274"></path><path d="M513.734504 731.880873c-120.639614 0-218.786958-98.147344-218.786958-218.786958s98.147344-218.786958 218.786958-218.786958 218.786958 98.147344 218.786958 218.786958S634.375142 731.880873 513.734504 731.880873zM513.734504 334.324368c-98.573039 0-178.769546 80.195483-178.769546 178.769546s80.195483 178.769546 178.769546 178.769546 178.769546-80.195483 178.769546-178.769546S612.308567 334.324368 513.734504 334.324368z" p-id="2275"></path></svg>


--------------------------------------------------------------------------------
/src/easy-process/node/gateway/gateway-node.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <!-- 路由节点 -->
  3 |   <div class="ep-node-gateway">
  4 |     <div class="ep-node-gateway-body">
  5 |       <ep-svg-icon :icon-class="gatewayTypeConfig.icon" class="icon" v-if="gatewayTypeConfig"/>
  6 |       <div class="select-type-box">
  7 |         <div class="type-item"  @click="addBranch">
  8 |           <ep-svg-icon icon-class="ep-gateway" class="type-item-icon"/>
  9 |           <div class="type-item-title">添加分支</div>
 10 |         </div>
 11 |         <div class="type-item" v-for="item in GATEWAY_TYPE_LIST" @click="selectGatewayType(item.type)">
 12 |           <ep-svg-icon :icon-class="item.icon" class="type-item-icon"/>
 13 |           <div class="type-item-title">
 14 |             {{item.name}}
 15 |           </div>
 16 |         </div>
 17 |       </div>
 18 |     </div>
 19 |     <div class="ep-node-gateway-box">
 20 |       <div class="ep-node-gateway-col" v-for="(condition, index) in props.node.branchList">
 21 |         <!-- 生成节点 -->
 22 |         <node-wrap :node="condition" :branchList="props.node.branchList" :conditionIndex="index" @removeNode="removeCondition(index)"/>
 23 |         <!-- 用来遮挡最左列的线 -->
 24 |         <template v-if="index === 0">
 25 |           <div class="cover-line top-left-cover-line"></div>
 26 |           <div class="cover-line bottom-left-cover-line"></div>
 27 |         </template>
 28 |         <!-- 用来遮挡最右列的线 -->
 29 |         <template v-if="index === props.node.branchList.length - 1">
 30 |           <div class="cover-line top-right-cover-line"></div>
 31 |           <div class="cover-line bottom-right-cover-line"></div>
 32 |         </template>
 33 |       </div>
 34 |     </div>
 35 |     <add-node :node="props.node"/>
 36 |   </div>
 37 | </template>
 38 | 
 39 | <script setup name="router-node">
 40 | import NodeWrap from "../node-wrap.vue";
 41 | import AddNode from "../base/add-node.vue";
 42 | import {ref, onMounted, getCurrentInstance, computed} from "vue";
 43 | import {CONDITION} from "../../config/default-node-type.js"
 44 | import {GATEWAY_TYPE_LIST, GATEWAY_TYPE_MAP, EXCLUSIVE, PARALLEL} from "../../config/gateway-type.js"
 45 | import {createNode} from "../../tools/node-tools.js";
 46 | 
 47 | const props = defineProps({
 48 |   node: { // 传入的流程配置数据
 49 |     type: Object,
 50 |     default: {}
 51 |   }
 52 | });
 53 | 
 54 | const { proxy } = getCurrentInstance();
 55 | 
 56 | const gatewayTypeConfig = computed(() => {
 57 |   return GATEWAY_TYPE_MAP.get(props.node.gatewayType)
 58 | })
 59 | 
 60 | onMounted(async () => {
 61 |   if (!props.node.gatewayType || !gatewayTypeConfig) {
 62 |     props.node.gatewayType = EXCLUSIVE
 63 |   }
 64 | });
 65 | 
 66 | const selectGatewayType = (gatewayType) => {
 67 |   props.node.gatewayType = gatewayType
 68 | }
 69 | 
 70 | // 移除条件
 71 | const emit = defineEmits(["removeNode"]);
 72 | const removeCondition = (index) => {
 73 |   let conditionNum = props.node.branchList.length
 74 |   if(conditionNum > 2) {
 75 |     props.node.branchList.splice(index, 1)
 76 |   } else {
 77 |     props.node.branchList.splice(index, 1)
 78 |     emit("removeNode")
 79 |   }
 80 | }
 81 | 
 82 | // 添加分支
 83 | const addBranch = () => {
 84 |   let defaultNode = createNode(CONDITION)
 85 |   props.node.branchList.push(defaultNode)
 86 | }
 87 | </script>
 88 | 
 89 | <style lang="less" scoped>
 90 | .ep-node-gateway {
 91 |   display: flex;
 92 |   flex-direction: column;
 93 |   justify-content: center;
 94 |   width: 100%;
 95 |   position: relative;
 96 | 
 97 | }
 98 | .ep-node-gateway-box {
 99 |   display: flex;
100 |   flex-direction: row;
101 |   justify-content: center;
102 |   width: 100%;
103 | 
104 |   .ep-node-gateway-col {
105 |     display: flex;
106 |     flex-direction: column;
107 |     align-items: center;
108 |     position: relative;
109 |     border-top: 2px solid #cacaca;
110 |     border-bottom: 2px solid #cacaca;
111 |     background-color: #f5f5f7;
112 | 
113 |     padding-top: 50px;
114 | 
115 |     &:before {
116 |       content: "";
117 |       position: absolute;
118 |       top: 0;
119 |       left: 0;
120 |       right: 0;
121 |       bottom: 0;
122 |       z-index: 0;
123 |       margin: auto;
124 |       width: 2px;
125 |       height: 100%;
126 |       background-color: #cacaca
127 |     }
128 |   }
129 | 
130 |   .cover-line {
131 |     position: absolute;
132 |     height: 8px;
133 |     width: 50%;
134 |     background-color: #f5f5f7;
135 |   }
136 |   .top-left-cover-line {
137 |     top: -4px;
138 |     left: -1px
139 |   }
140 |   .top-right-cover-line {
141 |     top: -4px;
142 |     right: -1px
143 |   }
144 | 
145 |   .bottom-left-cover-line {
146 |     bottom: -4px;
147 |     left: -1px
148 |   }
149 |   .bottom-right-cover-line{
150 |     bottom: -4px;
151 |     right: -1px
152 |   }
153 | }
154 | .ep-node-gateway-body {
155 |   position: absolute;
156 |   left: 50%;
157 |   transform: translateX(-50%);
158 |   top: -17px;
159 |   display: flex;
160 |   justify-content: center;
161 |   align-items: center;
162 |   z-index: 2;
163 |   width: 35px;
164 |   height: 35px;
165 |   cursor: pointer;
166 | 
167 |   &::before {
168 |     content: '';
169 |     position: absolute;
170 |     width: 100%;
171 |     height: 100%;
172 |     top: 0;
173 |     left: 50%;
174 |     right: -20px;
175 |     transform: translateX(-50%) rotate(45deg);
176 |     background-color: #FFFFFF;
177 |     border-radius: 5px;
178 |     box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
179 |   }
180 | 
181 |   &:hover {
182 |     .select-type-box {
183 |       display: flex;
184 |     }
185 |   }
186 | 
187 |   .icon {
188 |     font-size: 20px;
189 |   }
190 | 
191 |   .add {
192 |     font-size: 12px;
193 |     color: #1e83e9;
194 |   }
195 | 
196 |   .select-type-box {
197 |     position: absolute;
198 |     z-index: 10;
199 |     right: -260px;
200 |     top: revert-layer;
201 |     background-color: #FFFFFF;
202 |     border-radius: 5px;
203 |     box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.2);
204 |     display: none;
205 | 
206 |     &:hover {
207 |       display: flex;
208 |     }
209 | 
210 |     &:before{
211 |       content: '';
212 |       width: 0;
213 |       height: 0;
214 |       border: 10px solid;
215 |       position: absolute;
216 |       top: 50%;
217 |       transform: translateY(-50%);
218 |       left: -20px;
219 |       border-color: transparent #FFFFFF transparent transparent;
220 |     }
221 | 
222 |     .type-item {
223 |       width: 60px;
224 |       display: flex;
225 |       flex-direction: column;
226 |       justify-content: center;
227 |       align-items: center;
228 |       padding: 10px;
229 |       border-radius: 5px;
230 |       cursor: pointer;
231 |       color: #5a5e66;
232 | 
233 |       &:hover {
234 |         background-color: #499aec;
235 |         color: #FFFFFF;
236 |       }
237 | 
238 |       .type-item-icon {
239 |         width: 20px;
240 |         height: 20px;
241 |       }
242 |       .type-item-title {
243 |         margin-top: 5px;
244 |         font-size: 14px;
245 |       }
246 |     }
247 |   }
248 | }
249 | 
250 | </style>
251 | 


--------------------------------------------------------------------------------
/src/easy-process/node/base/add-node.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="ep-node-add">
  3 |     <div ref="nodeAddBtn" class="ep-node-add-btn" v-if="isShowAdd" v-on:mouseenter="showAddSelect(true)" v-on:mouseleave="showAddSelect(false)">
  4 |       <ep-svg-icon icon-class="ep-plus" class="ep-node-add-btn-icon" color="#FFFFFF"/>
  5 |       <div ref="nodeAddSelect" :class="['ep-node-add-select-box', nodeAddSelectPosition == 1 ? 'ep-node-add-left' : 'ep-node-add-right']" v-if="isShowAddSelect">
  6 |         <div class="ep-node-add-select-item" v-for="item in nodeSelect" v-on:click="addNode(item.type)">
  7 |           <ep-svg-icon :icon-class="item.icon.name" class="ep-node-add-select-item-icon" :color="item.selected ? '#FFFFFF' : item.icon.color"/>
  8 |           <div class="ep-node-add-select-item-title">
  9 |             {{item.nodeName}}
 10 |           </div>
 11 |         </div>
 12 |       </div>
 13 |     </div>
 14 | 
 15 |   </div>
 16 | </template>
 17 | 
 18 | <script setup name="add-node">
 19 | import {computed, getCurrentInstance, nextTick, onMounted, ref} from "vue";
 20 | import {nodeConfig} from "../../config/node-config.js";
 21 | import {TERMINATE} from "../../config/default-node-type.js";
 22 | import {KEY_PROCESS_CTRL} from "../../config/provide-keys.js"
 23 | import {ON_PRE_ADD_NODE, ON_AFTER_ADD_NODE} from "../../config/event-keys.js"
 24 | import {copy, getUUID} from "../../tools/common-tools.js";
 25 | import {createNode} from "../../tools/node-tools.js";
 26 | 
 27 | const props = defineProps({
 28 |   node: { // 传入的流程节点数据
 29 |     type: Object,
 30 |     default: {}
 31 |   },
 32 | });
 33 | 
 34 | const { proxy } = getCurrentInstance();
 35 | 
 36 | // 节点配置数据
 37 | const config = ref(nodeConfig[props.node.nodeType])
 38 | 
 39 | // 是否显示添加节点选择框
 40 | const isShowAddSelect = ref(false)
 41 | const nodeAddSelectPosition = ref(null)
 42 | const nodeSelect = ref([])
 43 | // 流程控制器实例
 44 | const processCtrl = inject(KEY_PROCESS_CTRL)
 45 | 
 46 | Object.keys(nodeConfig).forEach(key => {
 47 |   let item = nodeConfig[key]
 48 |   // 生成可增加节点数据
 49 |   if(item.enable && item.canAdd) {
 50 |     nodeSelect.value.push({
 51 |       nodeName: item.nodeName,
 52 |       type: key,
 53 |       icon: item.icon,
 54 |       isSelected: false
 55 |     })
 56 |   }
 57 | })
 58 | 
 59 | onMounted(async () => {
 60 | 
 61 | });
 62 | 
 63 | // 显示添加按钮
 64 | const isShowAdd = computed(() => {
 65 |   return props.node.nodeType !== TERMINATE
 66 | })
 67 | 
 68 | // 显示添加节点选择框
 69 | const showAddSelect = (flag) => {
 70 |   isShowAddSelect.value = flag
 71 |   if(flag) {
 72 |     proxy.$nextTick(()=> {
 73 |       let box = proxy.$refs.nodeAddSelect.getBoundingClientRect()
 74 |       let boxWidth = box.width
 75 |       let btn = proxy.$refs.nodeAddBtn.getBoundingClientRect()
 76 |       let btnRight = btn.right
 77 | 
 78 |       const windowWidth = window.innerWidth;
 79 |       if((btnRight + boxWidth) > windowWidth) {
 80 |         nodeAddSelectPosition.value = 1
 81 |       } else {
 82 |         nodeAddSelectPosition.value = 2
 83 |       }
 84 |     })
 85 |   }
 86 | }
 87 | 
 88 | // 添加节点
 89 | const addNode = (nodeType) => {
 90 |   // 触发添加节点之前事件
 91 |   let isAllowAdd = processCtrl.triggerEvent(ON_PRE_ADD_NODE, {
 92 |     currentTmpNodeId: props.node.tmpNodeId,
 93 |     addNodeType: nodeType
 94 |   })
 95 |   if(!processCtrl.eventReturnIsTrue(isAllowAdd)) {
 96 |     return
 97 |   }
 98 |   let addNode = createNode(nodeType)
 99 |   if(addNode) {
100 |     if (nodeType !== TERMINATE) {
101 |       addNode.childNode = copy(props.node.childNode)
102 |     }
103 |     props.node.childNode = addNode
104 |   }
105 |   showAddSelect(false)
106 |   nextTick(() => {
107 |     // 触发添加节点之后事件
108 |     processCtrl.triggerEvent(ON_AFTER_ADD_NODE, {
109 |       currentTmpNodeId: props.node.tmpNodeId,
110 |       addTmpNodeId: addNode.tmpNodeId
111 |     })
112 |   })
113 | 
114 | }
115 | </script>
116 | 
117 | <style lang="less" scoped>
118 | .ep-node-add {
119 |   position: relative;
120 |   display: flex;
121 |   justify-content: center;
122 |   align-items: center;
123 |   padding: 45px 0;
124 | 
125 |   .ep-node-add-btn {
126 |     position: absolute;
127 |     z-index: 10;
128 |     left: 50%;
129 |     top: 50%;
130 |     transform: translateX(-50%) translateY(-60%);
131 |     display: flex;
132 |     justify-content: center;
133 |     align-items: center;
134 |     width: 30px;
135 |     height: 30px;
136 |     border-radius: 40px;
137 |     background-color: #1c84c6;
138 |     box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.2);
139 |     transition-property: width, height;
140 |     transition-duration: 0.1s;
141 | 
142 |     &:hover {
143 |       width: 35px;
144 |       height: 35px;
145 |     }
146 | 
147 |     .ep-node-add-btn-icon {
148 |       font-size: 20px;
149 |       font-weight: bold;
150 |       color: #FFFFFF;
151 |       cursor: pointer;
152 |     }
153 | 
154 |     .ep-node-add-select-box {
155 |       position: absolute;
156 |       z-index: 10;
157 |       top: 50%;
158 |       transform: translateY(-50%);
159 |       width: 330px;
160 |       background-color: #FFFFFF;
161 |       border-radius: 5px;
162 |       box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.2);
163 |       display: flex;
164 |       flex-wrap: wrap;
165 | 
166 |       &:before{
167 |         content: '';
168 |         width: 0;
169 |         height: 0;
170 |         border: 10px solid;
171 |         position: absolute;
172 |         top: 50%;
173 |         transform: translateY(-50%);
174 |       }
175 | 
176 |       .ep-node-add-select-item {
177 |         width: 80px;
178 |         height: 100%;
179 |         display: flex;
180 |         flex-direction: column;
181 |         justify-content: center;
182 |         align-items: center;
183 |         cursor: pointer;
184 |         color: #5a5e66;
185 |         margin: 10px;
186 |         padding: 5px;
187 | 
188 |         &:hover {
189 |           background-color: #1e83e9;
190 |           color: #FFFFFF;
191 |           border-radius: 5px;
192 |         }
193 | 
194 |         .ep-node-add-select-item-icon {
195 |           width: 35px;
196 |           height: 35px;
197 |           margin-bottom: 5px;
198 |         }
199 |         .ep-node-add-select-item-title {
200 |           font-size: 14px;
201 |         }
202 |       }
203 |     }
204 | 
205 |     .ep-node-add-left {
206 |       right: 50px;
207 | 
208 |       &:before {
209 |         right: -20px;
210 |         border-color: transparent transparent transparent #FFFFFF;
211 |       }
212 |     }
213 | 
214 |     .ep-node-add-right {
215 |       left: 50px;
216 | 
217 |       &:before {
218 |         left: -20px;
219 |         border-color: transparent #FFFFFF transparent transparent;
220 |       }
221 |     }
222 | 
223 |   }
224 | 
225 |   &:before {
226 |     content: "";
227 |     position: absolute;
228 |     top: 0;
229 |     left: 0;
230 |     right: 0;
231 |     bottom: 0;
232 |     z-index: -1;
233 |     margin: auto;
234 |     width: 2px;
235 |     height: 100%;
236 |     background-color: #cacaca
237 |   }
238 | }
239 | 
240 | </style>
241 | 


--------------------------------------------------------------------------------
/src/easy-process/node/base/base-node.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div :class="{'ep-node': true, 'ep-node-arrows': !isStart}">
  3 |     <div :class="{'ep-node-content': true, 'ep-node-error': isError}">
  4 |       <!-- header -->
  5 |       <div class="ep-node-header" :style="{color: config.color, 'background-color': config.bgColor}">
  6 |         <ep-svg-icon :icon-class="config.icon.name" class="ep-node-icon" color="#FFFFFF"/>
  7 |         <div class="ep-node-header-title">
  8 |           <div class="ep-node-header-title-text" v-if="!isShowEditNodeName">{{props.node.nodeName}}</div>
  9 |           <div class="ep-node-header-title-input" v-if="isShowEditNodeName">
 10 |             <input ref="nodeNameRef" v-model="props.node.nodeName" @blur="saveNodeName">
 11 |           </div>
 12 |           <ep-svg-icon class="ep-node-header-title-edit" icon-class="ep-edit" color="#FFFFFF" @click="showEditNodeName" v-if="!isShowEditNodeName"/>
 13 |         </div>
 14 |         <ep-svg-icon icon-class="ep-close" class="ep-node-close" color="#FFFFFF" v-if="canRemoved" @click="removeNode"/>
 15 |       </div>
 16 |       <!-- body -->
 17 |       <div class="ep-node-body" @click="showNodeDrawer">
 18 |         <component ref="node" :is="nodeComponents[props.node.nodeType]" :node="props.node" :isLastCondition="isLastCondition()"/>
 19 |       </div>
 20 |       <!-- 同级节点左移动 -->
 21 |       <div class="ep-node-move ep-node-move-left" v-if="isCondition()">
 22 |         <ep-svg-icon icon-class="ep-left" class="ep-node-move-icon" @click="moveNode(1)"/>
 23 |       </div>
 24 |       <!-- 同级节点右移动 -->
 25 |       <div class="ep-node-move ep-node-move-right" v-if="isCondition()">
 26 |         <ep-svg-icon icon-class="ep-right" class="ep-node-move-icon" @click="moveNode(2)"/>
 27 |       </div>
 28 |       <!-- 校验错误提示 -->
 29 |       <div class="ep-node-error-msg" v-if="isError">
 30 |         <div class="ep-node-error-msg-box">
 31 |           <ep-svg-icon icon-class="ep-tips" class="ep-node-error-icon" color="red"/>
 32 |           <div class="ep-node-error-tips" v-if="errorMsg">{{errorMsg}}</div>
 33 |         </div>
 34 |       </div>
 35 |     </div>
 36 |     <add-node :node="props.node"/>
 37 | 
 38 |     <!-- 节点配置Drawer -->
 39 |     <base-drawer ref="nodeDrawer" @updateConfig="updateConfig" @cancelUpdateConfig="cancelUpdateConfig"/>
 40 |   </div>
 41 | </template>
 42 | 
 43 | <script setup name="base-node">
 44 | import BaseDrawer from "./base-drawer.vue";
 45 | import AddNode from "./add-node.vue";
 46 | import {
 47 |   computed,
 48 |   defineAsyncComponent,
 49 |   getCurrentInstance,
 50 |   inject,
 51 |   nextTick,
 52 |   onMounted,
 53 |   onUnmounted,
 54 |   ref,
 55 |   shallowRef,
 56 |   watch
 57 | } from "vue";
 58 | import {nodeConfig} from "../../config/node-config.js";
 59 | import {CONDITION, START} from "../../config/default-node-type.js"
 60 | import {KEY_PROCESS_CTRL, KEY_VALIDATOR} from "../../config/provide-keys.js"
 61 | import {ON_PRE_REMOVE_NODE, ON_AFTER_REMOVE_NODE} from "../../config/event-keys.js"
 62 | import { nodeComponents } from "../../config/node-component.js";
 63 | 
 64 | const { proxy } = getCurrentInstance();
 65 | 
 66 | const props = defineProps({
 67 |   node: { // 传入的流程节点数据
 68 |     type: Object,
 69 |     default: {}
 70 |   },
 71 |   branchList: { // 条件集合，当节点类型为condition时有效
 72 |     type: Array,
 73 |     default: []
 74 |   },
 75 |   conditionIndex: { // 当前条件节点的顺序，当节点类型为condition时有效
 76 |     type: Number,
 77 |     default: 0
 78 |   },
 79 | });
 80 | 
 81 | 
 82 | // 节点配置数据
 83 | const config = ref(nodeConfig[props.node.nodeType])
 84 | if (!config.value) {
 85 |   throw `未定义的节点类型: ${props.node.nodeType}`
 86 | }
 87 | 
 88 | const isShowEditNodeName = ref(false)
 89 | const nodeNameRef = ref(null)
 90 | 
 91 | // 流程控制器实例
 92 | const processCtrl = inject(KEY_PROCESS_CTRL)
 93 | // 获取流程验证器实例
 94 | const validator = inject(KEY_VALIDATOR)
 95 | const errorMsg = ref(null)
 96 | 
 97 | watch(() => props.node, (val) => {
 98 |   config.value = nodeConfig[props.node.nodeType]
 99 |   validator.validate()
100 | });
101 | 
102 | onMounted(async () => {
103 |   processCtrl.addNode(props.node.tmpNodeId, props.node)
104 | });
105 | 
106 | onUnmounted(async () => {
107 |   processCtrl.removeNode(props.node.tmpNodeId)
108 |   validator.remove(props.node.tmpNodeId)
109 |   validator.validate()
110 | });
111 | 
112 | const isStart = computed(() => {
113 |   return props.node.nodeType === START
114 | })
115 | 
116 | // 节点验证结果是否异常
117 | const isError = computed(() => {
118 |   let result = validator.getResult(props.node.tmpNodeId)
119 |   if(result) {
120 |     errorMsg.value = result.message
121 |     return !result.valid
122 |   }
123 |   errorMsg.value = null
124 |   return false
125 | })
126 | 
127 | // 节点是否可以被移除
128 | const canRemoved = computed(() => {
129 |   return config.value.canRemoved
130 | })
131 | 
132 | // 显示节点配置组件
133 | const showNodeDrawer = () => {
134 |   if(config.value.hasDrawer) {
135 |     proxy.$refs.nodeDrawer.show(props.node)
136 |   }
137 | }
138 | 
139 | // 判断当前节点是否为条件节点
140 | const isCondition = () => {
141 |   return props.node.nodeType === CONDITION;
142 | }
143 | 
144 | // 判断当前节点是否为条件节点，且为最后一个条件
145 | const isLastCondition = () => {
146 |   if (isCondition() && props.conditionIndex === props.branchList.length - 1) {
147 |     return true
148 |   }
149 |   return false
150 | }
151 | 
152 | // 移除当前节点
153 | const emit = defineEmits(["removeNode"]);
154 | const removeNode = () => {
155 |   // 触发移除节点之前事件
156 |   let isAllowRemove = processCtrl.triggerEvent(ON_PRE_REMOVE_NODE, {
157 |     tmpNodeId: props.node.tmpNodeId,
158 |   })
159 |   if(!processCtrl.eventReturnIsTrue(isAllowRemove)) {
160 |     return
161 |   }
162 | 
163 |   emit("removeNode");
164 | 
165 |   nextTick(() => {
166 |     // 触发移除节点之后事件
167 |     processCtrl.triggerEvent(ON_AFTER_REMOVE_NODE, {
168 |       tmpNodeId: props.node.tmpNodeId,
169 |     })
170 |   })
171 | }
172 | 
173 | /**
174 |  * 移动节点
175 |  * @param direction 方向：1-左移 2-右移
176 |  */
177 | const moveNode = (direction) => {
178 |   let index = props.conditionIndex
179 |   let c = props.branchList[index]
180 |   let exchangeIndex
181 | 
182 |   if (direction === 1) {
183 |     if (index > 0) {
184 |       exchangeIndex = index - 1
185 |       props.branchList[index] = props.branchList[exchangeIndex]
186 |       props.branchList[exchangeIndex] = c
187 |     } else {
188 |       props.branchList.splice(0, 1)
189 |       props.branchList.push(c)
190 |     }
191 |   } else {
192 |     if (index < props.branchList.length - 1) {
193 |       exchangeIndex = index + 1
194 |       props.branchList[index] = props.branchList[exchangeIndex]
195 |       props.branchList[exchangeIndex] = c
196 |     } else {
197 |       props.branchList.splice(props.branchList.length - 1, 1)
198 |       props.branchList.splice(0, 0, c)
199 |     }
200 |   }
201 | }
202 | 
203 | // 更新节点配置属性
204 | const updateConfig = (data) => {
205 |   props.node.config = data
206 |   validator.validate()
207 | }
208 | 
209 | // 取消更新节点配置属性
210 | const cancelUpdateConfig = () => {
211 |   validator.validate()
212 | }
213 | 
214 | // 显示编辑节点名称
215 | const showEditNodeName = () => {
216 |   isShowEditNodeName.value = true
217 |   nextTick(()=>{
218 |     nodeNameRef.value.focus()
219 |   })
220 | }
221 | 
222 | // 保存节点名称
223 | const saveNodeName = () => {
224 |   isShowEditNodeName.value = false
225 |   if (props.node.nodeName == null || props.node.nodeName.trim() === '') {
226 |     props.node.nodeName = config.value.nodeName
227 |   }
228 | }
229 | 
230 | </script>
231 | 
232 | <style lang="less" scoped>
233 | .ep-node {
234 |   display: flex;
235 |   flex-direction: column;
236 |   align-items: center;
237 |   position: relative;
238 |   margin: 0 100px;
239 | }
240 | 
241 | .ep-node-arrows {
242 |   &:before {
243 |     content: "";
244 |     position: absolute;
245 |     top: -12px;
246 |     left: 50%;
247 |     -webkit-transform: translateX(-50%);
248 |     transform: translateX(-50%);
249 |     width: 0;
250 |     height: 4px;
251 |     border-style: solid;
252 |     border-width: 8px 6px 4px;
253 |     border-color: #cacaca transparent transparent;
254 |     background: #f5f5f7
255 |   }
256 | }
257 | 
258 | .ep-node-content {
259 |   display: flex;
260 |   flex-direction: column;
261 |   align-items: center;
262 |   width: 200px;
263 |   min-height: 80px;
264 |   font-size: 14px;
265 |   box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.2);
266 |   white-space: normal;
267 |   word-break: break-word;
268 |   position: relative;
269 |   box-sizing: border-box;
270 |   border-radius: 5px;
271 |   transition-property: box-shadow;
272 |   transition-duration: 0.1s;
273 | 
274 |   &:hover {
275 |     box-shadow: 5px 5px 12px 5px rgba(0, 0, 0, 0.2);
276 |     .ep-node-move {
277 |       display: block;
278 |     }
279 |   }
280 | 
281 |   .ep-node-header {
282 |     width: 100%;
283 |     display: flex;
284 |     align-items: center;
285 |     background-color: #1e83e9;
286 |     border-top-left-radius: 5px;
287 |     border-top-right-radius: 5px;
288 |     padding: 5px 10px;
289 |     color: #FFFFFF;
290 |     box-sizing: border-box;
291 | 
292 |     .ep-node-icon {
293 |       font-size: 16px;
294 |     }
295 | 
296 |     .ep-node-header-title {
297 |       flex: 1;
298 |       margin-left: 4px;
299 |       display: flex;
300 |       flex-direction: row;
301 |       align-items: center;
302 | 
303 |       .ep-node-header-title-text {
304 |         max-width: 110px;
305 |         min-width: 20px;
306 |         white-space: nowrap; /* 确保文本在一行内显示 */
307 |         overflow: hidden; /* 隐藏溢出的内容 */
308 |         text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
309 |       }
310 |       .ep-node-header-title-input {
311 |         input {
312 |           width: 120px;
313 |         }
314 |       }
315 |       .ep-node-header-title-edit {
316 |         width: 30px;
317 |         cursor: pointer;
318 |         display: none;
319 |       }
320 |     }
321 | 
322 |     .ep-node-header-title:hover {
323 |       .ep-node-header-title-edit {
324 |         display: initial;
325 |       }
326 |     }
327 | 
328 |     .ep-node-close {
329 |       font-size: 16px;
330 |       text-align: center;
331 |       cursor: pointer;
332 |     }
333 |   }
334 |   .ep-node-body {
335 |     width: 100%;
336 |     flex: 1;
337 |     display: flex;
338 |     flex-direction: column;
339 |     justify-content: center;
340 |     background-color: #FFFFFF;
341 |     border-bottom-left-radius: 5px;
342 |     border-bottom-right-radius: 5px;
343 |     padding: 10px;
344 |     color: #5a5e66;
345 |     cursor: pointer;
346 |     box-sizing: border-box;
347 |   }
348 | }
349 | 
350 | .ep-node-error {
351 |   box-shadow: 0px 0px 10px 2px rgba(243, 5, 5, 0.5);
352 |   &:hover {
353 |     box-shadow: 0px 0px 12px 4px rgba(243, 5, 5, 0.5);
354 |   }
355 | }
356 | .ep-node-error-msg {
357 |   position: absolute;
358 |   top: 50%;
359 |   transform: translateY(-50%);
360 |   right: -55px;
361 |   z-index: 1;
362 | 
363 |   .ep-node-error-msg-box {
364 |     position: relative;
365 |     .ep-node-error-icon {
366 |       width: 25px;
367 |       height: 25px;
368 |       cursor: pointer;
369 |     }
370 |     .ep-node-error-tips {
371 |       position: absolute;
372 |       z-index: 3;
373 |       top: 50%;
374 |       transform: translateY(-50%);
375 |       left: 45px;
376 |       min-width: 150px;
377 |       background-color: #FFFFFF;
378 |       border-radius: 5px;
379 |       box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.2);
380 |       display: none;
381 |       padding: 16px;
382 | 
383 |       &:before{
384 |         content: '';
385 |         width: 0;
386 |         height: 0;
387 |         border: 10px solid;
388 |         position: absolute;
389 |         top: 50%;
390 |         left: -20px;
391 |         transform: translateY(-50%);
392 |         border-color: transparent #FFFFFF transparent transparent;
393 |       }
394 |     }
395 |     &:hover {
396 |       .ep-node-error-tips {
397 |         display: flex;
398 |       }
399 |     }
400 |   }
401 | 
402 | }
403 | 
404 | .ep-node-move {
405 |   display: none;
406 |   position: absolute;
407 |   top: 50%;
408 |   transform: translateY(-50%);
409 | }
410 | .ep-node-move-left {
411 |   left: -30px;
412 | }
413 | .ep-node-move-right {
414 |   right: -30px;
415 | }
416 | .ep-node-move-icon {
417 |   width: 35px;
418 |   height: 35px;
419 |   cursor: pointer;
420 |   &:hover {
421 |     fill: #1e83e9;
422 |   }
423 | }
424 | </style>
425 | 


--------------------------------------------------------------------------------