@ -1,13 +1,252 @@
< template >
< div >
定时边界事件 （ 非中断 ）
< el-divider content -position = " left " > 审批人超时未处理时 < / el-divider >
< el-form-item label = "启用开关" prop = "timeoutHandlerEnable" >
< el-switch
v-model = "timeoutHandlerEnable"
active -text = " 开启 "
inactive -text = " 关闭 "
@change ="timeoutHandlerChange"
/ >
< / el-form-item >
< el-form-item label = "执行动作" prop = "timeoutHandlerType" v-if = "timeoutHandlerEnable" >
< el -radio -group v-model = "timeoutHandlerType.value" @change="onTimeoutHandlerTypeChanged" >
< el -radio -button
v-for = "item in TIMEOUT_HANDLER_TYPES"
:key = "item.value"
:value = "item.value"
:label = "item.label"
/ >
< / el-radio-group >
< / el-form-item >
< el-form-item label = "超时时间设置" v-if = "timeoutHandlerEnable" >
< span class = "mr-2" > 当超过 < / span >
< el-form-item prop = "timeDuration" >
< el-input-number
class = "mr-2"
: style = "{ width: '100px' }"
v-model = "timeDuration"
:min = "1"
controls -position = " right "
@change ="() => updateTimeModdle()"
/ >
< / el-form-item >
< el-select
v-model = "timeUnit"
class = "mr-2"
: style = "{ width: '100px' }"
@change ="onTimeUnitChange"
>
< el-option
v-for = "item in TIME_UNIT_TYPES"
:key = "item.value"
:label = "item.label"
:value = "item.value"
/ >
< / el-select >
未处理
< / el-form-item >
< el-form-item
label = "最大提醒次数"
prop = "maxRemindCount"
v-if = "timeoutHandlerEnable && timeoutHandlerType.value === 1"
>
< el-input-number
v-model = "maxRemindCount"
:min = "1"
:max = "10"
@change ="() => updateTimeModdle()"
/ >
< / el-form-item >
< / div >
< / template >
< script lang = "ts" setup >
// TODO 未来继续完善
import {
TimeUnitType ,
TIME _UNIT _TYPES ,
TIMEOUT _HANDLER _TYPES ,
} from '@/components/SimpleProcessDesignerV2/src/consts'
import { convertTimeUnit } from '@/components/SimpleProcessDesignerV2/src/utils'
defineOptions ( { name : 'ElementCustomConfig4BoundaryEventTimer' } )
const props = defineProps ( {
id : String ,
type : String
} )
const prefix = inject ( 'prefix' )
const bpmnElement = ref ( )
const bpmnInstances = ( ) => ( window as any ) ? . bpmnInstances
const timeoutHandlerEnable = ref ( false )
const boundaryEventType = ref ( )
const timeoutHandlerType = ref ( {
value : undefined
} )
const timeModdle = ref ( )
const timeDuration = ref ( 6 )
const timeUnit = ref ( TimeUnitType . HOUR )
const maxRemindCount = ref ( 1 )
const elExtensionElements = ref ( )
const otherExtensions = ref ( )
const configExtensions = ref ( [ ] )
const eventDefinition = ref ( )
const resetElement = ( ) => {
bpmnElement . value = bpmnInstances ( ) . bpmnElement
eventDefinition . value = bpmnElement . value . businessObject . eventDefinitions [ 0 ]
// 获取元素扩展属性 或者 创建扩展属性
elExtensionElements . value =
bpmnElement . value . businessObject ? . extensionElements ? ?
bpmnInstances ( ) . moddle . create ( 'bpmn:ExtensionElements' , { values : [ ] } )
// 是否开启自定义用户任务超时处理
boundaryEventType . value = elExtensionElements . value . values ? . filter (
( ex ) => ex . $type === ` ${ prefix } :BoundaryEventType `
) ? . [ 0 ]
if ( boundaryEventType . value && boundaryEventType . value . value === 1 ) {
timeoutHandlerEnable . value = true
configExtensions . value . push ( boundaryEventType . value )
}
// 执行动作
timeoutHandlerType . value = elExtensionElements . value . values ? . filter (
( ex ) => ex . $type === ` ${ prefix } :TimeoutHandlerType `
) ? . [ 0 ]
if ( timeoutHandlerType . value ) {
configExtensions . value . push ( timeoutHandlerType . value )
if ( eventDefinition . value . timeCycle ) {
const timeStr = eventDefinition . value . timeCycle . body
const maxRemindCountStr = timeStr . split ( '/' ) [ 0 ]
const timeDurationStr = timeStr . split ( '/' ) [ 1 ]
console . log ( maxRemindCountStr )
maxRemindCount . value = parseInt ( maxRemindCountStr . slice ( 1 ) )
timeDuration . value = parseInt ( timeDurationStr . slice ( 2 , timeDurationStr . length - 1 ) )
timeUnit . value = convertTimeUnit ( timeDurationStr . slice ( timeDurationStr . length - 1 ) )
timeModdle . value = eventDefinition . value . timeCycle
}
if ( eventDefinition . value . timeDuration ) {
const timeDurationStr = eventDefinition . value . timeDuration . body
timeDuration . value = parseInt ( timeDurationStr . slice ( 2 , timeDurationStr . length - 1 ) )
timeUnit . value = convertTimeUnit ( timeDurationStr . slice ( timeDurationStr . length - 1 ) )
timeModdle . value = eventDefinition . value . timeDuration
}
}
// 保留剩余扩展元素，便于后面更新该元素对应属性
otherExtensions . value =
elExtensionElements . value . values ? . filter (
( ex ) =>
ex . $type !== ` ${ prefix } :BoundaryEventType ` && ex . $type !== ` ${ prefix } :TimeoutHandlerType `
) ? ? [ ]
}
const timeoutHandlerChange = ( val ) => {
timeoutHandlerEnable . value = val
if ( val ) {
// 启用自定义用户任务超时处理
// 边界事件类型 --- 超时
boundaryEventType . value = bpmnInstances ( ) . moddle . create ( ` ${ prefix } :BoundaryEventType ` , {
value : 1
} )
configExtensions . value . push ( boundaryEventType . value )
// 超时处理类型
timeoutHandlerType . value = bpmnInstances ( ) . moddle . create ( ` ${ prefix } :TimeoutHandlerType ` , {
value : 1
} )
configExtensions . value . push ( timeoutHandlerType . value )
// 超时时间表达式
timeDuration . value = 6
timeUnit . value = 2
maxRemindCount . value = 1
timeModdle . value = bpmnInstances ( ) . moddle . create ( ` bpmn:Expression ` , {
body : 'PT6H'
} )
eventDefinition . value . timeDuration = timeModdle . value
} else {
// 关闭自定义用户任务超时处理
configExtensions . value = [ ]
delete eventDefinition . value . timeDuration
delete eventDefinition . value . timeCycle
}
updateElementExtensions ( )
}
const onTimeoutHandlerTypeChanged = ( ) => {
maxRemindCount . value = 1
updateElementExtensions ( )
updateTimeModdle ( )
}
const onTimeUnitChange = ( ) => {
// 分钟，默认是 60 分钟
if ( timeUnit . value === TimeUnitType . MINUTE ) {
timeDuration . value = 60
}
// 小时，默认是 6 个小时
if ( timeUnit . value === TimeUnitType . HOUR ) {
timeDuration . value = 6
}
// 天， 默认 1天
if ( timeUnit . value === TimeUnitType . DAY ) {
timeDuration . value = 1
}
updateTimeModdle ( )
}
const updateTimeModdle = ( ) => {
if ( maxRemindCount . value > 1 ) {
timeModdle . value . body = 'R' + maxRemindCount . value + '/' + isoTimeDuration ( )
if ( ! eventDefinition . value . timeCycle ) {
delete eventDefinition . value . timeDuration
eventDefinition . value . timeCycle = timeModdle . value
}
} else {
timeModdle . value . body = isoTimeDuration ( )
if ( ! eventDefinition . value . timeDuration ) {
delete eventDefinition . value . timeCycle
eventDefinition . value . timeDuration = timeModdle . value
}
}
}
const isoTimeDuration = ( ) => {
let strTimeDuration = 'PT'
if ( timeUnit . value === TimeUnitType . MINUTE ) {
strTimeDuration += timeDuration . value + 'M'
}
if ( timeUnit . value === TimeUnitType . HOUR ) {
strTimeDuration += timeDuration . value + 'H'
}
if ( timeUnit . value === TimeUnitType . DAY ) {
strTimeDuration += timeDuration . value + 'D'
}
return strTimeDuration
}
const updateElementExtensions = ( ) => {
const extensions = bpmnInstances ( ) . moddle . create ( 'bpmn:ExtensionElements' , {
values : [ ... otherExtensions . value , ... configExtensions . value ]
} )
bpmnInstances ( ) . modeling . updateProperties ( toRaw ( bpmnElement . value ) , {
extensionElements : extensions
} )
}
watch (
( ) => props . id ,
( val ) => {
val &&
val . length &&
nextTick ( ( ) => {
resetElement ( )
} )
} ,
{ immediate : true }
)
< / script >
< style lang = "scss" scoped >
< / style >
< style lang = "scss" scoped > < / style >
芋道源码