BPM:增加任务监听器、执行监听器的管理
This commit is contained in:
parent
faf4557783
commit
7218e71884
@ -139,25 +139,17 @@ const updateBaseInfo = (key) => {
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 针对上传的 bpmn 流程图时,需要延迟 1 毫秒的时间,保证 key 和 name 的更新
|
||||
setTimeout(() => {
|
||||
handleKeyUpdate(props.model.key)
|
||||
handleNameUpdate(props.model.name)
|
||||
}, 1)
|
||||
})
|
||||
|
||||
// watch(
|
||||
// () => props.businessObject,
|
||||
// (val) => {
|
||||
// // console.log(val, 'val11111111111111111111')
|
||||
// if (val) {
|
||||
// // nextTick(() => {
|
||||
// resetBaseInfo()
|
||||
// // })
|
||||
// }
|
||||
// }
|
||||
// )
|
||||
watch(
|
||||
() => props.businessObject,
|
||||
(val) => {
|
||||
// console.log(val, 'val11111111111111111111')
|
||||
if (val) {
|
||||
// nextTick(() => {
|
||||
resetBaseInfo()
|
||||
// })
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.model?.key,
|
||||
|
@ -26,8 +26,16 @@
|
||||
type="primary"
|
||||
preIcon="ep:plus"
|
||||
title="添加监听器"
|
||||
size="small"
|
||||
@click="openListenerForm(null)"
|
||||
/>
|
||||
<XButton
|
||||
type="success"
|
||||
preIcon="ep:select"
|
||||
title="选择监听器"
|
||||
size="small"
|
||||
@click="openProcessListenerDialog"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 监听器 编辑/创建 部分 -->
|
||||
@ -240,11 +248,21 @@
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
<!-- 选择弹窗 -->
|
||||
<ProcessListenerDialog ref="processListenerDialogRef" @select="selectListener" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
import { createListenerObject, updateElementExtensions } from '../../utils'
|
||||
import { initListenerType, initListenerForm, listenerType, fieldType } from './utilSelf'
|
||||
import {
|
||||
initListenerType,
|
||||
initListenerForm,
|
||||
listenerType,
|
||||
fieldType,
|
||||
initListenerForm2
|
||||
} from './utilSelf'
|
||||
import ProcessListenerDialog from './ProcessListenerDialog.vue'
|
||||
|
||||
defineOptions({ name: 'ElementListeners' })
|
||||
|
||||
@ -284,6 +302,7 @@ const resetListenersList = () => {
|
||||
}
|
||||
// 打开 监听器详情 侧边栏
|
||||
const openListenerForm = (listener, index?) => {
|
||||
// debugger
|
||||
if (listener) {
|
||||
listenerForm.value = initListenerForm(listener)
|
||||
editingListenerIndex.value = index
|
||||
@ -321,6 +340,7 @@ const openListenerFieldForm = (field, index?) => {
|
||||
}
|
||||
// 保存监听器注入字段
|
||||
const saveListenerFiled = async () => {
|
||||
// debugger
|
||||
let validateStatus = await listenerFieldFormRef.value.validate()
|
||||
if (!validateStatus) return // 验证不通过直接返回
|
||||
if (editingListenerFieldIndex.value === -1) {
|
||||
@ -337,6 +357,7 @@ const saveListenerFiled = async () => {
|
||||
}
|
||||
// 移除监听器字段
|
||||
const removeListenerField = (index) => {
|
||||
// debugger
|
||||
ElMessageBox.confirm('确认移除该字段吗?', '提示', {
|
||||
confirmButtonText: '确 认',
|
||||
cancelButtonText: '取 消'
|
||||
@ -349,6 +370,7 @@ const removeListenerField = (index) => {
|
||||
}
|
||||
// 移除监听器
|
||||
const removeListener = (index) => {
|
||||
debugger
|
||||
ElMessageBox.confirm('确认移除该监听器吗?', '提示', {
|
||||
confirmButtonText: '确 认',
|
||||
cancelButtonText: '取 消'
|
||||
@ -365,6 +387,7 @@ const removeListener = (index) => {
|
||||
}
|
||||
// 保存监听器配置
|
||||
const saveListenerConfig = async () => {
|
||||
// debugger
|
||||
let validateStatus = await listenerFormRef.value.validate()
|
||||
if (!validateStatus) return // 验证不通过直接返回
|
||||
const listenerObject = createListenerObject(listenerForm.value, false, prefix)
|
||||
@ -389,6 +412,28 @@ const saveListenerConfig = async () => {
|
||||
listenerForm.value = {}
|
||||
}
|
||||
|
||||
// 打开监听器弹窗
|
||||
const processListenerDialogRef = ref()
|
||||
const openProcessListenerDialog = async () => {
|
||||
processListenerDialogRef.value.open('execution')
|
||||
}
|
||||
const selectListener = (listener) => {
|
||||
const listenerForm = initListenerForm2(listener)
|
||||
const listenerObject = createListenerObject(listenerForm, false, prefix)
|
||||
bpmnElementListeners.value.push(listenerObject)
|
||||
elementListenersList.value.push(listenerForm)
|
||||
|
||||
// 保存其他配置
|
||||
otherExtensionList.value =
|
||||
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
|
||||
(ex) => ex.$type !== `${prefix}:ExecutionListener`
|
||||
) ?? []
|
||||
updateElementExtensions(
|
||||
bpmnElement.value,
|
||||
otherExtensionList.value.concat(bpmnElementListeners.value)
|
||||
)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.id,
|
||||
(val) => {
|
||||
|
@ -0,0 +1,88 @@
|
||||
<!-- 执行器选择 -->
|
||||
<template>
|
||||
<Dialog title="请选择监听器" v-model="dialogVisible" width="1024px">
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
||||
<el-table-column label="名字" align="center" prop="name" />
|
||||
<el-table-column label="类型" align="center" prop="type">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.BPM_PROCESS_LISTENER_TYPE" :value="scope.row.type" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" align="center" prop="status">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="事件" align="center" prop="event" />
|
||||
<el-table-column label="值类型" align="center" prop="valueType">
|
||||
<template #default="scope">
|
||||
<dict-tag
|
||||
:type="DICT_TYPE.BPM_PROCESS_LISTENER_VALUE_TYPE"
|
||||
:value="scope.row.valueType"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="值" align="center" prop="value" />
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" @click="select(scope.row)"> 选择 </el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ProcessListenerApi, ProcessListenerVO } from '@/api/bpm/processListener'
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
import { CommonStatusEnum } from '@/utils/constants'
|
||||
|
||||
/** BPM 流程 表单 */
|
||||
defineOptions({ name: 'ProcessListenerDialog' })
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const list = ref<ProcessListenerVO[]>([]) // 列表的数据
|
||||
const total = ref(0) // 列表的总页数
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
type: undefined,
|
||||
status: CommonStatusEnum.ENABLE
|
||||
})
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string) => {
|
||||
dialogVisible.value = true
|
||||
loading.value = true
|
||||
try {
|
||||
queryParams.pageNo = 1
|
||||
queryParams.type = type
|
||||
const data = await ProcessListenerApi.getProcessListenerPage(queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
|
||||
const select = async (row) => {
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emit('select', row)
|
||||
}
|
||||
</script>
|
@ -39,6 +39,13 @@
|
||||
title="添加监听器"
|
||||
@click="openListenerForm(null)"
|
||||
/>
|
||||
<XButton
|
||||
type="success"
|
||||
preIcon="ep:select"
|
||||
title="选择监听器"
|
||||
size="small"
|
||||
@click="openProcessListenerDialog"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 监听器 编辑/创建 部分 -->
|
||||
@ -286,11 +293,22 @@
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
<!-- 选择弹窗 -->
|
||||
<ProcessListenerDialog ref="processListenerDialogRef" @select="selectListener" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
import { createListenerObject, updateElementExtensions } from '../../utils'
|
||||
import { initListenerForm, initListenerType, eventType, listenerType, fieldType } from './utilSelf'
|
||||
import {
|
||||
initListenerForm,
|
||||
initListenerType,
|
||||
eventType,
|
||||
listenerType,
|
||||
fieldType,
|
||||
initListenerForm2
|
||||
} from './utilSelf'
|
||||
import ProcessListenerDialog from '@/components/bpmnProcessDesigner/package/penal/listeners/ProcessListenerDialog.vue'
|
||||
|
||||
defineOptions({ name: 'UserTaskListeners' })
|
||||
|
||||
@ -437,6 +455,28 @@ const removeListenerField = (field, index) => {
|
||||
.catch(() => console.info('操作取消'))
|
||||
}
|
||||
|
||||
// 打开监听器弹窗
|
||||
const processListenerDialogRef = ref()
|
||||
const openProcessListenerDialog = async () => {
|
||||
processListenerDialogRef.value.open('task')
|
||||
}
|
||||
const selectListener = (listener) => {
|
||||
const listenerForm = initListenerForm2(listener)
|
||||
const listenerObject = createListenerObject(listenerForm, true, prefix)
|
||||
bpmnElementListeners.value.push(listenerObject)
|
||||
elementListenersList.value.push(listenerForm)
|
||||
|
||||
// 保存其他配置
|
||||
otherExtensionList.value =
|
||||
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
|
||||
(ex) => ex.$type !== `${prefix}:TaskListener`
|
||||
) ?? []
|
||||
updateElementExtensions(
|
||||
bpmnElement.value,
|
||||
otherExtensionList.value.concat(bpmnElementListeners.value)
|
||||
)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.id,
|
||||
(val) => {
|
||||
|
@ -40,6 +40,33 @@ export function initListenerType(listener) {
|
||||
}
|
||||
}
|
||||
|
||||
/** 将 ProcessListenerDO 转换成 initListenerForm 想同的 Form 对象 */
|
||||
export function initListenerForm2(processListener) {
|
||||
if (processListener.valueType === 'class') {
|
||||
return {
|
||||
listenerType: 'classListener',
|
||||
class: processListener.value,
|
||||
event: processListener.event,
|
||||
fields: []
|
||||
}
|
||||
} else if (processListener.valueType === 'expression') {
|
||||
return {
|
||||
listenerType: 'expressionListener',
|
||||
expression: processListener.value,
|
||||
event: processListener.event,
|
||||
fields: []
|
||||
}
|
||||
} else if (processListener.valueType === 'delegateExpression') {
|
||||
return {
|
||||
listenerType: 'delegateExpressionListener',
|
||||
delegateExpression: processListener.value,
|
||||
event: processListener.event,
|
||||
fields: []
|
||||
}
|
||||
}
|
||||
throw new Error('未知的监听器类型')
|
||||
}
|
||||
|
||||
export const listenerType = {
|
||||
classListener: 'Java 类',
|
||||
expressionListener: '表达式',
|
||||
|
@ -2,6 +2,7 @@ import { toRaw } from 'vue'
|
||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
||||
// 创建监听器实例
|
||||
export function createListenerObject(options, isTask, prefix) {
|
||||
debugger
|
||||
const listenerObj = Object.create(null)
|
||||
listenerObj.event = options.event
|
||||
isTask && (listenerObj.id = options.id) // 任务监听器特有的 id 字段
|
||||
|
Loading…
Reference in New Issue
Block a user