Skip to content

Commit b7329b0

Browse files
cooling-jasoncooling-jason
committed
【功能新增】Simple 设计器新增触发器节点
1 parent 7043dea commit b7329b0

File tree

9 files changed

+508
-209
lines changed

9 files changed

+508
-209
lines changed

‎src/components/SimpleProcessDesignerV2/src/NodeHandler.vue

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -51,15 +51,13 @@
5151
</div>
5252
<div class="handler-item-text">路由分支</div>
5353
</div>
54-
<!-- TODO 触发器
55-
<div class="handler-item" @click="addNode(NodeType.TRIGGER_NODE)">
56-
<div class="handler-item-icon trigger">
57-
<span class="iconfont icon-size icon-trigger"></span>
58-
</div>
59-
<div class="handler-item-text">触发器</div>
54+
<div class="handler-item" @click="addNode(NodeType.TRIGGER_NODE)">
55+
<div class="handler-item-icon trigger">
56+
<span class="iconfont icon-size icon-trigger"></span>
6057
</div>
61-
-->
62-
</div>
58+
<div class="handler-item-text">触发器</div>
59+
</div>
60+
</div>
6361
<template #reference>
6462
<div class="add-icon"><Icon icon="ep:plus" /></div>
6563
</template>
@@ -272,7 +270,7 @@ const addNode = (type: number) => {
272270
if (type === NodeType.TRIGGER_NODE) {
273271
const data: SimpleFlowNode = {
274272
id: 'Activity_' + generateUUID(),
275-
name: NODE_DEFAULT_NAME.get(NodeType.ROUTER_BRANCH_NODE) as string,
273+
name: NODE_DEFAULT_NAME.get(NodeType.TRIGGER_NODE) as string,
276274
showText: '',
277275
type: NodeType.TRIGGER_NODE,
278276
childNode: props.childNode

‎src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,12 @@
4949
v-if="currentNode && currentNode.type === NodeType.ROUTER_BRANCH_NODE"
5050
:flow-node="currentNode"
5151
@update:flow-node="handleModelValueUpdate"
52+
/>
53+
<!-- 触发器节点 -->
54+
<TriggerNode
55+
v-if="currentNode && currentNode.type === NodeType.TRIGGER_NODE"
56+
:flow-node="currentNode"
57+
@update:flow-node="handleModelValueUpdate"
5258
/>
5359
<!-- 递归显示孩子节点 -->
5460
<ProcessNodeTree
@@ -74,6 +80,7 @@ import ParallelNode from './nodes/ParallelNode.vue'
7480
import InclusiveNode from './nodes/InclusiveNode.vue'
7581
import DelayTimerNode from './nodes/DelayTimerNode.vue'
7682
import RouterNode from './nodes/RouterNode.vue'
83+
import TriggerNode from './nodes/TriggerNode.vue'
7784
import { SimpleFlowNode, NodeType } from './consts'
7885
import { useWatchNode } from './node'
7986
defineOptions({

‎src/components/SimpleProcessDesignerV2/src/consts.ts

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,8 @@ export interface SimpleFlowNode {
121121
signEnable?: boolean
122122
// 审批意见
123123
reasonRequire?: boolean
124+
// 触发器设置
125+
triggerSetting?: TriggerSetting
124126
}
125127
// 候选人策略枚举 （ 用于审批节点。抄送节点 )
126128
export enum CandidateStrategy {
@@ -707,3 +709,38 @@ export type RouterSetting = {
707709
conditionExpression: string
708710
conditionGroups: ConditionGroup
709711
}
712+
713+
// ==================== 触发器相关定义 ====================
714+
/**
715+
* 触发器节点结构定义
716+
*/
717+
export type TriggerSetting = {
718+
type: TriggerTypeEnum
719+
httpRequestSetting: HttpRequestTriggerSetting
720+
}
721+
722+
/**
723+
* 触发器类型枚举
724+
*/
725+
export enum TriggerTypeEnum {
726+
/**
727+
* 发送 HTTP 请求触发器
728+
*/
729+
HTTP_REQUEST = 1,
730+
}
731+
732+
/**
733+
* HTTP 请求触发器结构定义
734+
*/
735+
export type HttpRequestTriggerSetting = {
736+
// 请求 URL
737+
url: string
738+
// 请求头参数设置
739+
header?: ListenerParam[] // TODO 需要重命名一下
740+
// 请求体参数设置
741+
body?: ListenerParam[]
742+
}
743+
744+
export const TRIGGER_TYPES: DictDataVO[] = [
745+
{ label: 'HTTP 请求', value: TriggerTypeEnum.HTTP_REQUEST }
746+
]

‎src/components/SimpleProcessDesignerV2/src/node.ts

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -137,16 +137,22 @@ export type UserTaskFormType = {
137137
buttonsSetting: any[]
138138
taskCreateListenerEnable?: boolean
139139
taskCreateListenerPath?: string
140-
taskCreateListenerHeader?: ListenerParam[]
141-
taskCreateListenerBody?: ListenerParam[]
140+
taskCreateListener?: {
141+
header: ListenerParam[],
142+
body: ListenerParam[]
143+
}
142144
taskAssignListenerEnable?: boolean
143145
taskAssignListenerPath?: string
144-
taskAssignListenerHeader?: ListenerParam[]
145-
taskAssignListenerBody?: ListenerParam[]
146+
taskAssignListener?: {
147+
header: ListenerParam[],
148+
body: ListenerParam[]
149+
}
146150
taskCompleteListenerEnable?: boolean
147151
taskCompleteListenerPath?: string
148-
taskCompleteListenerHeader?: ListenerParam[]
149-
taskCompleteListenerBody?: ListenerParam[]
152+
taskCompleteListener?:{
153+
header: ListenerParam[],
154+
body: ListenerParam[]
155+
}
150156
signEnable: boolean
151157
reasonRequire: boolean
152158
}

‎src/components/SimpleProcessDesignerV2/src/nodes-config/TriggerNodeConfig.vue

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<template>
2+
<el-drawer
3+
:append-to-body="true"
4+
v-model="settingVisible"
5+
:show-close="false"
6+
:size="550"
7+
:before-close="saveConfig"
8+
>
9+
<template #header>
10+
<div class="config-header">
11+
<input
12+
v-if="showInput"
13+
type="text"
14+
class="config-editable-input"
15+
@blur="blurEvent()"
16+
v-mountedFocus
17+
v-model="nodeName"
18+
:placeholder="nodeName"
19+
/>
20+
<div v-else class="node-name">
21+
{{ nodeName }} <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()" />
22+
</div>
23+
<div class="divide-line"></div>
24+
</div>
25+
</template>
26+
<div>
27+
<el-form ref="formRef" :model="configForm" label-position="top" :rules="formRules">
28+
<el-form-item label="触发器类型" prop="type">
29+
<el-select v-model="configForm.type">
30+
<el-option
31+
v-for="(item, index) in TRIGGER_TYPES"
32+
:key="index"
33+
:value="item.value"
34+
:label="item.label"
35+
/>
36+
</el-select>
37+
</el-form-item>
38+
<div
39+
v-if="configForm.type === TriggerTypeEnum.HTTP_REQUEST && configForm.httpRequestSetting"
40+
>
41+
<el-form-item>
42+
<el-alert
43+
title="仅支持 POST 请求，以请求体方式接收参数"
44+
type="warning"
45+
show-icon
46+
:closable="false"
47+
/>
48+
</el-form-item>
49+
<el-form-item label="请求地址" prop="httpRequestSetting.url">
50+
<el-input v-model="configForm.httpRequestSetting.url" />
51+
</el-form-item>
52+
<HttpRequestParamSetting
53+
:header="configForm.httpRequestSetting.header"
54+
:body="configForm.httpRequestSetting.body"
55+
:bind="'httpRequestSetting'"
56+
/>
57+
</div>
58+
</el-form>
59+
</div>
60+
<template #footer>
61+
<el-divider />
62+
<div>
63+
<el-button type="primary" @click="saveConfig">确 定</el-button>
64+
<el-button @click="closeDrawer">取 消</el-button>
65+
</div>
66+
</template>
67+
</el-drawer>
68+
</template>
69+
<script setup lang="ts">
70+
import { SimpleFlowNode, NodeType, TriggerSetting, TRIGGER_TYPES, TriggerTypeEnum } from '../consts'
71+
import { useWatchNode, useDrawer, useNodeName } from '../node'
72+
import HttpRequestParamSetting from './components/HttpRequestParamSetting.vue'
73+
defineOptions({
74+
name: 'TriggerNodeConfig'
75+
})
76+
const props = defineProps({
77+
flowNode: {
78+
type: Object as () => SimpleFlowNode,
79+
required: true
80+
}
81+
})
82+
// 抽屉配置
83+
const { settingVisible, closeDrawer, openDrawer } = useDrawer()
84+
// 当前节点
85+
const currentNode = useWatchNode(props)
86+
// 节点名称
87+
const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(NodeType.TRIGGER_NODE)
88+
// 触发器表单配置
89+
const formRef = ref() // 表单 Ref
90+
// 表单校验规则
91+
const formRules = reactive({
92+
type: [{ required: true, message: '触发器类型不能为空', trigger: 'change' }],
93+
httpRequestSetting: {
94+
url: [{ required: true, message: '请求地址不能为空', trigger: 'blur' }]
95+
}
96+
})
97+
// 触发器配置表单数据
98+
const configForm = ref<TriggerSetting>({
99+
type: TriggerTypeEnum.HTTP_REQUEST,
100+
httpRequestSetting: {
101+
url: '',
102+
header: [],
103+
body: []
104+
}
105+
})
106+
107+
// 保存配置
108+
const saveConfig = async () => {
109+
if (!formRef) return false
110+
const valid = await formRef.value.validate()
111+
if (!valid) return false
112+
const showText = getShowText()
113+
if (!showText) return false
114+
currentNode.value.showText = showText
115+
currentNode.value.triggerSetting = configForm.value
116+
settingVisible.value = false
117+
return true
118+
}
119+
// 获取节点展示内容
120+
const getShowText = (): string => {
121+
let showText = ''
122+
if (configForm.value.type === TriggerTypeEnum.HTTP_REQUEST) {
123+
showText = `${configForm.value.httpRequestSetting.url}`
124+
}
125+
return showText
126+
}
127+
128+
// 显示触发器节点配置， 由父组件传过来
129+
const showTriggerNodeConfig = (node: SimpleFlowNode) => {
130+
nodeName.value = node.name
131+
if (node.triggerSetting) {
132+
configForm.value.type = node.triggerSetting.type
133+
configForm.value.httpRequestSetting = node.triggerSetting.httpRequestSetting
134+
}
135+
}
136+
137+
defineExpose({ openDrawer, showTriggerNodeConfig }) // 暴露方法给父组件
138+
</script>
139+
140+
<style lang="scss" scoped></style>

‎src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -627,7 +627,7 @@ const userTaskListenerRef = ref()
627627
628628
// 保存配置
629629
const saveConfig = async () => {
630-
activeTabName.value = 'user'
630+
// activeTabName.value = 'user'
631631
// 设置审批节点名称
632632
currentNode.value.name = nodeName.value!
633633
// 设置审批类型
@@ -684,22 +684,22 @@ const saveConfig = async () => {
684684
currentNode.value.taskCreateListener = {
685685
enable: configForm.value.taskCreateListenerEnable ?? false,
686686
path: configForm.value.taskCreateListenerPath,
687-
header: configForm.value.taskCreateListenerHeader,
688-
body: configForm.value.taskCreateListenerBody
687+
header: configForm.value.taskCreateListener?.header,
688+
body: configForm.value.taskCreateListener?.body
689689
}
690690
// 指派任务监听器
691691
currentNode.value.taskAssignListener = {
692692
enable: configForm.value.taskAssignListenerEnable ?? false,
693693
path: configForm.value.taskAssignListenerPath,
694-
header: configForm.value.taskAssignListenerHeader,
695-
body: configForm.value.taskAssignListenerBody
694+
header: configForm.value.taskAssignListener?.header,
695+
body: configForm.value.taskAssignListener?.body
696696
}
697697
// 完成任务监听器
698698
currentNode.value.taskCompleteListener = {
699699
enable: configForm.value.taskCompleteListenerEnable ?? false,
700700
path: configForm.value.taskCompleteListenerPath,
701-
header: configForm.value.taskCompleteListenerHeader,
702-
body: configForm.value.taskCompleteListenerBody
701+
header: configForm.value.taskCompleteListener?.header,
702+
body: configForm.value.taskCompleteListener?.body
703703
}
704704
// 签名
705705
currentNode.value.signEnable = configForm.value.signEnable
@@ -760,18 +760,24 @@ const showUserTaskNodeConfig = (node: SimpleFlowNode) => {
760760
// 5.1 创建任务
761761
configForm.value.taskCreateListenerEnable = node.taskCreateListener!.enable
762762
configForm.value.taskCreateListenerPath = node.taskCreateListener!.path
763-
configForm.value.taskCreateListenerHeader = node.taskCreateListener?.header ?? []
764-
configForm.value.taskCreateListenerBody = node.taskCreateListener?.body ?? []
763+
configForm.value.taskCreateListener = {
764+
header: node.taskCreateListener?.header ?? [],
765+
body: node.taskCreateListener?.body ?? []
766+
}
765767
// 5.2 指派任务
766768
configForm.value.taskAssignListenerEnable = node.taskAssignListener!.enable
767769
configForm.value.taskAssignListenerPath = node.taskAssignListener!.path
768-
configForm.value.taskAssignListenerHeader = node.taskAssignListener?.header ?? []
769-
configForm.value.taskAssignListenerBody = node.taskAssignListener?.body ?? []
770-
// 5.3 完成任务
770+
configForm.value.taskAssignListener = {
771+
header: node.taskAssignListener?.header ?? [],
772+
body: node.taskAssignListener?.body ?? []
773+
}
774+
// 5.3 完成任务
771775
configForm.value.taskCompleteListenerEnable = node.taskCompleteListener!.enable
772776
configForm.value.taskCompleteListenerPath = node.taskCompleteListener!.path
773-
configForm.value.taskCompleteListenerHeader = node.taskCompleteListener?.header ?? []
774-
configForm.value.taskCompleteListenerBody = node.taskCompleteListener?.body ?? []
777+
configForm.value.taskCompleteListener = {
778+
header: node.taskCompleteListener?.header ?? [],
779+
body: node.taskCompleteListener?.body ?? []
780+
}
775781
// 6. 签名
776782
configForm.value.signEnable = node?.signEnable ?? false
777783
// 7. 审批意见

0 commit comments

Comments
 (0)