Skip to content

Commit 7683aa2

Browse files
LesanOuOLesanOuO
committed
feat: Simple设计器-监听器
1 parent 0da3a9b commit 7683aa2

File tree

4 files changed

+183
-134
lines changed

4 files changed

+183
-134
lines changed

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,13 @@ const addNode = (type: number) => {
128128
},
129129
assignStartUserHandlerType: AssignStartUserHandlerType.START_USER_AUDIT,
130130
childNode: props.childNode,
131-
createTaskListener: {
131+
taskCreateListener: {
132+
enable: false
133+
},
134+
taskAssignListener: {
135+
enable: false
136+
},
137+
taskCompleteListener: {
132138
enable: false
133139
}
134140
}

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,11 @@ export interface SimpleFlowNode {
9898
// 审批节点的审批人与发起人相同时，对应的处理类型
9999
assignStartUserHandlerType?: number
100100
// 创建任务监听器
101-
createTaskListener: ListenerHandler
101+
taskCreateListener?: ListenerHandler
102+
// 创建任务监听器
103+
taskAssignListener?: ListenerHandler
104+
// 创建任务监听器
105+
taskCompleteListener?: ListenerHandler
102106
// 条件类型
103107
conditionType?: ConditionType
104108
// 条件表达式
@@ -236,9 +240,9 @@ export type AssignEmptyHandler = {
236240
*/
237241
export type ListenerHandler = {
238242
enable: boolean
239-
path: string
240-
header: ListenerMap[]
241-
body: ListenerMap[]
243+
path?: string
244+
header?: ListenerMap[]
245+
body?: ListenerMap[]
242246
}
243247
export type ListenerMap = {
244248
key: string

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

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ import {
1414
NODE_DEFAULT_NAME,
1515
AssignStartUserHandlerType,
1616
AssignEmptyHandlerType,
17-
FieldPermissionType
17+
FieldPermissionType,
18+
ListenerMap
1819
} from './consts'
1920
import { parseFormFields } from '@/components/FormCreate/src/utils/index'
2021
export function useWatchNode(props: { flowNode: SimpleFlowNode }): Ref<SimpleFlowNode> {
@@ -136,6 +137,18 @@ export type UserTaskFormType = {
136137
timeDuration?: number
137138
maxRemindCount?: number
138139
buttonsSetting: any[]
140+
taskCreateListenerEnable?: boolean
141+
taskCreateListenerPath?: string
142+
taskCreateListenerHeader?: ListenerMap[]
143+
taskCreateListenerBody?: ListenerMap[]
144+
taskAssignListenerEnable?: boolean
145+
taskAssignListenerPath?: string
146+
taskAssignListenerHeader?: ListenerMap[]
147+
taskAssignListenerBody?: ListenerMap[]
148+
taskCompleteListenerEnable?: boolean
149+
taskCompleteListenerPath?: string
150+
taskCompleteListenerHeader?: ListenerMap[]
151+
taskCompleteListenerBody?: ListenerMap[]
139152
}
140153

141154
export type CopyTaskFormType = {

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

Lines changed: 154 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -436,133 +436,119 @@
436436
</div>
437437
</el-tab-pane>
438438
<el-tab-pane label="监听器" name="listener">
439-
<div>
439+
<div v-for="(listener, listenerIdx) in taskListener" :key="listenerIdx">
440440
<el-form label-position="top">
441-
<el-divider content-position="left">
442-
<el-text tag="b" size="large">创建任务</el-text>
443-
</el-divider>
444-
<!-- TODO @lesan：createTaskListenerEnable、createTaskListenerPath 等 idea 红色的告警！ -->
445-
<el-form-item prop="createTaskListenerEnable">
446-
<el-switch
447-
v-model="configForm.createTaskListenerEnable"
448-
active-text="开启"
449-
inactive-text="关闭"
450-
/>
451-
</el-form-item>
452-
<div v-if="configForm.createTaskListenerEnable">
441+
<div>
442+
<el-divider content-position="left">
443+
<el-text tag="b" size="large">{{ listener.name }}</el-text>
444+
</el-divider>
453445
<el-form-item>
454-
<el-alert
455-
title="仅支持 POST 请求，以请求体方式接收参数"
456-
type="warning"
457-
show-icon
458-
:closable="false"
446+
<el-switch
447+
v-model="configForm[`task${listener.type}ListenerEnable`]"
448+
active-text="开启"
449+
inactive-text="关闭"
459450
/>
460451
</el-form-item>
461-
<el-form-item label="请求地址" prop="createTaskListenerPath">
462-
<el-input v-model="configForm.createTaskListenerPath" />
463-
</el-form-item>
464-
<el-form-item label="请求头" prop="createTaskListenerHeader">
465-
<div
466-
class="flex pt-2"
467-
v-for="(item, index) in configForm.createTaskListenerHeader"
468-
:key="index"
469-
>
470-
<!-- TODO @lesan：css 尽量用 unocss 哈 -->
471-
<div class="mr-2">
472-
<el-input v-model="item.key" style="width: 160px" />
473-
</div>
474-
<div class="mr-2">
475-
<el-select v-model="item.type" style="width: 100px">
476-
<el-option
477-
v-for="types in LISTENER_MAP_TYPES"
478-
:key="types.value"
479-
:label="types.label"
480-
:value="types.value"
452+
<div v-if="configForm[`task${listener.type}ListenerEnable`]">
453+
<el-form-item>
454+
<el-alert
455+
title="仅支持 POST 请求，以请求体方式接收参数"
456+
type="warning"
457+
show-icon
458+
:closable="false"
459+
/>
460+
</el-form-item>
461+
<el-form-item label="请求地址">
462+
<el-input v-model="configForm[`task${listener.type}ListenerPath`]" />
463+
</el-form-item>
464+
<el-form-item label="请求头">
465+
<div
466+
class="flex pt-2"
467+
v-for="(item, index) in configForm[`task${listener.type}ListenerHeader`]"
468+
:key="index"
469+
>
470+
<div class="mr-2">
471+
<el-input class="w-160px" v-model="item.key" />
472+
</div>
473+
<div class="mr-2">
474+
<el-select class="w-100px!" v-model="item.type">
475+
<el-option
476+
v-for="types in LISTENER_MAP_TYPES"
477+
:key="types.value"
478+
:label="types.label"
479+
:value="types.value"
480+
/>
481+
</el-select>
482+
</div>
483+
<div class="mr-2">
484+
<el-input class="w-160px" v-model="item.value" />
485+
</div>
486+
<div class="mr-1 flex items-center">
487+
<Icon
488+
icon="ep:delete"
489+
:size="18"
490+
@click="
491+
deleteTaskListenerMap(
492+
configForm[`task${listener.type}ListenerHeader`],
493+
index
494+
)
495+
"
481496
/>
482-
</el-select>
483-
</div>
484-
<div class="mr-2">
485-
<el-input v-model="item.value" style="width: 160px" />
486-
</div>
487-
<div class="mr-1 flex items-center">
488-
<Icon
489-
icon="ep:delete"
490-
:size="18"
491-
@click="deleteTaskListenerMap(configForm.createTaskListenerHeader, index)"
492-
/>
497+
</div>
493498
</div>
494-
</div>
495-
<el-button
496-
type="primary"
497-
text
498-
@click="addTaskListenerMap(configForm.createTaskListenerHeader)"
499-
>
500-
<Icon icon="ep:plus" class="mr-5px" />添加一行
501-
</el-button>
502-
</el-form-item>
503-
<el-form-item label="请求体" prop="createTaskListenerBody">
504-
<div
505-
class="flex pt-2"
506-
v-for="(item, index) in configForm.createTaskListenerBody"
507-
:key="index"
508-
>
509-
<div class="mr-2">
510-
<el-input v-model="item.key" style="width: 160px" />
511-
</div>
512-
<div class="mr-2">
513-
<el-select v-model="item.type" style="width: 100px">
514-
<el-option
515-
v-for="types in LISTENER_MAP_TYPES"
516-
:key="types.value"
517-
:label="types.label"
518-
:value="types.value"
499+
<el-button
500+
type="primary"
501+
text
502+
@click="addTaskListenerMap(configForm[`task${listener.type}ListenerHeader`])"
503+
>
504+
<Icon icon="ep:plus" class="mr-5px" />添加一行
505+
</el-button>
506+
</el-form-item>
507+
<el-form-item label="请求体">
508+
<div
509+
class="flex pt-2"
510+
v-for="(item, index) in configForm[`task${listener.type}ListenerBody`]"
511+
:key="index"
512+
>
513+
<div class="mr-2">
514+
<el-input class="w-160px" v-model="item.key" />
515+
</div>
516+
<div class="mr-2">
517+
<el-select class="w-100px!" v-model="item.type">
518+
<el-option
519+
v-for="types in LISTENER_MAP_TYPES"
520+
:key="types.value"
521+
:label="types.label"
522+
:value="types.value"
523+
/>
524+
</el-select>
525+
</div>
526+
<div class="mr-2">
527+
<el-input class="w-160px" v-model="item.value" />
528+
</div>
529+
<div class="mr-1 flex items-center">
530+
<Icon
531+
icon="ep:delete"
532+
:size="18"
533+
@click="
534+
deleteTaskListenerMap(
535+
configForm[`task${listener.type}ListenerBody`],
536+
index
537+
)
538+
"
519539
/>
520-
</el-select>
521-
</div>
522-
<div class="mr-2">
523-
<el-input v-model="item.value" style="width: 160px" />
524-
</div>
525-
<div class="mr-1 flex items-center">
526-
<Icon
527-
icon="ep:delete"
528-
:size="18"
529-
@click="deleteTaskListenerMap(configForm.createTaskListenerBody, index)"
530-
/>
540+
</div>
531541
</div>
532-
</div>
533-
<el-button
534-
type="primary"
535-
text
536-
@click="addTaskListenerMap(configForm.createTaskListenerBody)"
537-
>
538-
<Icon icon="ep:plus" class="mr-5px" />添加一行
539-
</el-button>
540-
</el-form-item>
542+
<el-button
543+
type="primary"
544+
text
545+
@click="addTaskListenerMap(configForm[`task${listener.type}ListenerBody`])"
546+
>
547+
<Icon icon="ep:plus" class="mr-5px" />添加一行
548+
</el-button>
549+
</el-form-item>
550+
</div>
541551
</div>
542-
543-
<!-- TODO lesan：待实现 -->
544-
<el-divider content-position="left">
545-
<el-text tag="b" size="large">指派任务执行人员</el-text>
546-
</el-divider>
547-
<el-form-item prop="assignTaskListenerEnable">
548-
<el-switch
549-
v-model="configForm.assignTaskListenerEnable"
550-
active-text="开启"
551-
inactive-text="关闭"
552-
/>
553-
</el-form-item>
554-
555-
<!-- TODO lesan：待实现 -->
556-
<el-divider content-position="left">
557-
<el-text tag="b" size="large">完成任务</el-text>
558-
</el-divider>
559-
<el-form-item prop="completeTaskListenerEnable">
560-
<el-switch
561-
v-model="configForm.completeTaskListenerEnable"
562-
active-text="开启"
563-
inactive-text="关闭"
564-
/>
565-
</el-form-item>
566552
</el-form>
567553
</div>
568554
</el-tab-pane>
@@ -693,6 +679,21 @@ const formRules = reactive({
693679
assignEmptyHandlerUserIds: [{ required: true, message: '用户不能为空', trigger: 'change' }],
694680
assignStartUserHandlerType: [{ required: true }]
695681
})
682+
// 监听器数组
683+
const taskListener = ref([
684+
{
685+
name: '创建任务',
686+
type: 'Create'
687+
},
688+
{
689+
name: '指派任务执行人员',
690+
type: 'Assign'
691+
},
692+
{
693+
name: '完成任务',
694+
type: 'Complete'
695+
}
696+
])
696697
697698
const {
698699
configForm: tempConfigForm,
@@ -796,11 +797,25 @@ const saveConfig = async () => {
796797
// 设置按钮权限
797798
currentNode.value.buttonsSetting = buttonsSetting.value
798799
// 创建任务监听器
799-
currentNode.value.createTaskListener = {
800-
enable: configForm.value.createTaskListenerEnable,
801-
path: configForm.value.createTaskListenerPath,
802-
header: configForm.value.createTaskListenerHeader,
803-
body: configForm.value.createTaskListenerBody
800+
currentNode.value.taskCreateListener = {
801+
enable: configForm.value.taskCreateListenerEnable ?? false,
802+
path: configForm.value.taskCreateListenerPath,
803+
header: configForm.value.taskCreateListenerHeader,
804+
body: configForm.value.taskCreateListenerBody
805+
}
806+
// 指派任务监听器
807+
currentNode.value.taskAssignListener = {
808+
enable: configForm.value.taskAssignListenerEnable ?? false,
809+
path: configForm.value.taskAssignListenerPath,
810+
header: configForm.value.taskAssignListenerHeader,
811+
body: configForm.value.taskAssignListenerBody
812+
}
813+
// 完成任务监听器
814+
currentNode.value.taskCompleteListener = {
815+
enable: configForm.value.taskCompleteListenerEnable ?? false,
816+
path: configForm.value.taskCompleteListenerPath,
817+
header: configForm.value.taskCompleteListenerHeader,
818+
body: configForm.value.taskCompleteListenerBody
804819
}
805820
806821
currentNode.value.showText = showText
@@ -853,11 +868,22 @@ const showUserTaskNodeConfig = (node: SimpleFlowNode) => {
853868
buttonsSetting.value = cloneDeep(node.buttonsSetting) || DEFAULT_BUTTON_SETTING
854869
// 4. 表单字段权限配置
855870
getNodeConfigFormFields(node.fieldsPermission)
856-
// 5. 创建任务监听器
857-
configForm.value.createTaskListenerEnable = node.createTaskListener.enable
858-
configForm.value.createTaskListenerPath = node.createTaskListener.path
859-
configForm.value.createTaskListenerHeader = node.createTaskListener.header ?? []
860-
configForm.value.createTaskListenerBody = node.createTaskListener.body ?? []
871+
// 5. 监听器
872+
// 5.1 创建任务
873+
configForm.value.taskCreateListenerEnable = node.taskCreateListener!.enable
874+
configForm.value.taskCreateListenerPath = node.taskCreateListener!.path
875+
configForm.value.taskCreateListenerHeader = node.taskCreateListener?.header ?? []
876+
configForm.value.taskCreateListenerBody = node.taskCreateListener?.body ?? []
877+
// 5.2 指派任务
878+
configForm.value.taskAssignListenerEnable = node.taskAssignListener!.enable
879+
configForm.value.taskAssignListenerPath = node.taskAssignListener!.path
880+
configForm.value.taskAssignListenerHeader = node.taskAssignListener?.header ?? []
881+
configForm.value.taskAssignListenerBody = node.taskAssignListener?.body ?? []
882+
// 5.3 完成任务
883+
configForm.value.taskCompleteListenerEnable = node.taskCompleteListener!.enable
884+
configForm.value.taskCompleteListenerPath = node.taskCompleteListener!.path
885+
configForm.value.taskCompleteListenerHeader = node.taskCompleteListener?.header ?? []
886+
configForm.value.taskCompleteListenerBody = node.taskCompleteListener?.body ?? []
861887
}
862888
863889
defineExpose({ openDrawer, showUserTaskNodeConfig }) // 暴露方法给父组件

0 commit comments

Comments
 (0)