| 提交 | 用户 | 时间 | ||
| 9259c2 | 1 | <template> |
| H | 2 | <div> |
| 3 | <el-divider content-position="left">审批人超时未处理时</el-divider> | |
| 4 | <el-form-item label="启用开关" prop="timeoutHandlerEnable"> | |
| 5 | <el-switch | |
| 6 | v-model="timeoutHandlerEnable" | |
| 7 | active-text="开启" | |
| 8 | inactive-text="关闭" | |
| 9 | @change="timeoutHandlerChange" | |
| 10 | /> | |
| 11 | </el-form-item> | |
| 12 | <el-form-item label="执行动作" prop="timeoutHandlerType" v-if="timeoutHandlerEnable"> | |
| 13 | <el-radio-group v-model="timeoutHandlerType.value" @change="onTimeoutHandlerTypeChanged"> | |
| 14 | <el-radio-button | |
| 15 | v-for="item in TIMEOUT_HANDLER_TYPES" | |
| 16 | :key="item.value" | |
| 17 | :value="item.value" | |
| 18 | :label="item.label" | |
| 19 | /> | |
| 20 | </el-radio-group> | |
| 21 | </el-form-item> | |
| 22 | <el-form-item label="超时时间设置" v-if="timeoutHandlerEnable"> | |
| 23 | <span class="mr-2">当超过</span> | |
| 24 | <el-form-item prop="timeDuration"> | |
| 25 | <el-input-number | |
| 26 | class="mr-2" | |
| 27 | :style="{ width: '100px' }" | |
| 28 | v-model="timeDuration" | |
| 29 | :min="1" | |
| 30 | controls-position="right" | |
| 31 | @change="() => updateTimeModdle()" | |
| 32 | /> | |
| 33 | </el-form-item> | |
| 34 | <el-select | |
| 35 | v-model="timeUnit" | |
| 36 | class="mr-2" | |
| 37 | :style="{ width: '100px' }" | |
| 38 | @change="onTimeUnitChange" | |
| 39 | > | |
| 40 | <el-option | |
| 41 | v-for="item in TIME_UNIT_TYPES" | |
| 42 | :key="item.value" | |
| 43 | :label="item.label" | |
| 44 | :value="item.value" | |
| 45 | /> | |
| 46 | </el-select> | |
| 47 | 未处理 | |
| 48 | </el-form-item> | |
| 49 | <el-form-item | |
| 50 | label="最大提醒次数" | |
| 51 | prop="maxRemindCount" | |
| 52 | v-if="timeoutHandlerEnable && timeoutHandlerType.value === 1" | |
| 53 | > | |
| 54 | <el-input-number | |
| 55 | v-model="maxRemindCount" | |
| 56 | :min="1" | |
| 57 | :max="10" | |
| 58 | @change="() => updateTimeModdle()" | |
| 59 | /> | |
| 60 | </el-form-item> | |
| 61 | </div> | |
| 62 | </template> | |
| 63 | ||
| 64 | <script lang="ts" setup> | |
| 65 | import { | |
| 66 | TimeUnitType, | |
| 67 | TIME_UNIT_TYPES, | |
| 68 | TIMEOUT_HANDLER_TYPES, | |
| 69 | } from '@/components/SimpleProcessDesignerV2/src/consts' | |
| 70 | import { convertTimeUnit } from '@/components/SimpleProcessDesignerV2/src/utils' | |
| 71 | ||
| 72 | defineOptions({ name: 'ElementCustomConfig4BoundaryEventTimer' }) | |
| 73 | const props = defineProps({ | |
| 74 | id: String, | |
| 75 | type: String | |
| 76 | }) | |
| 77 | const prefix = inject('prefix') | |
| 78 | ||
| 79 | const bpmnElement = ref() | |
| 80 | const bpmnInstances = () => (window as any)?.bpmnInstances | |
| 81 | ||
| 82 | const timeoutHandlerEnable = ref(false) | |
| 83 | const boundaryEventType = ref() | |
| 84 | const timeoutHandlerType = ref({ | |
| 85 | value: undefined | |
| 86 | }) | |
| 87 | const timeModdle = ref() | |
| 88 | const timeDuration = ref(6) | |
| 89 | const timeUnit = ref(TimeUnitType.HOUR) | |
| 90 | const maxRemindCount = ref(1) | |
| 91 | ||
| 92 | const elExtensionElements = ref() | |
| 93 | const otherExtensions = ref() | |
| 94 | const configExtensions = ref([]) | |
| 95 | const eventDefinition = ref() | |
| 96 | ||
| 97 | const resetElement = () => { | |
| 98 | bpmnElement.value = bpmnInstances().bpmnElement | |
| 99 | eventDefinition.value = bpmnElement.value.businessObject.eventDefinitions[0] | |
| 100 | ||
| 101 | // 获取元素扩展属性 或者 创建扩展属性 | |
| 102 | elExtensionElements.value = | |
| 103 | bpmnElement.value.businessObject?.extensionElements ?? | |
| 104 | bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] }) | |
| 105 | ||
| 106 | // 是否开启自定义用户任务超时处理 | |
| 107 | boundaryEventType.value = elExtensionElements.value.values?.filter( | |
| 108 | (ex) => ex.$type === `${prefix}:BoundaryEventType` | |
| 109 | )?.[0] | |
| 110 | if (boundaryEventType.value && boundaryEventType.value.value === 1) { | |
| 111 | timeoutHandlerEnable.value = true | |
| 112 | configExtensions.value.push(boundaryEventType.value) | |
| 113 | } | |
| 114 | ||
| 115 | // 执行动作 | |
| 116 | timeoutHandlerType.value = elExtensionElements.value.values?.filter( | |
| 117 | (ex) => ex.$type === `${prefix}:TimeoutHandlerType` | |
| 118 | )?.[0] | |
| 119 | if (timeoutHandlerType.value) { | |
| 120 | configExtensions.value.push(timeoutHandlerType.value) | |
| 121 | if (eventDefinition.value.timeCycle) { | |
| 122 | const timeStr = eventDefinition.value.timeCycle.body | |
| 123 | const maxRemindCountStr = timeStr.split('/')[0] | |
| 124 | const timeDurationStr = timeStr.split('/')[1] | |
| 125 | console.log(maxRemindCountStr) | |
| 126 | maxRemindCount.value = parseInt(maxRemindCountStr.slice(1)) | |
| 127 | timeDuration.value = parseInt(timeDurationStr.slice(2, timeDurationStr.length - 1)) | |
| 128 | timeUnit.value = convertTimeUnit(timeDurationStr.slice(timeDurationStr.length - 1)) | |
| 129 | timeModdle.value = eventDefinition.value.timeCycle | |
| 130 | } | |
| 131 | if (eventDefinition.value.timeDuration) { | |
| 132 | const timeDurationStr = eventDefinition.value.timeDuration.body | |
| 133 | timeDuration.value = parseInt(timeDurationStr.slice(2, timeDurationStr.length - 1)) | |
| 134 | timeUnit.value = convertTimeUnit(timeDurationStr.slice(timeDurationStr.length - 1)) | |
| 135 | timeModdle.value = eventDefinition.value.timeDuration | |
| 136 | } | |
| 137 | } | |
| 138 | ||
| 139 | // 保留剩余扩展元素，便于后面更新该元素对应属性 | |
| 140 | otherExtensions.value = | |
| 141 | elExtensionElements.value.values?.filter( | |
| 142 | (ex) => | |
| 143 | ex.$type !== `${prefix}:BoundaryEventType` && ex.$type !== `${prefix}:TimeoutHandlerType` | |
| 144 | ) ?? [] | |
| 145 | } | |
| 146 | ||
| 147 | const timeoutHandlerChange = (val) => { | |
| 148 | timeoutHandlerEnable.value = val | |
| 149 | if (val) { | |
| 150 | // 启用自定义用户任务超时处理 | |
| 151 | // 边界事件类型 --- 超时 | |
| 152 | boundaryEventType.value = bpmnInstances().moddle.create(`${prefix}:BoundaryEventType`, { | |
| 153 | value: 1 | |
| 154 | }) | |
| 155 | configExtensions.value.push(boundaryEventType.value) | |
| 156 | // 超时处理类型 | |
| 157 | timeoutHandlerType.value = bpmnInstances().moddle.create(`${prefix}:TimeoutHandlerType`, { | |
| 158 | value: 1 | |
| 159 | }) | |
| 160 | configExtensions.value.push(timeoutHandlerType.value) | |
| 161 | // 超时时间表达式 | |
| 162 | timeDuration.value = 6 | |
| 163 | timeUnit.value = 2 | |
| 164 | maxRemindCount.value = 1 | |
| 165 | timeModdle.value = bpmnInstances().moddle.create(`bpmn:Expression`, { | |
| 166 | body: 'PT6H' | |
| 167 | }) | |
| 168 | eventDefinition.value.timeDuration = timeModdle.value | |
| 169 | } else { | |
| 170 | // 关闭自定义用户任务超时处理 | |
| 171 | configExtensions.value = [] | |
| 172 | delete eventDefinition.value.timeDuration | |
| 173 | delete eventDefinition.value.timeCycle | |
| 174 | } | |
| 175 | updateElementExtensions() | |
| 176 | } | |
| 177 | ||
| 178 | const onTimeoutHandlerTypeChanged = () => { | |
| 179 | maxRemindCount.value = 1 | |
| 180 | updateElementExtensions() | |
| 181 | updateTimeModdle() | |
| 182 | } | |
| 183 | ||
| 184 | const onTimeUnitChange = () => { | |
| 185 | // 分钟，默认是 60 分钟 | |
| 186 | if (timeUnit.value === TimeUnitType.MINUTE) { | |
| 187 | timeDuration.value = 60 | |
| 188 | } | |
| 189 | // 小时，默认是 6 个小时 | |
| 190 | if (timeUnit.value === TimeUnitType.HOUR) { | |
| 191 | timeDuration.value = 6 | |
| 192 | } | |
| 193 | // 天， 默认 1天 | |
| 194 | if (timeUnit.value === TimeUnitType.DAY) { | |
| 195 | timeDuration.value = 1 | |
| 196 | } | |
| 197 | updateTimeModdle() | |
| 198 | } | |
| 199 | ||
| 200 | const updateTimeModdle = () => { | |
| 201 | if (maxRemindCount.value > 1) { | |
| 202 | timeModdle.value.body = 'R' + maxRemindCount.value + '/' + isoTimeDuration() | |
| 203 | if (!eventDefinition.value.timeCycle) { | |
| 204 | delete eventDefinition.value.timeDuration | |
| 205 | eventDefinition.value.timeCycle = timeModdle.value | |
| 206 | } | |
| 207 | } else { | |
| 208 | timeModdle.value.body = isoTimeDuration() | |
| 209 | if (!eventDefinition.value.timeDuration) { | |
| 210 | delete eventDefinition.value.timeCycle | |
| 211 | eventDefinition.value.timeDuration = timeModdle.value | |
| 212 | } | |
| 213 | } | |
| 214 | } | |
| 215 | ||
| 216 | const isoTimeDuration = () => { | |
| 217 | let strTimeDuration = 'PT' | |
| 218 | if (timeUnit.value === TimeUnitType.MINUTE) { | |
| 219 | strTimeDuration += timeDuration.value + 'M' | |
| 220 | } | |
| 221 | if (timeUnit.value === TimeUnitType.HOUR) { | |
| 222 | strTimeDuration += timeDuration.value + 'H' | |
| 223 | } | |
| 224 | if (timeUnit.value === TimeUnitType.DAY) { | |
| 225 | strTimeDuration += timeDuration.value + 'D' | |
| 226 | } | |
| 227 | return strTimeDuration | |
| 228 | } | |
| 229 | ||
| 230 | const updateElementExtensions = () => { | |
| 231 | const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', { | |
| 232 | values: [...otherExtensions.value, ...configExtensions.value] | |
| 233 | }) | |
| 234 | bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), { | |
| 235 | extensionElements: extensions | |
| 236 | }) | |
| 237 | } | |
| 238 | ||
| 239 | watch( | |
| 240 | () => props.id, | |
| 241 | (val) => { | |
| 242 | val && | |
| 243 | val.length && | |
| 244 | nextTick(() => { | |
| 245 | resetElement() | |
| 246 | }) | |
| 247 | }, | |
| 248 | { immediate: true } | |
| 249 | ) | |
| 250 | </script> | |
| 251 | ||
| 252 | <style lang="scss" scoped></style> | |
