Skip to content

Commit 9308ece

Browse files
LesanOuOLesanOuO
committed
feat: 抽离UserTaskListener组件
1 parent 38578c3 commit 9308ece

File tree

2 files changed

+267
-242
lines changed

2 files changed

+267
-242
lines changed

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

Lines changed: 6 additions & 242 deletions
Original file line numberDiff line numberDiff line change
@@ -440,217 +440,8 @@
440440
</div>
441441
</div>
442442
</el-tab-pane>
443-
<!-- TODO @lesan：要不抽成 Listener 小组件？类似 Condition.vue -->
444443
<el-tab-pane label="监听器" name="listener">
445-
<el-form ref="listenerFormRef" :model="configForm" label-position="top">
446-
<div v-for="(listener, listenerIdx) in taskListener" :key="listenerIdx">
447-
<el-divider content-position="left">
448-
<el-text tag="b" size="large">{{ listener.name }}</el-text>
449-
</el-divider>
450-
<el-form-item>
451-
<el-switch
452-
v-model="configForm[`task${listener.type}ListenerEnable`]"
453-
active-text="开启"
454-
inactive-text="关闭"
455-
/>
456-
</el-form-item>
457-
<div v-if="configForm[`task${listener.type}ListenerEnable`]">
458-
<el-form-item>
459-
<el-alert
460-
title="仅支持 POST 请求，以请求体方式接收参数"
461-
type="warning"
462-
show-icon
463-
:closable="false"
464-
/>
465-
</el-form-item>
466-
<el-form-item
467-
label="请求地址"
468-
:prop="`task${listener.type}ListenerPath`"
469-
:rules="{
470-
required: true,
471-
message: '请求地址不能为空',
472-
trigger: 'blur'
473-
}"
474-
>
475-
<el-input v-model="configForm[`task${listener.type}ListenerPath`]" />
476-
</el-form-item>
477-
<el-form-item label="请求头">
478-
<div
479-
class="flex pt-2"
480-
v-for="(item, index) in configForm[`task${listener.type}ListenerHeader`]"
481-
:key="index"
482-
>
483-
<div class="mr-2">
484-
<el-form-item
485-
:prop="`task${listener.type}ListenerHeader.${index}.key`"
486-
:rules="{
487-
required: true,
488-
message: '参数名不能为空',
489-
trigger: 'blur'
490-
}"
491-
>
492-
<el-input class="w-160px" v-model="item.key" />
493-
</el-form-item>
494-
</div>
495-
<div class="mr-2">
496-
<el-select class="w-100px!" v-model="item.type">
497-
<el-option
498-
v-for="types in LISTENER_MAP_TYPES"
499-
:key="types.value"
500-
:label="types.label"
501-
:value="types.value"
502-
/>
503-
</el-select>
504-
</div>
505-
<div class="mr-2">
506-
<el-form-item
507-
:prop="`task${listener.type}ListenerHeader.${index}.value`"
508-
:rules="{
509-
required: true,
510-
message: '参数值不能为空',
511-
trigger: 'blur'
512-
}"
513-
>
514-
<el-input
515-
v-if="item.type === ListenerParamTypeEnum.FIXED_VALUE"
516-
class="w-160px"
517-
v-model="item.value"
518-
/>
519-
</el-form-item>
520-
<el-form-item
521-
:prop="`task${listener.type}ListenerHeader.${index}.value`"
522-
:rules="{
523-
required: true,
524-
message: '参数值不能为空',
525-
trigger: 'change'
526-
}"
527-
>
528-
<el-select
529-
v-if="item.type === ListenerParamTypeEnum.FROM_FORM"
530-
class="w-160px!"
531-
v-model="item.value"
532-
>
533-
<el-option
534-
v-for="(field, fIdx) in formFieldOptions"
535-
:key="fIdx"
536-
:label="field.title"
537-
:value="field.field"
538-
:disabled="!field.required"
539-
/>
540-
</el-select>
541-
</el-form-item>
542-
</div>
543-
<div class="mr-1 flex items-center">
544-
<Icon
545-
icon="ep:delete"
546-
:size="18"
547-
@click="
548-
deleteTaskListenerParam(
549-
configForm[`task${listener.type}ListenerHeader`],
550-
index
551-
)
552-
"
553-
/>
554-
</div>
555-
</div>
556-
<el-button
557-
type="primary"
558-
text
559-
@click="addTaskListenerParam(configForm[`task${listener.type}ListenerHeader`])"
560-
>
561-
<Icon icon="ep:plus" class="mr-5px" />添加一行
562-
</el-button>
563-
</el-form-item>
564-
<el-form-item label="请求体">
565-
<div
566-
class="flex pt-2"
567-
v-for="(item, index) in configForm[`task${listener.type}ListenerBody`]"
568-
:key="index"
569-
>
570-
<div class="mr-2">
571-
<el-form-item
572-
:prop="`task${listener.type}ListenerBody.${index}.key`"
573-
:rules="{
574-
required: true,
575-
message: '参数名不能为空',
576-
trigger: 'blur'
577-
}"
578-
>
579-
<el-input class="w-160px" v-model="item.key" />
580-
</el-form-item>
581-
</div>
582-
<div class="mr-2">
583-
<el-select class="w-100px!" v-model="item.type">
584-
<el-option
585-
v-for="types in LISTENER_MAP_TYPES"
586-
:key="types.value"
587-
:label="types.label"
588-
:value="types.value"
589-
/>
590-
</el-select>
591-
</div>
592-
<div class="mr-2">
593-
<el-form-item
594-
:prop="`task${listener.type}ListenerBody.${index}.value`"
595-
:rules="{
596-
required: true,
597-
message: '参数值不能为空',
598-
trigger: 'blur'
599-
}"
600-
>
601-
<el-input
602-
v-if="item.type === ListenerParamTypeEnum.FIXED_VALUE"
603-
class="w-160px"
604-
v-model="item.value"
605-
/>
606-
</el-form-item>
607-
<el-form-item
608-
:prop="`task${listener.type}ListenerBody.${index}.value`"
609-
:rules="{
610-
required: true,
611-
message: '参数值不能为空',
612-
trigger: 'change'
613-
}"
614-
>
615-
<el-select
616-
v-if="item.type === ListenerParamTypeEnum.FROM_FORM"
617-
class="w-160px!"
618-
v-model="item.value"
619-
>
620-
<el-option
621-
v-for="(field, fIdx) in formFieldOptions"
622-
:key="fIdx"
623-
:label="field.title"
624-
:value="field.field"
625-
:disabled="!field.required"
626-
/>
627-
</el-select>
628-
</el-form-item>
629-
</div>
630-
<div class="mr-1 flex items-center">
631-
<Icon
632-
icon="ep:delete"
633-
:size="18"
634-
@click="
635-
deleteTaskListenerParam(
636-
configForm[`task${listener.type}ListenerBody`],
637-
index
638-
)
639-
"
640-
/>
641-
</div>
642-
</div>
643-
<el-button
644-
type="primary"
645-
text
646-
@click="addTaskListenerParam(configForm[`task${listener.type}ListenerBody`])"
647-
>
648-
<Icon icon="ep:plus" class="mr-5px" />添加一行
649-
</el-button>
650-
</el-form-item>
651-
</div>
652-
</div>
653-
</el-form>
444+
<UserTaskListener ref="userTaskListenerRef" v-model="configForm" :form-field-options="formFieldOptions" />
654445
</el-tab-pane>
655446
</el-tabs>
656447
<template #footer>
@@ -687,9 +478,7 @@ import {
687478
ASSIGN_EMPTY_HANDLER_TYPES,
688479
AssignEmptyHandlerType,
689480
FieldPermissionType,
690-
ProcessVariableEnum,
691-
LISTENER_MAP_TYPES,
692-
ListenerParamTypeEnum
481+
ProcessVariableEnum
693482
} from '../consts'
694483
695484
import {
@@ -703,6 +492,7 @@ import {
703492
import { defaultProps } from '@/utils/tree'
704493
import { cloneDeep } from 'lodash-es'
705494
import { convertTimeUnit, getApproveTypeText } from '../utils'
495+
import UserTaskListener from './components/UserTaskListener.vue'
706496
defineOptions({
707497
name: 'UserTaskNodeConfig'
708498
})
@@ -780,21 +570,6 @@ const formRules = reactive({
780570
assignEmptyHandlerUserIds: [{ required: true, message: '用户不能为空', trigger: 'change' }],
781571
assignStartUserHandlerType: [{ required: true }]
782572
})
783-
// 监听器数组
784-
const taskListener = ref([
785-
{
786-
name: '创建任务',
787-
type: 'Create'
788-
},
789-
{
790-
name: '指派任务执行人员',
791-
type: 'Assign'
792-
},
793-
{
794-
name: '完成任务',
795-
type: 'Complete'
796-
}
797-
])
798573
799574
const {
800575
configForm: tempConfigForm,
@@ -843,7 +618,7 @@ const {
843618
cTimeoutMaxRemindCount
844619
} = useTimeoutHandler()
845620
846-
const listenerFormRef = ref()
621+
const userTaskListenerRef = ref()
847622
848623
// 保存配置
849624
const saveConfig = async () => {
@@ -860,8 +635,8 @@ const saveConfig = async () => {
860635
}
861636
862637
if (!formRef) return false
863-
if (!listenerFormRef) return false
864-
const valid = (await formRef.value.validate()) && (await listenerFormRef.value.validate())
638+
if (!userTaskListenerRef) return false
639+
const valid = (await formRef.value.validate()) && (await userTaskListenerRef.value.validate())
865640
if (!valid) return false
866641
const showText = getShowText()
867642
if (!showText) return false
@@ -1104,17 +879,6 @@ function useTimeoutHandler() {
1104879
cTimeoutMaxRemindCount
1105880
}
1106881
}
1107-
1108-
const addTaskListenerParam = (arr) => {
1109-
arr.push({
1110-
key: '',
1111-
type: 1,
1112-
value: ''
1113-
})
1114-
}
1115-
const deleteTaskListenerParam = (arr, index) => {
1116-
arr.splice(index, 1)
1117-
}
1118882
</script>
1119883

1120884
<style lang="scss" scoped>

0 commit comments

Comments
 (0)