Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

工作流表单+模型代码提交

Browse Source
This commit is contained in:
hongawen
2024-05-09 14:18:39 +08:00
parent eeef608ccd
commit 06611f527a
266 changed files with 18227 additions and 22039 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1023
src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
View File

File diff suppressed because it is too large Load Diff

154
src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
View File

@@ -9,9 +9,9 @@
<script lang="ts" setup>
import BpmnViewer from 'bpmn-js/lib/Viewer'
import DefaultEmptyXML from './plugins/defaultEmpty'
// import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
// import { formatDate } from '@/utils/formatTime'
// import { isEmpty } from '@/utils/is'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import { isEmpty } from '@/utils/is'
defineOptions({ name: 'MyProcessViewer' })
@@ -231,11 +231,11 @@ const highlightDiagram = async () => {
}
}
})
// if (!isEmpty(removeTaskDefinitionKeyList)) {
// taskList.value = taskList.value.filter(
// (item) => !removeTaskDefinitionKeyList.includes(item.taskDefinitionKey)
// )
// }
if (!isEmpty(removeTaskDefinitionKeyList)) {
taskList.value = taskList.value.filter(
(item) => !removeTaskDefinitionKeyList.includes(item.taskDefinitionKey)
)
}
}
const getActivityHighlightCss = (activity) => {
@@ -314,75 +314,75 @@ const elementHover = (element) => {
if (!activity) {
return
}
// if (!elementOverlayIds.value[element.value.id] && element.value.type !== 'bpmn:Process') {
// let html = `<div class="element-overlays">
// <p>Elemet id: ${element.value.id}</p>
// <p>Elemet type: ${element.value.type}</p>
// </div>` // 默认值
// if (element.value.type === 'bpmn:StartEvent' && processInstance.value) {
// html = `<p>发起人：${processInstance.value.startUser.nickname}</p>
// <p>部门：${processInstance.value.startUser.deptName}</p>
// <p>创建时间：${formatDate(processInstance.value.createTime)}`
// } else if (element.value.type === 'bpmn:UserTask') {
// let task = taskList.value.find((m) => m.id === activity.taskId) // 找到活动对应的 taskId
// if (!task) {
// return
// }
// // let optionData = getIntDictOptions(DICT_TYPE.BPM_TASK_STATUS)
// let dataResult = ''
// // optionData.forEach((element) => {
// // if (element.value == task.status) {
// // dataResult = element.label
// // }
// // })
// html = `<p>审批人：${task.assigneeUser.nickname}</p>
// <p>部门：${task.assigneeUser.deptName}</p>
// <p>结果：${dataResult}</p>
// <p>创建时间：${formatDate(task.createTime)}</p>`
// // html = `<p>审批人：${task.assigneeUser.nickname}</p>
// // <p>部门：${task.assigneeUser.deptName}</p>
// // <p>结果：${getIntDictOptions(
// // DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
// // task.status
// // )}</p>
// // <p>创建时间：${formatDate(task.createTime)}</p>`
// if (task.endTime) {
// html += `<p>结束时间：${formatDate(task.endTime)}</p>`
// }
// if (task.reason) {
// html += `<p>审批建议：${task.reason}</p>`
// }
// } else if (element.value.type === 'bpmn:ServiceTask' && processInstance.value) {
// if (activity.startTime > 0) {
// html = `<p>创建时间：${formatDate(activity.startTime)}</p>`
// }
// if (activity.endTime > 0) {
// html += `<p>结束时间：${formatDate(activity.endTime)}</p>`
// }
// console.log(html)
// } else if (element.value.type === 'bpmn:EndEvent' && processInstance.value) {
// // let optionData = getIntDictOptions(DICT_TYPE.BPM_TASK_STATUS)
// let dataResult = ''
// // optionData.forEach((element) => {
// // if (element.value == processInstance.value.status) {
// // dataResult = element.label
// // }
// // })
// html = `<p>结果：${dataResult}</p>`
// // html = `<p>结果：${getIntDictOptions(
// // DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
// // processInstance.value.status
// // )}</p>`
// if (processInstance.value.endTime) {
// html += `<p>结束时间：${formatDate(processInstance.value.endTime)}</p>`
// }
// }
// // console.log(html, 'html111111111111111')
// elementOverlayIds.value[element.value.id] = toRaw(overlays.value)?.add(element.value, {
// position: { left: 0, bottom: 0 },
// html: `<div class="element-overlays">${html}</div>`
// })
// }
if (!elementOverlayIds.value[element.value.id] && element.value.type !== 'bpmn:Process') {
let html = `<div class="element-overlays">
<p>Elemet id: ${element.value.id}</p>
<p>Elemet type: ${element.value.type}</p>
</div>` // 默认值
if (element.value.type === 'bpmn:StartEvent' && processInstance.value) {
html = `<p>发起人：${processInstance.value.startUser.nickname}</p>
<p>部门：${processInstance.value.startUser.deptName}</p>
<p>创建时间：${formatDate(processInstance.value.createTime)}`
} else if (element.value.type === 'bpmn:UserTask') {
let task = taskList.value.find((m) => m.id === activity.taskId) // 找到活动对应的 taskId
if (!task) {
return
}
let optionData = getIntDictOptions(DICT_TYPE.BPM_TASK_STATUS)
let dataResult = ''
optionData.forEach((element) => {
if (element.value == task.status) {
dataResult = element.label
}
})
html = `<p>审批人：${task.assigneeUser.nickname}</p>
<p>部门：${task.assigneeUser.deptName}</p>
<p>结果：${dataResult}</p>
<p>创建时间：${formatDate(task.createTime)}</p>`
// html = `<p>审批人：${task.assigneeUser.nickname}</p>
// <p>部门：${task.assigneeUser.deptName}</p>
// <p>结果：${getIntDictOptions(
// DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
// task.status
// )}</p>
// <p>创建时间：${formatDate(task.createTime)}</p>`
if (task.endTime) {
html += `<p>结束时间：${formatDate(task.endTime)}</p>`
}
if (task.reason) {
html += `<p>审批建议：${task.reason}</p>`
}
} else if (element.value.type === 'bpmn:ServiceTask' && processInstance.value) {
if (activity.startTime > 0) {
html = `<p>创建时间：${formatDate(activity.startTime)}</p>`
}
if (activity.endTime > 0) {
html += `<p>结束时间：${formatDate(activity.endTime)}</p>`
}
console.log(html)
} else if (element.value.type === 'bpmn:EndEvent' && processInstance.value) {
let optionData = getIntDictOptions(DICT_TYPE.BPM_TASK_STATUS)
let dataResult = ''
optionData.forEach((element) => {
if (element.value == processInstance.value.status) {
dataResult = element.label
}
})
html = `<p>结果：${dataResult}</p>`
// html = `<p>结果：${getIntDictOptions(
// DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
// processInstance.value.status
// )}</p>`
if (processInstance.value.endTime) {
html += `<p>结束时间：${formatDate(processInstance.value.endTime)}</p>`
}
}
// console.log(html, 'html111111111111111')
elementOverlayIds.value[element.value.id] = toRaw(overlays.value)?.add(element.value, {
position: { left: 0, bottom: 0 },
html: `<div class="element-overlays">${html}</div>`
})
}
}
// 流程图的元素被 out

8
src/components/bpmnProcessDesigner/package/designer/plugins/content-pad/contentPadProvider.js
View File

@@ -8,7 +8,7 @@ import { isAny } from 'bpmn-js/lib/features/modeling/util/ModelingUtil'
import { getChildLanes } from 'bpmn-js/lib/features/modeling/util/LaneUtil'
// import { hasPrimaryModifier } from 'diagram-js/lib/util/Mouse'
import { hasPrimaryModifier } from 'diagram-js/lib/util/Mouse'
/**
* A provider for BPMN 2.0 elements context pad
@@ -51,9 +51,9 @@ export default function ContextPadProvider(
const context = event.context,
shape = context.shape
// if (!hasPrimaryModifier(event) || !contextPad.isOpen(shape)) {
// return
// }
if (!hasPrimaryModifier(event) || !contextPad.isOpen(shape)) {
return
}
const entries = contextPad.getEntries(shape)

2
src/components/bpmnProcessDesigner/package/index.ts
View File

@@ -8,4 +8,4 @@ import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
export { MyProcessDesigner, MyProcessPenal,MyProcessViewer }
export { MyProcessDesigner, MyProcessPenal, MyProcessViewer }

379
src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
View File

@@ -1,100 +1,125 @@
<template>
<div
class='process-panel__container'
:style="{ width: `${width}px`, height: `700px`, overflow: 'auto', background: '#fff' }"
>
<el-collapse v-model='activeTab'>
<el-collapse-item name='base'>
<!-- class="panel-tab__title" -->
<template #title>
<Icon name='el-icon-InfoFilled' />
常规
</template>
<ElementBaseInfo
:id-edit-disabled='idEditDisabled'
:business-object='elementBusinessObject'
:type='elementType'
:model='model'
/>
</el-collapse-item>
<!-- <el-collapse-item name="condition" v-if="elementType === 'Process'" key="message">
<template #title>
<Icon name="el-icon-Comment" />
消息与信号
</template>
<SignalAndMassage />
</el-collapse-item>-->
<el-collapse-item name='condition' v-if='conditionFormVisible' key='condition'>
<template #title>
<Icon name='el-icon-Promotion' />
流转条件
</template>
<FlowCondition :business-object='elementBusinessObject' :type='elementType' />
</el-collapse-item>
<el-collapse-item name='condition' v-if='formVisible' key='form'>
<template #title>
<Icon name='el-icon-List' />
表单
</template>
<ElementForm :id='elementId' :type='elementType' />
</el-collapse-item>
<el-collapse-item name='task' v-if="elementType.indexOf('Task') !== -1" key='task'>
<template #title>
<Icon name='el-icon-Checked' />
任务（审批人）
</template>
<ElementTask :id='elementId' :type='elementType' />
</el-collapse-item>
<!-- <el-collapse-item name='multiInstance' v-if="elementType.indexOf('Task') !== -1" key='multiInstance'>-->
<!-- <template #title>-->
<!-- <Icon name='el-icon-HelpFilled' />-->
<!-- 多实例（会签配置）-->
<!-- </template>-->
<!-- <ElementMultiInstance :business-object='elementBusinessObject' :type='elementType' />-->
<!-- </el-collapse-item>-->
<!-- <el-collapse-item name='listeners' key='listeners'>-->
<!-- <template #title>-->
<!-- <Icon name='el-icon-BellFilled' />-->
<!-- 执行监听器-->
<!-- </template>-->
<!-- <ElementListeners :id='elementId' :type='elementType' />-->
<!-- </el-collapse-item>-->
<!-- <el-collapse-item name='taskListeners' v-if="elementType === 'UserTask'" key='taskListeners'>-->
<!-- <template #title>-->
<!-- <Icon name='el-icon-BellFilled' />-->
<!-- 任务监听器-->
<!-- </template>-->
<!-- <UserTaskListeners :id='elementId' :type='elementType' />-->
<!-- </el-collapse-item>-->
<!-- <el-collapse-item name='extensions' key='extensions'>-->
<!-- <template #title>-->
<!-- <Icon name='el-icon-CirclePlusFilled' />-->
<!-- 扩展属性-->
<!-- </template>-->
<!-- <ElementProperties :id='elementId' :type='elementType' />-->
<!-- </el-collapse-item>-->
<el-collapse-item name='other' key='other'>
<template #title>
<Icon name='el-icon-Promotion' />
其他
</template>
<ElementOtherConfig :id='elementId' />
</el-collapse-item>
</el-collapse>
</div>
<div class='process-panel__container' :style='{ width: `${width}px` }'>
<el-collapse v-model='activeTab'>
<el-collapse-item name='base'>
<!-- class="panel-tab__title" -->
<template #title>
<el-icon :size='20'>
<InfoFilled />
</el-icon>
常规
</template
>
<ElementBaseInfo
:id-edit-disabled='idEditDisabled'
:business-object='elementBusinessObject'
:type='elementType'
:model='model'
/>
</el-collapse-item>
<el-collapse-item name='condition' v-if="elementType === 'Process'" key='message'>
<template #title>
<el-icon :size='20'>
<Comment />
</el-icon>
消息与信号
</template>
<signal-and-massage />
</el-collapse-item>
<el-collapse-item name='condition' v-if='conditionFormVisible' key='condition'>
<template #title>
<el-icon :size='20'>
<Promotion />
</el-icon>
流转条件
</template>
<flow-condition :business-object='elementBusinessObject' :type='elementType' />
</el-collapse-item>
<el-collapse-item name='condition' v-if='formVisible' key='form'>
<template #title>
<el-icon :size='20'>
<List />
</el-icon>
表单
</template>
<element-form :id='elementId' :type='elementType' />
</el-collapse-item>
<el-collapse-item name='task' v-if="elementType.indexOf('Task') !== -1" key='task'>
<template #title>
<el-icon :size='20'>
<Checked />
</el-icon>
任务（审批人）
</template>
<element-task :id='elementId' :type='elementType' />
</el-collapse-item>
<el-collapse-item
name='multiInstance'
v-if="elementType.indexOf('Task') !== -1"
key='multiInstance'
>
<template #title>
<el-icon :size='20'>
<HelpFilled />
</el-icon>
多实例（会签配置）
</template>
<element-multi-instance :business-object='elementBusinessObject' :type='elementType' />
</el-collapse-item>
<el-collapse-item name='listeners' key='listeners'>
<template #title>
<el-icon :size='20'>
<BellFilled />
</el-icon>
执行监听器
</template>
<element-listeners :id='elementId' :type='elementType' />
</el-collapse-item>
<el-collapse-item name='taskListeners' v-if="elementType === 'UserTask'" key='taskListeners'>
<template #title>
<el-icon :size='20'>
<BellFilled />
</el-icon>
任务监听器
</template>
<user-task-listeners :id='elementId' :type='elementType' />
</el-collapse-item>
<el-collapse-item name='extensions' key='extensions'>
<template #title>
<el-icon :size='20'>
<CirclePlusFilled />
</el-icon>
扩展属性
</template>
<element-properties :id='elementId' :type='elementType' />
</el-collapse-item>
<el-collapse-item name='other' key='other'>
<template #title>
<el-icon :size='20'>
<Promotion />
</el-icon>
其他
</template>
<element-other-config :id='elementId' />
</el-collapse-item>
</el-collapse>
</div>
</template>
<script lang='ts' setup>
import { onMounted, provide, ref, watch, onBeforeUnmount } from 'vue'
import {CirclePlusFilled, BellFilled,HelpFilled, Checked, List, Promotion, Comment, InfoFilled } from '@element-plus/icons-vue'
import ElementBaseInfo from './base/ElementBaseInfo.vue'
import ElementOtherConfig from './other/ElementOtherConfig.vue'
import ElementTask from './task/ElementTask.vue'
// import ElementMultiInstance from './multi-instance/ElementMultiInstance.vue'
import ElementMultiInstance from './multi-instance/ElementMultiInstance.vue'
import FlowCondition from './flow-condition/FlowCondition.vue'
// import SignalAndMassage from './signal-message/SignalAndMessage.vue'
// import ElementListeners from './listeners/ElementListeners.vue'
// import ElementProperties from './properties/ElementProperties.vue'
import ElementForm from './form/ElementForm.vue'
// import UserTaskListeners from './listeners/UserTaskListeners.vue'
import SignalAndMassage from './signal-message/SignalAndMessage.vue'
import ElementListeners from './listeners/ElementListeners.vue'
import ElementProperties from './properties/ElementProperties.vue'
// import ElementForm from './form/ElementForm.vue'
import UserTaskListeners from './listeners/UserTaskListeners.vue'
import ElementForm from '@/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue'
defineOptions({ name: 'MyPropertiesPanel' })
@@ -105,24 +130,24 @@ defineOptions({ name: 'MyPropertiesPanel' })
* @Date 2021年3月31日18:57:51
*/
const props = defineProps({
bpmnModeler: {
type: Object,
default: () => {
}
},
prefix: {
type: String,
default: 'camunda'
},
width: {
type: Number,
default: 480
},
idEditDisabled: {
type: Boolean,
default: false
},
model: Object // 流程模型的数据
bpmnModeler: {
type: Object,
default: () => {
}
},
prefix: {
type: String,
default: 'camunda'
},
width: {
type: Number,
default: 480
},
idEditDisabled: {
type: Boolean,
default: false
},
model: Object // 流程模型的数据
})
const activeTab = ref('base')
@@ -141,94 +166,94 @@ const bpmnInstances = () => (window as any)?.bpmnInstances
const unwatchBpmn = watch(
() => props.bpmnModeler,
() => {
// 避免加载时 流程图 并未加载完成
if (!props.bpmnModeler) {
console.log('缺少props.bpmnModeler')
return
}
// 避免加载时 流程图 并未加载完成
if (!props.bpmnModeler) {
console.log('缺少props.bpmnModeler')
return
}
console.log('props.bpmnModeler 有值了！！！')
const w = window as any
w.bpmnInstances = {
modeler: props.bpmnModeler,
modeling: props.bpmnModeler.get('modeling'),
moddle: props.bpmnModeler.get('moddle'),
eventBus: props.bpmnModeler.get('eventBus'),
bpmnFactory: props.bpmnModeler.get('bpmnFactory'),
elementFactory: props.bpmnModeler.get('elementFactory'),
elementRegistry: props.bpmnModeler.get('elementRegistry'),
replace: props.bpmnModeler.get('replace'),
selection: props.bpmnModeler.get('selection')
}
console.log('props.bpmnModeler 有值了！！！')
const w = window as any
w.bpmnInstances = {
modeler: props.bpmnModeler,
modeling: props.bpmnModeler.get('modeling'),
moddle: props.bpmnModeler.get('moddle'),
eventBus: props.bpmnModeler.get('eventBus'),
bpmnFactory: props.bpmnModeler.get('bpmnFactory'),
elementFactory: props.bpmnModeler.get('elementFactory'),
elementRegistry: props.bpmnModeler.get('elementRegistry'),
replace: props.bpmnModeler.get('replace'),
selection: props.bpmnModeler.get('selection')
}
console.log(bpmnInstances(), 'window.bpmnInstances')
getActiveElement()
unwatchBpmn()
// console.log(bpmnInstances(), 'window.bpmnInstances')
getActiveElement()
unwatchBpmn()
},
{
immediate: true
immediate: true
}
)
const getActiveElement = () => {
// 初始第一个选中元素 bpmn:Process
// 初始第一个选中元素 bpmn:Process
initFormOnChanged(null)
props.bpmnModeler.on('import.done', (e) => {
// console.log(e, 'eeeee')
initFormOnChanged(null)
props.bpmnModeler.on('import.done', e => {
console.log(e, 'eeeee')
initFormOnChanged(null)
})
// 监听选择事件，修改当前激活的元素以及表单
props.bpmnModeler.on('selection.changed', ({ newSelection }) => {
initFormOnChanged(newSelection[0] || null)
})
props.bpmnModeler.on('element.changed', ({ element }) => {
// 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
if (element && element.id === elementId.value) {
initFormOnChanged(element)
}
})
})
// 监听选择事件，修改当前激活的元素以及表单
props.bpmnModeler.on('selection.changed', ({ newSelection }) => {
initFormOnChanged(newSelection[0] || null)
})
props.bpmnModeler.on('element.changed', ({ element }) => {
// 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
if (element && element.id === elementId.value) {
initFormOnChanged(element)
}
})
}
// 初始化数据
const initFormOnChanged = element => {
let activatedElement = element
if (!activatedElement) {
activatedElement =
bpmnInstances().elementRegistry.find(el => el.type === 'bpmn:Process') ??
bpmnInstances().elementRegistry.find(el => el.type === 'bpmn:Collaboration')
}
if (!activatedElement) return
console.log(`
----------
select element changed:
id: ${activatedElement.id}
type: ${activatedElement.businessObject.$type}
----------
`)
console.log('businessObject: ', activatedElement.businessObject)
bpmnInstances().bpmnElement = activatedElement
bpmnElement.value = activatedElement
elementId.value = activatedElement.id
elementType.value = activatedElement.type.split(':')[1] || ''
elementBusinessObject.value = JSON.parse(JSON.stringify(activatedElement.businessObject))
conditionFormVisible.value = !!(
elementType.value === 'SequenceFlow' &&
activatedElement.source &&
activatedElement.source.type.indexOf('StartEvent') === -1
)
formVisible.value = elementType.value === 'UserTask' || elementType.value === 'StartEvent'
const initFormOnChanged = (element) => {
let activatedElement = element
if (!activatedElement) {
activatedElement =
bpmnInstances().elementRegistry.find((el) => el.type === 'bpmn:Process') ??
bpmnInstances().elementRegistry.find((el) => el.type === 'bpmn:Collaboration')
}
if (!activatedElement) return
// console.log(`
// ----------
// select element changed:
// id: ${activatedElement.id}
// type: ${activatedElement.businessObject.$type}
// ----------
// `)
// console.log('businessObject: ', activatedElement.businessObject)
bpmnInstances().bpmnElement = activatedElement
bpmnElement.value = activatedElement
elementId.value = activatedElement.id
elementType.value = activatedElement.type.split(':')[1] || ''
elementBusinessObject.value = JSON.parse(JSON.stringify(activatedElement.businessObject))
conditionFormVisible.value = !!(
elementType.value === 'SequenceFlow' &&
activatedElement.source &&
activatedElement.source.type.indexOf('StartEvent') === -1
)
formVisible.value = elementType.value === 'UserTask' || elementType.value === 'StartEvent'
}
onBeforeUnmount(() => {
const w = window as any
w.bpmnInstances = null
console.log(props, 'props1')
console.log(props.bpmnModeler, 'props.bpmnModeler1')
const w = window as any
w.bpmnInstances = null
// console.log(props, 'props1')
// console.log(props.bpmnModeler, 'props.bpmnModeler1')
})
watch(
() => elementId.value,
() => {
activeTab.value = 'base'
activeTab.value = 'base'
}
)
</script>

251
src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
View File

@@ -1,177 +1,158 @@
<template>
<div class="panel-tab__content">
<el-form label-width="90px" v-if="needProps.type != 'bpmn:Process'" :model="needProps" :rules="rules">
<!-- <div v-if="needProps.type == 'bpmn:Process'">
<el-form-item label="流程标识" prop="id">
<el-input
v-model="needProps.id"
:disabled="needProps.id !== undefined && needProps.id.length > 0"
placeholder="请输入流标标识"
@change="handleKeyUpdate"
/>
</el-form-item>
</div> -->
<div>
<el-form-item label="ID">
<el-input v-model="elementBaseInfo.id" clearable @change="updateBaseInfo('id')" />
</el-form-item>
<el-form-item label="名称">
<el-input v-model="elementBaseInfo.name" clearable @change="updateBaseInfo('name')" />
</el-form-item>
<el-form-item label="描述">
<el-input
v-model="elementBaseInfo.documentation"
clearable
@change="updateBaseInfo('documentation')"
/>
</el-form-item>
</div>
</el-form>
</div>
<div class="panel-tab__content">
<el-form label-width="90px" :model="needProps" :rules="rules">
<div v-if="needProps.type == 'bpmn:Process'">
<!-- 如果是 Process 信息的时候，使用自定义表单 -->
<el-form-item label="流程标识" prop="id">
<el-input
v-model="needProps.id"
placeholder="请输入流标标识"
:disabled="needProps.id !== undefined && needProps.id.length > 0"
@change="handleKeyUpdate"
/>
</el-form-item>
<el-form-item label="流程名称" prop="name">
<el-input
v-model="needProps.name"
placeholder="请输入流程名称"
clearable
@change="handleNameUpdate"
/>
</el-form-item>
</div>
<div v-else>
<el-form-item label="ID">
<el-input v-model="elementBaseInfo.id" clearable @change="updateBaseInfo('id')" />
</el-form-item>
<el-form-item label="名称">
<el-input v-model="elementBaseInfo.name" clearable @change="updateBaseInfo('name')" />
</el-form-item>
</div>
</el-form>
</div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, watch, onBeforeUnmount, toRaw } from 'vue'
defineOptions({ name: 'ElementBaseInfo' })
const props = defineProps({
businessObject: {
type: Object,
default: () => {}
},
model: {
type: Object,
default: () => {}
}
businessObject: {
type: Object,
default: () => {}
},
model: {
type: Object,
default: () => {}
}
})
const needProps = ref<any>({})
const bpmnElement = ref()
const elementBaseInfo = ref<any>({})
// 流程表单的下拉框的数据
// const forms = ref([])
// 流程模型的校验
const rules = reactive({
id: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }]
id: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }]
})
const bpmnInstances = () => (window as any)?.bpmnInstances
const resetBaseInfo = () => {
console.log(window, 'window')
console.log(bpmnElement.value, 'bpmnElement')
// console.log(window, 'window')
// console.log(bpmnElement.value, 'bpmnElement')
bpmnElement.value = bpmnInstances()?.bpmnElement
// console.log(bpmnElement.value, 'resetBaseInfo11111111111')
elementBaseInfo.value = bpmnElement.value.businessObject
needProps.value['type'] = bpmnElement.value.businessObject.$type
// elementBaseInfo.value['typess'] = bpmnElement.value.businessObject.$type
bpmnElement.value = bpmnInstances()?.bpmnElement
// console.log(bpmnElement.value, 'resetBaseInfo11111111111')
elementBaseInfo.value = bpmnElement.value.businessObject
needProps.value['type'] = bpmnElement.value.businessObject.$type
// elementBaseInfo.value['typess'] = bpmnElement.value.businessObject.$type
// elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject))
// console.log(elementBaseInfo.value, 'elementBaseInfo22222222222')
// elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject))
// console.log(elementBaseInfo.value, 'elementBaseInfo22222222222')
}
const handleKeyUpdate = value => {
//校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题
if (!value) {
return
}
if (!value.match(/[a-zA-Z_][\-_.0-9a-zA-Z$]*/)) {
console.log('key 不满足 XML NCName 规则，所以不进行赋值')
return
}
console.log('key 满足 XML NCName 规则，所以进行赋值')
const handleKeyUpdate = (value) => {
// 校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题
if (!value) {
return
}
if (!value.match(/[a-zA-Z_][\-_.0-9a-zA-Z$]*/)) {
console.log('key 不满足 XML NCName 规则，所以不进行赋值')
return
}
// console.log('key 满足 XML NCName 规则，所以进行赋值')
// 在 BPMN 的 XML 中，流程标识 key，其实对应的是 id 节点
// 在 BPMN 的 XML 中，流程标识 key，其实对应的是 id 节点
elementBaseInfo.value['id'] = value
elementBaseInfo.value['id'] = value
setTimeout(() => {
updateBaseInfo('id')
}, 100)
setTimeout(() => {
updateBaseInfo('id')
}, 100)
}
const handleNameUpdate = value => {
console.log(elementBaseInfo, 'elementBaseInfo')
if (!value) {
return
}
elementBaseInfo.value['name'] = value
const handleNameUpdate = (value) => {
// console.log(elementBaseInfo, 'elementBaseInfo')
if (!value) {
return
}
elementBaseInfo.value['name'] = value
setTimeout(() => {
updateBaseInfo('name')
}, 100)
setTimeout(() => {
updateBaseInfo('name')
}, 100)
}
const handleClassifyUpdate = value => {
if (!value) {
return
}
elementBaseInfo.value['processCategory'] = value
setTimeout(() => {
updateBaseInfo('processCategory')
}, 100)
}
onMounted(() => {
setTimeout(() => {
// if (needProps.value.id == undefined) {
// // handleKeyUpdate(Math.random().toString(36).slice(-8))\
// console.log(elementBaseInfo.value, '123')
// }
}, 10)
})
// const handleDescriptionUpdate=(value)=> {
// TODO 芋艿：documentation 暂时无法修改，后续在看看
// this.elementBaseInfo['documentation'] = value;
// this.updateBaseInfo('documentation');
// }
const updateBaseInfo = key => {
console.log(key, 'key')
// 触发 elementBaseInfo 对应的字段
const attrObj = Object.create(null)
// console.log(attrObj, 'attrObj')
attrObj[key] = elementBaseInfo.value[key]
// console.log(attrObj, 'attrObj111')
// const attrObj = {
// id: elementBaseInfo.value[key]
// // di: { id: `${elementBaseInfo.value[key]}_di` }
// }
// console.log(elementBaseInfo, 'elementBaseInfo11111111111')
needProps.value = { ...elementBaseInfo.value, ...needProps.value }
const updateBaseInfo = (key) => {
// console.log(key, 'key')
// 触发 elementBaseInfo 对应的字段
const attrObj = Object.create(null)
// console.log(attrObj, 'attrObj')
attrObj[key] = elementBaseInfo.value[key]
// console.log(attrObj, 'attrObj111')
// const attrObj = {
// id: elementBaseInfo.value[key]
// // di: { id: `${elementBaseInfo.value[key]}_di` }
// }
// console.log(elementBaseInfo, 'elementBaseInfo11111111111')
needProps.value = { ...elementBaseInfo.value, ...needProps.value }
if (key === 'id') {
// console.log('jinru')
console.log(window, 'window')
console.log(bpmnElement.value, 'bpmnElement')
console.log(toRaw(bpmnElement.value), 'bpmnElement')
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
id: elementBaseInfo.value[key],
di: { id: `${elementBaseInfo.value[key]}_di` }
})
} else {
console.log(attrObj, 'attrObj')
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), attrObj)
}
if (key === 'id') {
// console.log('jinru')
// console.log(window, 'window')
// console.log(bpmnElement.value, 'bpmnElement')
// console.log(toRaw(bpmnElement.value), 'bpmnElement')
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
id: elementBaseInfo.value[key],
di: { id: `${elementBaseInfo.value[key]}_di` }
})
} else {
// console.log(attrObj, 'attrObj')
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), attrObj)
}
}
watch(
() => props.businessObject,
val => {
// console.log(val, 'val11111111111111111111')
if (val) {
// nextTick(() => {
resetBaseInfo()
// })
}
() => props.businessObject,
(val) => {
// console.log(val, 'val11111111111111111111')
if (val) {
// nextTick(() => {
resetBaseInfo()
// })
}
}
)
watch(
() => props.model?.key,
val => {
// 针对上传的 bpmn 流程图时，保证 key 和 name 的更新
if (val) {
handleKeyUpdate(props.model.key)
handleNameUpdate(props.model.name)
}
() => props.model?.key,
(val) => {
// 针对上传的 bpmn 流程图时，保证 key 和 name 的更新
if (val) {
handleKeyUpdate(props.model.key)
handleNameUpdate(props.model.name)
}
}
)
// watch(
@@ -194,6 +175,6 @@ watch(
// }
// }
onBeforeUnmount(() => {
bpmnElement.value = null
bpmnElement.value = null
})
</script>

1
src/components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue
View File

@@ -63,7 +63,6 @@
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, watch, onBeforeUnmount,toRaw,nextTick } from 'vue'
defineOptions({ name: 'FlowCondition' })
const props = defineProps({

788
src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue
View File

@@ -1,239 +1,239 @@
<template>
<div class='panel-tab__content'>
<el-form label-width='80px'>
<el-form-item label='流程表单'>
<!-- <el-input v-model="formKey" clearable @change="updateElementFormKey" />-->
<el-select v-model='formKey' clearable @change='updateElementFormKey'>
<el-option v-for='form in formList' :key='form.id' :label='form.name' :value='"key_"+form.id' />
</el-select>
</el-form-item>
<!-- <el-form-item label="业务标识">-->
<!-- <el-select v-model="businessKey" @change="updateElementBusinessKey">-->
<!-- <el-option v-for="i in fieldList" :key="i.id" :value="i.id" :label="i.label" />-->
<!-- <el-option label="无" value="" />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
</el-form>
<div class="panel-tab__content">
<el-form label-width="80px">
<el-form-item label="流程表单">
<!-- <el-input v-model="formKey" clearable @change="updateElementFormKey" />-->
<el-select v-model="formKey" clearable @change="updateElementFormKey">
<el-option v-for="form in formList" :key="form.id" :label="form.name" :value="form.id" />
</el-select>
</el-form-item>
<!-- <el-form-item label="业务标识">-->
<!-- <el-select v-model="businessKey" @change="updateElementBusinessKey">-->
<!-- <el-option v-for="i in fieldList" :key="i.id" :value="i.id" :label="i.label" />-->
<!-- <el-option label="无" value="" />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
</el-form>
<!--字段列表-->
<!-- <div class="element-property list-property">-->
<!-- <el-divider><Icon icon="ep:coin" /> 表单字段</el-divider>-->
<!-- <el-table :data="fieldList" max-height="240" fit border>-->
<!-- <el-table-column label="序号" type="index" width="50px" />-->
<!-- <el-table-column label="字段名称" prop="label" min-width="80px" show-overflow-tooltip />-->
<!-- <el-table-column-->
<!-- label="字段类型"-->
<!-- prop="type"-->
<!-- min-width="80px"-->
<!-- :formatter="(row) => fieldType[row.type] || row.type"-->
<!-- show-overflow-tooltip-->
<!-- />-->
<!-- <el-table-column-->
<!-- label="默认值"-->
<!-- prop="defaultValue"-->
<!-- min-width="80px"-->
<!-- show-overflow-tooltip-->
<!-- />-->
<!-- <el-table-column label="操作" width="90px">-->
<!-- <template #default="scope">-->
<!-- <el-button type="primary" link @click="openFieldForm(scope, scope.$index)"-->
<!-- >编辑</el-button-->
<!-- >-->
<!-- <el-divider direction="vertical" />-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- style="color: #ff4d4f"-->
<!-- @click="removeField(scope, scope.$index)"-->
<!-- >移除</el-button-->
<!-- >-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- </div>-->
<!-- <div class="element-drawer__button">-->
<!-- <XButton type="primary" proIcon="ep:plus" title="添加字段" @click="openFieldForm(null, -1)" />-->
<!-- </div>-->
<!--字段列表-->
<!-- <div class="element-property list-property">-->
<!-- <el-divider><Icon icon="ep:coin" /> 表单字段</el-divider>-->
<!-- <el-table :data="fieldList" max-height="240" fit border>-->
<!-- <el-table-column label="序号" type="index" width="50px" />-->
<!-- <el-table-column label="字段名称" prop="label" min-width="80px" show-overflow-tooltip />-->
<!-- <el-table-column-->
<!-- label="字段类型"-->
<!-- prop="type"-->
<!-- min-width="80px"-->
<!-- :formatter="(row) => fieldType[row.type] || row.type"-->
<!-- show-overflow-tooltip-->
<!-- />-->
<!-- <el-table-column-->
<!-- label="默认值"-->
<!-- prop="defaultValue"-->
<!-- min-width="80px"-->
<!-- show-overflow-tooltip-->
<!-- />-->
<!-- <el-table-column label="操作" width="90px">-->
<!-- <template #default="scope">-->
<!-- <el-button type="primary" link @click="openFieldForm(scope, scope.$index)"-->
<!-- >编辑</el-button-->
<!-- >-->
<!-- <el-divider direction="vertical" />-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- style="color: #ff4d4f"-->
<!-- @click="removeField(scope, scope.$index)"-->
<!-- >移除</el-button-->
<!-- >-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- </div>-->
<!-- <div class="element-drawer__button">-->
<!-- <XButton type="primary" proIcon="ep:plus" title="添加字段" @click="openFieldForm(null, -1)" />-->
<!-- </div>-->
<!--字段配置侧边栏-->
<!-- <el-drawer-->
<!-- v-model="fieldModelVisible"-->
<!-- title="字段配置"-->
<!-- :size="`${width}px`"-->
<!-- append-to-body-->
<!-- destroy-on-close-->
<!-- >-->
<!-- <el-form :model="formFieldForm" label-width="90px">-->
<!-- <el-form-item label="字段ID">-->
<!-- <el-input v-model="formFieldForm.id" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="类型">-->
<!-- <el-select-->
<!-- v-model="formFieldForm.typeType"-->
<!-- placeholder="请选择字段类型"-->
<!-- clearable-->
<!-- @change="changeFieldTypeType"-->
<!-- >-->
<!-- <el-option v-for="(value, key) of fieldType" :label="value" :value="key" :key="key" />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="类型名称" v-if="formFieldForm.typeType === 'custom'">-->
<!-- <el-input v-model="formFieldForm.type" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="名称">-->
<!-- <el-input v-model="formFieldForm.label" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="时间格式" v-if="formFieldForm.typeType === 'date'">-->
<!-- <el-input v-model="formFieldForm.datePattern" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="默认值">-->
<!-- <el-input v-model="formFieldForm.defaultValue" clearable />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!--字段配置侧边栏-->
<!-- <el-drawer-->
<!-- v-model="fieldModelVisible"-->
<!-- title="字段配置"-->
<!-- :size="`${width}px`"-->
<!-- append-to-body-->
<!-- destroy-on-close-->
<!-- >-->
<!-- <el-form :model="formFieldForm" label-width="90px">-->
<!-- <el-form-item label="字段ID">-->
<!-- <el-input v-model="formFieldForm.id" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="类型">-->
<!-- <el-select-->
<!-- v-model="formFieldForm.typeType"-->
<!-- placeholder="请选择字段类型"-->
<!-- clearable-->
<!-- @change="changeFieldTypeType"-->
<!-- >-->
<!-- <el-option v-for="(value, key) of fieldType" :label="value" :value="key" :key="key" />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="类型名称" v-if="formFieldForm.typeType === 'custom'">-->
<!-- <el-input v-model="formFieldForm.type" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="名称">-->
<!-- <el-input v-model="formFieldForm.label" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="时间格式" v-if="formFieldForm.typeType === 'date'">-->
<!-- <el-input v-model="formFieldForm.datePattern" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="默认值">-->
<!-- <el-input v-model="formFieldForm.defaultValue" clearable />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- &lt;!&ndash; 枚举值设置 &ndash;&gt;-->
<!-- <template v-if="formFieldForm.type === 'enum'">-->
<!-- <el-divider key="enum-divider" />-->
<!-- <p class="listener-filed__title" key="enum-title">-->
<!-- <span><Icon icon="ep:menu" />枚举值列表：</span>-->
<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'enum')"-->
<!-- >添加枚举值</el-button-->
<!-- >-->
<!-- </p>-->
<!-- <el-table :data="fieldEnumList" key="enum-table" max-height="240" fit border>-->
<!-- <el-table-column label="序号" width="50px" type="index" />-->
<!-- <el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="操作" width="90px">-->
<!-- <template #default="scope">-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- @click="openFieldOptionForm(scope, scope.$index, 'enum')"-->
<!-- >编辑</el-button-->
<!-- >-->
<!-- <el-divider direction="vertical" />-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- style="color: #ff4d4f"-->
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'enum')"-->
<!-- >移除</el-button-->
<!-- >-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- </template>-->
<!-- &lt;!&ndash; 枚举值设置 &ndash;&gt;-->
<!-- <template v-if="formFieldForm.type === 'enum'">-->
<!-- <el-divider key="enum-divider" />-->
<!-- <p class="listener-filed__title" key="enum-title">-->
<!-- <span><Icon icon="ep:menu" />枚举值列表：</span>-->
<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'enum')"-->
<!-- >添加枚举值</el-button-->
<!-- >-->
<!-- </p>-->
<!-- <el-table :data="fieldEnumList" key="enum-table" max-height="240" fit border>-->
<!-- <el-table-column label="序号" width="50px" type="index" />-->
<!-- <el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="操作" width="90px">-->
<!-- <template #default="scope">-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- @click="openFieldOptionForm(scope, scope.$index, 'enum')"-->
<!-- >编辑</el-button-->
<!-- >-->
<!-- <el-divider direction="vertical" />-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- style="color: #ff4d4f"-->
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'enum')"-->
<!-- >移除</el-button-->
<!-- >-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- </template>-->
<!-- &lt;!&ndash; 校验规则 &ndash;&gt;-->
<!-- <el-divider key="validation-divider" />-->
<!-- <p class="listener-filed__title" key="validation-title">-->
<!-- <span><Icon icon="ep:menu" />约束条件列表：</span>-->
<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'constraint')"-->
<!-- >添加约束</el-button-->
<!-- >-->
<!-- </p>-->
<!-- <el-table :data="fieldConstraintsList" key="validation-table" max-height="240" fit border>-->
<!-- <el-table-column label="序号" width="50px" type="index" />-->
<!-- <el-table-column label="约束名称" prop="name" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="操作" width="90px">-->
<!-- <template #default="scope">-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- @click="openFieldOptionForm(scope, scope.$index, 'constraint')"-->
<!-- >编辑</el-button-->
<!-- >-->
<!-- <el-divider direction="vertical" />-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- style="color: #ff4d4f"-->
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'constraint')"-->
<!-- >移除</el-button-->
<!-- >-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- &lt;!&ndash; 校验规则 &ndash;&gt;-->
<!-- <el-divider key="validation-divider" />-->
<!-- <p class="listener-filed__title" key="validation-title">-->
<!-- <span><Icon icon="ep:menu" />约束条件列表：</span>-->
<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'constraint')"-->
<!-- >添加约束</el-button-->
<!-- >-->
<!-- </p>-->
<!-- <el-table :data="fieldConstraintsList" key="validation-table" max-height="240" fit border>-->
<!-- <el-table-column label="序号" width="50px" type="index" />-->
<!-- <el-table-column label="约束名称" prop="name" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="操作" width="90px">-->
<!-- <template #default="scope">-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- @click="openFieldOptionForm(scope, scope.$index, 'constraint')"-->
<!-- >编辑</el-button-->
<!-- >-->
<!-- <el-divider direction="vertical" />-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- style="color: #ff4d4f"-->
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'constraint')"-->
<!-- >移除</el-button-->
<!-- >-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- &lt;!&ndash; 表单属性 &ndash;&gt;-->
<!-- <el-divider key="property-divider" />-->
<!-- <p class="listener-filed__title" key="property-title">-->
<!-- <span><Icon icon="ep:menu" />字段属性列表：</span>-->
<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'property')"-->
<!-- >添加属性</el-button-->
<!-- >-->
<!-- </p>-->
<!-- <el-table :data="fieldPropertiesList" key="property-table" max-height="240" fit border>-->
<!-- <el-table-column label="序号" width="50px" type="index" />-->
<!-- <el-table-column label="属性编号" prop="id" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="操作" width="90px">-->
<!-- <template #default="scope">-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- @click="openFieldOptionForm(scope, scope.$index, 'property')"-->
<!-- >编辑</el-button-->
<!-- >-->
<!-- <el-divider direction="vertical" />-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- style="color: #ff4d4f"-->
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'property')"-->
<!-- >移除</el-button-->
<!-- >-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- &lt;!&ndash; 表单属性 &ndash;&gt;-->
<!-- <el-divider key="property-divider" />-->
<!-- <p class="listener-filed__title" key="property-title">-->
<!-- <span><Icon icon="ep:menu" />字段属性列表：</span>-->
<!-- <el-button type="primary" @click="openFieldOptionForm(null, -1, 'property')"-->
<!-- >添加属性</el-button-->
<!-- >-->
<!-- </p>-->
<!-- <el-table :data="fieldPropertiesList" key="property-table" max-height="240" fit border>-->
<!-- <el-table-column label="序号" width="50px" type="index" />-->
<!-- <el-table-column label="属性编号" prop="id" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />-->
<!-- <el-table-column label="操作" width="90px">-->
<!-- <template #default="scope">-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- @click="openFieldOptionForm(scope, scope.$index, 'property')"-->
<!-- >编辑</el-button-->
<!-- >-->
<!-- <el-divider direction="vertical" />-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- link-->
<!-- style="color: #ff4d4f"-->
<!-- @click="removeFieldOptionItem(scope, scope.$index, 'property')"-->
<!-- >移除</el-button-->
<!-- >-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- &lt;!&ndash; 底部按钮 &ndash;&gt;-->
<!-- <div class="element-drawer__button">-->
<!-- <el-button>取 消</el-button>-->
<!-- <el-button type="primary" @click="saveField">保 存</el-button>-->
<!-- </div>-->
<!-- </el-drawer>-->
<!-- &lt;!&ndash; 底部按钮 &ndash;&gt;-->
<!-- <div class="element-drawer__button">-->
<!-- <el-button>取 消</el-button>-->
<!-- <el-button type="primary" @click="saveField">保 存</el-button>-->
<!-- </div>-->
<!-- </el-drawer>-->
<!-- <el-dialog-->
<!-- v-model="fieldOptionModelVisible"-->
<!-- :title="optionModelTitle"-->
<!-- width="600px"-->
<!-- append-to-body-->
<!-- destroy-on-close-->
<!-- >-->
<!-- <el-form :model="fieldOptionForm" label-width="96px">-->
<!-- <el-form-item label="编号/ID" v-if="fieldOptionType !== 'constraint'" key="option-id">-->
<!-- <el-input v-model="fieldOptionForm.id" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="名称" v-if="fieldOptionType !== 'property'" key="option-name">-->
<!-- <el-input v-model="fieldOptionForm.name" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="配置" v-if="fieldOptionType === 'constraint'" key="option-config">-->
<!-- <el-input v-model="fieldOptionForm.config" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="值" v-if="fieldOptionType === 'property'" key="option-value">-->
<!-- <el-input v-model="fieldOptionForm.value" clearable />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <template #footer>-->
<!-- <el-button @click="fieldOptionModelVisible = false">取 消</el-button>-->
<!-- <el-button type="primary" @click="saveFieldOption">确 定</el-button>-->
<!-- </template>-->
<!-- </el-dialog>-->
</div>
<!-- <el-dialog-->
<!-- v-model="fieldOptionModelVisible"-->
<!-- :title="optionModelTitle"-->
<!-- width="600px"-->
<!-- append-to-body-->
<!-- destroy-on-close-->
<!-- >-->
<!-- <el-form :model="fieldOptionForm" label-width="96px">-->
<!-- <el-form-item label="编号/ID" v-if="fieldOptionType !== 'constraint'" key="option-id">-->
<!-- <el-input v-model="fieldOptionForm.id" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="名称" v-if="fieldOptionType !== 'property'" key="option-name">-->
<!-- <el-input v-model="fieldOptionForm.name" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="配置" v-if="fieldOptionType === 'constraint'" key="option-config">-->
<!-- <el-input v-model="fieldOptionForm.config" clearable />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="值" v-if="fieldOptionType === 'property'" key="option-value">-->
<!-- <el-input v-model="fieldOptionForm.value" clearable />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <template #footer>-->
<!-- <el-button @click="fieldOptionModelVisible = false">取 消</el-button>-->
<!-- <el-button type="primary" @click="saveFieldOption">确 定</el-button>-->
<!-- </template>-->
<!-- </el-dialog>-->
</div>
</template>
<script lang='ts' setup>
import { ref, onMounted, inject, toRaw, watch, nextTick } from 'vue'
import { listAllWFForm } from '@/api/process-boot/workflow/form'
<script lang="ts" setup>
import { getFormSimpleList } from '@/api/bpm-boot/form'
defineOptions({ name: 'ElementForm' })
const props = defineProps({
id: String,
type: String
id: String,
type: String
})
const prefix = inject('prefix')
const width = inject('width')
@@ -244,12 +244,12 @@ const optionModelTitle = ref('')
const fieldList = ref<any[]>([])
const formFieldForm = ref<any>({})
const fieldType = ref({
long: '长整型',
string: '字符串',
boolean: '布尔类',
date: '日期类',
enum: '枚举类',
custom: '自定义类型'
long: '长整型',
string: '字符串',
boolean: '布尔类',
date: '日期类',
enum: '枚举类',
custom: '自定义类型'
})
const formFieldIndex = ref(-1) // 编辑中的字段， -1 为新增
const formFieldOptionIndex = ref(-1) // 编辑中的字段配置项， -1 为新增
@@ -267,215 +267,215 @@ const otherExtensions = ref()
const bpmnInstances = () => (window as any)?.bpmnInstances
const resetFormList = () => {
bpmnELement.value = bpmnInstances().bpmnElement
formKey.value = bpmnELement.value.businessObject.formKey
if (formKey.value?.length > 0) {
formKey.value = parseInt(formKey.value)
}
// 获取元素扩展属性 或者 创建扩展属性
elExtensionElements.value =
bpmnELement.value.businessObject.get('extensionElements') ||
bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] })
// 获取元素表单配置 或者 创建新的表单配置
formData.value =
elExtensionElements.value.values.filter((ex) => ex.$type === `${prefix}:FormData`)?.[0] ||
bpmnInstances().moddle.create(`${prefix}:FormData`, { fields: [] })
bpmnELement.value = bpmnInstances().bpmnElement
formKey.value = bpmnELement.value.businessObject.formKey
// if (formKey.value?.length > 0) {
// formKey.value = parseInt(formKey.value)
// }
// 获取元素扩展属性 或者 创建扩展属性
elExtensionElements.value =
bpmnELement.value.businessObject.get('extensionElements') ||
bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] })
// 获取元素表单配置 或者 创建新的表单配置
formData.value =
elExtensionElements.value.values.filter((ex) => ex.$type === `${prefix}:FormData`)?.[0] ||
bpmnInstances().moddle.create(`${prefix}:FormData`, { fields: [] })
// 业务标识 businessKey， 绑定在 formData 中
businessKey.value = formData.value.businessKey
// 业务标识 businessKey， 绑定在 formData 中
businessKey.value = formData.value.businessKey
// 保留剩余扩展元素，便于后面更新该元素对应属性
otherExtensions.value = elExtensionElements.value.values.filter(
(ex) => ex.$type !== `${prefix}:FormData`
)
// 保留剩余扩展元素，便于后面更新该元素对应属性
otherExtensions.value = elExtensionElements.value.values.filter(
(ex) => ex.$type !== `${prefix}:FormData`
)
// 复制原始值，填充表格
fieldList.value = JSON.parse(JSON.stringify(formData.value.fields || []))
// 复制原始值，填充表格
fieldList.value = JSON.parse(JSON.stringify(formData.value.fields || []))
// 更新元素扩展属性，避免后续报错
updateElementExtensions()
// 更新元素扩展属性，避免后续报错
updateElementExtensions()
}
const updateElementFormKey = () => {
bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
formKey: formKey.value
})
bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
formKey: formKey.value
})
}
const updateElementBusinessKey = () => {
bpmnInstances().modeling.updateModdleProperties(toRaw(bpmnELement.value), formData.value, {
businessKey: businessKey.value
})
bpmnInstances().modeling.updateModdleProperties(toRaw(bpmnELement.value), formData.value, {
businessKey: businessKey.value
})
}
// 根据类型调整字段type
const changeFieldTypeType = (type) => {
// this.$set(this.formFieldForm, "type", type === "custom" ? "" : type);
formFieldForm.value['type'] = type === 'custom' ? '' : type
// this.$set(this.formFieldForm, "type", type === "custom" ? "" : type);
formFieldForm.value['type'] = type === 'custom' ? '' : type
}
// 打开字段详情侧边栏
const openFieldForm = (field, index) => {
formFieldIndex.value = index
if (index !== -1) {
const FieldObject = formData.value.fields[index]
formFieldForm.value = JSON.parse(JSON.stringify(field))
// 设置自定义类型
// this.$set(this.formFieldForm, "typeType", !this.fieldType[field.type] ? "custom" : field.type);
formFieldForm.value['typeType'] = !fieldType.value[field.type] ? 'custom' : field.type
// 初始化枚举值列表
field.type === 'enum' &&
(fieldEnumList.value = JSON.parse(JSON.stringify(FieldObject?.values || [])))
// 初始化约束条件列表
fieldConstraintsList.value = JSON.parse(
JSON.stringify(FieldObject?.validation?.constraints || [])
)
// 初始化自定义属性列表
fieldPropertiesList.value = JSON.parse(JSON.stringify(FieldObject?.properties?.values || []))
} else {
formFieldForm.value = {}
// 初始化枚举值列表
fieldEnumList.value = []
// 初始化约束条件列表
fieldConstraintsList.value = []
// 初始化自定义属性列表
fieldPropertiesList.value = []
}
fieldModelVisible.value = true
formFieldIndex.value = index
if (index !== -1) {
const FieldObject = formData.value.fields[index]
formFieldForm.value = JSON.parse(JSON.stringify(field))
// 设置自定义类型
// this.$set(this.formFieldForm, "typeType", !this.fieldType[field.type] ? "custom" : field.type);
formFieldForm.value['typeType'] = !fieldType.value[field.type] ? 'custom' : field.type
// 初始化枚举值列表
field.type === 'enum' &&
(fieldEnumList.value = JSON.parse(JSON.stringify(FieldObject?.values || [])))
// 初始化约束条件列表
fieldConstraintsList.value = JSON.parse(
JSON.stringify(FieldObject?.validation?.constraints || [])
)
// 初始化自定义属性列表
fieldPropertiesList.value = JSON.parse(JSON.stringify(FieldObject?.properties?.values || []))
} else {
formFieldForm.value = {}
// 初始化枚举值列表
fieldEnumList.value = []
// 初始化约束条件列表
fieldConstraintsList.value = []
// 初始化自定义属性列表
fieldPropertiesList.value = []
}
fieldModelVisible.value = true
}
// 打开字段 某个 配置项 弹窗
const openFieldOptionForm = (option, index, type) => {
fieldOptionModelVisible.value = true
fieldOptionType.value = type
formFieldOptionIndex.value = index
if (type === 'property') {
fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
return (optionModelTitle.value = '属性配置')
}
if (type === 'enum') {
fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
return (optionModelTitle.value = '枚举值配置')
}
fieldOptionModelVisible.value = true
fieldOptionType.value = type
formFieldOptionIndex.value = index
if (type === 'property') {
fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
return (optionModelTitle.value = '约束条件配置')
return (optionModelTitle.value = '属性配置')
}
if (type === 'enum') {
fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
return (optionModelTitle.value = '枚举值配置')
}
fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
return (optionModelTitle.value = '约束条件配置')
}
// 保存字段 某个 配置项
const saveFieldOption = () => {
if (formFieldOptionIndex.value === -1) {
if (fieldOptionType.value === 'property') {
fieldPropertiesList.value.push(fieldOptionForm.value)
}
if (fieldOptionType.value === 'constraint') {
fieldConstraintsList.value.push(fieldOptionForm.value)
}
if (fieldOptionType.value === 'enum') {
fieldEnumList.value.push(fieldOptionForm.value)
}
} else {
fieldOptionType.value === 'property' &&
fieldPropertiesList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
fieldOptionType.value === 'constraint' &&
fieldConstraintsList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
fieldOptionType.value === 'enum' &&
fieldEnumList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
if (formFieldOptionIndex.value === -1) {
if (fieldOptionType.value === 'property') {
fieldPropertiesList.value.push(fieldOptionForm.value)
}
fieldOptionModelVisible.value = false
fieldOptionForm.value = {}
if (fieldOptionType.value === 'constraint') {
fieldConstraintsList.value.push(fieldOptionForm.value)
}
if (fieldOptionType.value === 'enum') {
fieldEnumList.value.push(fieldOptionForm.value)
}
} else {
fieldOptionType.value === 'property' &&
fieldPropertiesList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
fieldOptionType.value === 'constraint' &&
fieldConstraintsList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
fieldOptionType.value === 'enum' &&
fieldEnumList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
}
fieldOptionModelVisible.value = false
fieldOptionForm.value = {}
}
// 保存字段配置
const saveField = () => {
const { id, type, label, defaultValue, datePattern } = formFieldForm.value
const Field = bpmnInstances().moddle.create(`${prefix}:FormField`, { id, type, label })
defaultValue && (Field.defaultValue = defaultValue)
datePattern && (Field.datePattern = datePattern)
// 构建属性
if (fieldPropertiesList.value && fieldPropertiesList.value.length) {
const fieldPropertyList = fieldPropertiesList.value.map((fp) => {
return bpmnInstances().moddle.create(`${prefix}:Property`, {
id: fp.id,
value: fp.value
})
})
Field.properties = bpmnInstances().moddle.create(`${prefix}:Properties`, {
values: fieldPropertyList
})
}
// 构建校验规则
if (fieldConstraintsList.value && fieldConstraintsList.value.length) {
const fieldConstraintList = fieldConstraintsList.value.map((fc) => {
return bpmnInstances().moddle.create(`${prefix}:Constraint`, {
name: fc.name,
config: fc.config
})
})
Field.validation = bpmnInstances().moddle.create(`${prefix}:Validation`, {
constraints: fieldConstraintList
})
}
// 构建枚举值
if (fieldEnumList.value && fieldEnumList.value.length) {
Field.values = fieldEnumList.value.map((fe) => {
return bpmnInstances().moddle.create(`${prefix}:Value`, { name: fe.name, id: fe.id })
})
}
// 更新数组 与 表单配置实例
if (formFieldIndex.value === -1) {
fieldList.value.push(formFieldForm.value)
formData.value.fields.push(Field)
} else {
fieldList.value.splice(formFieldIndex.value, 1, formFieldForm.value)
formData.value.fields.splice(formFieldIndex.value, 1, Field)
}
updateElementExtensions()
fieldModelVisible.value = false
const { id, type, label, defaultValue, datePattern } = formFieldForm.value
const Field = bpmnInstances().moddle.create(`${prefix}:FormField`, { id, type, label })
defaultValue && (Field.defaultValue = defaultValue)
datePattern && (Field.datePattern = datePattern)
// 构建属性
if (fieldPropertiesList.value && fieldPropertiesList.value.length) {
const fieldPropertyList = fieldPropertiesList.value.map((fp) => {
return bpmnInstances().moddle.create(`${prefix}:Property`, {
id: fp.id,
value: fp.value
})
})
Field.properties = bpmnInstances().moddle.create(`${prefix}:Properties`, {
values: fieldPropertyList
})
}
// 构建校验规则
if (fieldConstraintsList.value && fieldConstraintsList.value.length) {
const fieldConstraintList = fieldConstraintsList.value.map((fc) => {
return bpmnInstances().moddle.create(`${prefix}:Constraint`, {
name: fc.name,
config: fc.config
})
})
Field.validation = bpmnInstances().moddle.create(`${prefix}:Validation`, {
constraints: fieldConstraintList
})
}
// 构建枚举值
if (fieldEnumList.value && fieldEnumList.value.length) {
Field.values = fieldEnumList.value.map((fe) => {
return bpmnInstances().moddle.create(`${prefix}:Value`, { name: fe.name, id: fe.id })
})
}
// 更新数组 与 表单配置实例
if (formFieldIndex.value === -1) {
fieldList.value.push(formFieldForm.value)
formData.value.fields.push(Field)
} else {
fieldList.value.splice(formFieldIndex.value, 1, formFieldForm.value)
formData.value.fields.splice(formFieldIndex.value, 1, Field)
}
updateElementExtensions()
fieldModelVisible.value = false
}
// 移除某个 字段的 配置项
const removeFieldOptionItem = (option, index, type) => {
// console.log(option, 'option')
if (type === 'property') {
fieldPropertiesList.value.splice(index, 1)
return
}
if (type === 'enum') {
fieldEnumList.value.splice(index, 1)
return
}
fieldConstraintsList.value.splice(index, 1)
// console.log(option, 'option')
if (type === 'property') {
fieldPropertiesList.value.splice(index, 1)
return
}
if (type === 'enum') {
fieldEnumList.value.splice(index, 1)
return
}
fieldConstraintsList.value.splice(index, 1)
}
// 移除 字段
const removeField = (field, index) => {
console.log(field, 'field')
fieldList.value.splice(index, 1)
formData.value.fields.splice(index, 1)
updateElementExtensions()
console.log(field, 'field')
fieldList.value.splice(index, 1)
formData.value.fields.splice(index, 1)
updateElementExtensions()
}
const updateElementExtensions = () => {
// 更新回扩展元素
const newElExtensionElements = bpmnInstances().moddle.create(`bpmn:ExtensionElements`, {
values: otherExtensions.value.concat(formData.value)
})
// 更新到元素上
bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
extensionElements: newElExtensionElements
})
// 更新回扩展元素
const newElExtensionElements = bpmnInstances().moddle.create(`bpmn:ExtensionElements`, {
values: otherExtensions.value.concat(formData.value)
})
// 更新到元素上
bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
extensionElements: newElExtensionElements
})
}
const formList = ref([]) // 流程表单的下拉框的数据
onMounted(async () => {
await listAllWFForm().then(res => {
formList.value = res.data
})
await getFormSimpleList().then(res => {
formList.value = res.data
})
})
watch(
() => props.id,
(val) => {
val &&
val.length &&
nextTick(() => {
resetFormList()
})
},
{ immediate: true }
() => props.id,
(val) => {
val &&
val.length &&
nextTick(() => {
resetFormList()
})
},
{ immediate: true }
)
</script>

735
src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
View File

@@ -1,238 +1,290 @@
<template>
<div class="panel-tab__content">
<el-table :data="elementListenersList" size="small" border>
<el-table-column label="序号" width="50px" type="index" />
<el-table-column label="事件类型" min-width="100px" prop="event" />
<el-table-column
label="监听器类型"
min-width="100px"
show-overflow-tooltip
:formatter="row => listenerTypeObject[row.listenerType]"
<div class='panel-tab__content'>
<el-table :data='elementListenersList' size='small' border>
<el-table-column label='序号' width='50px' type='index' />
<el-table-column label='事件类型' min-width='100px' prop='event' />
<el-table-column
label='监听器类型'
min-width='100px'
show-overflow-tooltip
:formatter='(row) => listenerTypeObject[row.listenerType]'
/>
<el-table-column label='操作' width='100px'>
<template #default='scope'>
<el-button size='small' link @click='openListenerForm(scope.row, scope.$index)'
>编辑
</el-button
>
<el-divider direction='vertical' />
<el-button size='small' link style='color: #ff4d4f' @click='removeListener(scope.$index)'
>移除
</el-button
>
</template>
</el-table-column>
</el-table>
<div class='element-drawer__button'>
<XButton
type="primary"
preIcon="ep:plus"
title="添加监听器"
size="small"
@click="openListenerForm(null)"
/>
<el-table-column label="操作" width="100px">
<template #default="scope">
<el-button size="small" link @click="openListenerForm(scope.row, scope.$index)">编辑</el-button>
<el-divider direction="vertical" />
<el-button size="small" link style="color: #ff4d4f" @click="removeListener(scope.$index)">
移除
</el-button>
</template>
</el-table-column>
</el-table>
<div class="element-drawer__button">
<el-button type="primary" icon="el-icon-Plus" size="small" @click="openListenerForm(null)">
添加监听器
</el-button>
<el-button type="success" icon="el-icon-Select" size="small" @click="openProcessListenerDialog">
选择监听器
</el-button>
</div>
<!-- 监听器 编辑/创建 部分 -->
<el-drawer
v-model="listenerFormModelVisible"
title="执行监听器"
:size="`${width}px`"
append-to-body
destroy-on-close
>
<el-form :model="listenerForm" label-width="96px" ref="listenerFormRef">
<el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-select v-model="listenerForm.event">
<el-option label="start" value="start" />
<el-option label="end" value="end" />
</el-select>
</el-form-item>
<el-form-item
label="监听器类型"
prop="listenerType"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-select v-model="listenerForm.listenerType">
<el-option
v-for="i in Object.keys(listenerTypeObject)"
:key="i"
:label="listenerTypeObject[i]"
:value="i"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'classListener'"
label="Java类"
prop="class"
key="listener-class"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerForm.class" clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'expressionListener'"
label="表达式"
prop="expression"
key="listener-expression"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerForm.expression" clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'delegateExpressionListener'"
label="代理表达式"
prop="delegateExpression"
key="listener-delegate"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerForm.delegateExpression" clearable />
</el-form-item>
<template v-if="listenerForm.listenerType === 'scriptListener'">
<el-form-item
label="脚本格式"
prop="scriptFormat"
key="listener-script-format"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
>
<el-input v-model="listenerForm.scriptFormat" clearable />
</el-form-item>
<el-form-item
label="脚本类型"
prop="scriptType"
key="listener-script-type"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
>
<el-select v-model="listenerForm.scriptType">
<el-option label="内联脚本" value="inlineScript" />
<el-option label="外部脚本" value="externalScript" />
</el-select>
</el-form-item>
<el-form-item
v-if="listenerForm.scriptType === 'inlineScript'"
label="脚本内容"
prop="value"
key="listener-script"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
>
<el-input v-model="listenerForm.value" clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.scriptType === 'externalScript'"
label="资源地址"
prop="resource"
key="listener-resource"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
>
<el-input v-model="listenerForm.resource" clearable />
</el-form-item>
</template>
</el-form>
<el-divider />
<p class="listener-filed__title">
<span>
<Icon icon="ep:menu" />
注入字段：
</span>
<el-button type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
</p>
<el-table :data="fieldsListOfListener" size="small" max-height="240" fit border style="flex: none">
<el-table-column label="序号" width="50px" type="index" />
<el-table-column label="字段名称" min-width="100px" prop="name" />
<el-table-column
label="字段类型"
min-width="80px"
show-overflow-tooltip
:formatter="row => fieldTypeObject[row.fieldType]"
/>
<el-table-column
label="字段值/表达式"
min-width="100px"
show-overflow-tooltip
:formatter="row => row.string || row.expression"
/>
<el-table-column label="操作" width="130px">
<template #default="scope">
<el-button size="small" link @click="openListenerFieldForm(scope.row, scope.$index)">
编辑
</el-button>
<el-divider direction="vertical" />
<el-button size="small" link style="color: #ff4d4f" @click="removeListenerField(scope.$index)">
移除
</el-button>
</template>
</el-table-column>
</el-table>
<div class="element-drawer__button">
<el-button @click="listenerFormModelVisible = false">取 消</el-button>
<el-button type="primary" @click="saveListenerConfig">保 存</el-button>
</div>
</el-drawer>
<!-- 注入西段 编辑/创建 部分 -->
<el-dialog
title="字段配置"
v-model="listenerFieldFormModelVisible"
width="600px"
append-to-body
destroy-on-close
>
<el-form :model="listenerFieldForm" label-width="96spx" ref="listenerFieldFormRef" style="height: 136px">
<el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-input v-model="listenerFieldForm.name" clearable />
</el-form-item>
<el-form-item
label="字段类型："
prop="fieldType"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-select v-model="listenerFieldForm.fieldType">
<el-option
v-for="i in Object.keys(fieldTypeObject)"
:key="i"
:label="fieldTypeObject[i]"
:value="i"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="listenerFieldForm.fieldType === 'string'"
label="字段值："
prop="string"
key="field-string"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerFieldForm.string" clearable />
</el-form-item>
<el-form-item
v-if="listenerFieldForm.fieldType === 'expression'"
label="表达式："
prop="expression"
key="field-expression"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerFieldForm.expression" clearable />
</el-form-item>
</el-form>
<template #footer>
<el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
<el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
</template>
</el-dialog>
<!-- <Plus type='primary'-->
<!-- title='添加监听器'-->
<!-- size='small'-->
<!-- @click='openListenerForm(null)' />-->
<XButton
type="success"
preIcon="ep:select"
title="选择监听器"
size="small"
@click="openProcessListenerDialog"
/>
<!-- <Select-->
<!-- type='success'-->
<!-- title='选择监听器'-->
<!-- size='small'-->
<!-- @click='openProcessListenerDialog'-->
<!-- />-->
</div>
<!-- 选择弹窗 -->
<ProcessListenerDialog ref="processListenerDialogRef" @select="selectProcessListener" />
<!-- 监听器 编辑/创建 部分 -->
<el-drawer
v-model='listenerFormModelVisible'
title='执行监听器'
:size='`${width}px`'
append-to-body
destroy-on-close
>
<el-form :model='listenerForm' label-width='96px' ref='listenerFormRef'>
<el-form-item
label='事件类型'
prop='event'
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-select v-model='listenerForm.event'>
<el-option label='start' value='start' />
<el-option label='end' value='end' />
</el-select>
</el-form-item>
<el-form-item
label='监听器类型'
prop='listenerType'
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-select v-model='listenerForm.listenerType'>
<el-option
v-for='i in Object.keys(listenerTypeObject)'
:key='i'
:label='listenerTypeObject[i]'
:value='i'
/>
</el-select>
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'classListener'"
label='Java类'
prop='class'
key='listener-class'
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model='listenerForm.class' clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'expressionListener'"
label='表达式'
prop='expression'
key='listener-expression'
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model='listenerForm.expression' clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'delegateExpressionListener'"
label='代理表达式'
prop='delegateExpression'
key='listener-delegate'
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model='listenerForm.delegateExpression' clearable />
</el-form-item>
<template v-if="listenerForm.listenerType === 'scriptListener'">
<el-form-item
label='脚本格式'
prop='scriptFormat'
key='listener-script-format'
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
>
<el-input v-model='listenerForm.scriptFormat' clearable />
</el-form-item>
<el-form-item
label='脚本类型'
prop='scriptType'
key='listener-script-type'
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
>
<el-select v-model='listenerForm.scriptType'>
<el-option label='内联脚本' value='inlineScript' />
<el-option label='外部脚本' value='externalScript' />
</el-select>
</el-form-item>
<el-form-item
v-if="listenerForm.scriptType === 'inlineScript'"
label='脚本内容'
prop='value'
key='listener-script'
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
>
<el-input v-model='listenerForm.value' clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.scriptType === 'externalScript'"
label='资源地址'
prop='resource'
key='listener-resource'
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
>
<el-input v-model='listenerForm.resource' clearable />
</el-form-item>
</template>
</el-form>
<el-divider />
<p class='listener-filed__title'>
<span><Menu />注入字段：</span>
<XButton type='primary' @click='openListenerFieldForm(null)' title='添加字段' />
</p>
<el-table
:data='fieldsListOfListener'
size='small'
max-height='240'
fit
border
style='flex: none'
>
<el-table-column label='序号' width='50px' type='index' />
<el-table-column label='字段名称' min-width='100px' prop='name' />
<el-table-column
label='字段类型'
min-width='80px'
show-overflow-tooltip
:formatter='(row) => fieldTypeObject[row.fieldType]'
/>
<el-table-column
label='字段值/表达式'
min-width='100px'
show-overflow-tooltip
:formatter='(row) => row.string || row.expression'
/>
<el-table-column label='操作' width='130px'>
<template #default='scope'>
<el-button size='small' link @click='openListenerFieldForm(scope.row, scope.$index)'
>编辑
</el-button
>
<el-divider direction='vertical' />
<el-button
size='small'
link
style='color: #ff4d4f'
@click='removeListenerField(scope.$index)'
>移除
</el-button
>
</template>
</el-table-column>
</el-table>
<div class='element-drawer__button'>
<el-button @click='listenerFormModelVisible = false'>取 消</el-button>
<el-button type='primary' @click='saveListenerConfig'>保 存</el-button>
</div>
</el-drawer>
<!-- 注入西段 编辑/创建 部分 -->
<el-dialog
title='字段配置'
v-model='listenerFieldFormModelVisible'
width='600px'
append-to-body
destroy-on-close
>
<el-form
:model='listenerFieldForm'
label-width='96spx'
ref='listenerFieldFormRef'
style='height: 136px'
>
<el-form-item
label='字段名称：'
prop='name'
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model='listenerFieldForm.name' clearable />
</el-form-item>
<el-form-item
label='字段类型：'
prop='fieldType'
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-select v-model='listenerFieldForm.fieldType'>
<el-option
v-for='i in Object.keys(fieldTypeObject)'
:key='i'
:label='fieldTypeObject[i]'
:value='i'
/>
</el-select>
</el-form-item>
<el-form-item
v-if="listenerFieldForm.fieldType === 'string'"
label='字段值：'
prop='string'
key='field-string'
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model='listenerFieldForm.string' clearable />
</el-form-item>
<el-form-item
v-if="listenerFieldForm.fieldType === 'expression'"
label='表达式：'
prop='expression'
key='field-expression'
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model='listenerFieldForm.expression' clearable />
</el-form-item>
</el-form>
<template #footer>
<el-button size='small' @click='listenerFieldFormModelVisible = false'>取 消</el-button>
<el-button size='small' type='primary' @click='saveListenerFiled'>确 定</el-button>
</template>
</el-dialog>
</div>
<!-- 选择弹窗 -->
<ProcessListenerDialog ref='processListenerDialogRef' @select='selectProcessListener' />
</template>
<script lang="ts" setup>
import { ref, watch, nextTick, inject } from 'vue'
<script lang='ts' setup>
import { ElMessageBox } from 'element-plus'
import XButton from '@/components/XButton/src/XButton.vue'
import { Plus, Select, Menu } from '@element-plus/icons-vue'
import { createListenerObject, updateElementExtensions } from '../../utils'
import { initListenerType, initListenerForm, listenerType, fieldType, initListenerForm2 } from './utilSelf'
import {
initListenerType,
initListenerForm,
listenerType,
fieldType,
initListenerForm2
} from './utilSelf'
import ProcessListenerDialog from './ProcessListenerDialog.vue'
defineOptions({ name: 'ElementListeners' })
const props = defineProps({
id: String,
type: String
id: String,
type: String
})
const prefix = inject('prefix')
const width = inject('width')
@@ -254,147 +306,158 @@ const listenerFieldFormRef = ref()
const bpmnInstances = () => (window as any)?.bpmnInstances
const resetListenersList = () => {
bpmnElement.value = bpmnInstances().bpmnElement
otherExtensionList.value = []
bpmnElementListeners.value =
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
ex => ex.$type === `${prefix}:ExecutionListener`
) ?? []
elementListenersList.value = bpmnElementListeners.value.map(listener => initListenerType(listener))
bpmnElement.value = bpmnInstances().bpmnElement
otherExtensionList.value = []
bpmnElementListeners.value =
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
(ex) => ex.$type === `${prefix}:ExecutionListener`
) ?? []
elementListenersList.value = bpmnElementListeners.value.map((listener) =>
initListenerType(listener)
)
}
// 打开 监听器详情 侧边栏
const openListenerForm = (listener, index?) => {
// debugger
if (listener) {
listenerForm.value = initListenerForm(listener)
editingListenerIndex.value = index
} else {
listenerForm.value = {}
editingListenerIndex.value = -1 // 标记为新增
// debugger
if (listener) {
listenerForm.value = initListenerForm(listener)
editingListenerIndex.value = index
} else {
listenerForm.value = {}
editingListenerIndex.value = -1 // 标记为新增
}
if (listener && listener.fields) {
fieldsListOfListener.value = listener.fields.map((field) => ({
...field,
fieldType: field.string ? 'string' : 'expression'
}))
} else {
fieldsListOfListener.value = []
listenerForm.value['fields'] = []
}
// 打开侧边栏并清楚验证状态
listenerFormModelVisible.value = true
nextTick(() => {
if (listenerFormRef.value) {
listenerFormRef.value.clearValidate()
}
if (listener && listener.fields) {
fieldsListOfListener.value = listener.fields.map(field => ({
...field,
fieldType: field.string ? 'string' : 'expression'
}))
} else {
fieldsListOfListener.value = []
listenerForm.value['fields'] = []
}
// 打开侧边栏并清楚验证状态
listenerFormModelVisible.value = true
nextTick(() => {
if (listenerFormRef.value) {
listenerFormRef.value.clearValidate()
}
})
})
}
// 打开监听器字段编辑弹窗
const openListenerFieldForm = (field, index?) => {
listenerFieldForm.value = field ? JSON.parse(JSON.stringify(field)) : {}
editingListenerFieldIndex.value = field ? index : -1
listenerFieldFormModelVisible.value = true
nextTick(() => {
if (listenerFieldFormRef.value) {
listenerFieldFormRef.value.clearValidate()
}
})
listenerFieldForm.value = field ? JSON.parse(JSON.stringify(field)) : {}
editingListenerFieldIndex.value = field ? index : -1
listenerFieldFormModelVisible.value = true
nextTick(() => {
if (listenerFieldFormRef.value) {
listenerFieldFormRef.value.clearValidate()
}
})
}
// 保存监听器注入字段
const saveListenerFiled = async () => {
// debugger
let validateStatus = await listenerFieldFormRef.value.validate()
if (!validateStatus) return // 验证不通过直接返回
if (editingListenerFieldIndex.value === -1) {
fieldsListOfListener.value.push(listenerFieldForm.value)
listenerForm.value.fields.push(listenerFieldForm.value)
} else {
fieldsListOfListener.value.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
listenerForm.value.fields.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
}
listenerFieldFormModelVisible.value = false
nextTick(() => {
listenerFieldForm.value = {}
})
// debugger
let validateStatus = await listenerFieldFormRef.value.validate()
if (!validateStatus) return // 验证不通过直接返回
if (editingListenerFieldIndex.value === -1) {
fieldsListOfListener.value.push(listenerFieldForm.value)
listenerForm.value.fields.push(listenerFieldForm.value)
} else {
fieldsListOfListener.value.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
listenerForm.value.fields.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
}
listenerFieldFormModelVisible.value = false
nextTick(() => {
listenerFieldForm.value = {}
})
}
// 移除监听器字段
const removeListenerField = index => {
// debugger
ElMessageBox.confirm('确认移除该字段吗？', '提示', {
confirmButtonText: '确 认',
cancelButtonText: '取 消'
})
.then(() => {
fieldsListOfListener.value.splice(index, 1)
listenerForm.value.fields.splice(index, 1)
})
.catch(() => console.info('操作取消'))
const removeListenerField = (index) => {
// debugger
ElMessageBox.confirm('确认移除该字段吗？', '提示', {
confirmButtonText: '确 认',
cancelButtonText: '取 消'
})
.then(() => {
fieldsListOfListener.value.splice(index, 1)
listenerForm.value.fields.splice(index, 1)
})
.catch(() => console.info('操作取消'))
}
// 移除监听器
const removeListener = index => {
debugger
ElMessageBox.confirm('确认移除该监听器吗？', '提示', {
confirmButtonText: '确 认',
cancelButtonText: '取 消'
})
.then(() => {
bpmnElementListeners.value.splice(index, 1)
elementListenersList.value.splice(index, 1)
updateElementExtensions(bpmnElement.value, otherExtensionList.value.concat(bpmnElementListeners.value))
})
.catch(() => console.info('操作取消'))
const removeListener = (index) => {
debugger
ElMessageBox.confirm('确认移除该监听器吗？', '提示', {
confirmButtonText: '确 认',
cancelButtonText: '取 消'
})
.then(() => {
bpmnElementListeners.value.splice(index, 1)
elementListenersList.value.splice(index, 1)
updateElementExtensions(
bpmnElement.value,
otherExtensionList.value.concat(bpmnElementListeners.value)
)
})
.catch(() => console.info('操作取消'))
}
// 保存监听器配置
const saveListenerConfig = async () => {
// debugger
let validateStatus = await listenerFormRef.value.validate()
if (!validateStatus) return // 验证不通过直接返回
const listenerObject = createListenerObject(listenerForm.value, false, prefix)
if (editingListenerIndex.value === -1) {
bpmnElementListeners.value.push(listenerObject)
elementListenersList.value.push(listenerForm.value)
} else {
bpmnElementListeners.value.splice(editingListenerIndex.value, 1, listenerObject)
elementListenersList.value.splice(editingListenerIndex.value, 1, listenerForm.value)
}
// 保存其他配置
otherExtensionList.value =
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
ex => ex.$type !== `${prefix}:ExecutionListener`
) ?? []
updateElementExtensions(bpmnElement.value, otherExtensionList.value.concat(bpmnElementListeners.value))
// 4. 隐藏侧边栏
listenerFormModelVisible.value = false
listenerForm.value = {}
// debugger
let validateStatus = await listenerFormRef.value.validate()
if (!validateStatus) return // 验证不通过直接返回
const listenerObject = createListenerObject(listenerForm.value, false, prefix)
if (editingListenerIndex.value === -1) {
bpmnElementListeners.value.push(listenerObject)
elementListenersList.value.push(listenerForm.value)
} else {
bpmnElementListeners.value.splice(editingListenerIndex.value, 1, listenerObject)
elementListenersList.value.splice(editingListenerIndex.value, 1, listenerForm.value)
}
// 保存其他配置
otherExtensionList.value =
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
(ex) => ex.$type !== `${prefix}:ExecutionListener`
) ?? []
updateElementExtensions(
bpmnElement.value,
otherExtensionList.value.concat(bpmnElementListeners.value)
)
// 4. 隐藏侧边栏
listenerFormModelVisible.value = false
listenerForm.value = {}
}
// 打开监听器弹窗
const processListenerDialogRef = ref()
const openProcessListenerDialog = async () => {
processListenerDialogRef.value.open('execution')
processListenerDialogRef.value.open('execution')
}
const selectProcessListener = listener => {
const listenerForm = initListenerForm2(listener)
const listenerObject = createListenerObject(listenerForm, false, prefix)
bpmnElementListeners.value.push(listenerObject)
elementListenersList.value.push(listenerForm)
const selectProcessListener = (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))
// 保存其他配置
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 => {
val &&
val.length &&
nextTick(() => {
resetListenersList()
})
(val) => {
val &&
val.length &&
nextTick(() => {
resetListenersList()
})
},
{ immediate: true }
)

121
src/components/bpmnProcessDesigner/package/penal/listeners/ProcessListenerDialog.vue
View File

@@ -1,81 +1,86 @@
<!-- 执行器选择 -->
<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="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"
<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='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'
/>
</ContentWrap>
</Dialog>
</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 { onMounted, reactive, ref, watch, onBeforeUnmount } from 'vue'
// import { ProcessListenerApi, ProcessListenerVO } from '@/api/bpm/processListener'
// import { DICT_TYPE } from '@/utils/dict'
// import { CommonStatusEnum } from '@/utils/constants'
<script setup lang='ts'>
import { ProcessListenerApi, ProcessListenerVO } from '@/api/bpm/processListener'
import { DICT_TYPE } from '@/utils/dict'
import { CommonStatusEnum } from '@/utils/constants'
import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage'
import DictTag from '@/components/DictTag/src/DictTag.vue'
import ContentWrap from '@/components/ContentWrap/src/ContentWrap.vue'
import Dialog from '@/components/Dialog/src/Dialog.vue'
/** BPM 流程 表单 */
defineOptions({ name: 'ProcessListenerDialog' })
const dialogVisible = ref(false) // 弹窗的是否展示
const loading = ref(true) // 列表的加载中
const list = ref([]) // 列表的数据
const list = ref<ProcessListenerVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
type: undefined
// status: CommonStatusEnum.ENABLE
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
}
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)
const select = async (row) => {
dialogVisible.value = false
// 发送操作成功的事件
emit('select', row)
}
</script>

811
src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
View File

@@ -1,288 +1,320 @@
<template>
<div class="panel-tab__content">
<el-table :data="elementListenersList" size="small" border>
<el-table-column label="序号" width="50px" type="index" />
<el-table-column
label="事件类型"
min-width="80px"
show-overflow-tooltip
:formatter="row => listenerEventTypeObject[row.event]"
/>
<el-table-column label="事件id" min-width="80px" prop="id" show-overflow-tooltip />
<el-table-column
label="监听器类型"
min-width="80px"
show-overflow-tooltip
:formatter="row => listenerTypeObject[row.listenerType]"
/>
<el-table-column label="操作" width="90px">
<template #default="scope">
<el-button size="small" link @click="openListenerForm(scope.row, scope.$index)">编辑</el-button>
<el-divider direction="vertical" />
<el-button
size="small"
link
style="color: #ff4d4f"
@click="removeListener(scope.row, scope.$index)"
>
移除
</el-button>
</template>
</el-table-column>
</el-table>
<div class="element-drawer__button">
<el-Button size="small" type="primary" icon="el-icon-Plus" @click="openListenerForm(null)">
添加监听器
</el-Button>
<el-button type="success" icon="el-icon-Select" size="small" @click="openProcessListenerDialog">
选择监听器
</el-button>
</div>
<!-- 监听器 编辑/创建 部分 -->
<el-drawer
v-model="listenerFormModelVisible"
title="任务监听器"
:size="`${width}px`"
append-to-body
destroy-on-close
>
<el-form size="small" :model="listenerForm" label-width="96px" ref="listenerFormRef">
<el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-select v-model="listenerForm.event">
<el-option
v-for="i in Object.keys(listenerEventTypeObject)"
:key="i"
:label="listenerEventTypeObject[i]"
:value="i"
/>
</el-select>
</el-form-item>
<el-form-item label="监听器ID" prop="id" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-input v-model="listenerForm.id" clearable />
</el-form-item>
<el-form-item
label="监听器类型"
prop="listenerType"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-select v-model="listenerForm.listenerType">
<el-option
v-for="i in Object.keys(listenerTypeObject)"
:key="i"
:label="listenerTypeObject[i]"
:value="i"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'classListener'"
label="Java类"
prop="class"
key="listener-class"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerForm.class" clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'expressionListener'"
label="表达式"
prop="expression"
key="listener-expression"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerForm.expression" clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'delegateExpressionListener'"
label="代理表达式"
prop="delegateExpression"
key="listener-delegate"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerForm.delegateExpression" clearable />
</el-form-item>
<template v-if="listenerForm.listenerType === 'scriptListener'">
<el-form-item
label="脚本格式"
prop="scriptFormat"
key="listener-script-format"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
>
<el-input v-model="listenerForm.scriptFormat" clearable />
</el-form-item>
<el-form-item
label="脚本类型"
prop="scriptType"
key="listener-script-type"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
>
<el-select v-model="listenerForm.scriptType">
<el-option label="内联脚本" value="inlineScript" />
<el-option label="外部脚本" value="externalScript" />
</el-select>
</el-form-item>
<el-form-item
v-if="listenerForm.scriptType === 'inlineScript'"
label="脚本内容"
prop="value"
key="listener-script"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
>
<el-input v-model="listenerForm.value" clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.scriptType === 'externalScript'"
label="资源地址"
prop="resource"
key="listener-resource"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
>
<el-input v-model="listenerForm.resource" clearable />
</el-form-item>
</template>
<template v-if="listenerForm.event === 'timeout'">
<el-form-item label="定时器类型" prop="eventDefinitionType" key="eventDefinitionType">
<el-select v-model="listenerForm.eventDefinitionType">
<el-option label="日期" value="date" />
<el-option label="持续时长" value="duration" />
<el-option label="循环" value="cycle" />
<el-option label="无" value="null" />
</el-select>
</el-form-item>
<el-form-item
v-if="!!listenerForm.eventDefinitionType && listenerForm.eventDefinitionType !== 'null'"
label="定时器"
prop="eventTimeDefinitions"
key="eventTimeDefinitions"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写定时器配置' }"
>
<el-input v-model="listenerForm.eventTimeDefinitions" clearable />
</el-form-item>
</template>
</el-form>
<el-divider />
<p class="listener-filed__title">
<span>
<Icon icon="ep:menu" />
注入字段：
</span>
<el-button size="small" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
</p>
<el-table :data="fieldsListOfListener" size="small" max-height="240" fit border style="flex: none">
<el-table-column label="序号" width="50px" type="index" />
<el-table-column label="字段名称" min-width="100px" prop="name" />
<el-table-column
label="字段类型"
min-width="80px"
show-overflow-tooltip
:formatter="row => fieldTypeObject[row.fieldType]"
/>
<el-table-column
label="字段值/表达式"
min-width="100px"
show-overflow-tooltip
:formatter="row => row.string || row.expression"
/>
<el-table-column label="操作" width="100px">
<template #default="scope">
<el-button size="small" link @click="openListenerFieldForm(scope.row, scope.$index)">
编辑
</el-button>
<el-divider direction="vertical" />
<el-button
size="small"
link
style="color: #ff4d4f"
@click="removeListenerField(scope.row, scope.$index)"
>
移除
</el-button>
</template>
</el-table-column>
</el-table>
<div class="element-drawer__button">
<el-button size="small" @click="listenerFormModelVisible = false">取 消</el-button>
<el-button size="small" type="primary" @click="saveListenerConfig">保 存</el-button>
</div>
</el-drawer>
<!-- 注入西段 编辑/创建 部分 -->
<el-dialog
title="字段配置"
v-model="listenerFieldFormModelVisible"
width="600px"
append-to-body
destroy-on-close
>
<el-form
:model="listenerFieldForm"
size="small"
label-width="96px"
ref="listenerFieldFormRef"
style="height: 136px"
>
<el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-input v-model="listenerFieldForm.name" clearable />
</el-form-item>
<el-form-item
label="字段类型："
prop="fieldType"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-select v-model="listenerFieldForm.fieldType">
<el-option
v-for="i in Object.keys(fieldTypeObject)"
:key="i"
:label="fieldTypeObject[i]"
:value="i"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="listenerFieldForm.fieldType === 'string'"
label="字段值："
prop="string"
key="field-string"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerFieldForm.string" clearable />
</el-form-item>
<el-form-item
v-if="listenerFieldForm.fieldType === 'expression'"
label="表达式："
prop="expression"
key="field-expression"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerFieldForm.expression" clearable />
</el-form-item>
</el-form>
<template #footer>
<el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
<el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
</template>
</el-dialog>
<div class="panel-tab__content">
<el-table :data="elementListenersList" size="small" border>
<el-table-column label="序号" width="50px" type="index" />
<el-table-column
label="事件类型"
min-width="80px"
show-overflow-tooltip
:formatter="(row) => listenerEventTypeObject[row.event]"
/>
<el-table-column label="事件id" min-width="80px" prop="id" show-overflow-tooltip />
<el-table-column
label="监听器类型"
min-width="80px"
show-overflow-tooltip
:formatter="(row) => listenerTypeObject[row.listenerType]"
/>
<el-table-column label="操作" width="90px">
<template #default="scope">
<el-button size="small" link @click="openListenerForm(scope.row, scope.$index)"
>编辑</el-button
>
<el-divider direction="vertical" />
<el-button
size="small"
link
style="color: #ff4d4f"
@click="removeListener(scope.row, scope.$index)"
>移除</el-button
>
</template>
</el-table-column>
</el-table>
<div class="element-drawer__button">
<XButton
size="small"
type="primary"
preIcon="ep:plus"
title="添加监听器"
@click="openListenerForm(null)"
/>
<XButton
type="success"
preIcon="ep:select"
title="选择监听器"
size="small"
@click="openProcessListenerDialog"
/>
</div>
<!-- 选择弹窗 -->
<!-- <ProcessListenerDialog ref="processListenerDialogRef" @select="selectProcessListener" /> -->
<!-- 监听器 编辑/创建 部分 -->
<el-drawer
v-model="listenerFormModelVisible"
title="任务监听器"
:size="`${width}px`"
append-to-body
destroy-on-close
>
<el-form size="small" :model="listenerForm" label-width="96px" ref="listenerFormRef">
<el-form-item
label="事件类型"
prop="event"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-select v-model="listenerForm.event">
<el-option
v-for="i in Object.keys(listenerEventTypeObject)"
:key="i"
:label="listenerEventTypeObject[i]"
:value="i"
/>
</el-select>
</el-form-item>
<el-form-item
label="监听器ID"
prop="id"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerForm.id" clearable />
</el-form-item>
<el-form-item
label="监听器类型"
prop="listenerType"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-select v-model="listenerForm.listenerType">
<el-option
v-for="i in Object.keys(listenerTypeObject)"
:key="i"
:label="listenerTypeObject[i]"
:value="i"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'classListener'"
label="Java类"
prop="class"
key="listener-class"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerForm.class" clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'expressionListener'"
label="表达式"
prop="expression"
key="listener-expression"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerForm.expression" clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'delegateExpressionListener'"
label="代理表达式"
prop="delegateExpression"
key="listener-delegate"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerForm.delegateExpression" clearable />
</el-form-item>
<template v-if="listenerForm.listenerType === 'scriptListener'">
<el-form-item
label="脚本格式"
prop="scriptFormat"
key="listener-script-format"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
>
<el-input v-model="listenerForm.scriptFormat" clearable />
</el-form-item>
<el-form-item
label="脚本类型"
prop="scriptType"
key="listener-script-type"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
>
<el-select v-model="listenerForm.scriptType">
<el-option label="内联脚本" value="inlineScript" />
<el-option label="外部脚本" value="externalScript" />
</el-select>
</el-form-item>
<el-form-item
v-if="listenerForm.scriptType === 'inlineScript'"
label="脚本内容"
prop="value"
key="listener-script"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
>
<el-input v-model="listenerForm.value" clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.scriptType === 'externalScript'"
label="资源地址"
prop="resource"
key="listener-resource"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
>
<el-input v-model="listenerForm.resource" clearable />
</el-form-item>
</template>
<template v-if="listenerForm.event === 'timeout'">
<el-form-item label="定时器类型" prop="eventDefinitionType" key="eventDefinitionType">
<el-select v-model="listenerForm.eventDefinitionType">
<el-option label="日期" value="date" />
<el-option label="持续时长" value="duration" />
<el-option label="循环" value="cycle" />
<el-option label="无" value="null" />
</el-select>
</el-form-item>
<el-form-item
v-if="!!listenerForm.eventDefinitionType && listenerForm.eventDefinitionType !== 'null'"
label="定时器"
prop="eventTimeDefinitions"
key="eventTimeDefinitions"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写定时器配置' }"
>
<el-input v-model="listenerForm.eventTimeDefinitions" clearable />
</el-form-item>
</template>
</el-form>
<el-divider />
<p class="listener-filed__title">
<span><Icon icon="ep:menu" />注入字段：</span>
<el-button size="small" type="primary" @click="openListenerFieldForm(null)"
>添加字段</el-button
>
</p>
<el-table
:data="fieldsListOfListener"
size="small"
max-height="240"
fit
border
style="flex: none"
>
<el-table-column label="序号" width="50px" type="index" />
<el-table-column label="字段名称" min-width="100px" prop="name" />
<el-table-column
label="字段类型"
min-width="80px"
show-overflow-tooltip
:formatter="(row) => fieldTypeObject[row.fieldType]"
/>
<el-table-column
label="字段值/表达式"
min-width="100px"
show-overflow-tooltip
:formatter="(row) => row.string || row.expression"
/>
<el-table-column label="操作" width="100px">
<template #default="scope">
<el-button size="small" link @click="openListenerFieldForm(scope.row, scope.$index)"
>编辑</el-button
>
<el-divider direction="vertical" />
<el-button
size="small"
link
style="color: #ff4d4f"
@click="removeListenerField(scope.row, scope.$index)"
>移除</el-button
>
</template>
</el-table-column>
</el-table>
<div class="element-drawer__button">
<el-button size="small" @click="listenerFormModelVisible = false">取 消</el-button>
<el-button size="small" type="primary" @click="saveListenerConfig">保 存</el-button>
</div>
</el-drawer>
<!-- 注入西段 编辑/创建 部分 -->
<el-dialog
title="字段配置"
v-model="listenerFieldFormModelVisible"
width="600px"
append-to-body
destroy-on-close
>
<el-form
:model="listenerFieldForm"
size="small"
label-width="96px"
ref="listenerFieldFormRef"
style="height: 136px"
>
<el-form-item
label="字段名称："
prop="name"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerFieldForm.name" clearable />
</el-form-item>
<el-form-item
label="字段类型："
prop="fieldType"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-select v-model="listenerFieldForm.fieldType">
<el-option
v-for="i in Object.keys(fieldTypeObject)"
:key="i"
:label="fieldTypeObject[i]"
:value="i"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="listenerFieldForm.fieldType === 'string'"
label="字段值："
prop="string"
key="field-string"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerFieldForm.string" clearable />
</el-form-item>
<el-form-item
v-if="listenerFieldForm.fieldType === 'expression'"
label="表达式："
prop="expression"
key="field-expression"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerFieldForm.expression" clearable />
</el-form-item>
</el-form>
<template #footer>
<el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
<el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
</template>
</el-dialog>
</div>
<!-- 选择弹窗 -->
<ProcessListenerDialog ref="processListenerDialogRef" @select="selectProcessListener" />
</template>
<script lang="ts" setup>
import { onMounted, provide, ref, watch, nextTick, inject } from 'vue'
import { ElMessageBox } from 'element-plus'
import { createListenerObject, updateElementExtensions } from '../../utils'
import { initListenerForm, initListenerType, eventType, listenerType, fieldType, initListenerForm2 } from './utilSelf'
// import ProcessListenerDialog from '@/components/bpmnProcessDesigner/package/penal/listeners/ProcessListenerDialog.vue'
import {
initListenerForm,
initListenerType,
eventType,
listenerType,
fieldType,
initListenerForm2
} from './utilSelf'
import ProcessListenerDialog from '@/components/bpmnProcessDesigner/package/penal/listeners/ProcessListenerDialog.vue'
defineOptions({ name: 'UserTaskListeners' })
const props = defineProps({
id: String,
type: String
id: String,
type: String
})
const prefix = inject('prefix')
const width = inject('width')
@@ -305,144 +337,155 @@ const listenerFieldFormRef = ref()
const bpmnInstances = () => (window as any)?.bpmnInstances
const resetListenersList = () => {
console.log(
bpmnInstances().bpmnElement,
'window.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElement'
)
bpmnElement.value = bpmnInstances().bpmnElement
otherExtensionList.value = []
bpmnElementListeners.value =
bpmnElement.value.businessObject?.extensionElements?.values.filter(
ex => ex.$type === `${prefix}:TaskListener`
) ?? []
elementListenersList.value = bpmnElementListeners.value.map(listener => initListenerType(listener))
console.log(
bpmnInstances().bpmnElement,
'window.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElement'
)
bpmnElement.value = bpmnInstances().bpmnElement
otherExtensionList.value = []
bpmnElementListeners.value =
bpmnElement.value.businessObject?.extensionElements?.values.filter(
(ex) => ex.$type === `${prefix}:TaskListener`
) ?? []
elementListenersList.value = bpmnElementListeners.value.map((listener) =>
initListenerType(listener)
)
}
const openListenerForm = (listener, index?) => {
if (listener) {
listenerForm.value = initListenerForm(listener)
editingListenerIndex.value = index
} else {
listenerForm.value = {}
editingListenerIndex.value = -1 // 标记为新增
}
if (listener && listener.fields) {
fieldsListOfListener.value = listener.fields.map(field => ({
...field,
fieldType: field.string ? 'string' : 'expression'
}))
} else {
fieldsListOfListener.value = []
listenerForm.value['fields'] = []
}
// 打开侧边栏并清楚验证状态
listenerFormModelVisible.value = true
nextTick(() => {
if (listenerFormRef.value) listenerFormRef.value.clearValidate()
})
if (listener) {
listenerForm.value = initListenerForm(listener)
editingListenerIndex.value = index
} else {
listenerForm.value = {}
editingListenerIndex.value = -1 // 标记为新增
}
if (listener && listener.fields) {
fieldsListOfListener.value = listener.fields.map((field) => ({
...field,
fieldType: field.string ? 'string' : 'expression'
}))
} else {
fieldsListOfListener.value = []
listenerForm.value['fields'] = []
}
// 打开侧边栏并清楚验证状态
listenerFormModelVisible.value = true
nextTick(() => {
if (listenerFormRef.value) listenerFormRef.value.clearValidate()
})
}
// 移除监听器
const removeListener = (listener, index?) => {
console.log(listener, 'listener')
ElMessageBox.confirm('确认移除该监听器吗？', '提示', {
confirmButtonText: '确 认',
cancelButtonText: '取 消'
console.log(listener, 'listener')
ElMessageBox.confirm('确认移除该监听器吗？', '提示', {
confirmButtonText: '确 认',
cancelButtonText: '取 消'
})
.then(() => {
bpmnElementListeners.value.splice(index, 1)
elementListenersList.value.splice(index, 1)
updateElementExtensions(
bpmnElement.value,
otherExtensionList.value.concat(bpmnElementListeners.value)
)
})
.then(() => {
bpmnElementListeners.value.splice(index, 1)
elementListenersList.value.splice(index, 1)
updateElementExtensions(bpmnElement.value, otherExtensionList.value.concat(bpmnElementListeners.value))
})
.catch(() => console.info('操作取消'))
.catch(() => console.info('操作取消'))
}
// 保存监听器
const saveListenerConfig = async () => {
let validateStatus = await listenerFormRef.value.validate()
if (!validateStatus) return // 验证不通过直接返回
const listenerObject = createListenerObject(listenerForm.value, true, prefix)
if (editingListenerIndex.value === -1) {
bpmnElementListeners.value.push(listenerObject)
elementListenersList.value.push(listenerForm.value)
} else {
bpmnElementListeners.value.splice(editingListenerIndex.value, 1, listenerObject)
elementListenersList.value.splice(editingListenerIndex.value, 1, listenerForm.value)
}
// 保存其他配置
otherExtensionList.value =
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
ex => ex.$type !== `${prefix}:TaskListener`
) ?? []
updateElementExtensions(bpmnElement.value, otherExtensionList.value.concat(bpmnElementListeners.value))
// 4. 隐藏侧边栏
listenerFormModelVisible.value = false
listenerForm.value = {}
let validateStatus = await listenerFormRef.value.validate()
if (!validateStatus) return // 验证不通过直接返回
const listenerObject = createListenerObject(listenerForm.value, true, prefix)
if (editingListenerIndex.value === -1) {
bpmnElementListeners.value.push(listenerObject)
elementListenersList.value.push(listenerForm.value)
} else {
bpmnElementListeners.value.splice(editingListenerIndex.value, 1, listenerObject)
elementListenersList.value.splice(editingListenerIndex.value, 1, listenerForm.value)
}
// 保存其他配置
otherExtensionList.value =
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
(ex) => ex.$type !== `${prefix}:TaskListener`
) ?? []
updateElementExtensions(
bpmnElement.value,
otherExtensionList.value.concat(bpmnElementListeners.value)
)
// 4. 隐藏侧边栏
listenerFormModelVisible.value = false
listenerForm.value = {}
}
// 打开监听器字段编辑弹窗
const openListenerFieldForm = (field, index?) => {
listenerFieldForm.value = field ? JSON.parse(JSON.stringify(field)) : {}
editingListenerFieldIndex.value = field ? index : -1
listenerFieldFormModelVisible.value = true
nextTick(() => {
if (listenerFieldFormRef.value) listenerFieldFormRef.value.clearValidate()
})
listenerFieldForm.value = field ? JSON.parse(JSON.stringify(field)) : {}
editingListenerFieldIndex.value = field ? index : -1
listenerFieldFormModelVisible.value = true
nextTick(() => {
if (listenerFieldFormRef.value) listenerFieldFormRef.value.clearValidate()
})
}
// 保存监听器注入字段
const saveListenerFiled = async () => {
let validateStatus = await listenerFieldFormRef.value.validate()
if (!validateStatus) return // 验证不通过直接返回
if (editingListenerFieldIndex.value === -1) {
fieldsListOfListener.value.push(listenerFieldForm.value)
listenerForm.value.fields.push(listenerFieldForm.value)
} else {
fieldsListOfListener.value.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
listenerForm.value.fields.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
}
listenerFieldFormModelVisible.value = false
nextTick(() => {
listenerFieldForm.value = {}
})
let validateStatus = await listenerFieldFormRef.value.validate()
if (!validateStatus) return // 验证不通过直接返回
if (editingListenerFieldIndex.value === -1) {
fieldsListOfListener.value.push(listenerFieldForm.value)
listenerForm.value.fields.push(listenerFieldForm.value)
} else {
fieldsListOfListener.value.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
listenerForm.value.fields.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
}
listenerFieldFormModelVisible.value = false
nextTick(() => {
listenerFieldForm.value = {}
})
}
// 移除监听器字段
const removeListenerField = (field, index) => {
console.log(field, 'field')
ElMessageBox.confirm('确认移除该字段吗？', '提示', {
confirmButtonText: '确 认',
cancelButtonText: '取 消'
console.log(field, 'field')
ElMessageBox.confirm('确认移除该字段吗？', '提示', {
confirmButtonText: '确 认',
cancelButtonText: '取 消'
})
.then(() => {
fieldsListOfListener.value.splice(index, 1)
listenerForm.value.fields.splice(index, 1)
})
.then(() => {
fieldsListOfListener.value.splice(index, 1)
listenerForm.value.fields.splice(index, 1)
})
.catch(() => console.info('操作取消'))
.catch(() => console.info('操作取消'))
}
// 打开监听器弹窗
const processListenerDialogRef = ref()
const openProcessListenerDialog = async () => {
processListenerDialogRef.value.open('task')
processListenerDialogRef.value.open('task')
}
const selectProcessListener = listener => {
const listenerForm = initListenerForm2(listener)
const listenerObject = createListenerObject(listenerForm, true, prefix)
bpmnElementListeners.value.push(listenerObject)
elementListenersList.value.push(listenerForm)
const selectProcessListener = (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))
// 保存其他配置
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 => {
val &&
val.length &&
nextTick(() => {
resetListenersList()
})
},
{ immediate: true }
() => props.id,
(val) => {
val &&
val.length &&
nextTick(() => {
resetListenersList()
})
},
{ immediate: true }
)
</script>

1
src/components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue
View File

@@ -73,7 +73,6 @@
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, watch, onBeforeUnmount,toRaw,nextTick } from 'vue'
defineOptions({ name: 'ElementMultiInstance' })
const props = defineProps({

1
src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue
View File

@@ -18,7 +18,6 @@
<script lang="ts" setup>
defineOptions({ name: 'ElementOtherConfig' })
import { onMounted, reactive, ref, watch, onBeforeUnmount,toRaw,nextTick } from 'vue'
const props = defineProps({
id: String
})

248
src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
View File

@@ -1,52 +1,65 @@
<template>
<div class="panel-tab__content">
<el-table :data="elementPropertyList" max-height="240" fit border>
<el-table-column label="序号" width="50px" type="index" />
<el-table-column label="属性名" prop="name" min-width="100px" show-overflow-tooltip />
<el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
<el-table-column label="操作" width="110px">
<template #default="scope">
<el-button link @click="openAttributesForm(scope.row, scope.$index)" size="small">编辑</el-button>
<el-divider direction="vertical" />
<el-button
link
size="small"
style="color: #ff4d4f"
@click="removeAttributes(scope.row, scope.$index)"
>
移除
</el-button>
</template>
</el-table-column>
</el-table>
<div class="element-drawer__button">
<el-button type="primary" icon="el-icon-Plus" @click="openAttributesForm(null, -1)">添加属性</el-button>
</div>
<el-dialog v-model="propertyFormModelVisible" title="属性配置" width="600px" append-to-body destroy-on-close>
<el-form :model="propertyForm" label-width="80px" ref="attributeFormRef">
<el-form-item label="属性名：" prop="name">
<el-input v-model="propertyForm.name" clearable />
</el-form-item>
<el-form-item label="属性值：" prop="value">
<el-input v-model="propertyForm.value" clearable />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="propertyFormModelVisible = false">取 消</el-button>
<el-button type="primary" @click="saveAttribute">确 定</el-button>
</template>
</el-dialog>
<div class="panel-tab__content">
<el-table :data="elementPropertyList" max-height="240" fit border>
<el-table-column label="序号" width="50px" type="index" />
<el-table-column label="属性名" prop="name" min-width="100px" show-overflow-tooltip />
<el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
<el-table-column label="操作" width="110px">
<template #default="scope">
<el-button link @click="openAttributesForm(scope.row, scope.$index)" size="small">
编辑
</el-button>
<el-divider direction="vertical" />
<el-button
link
size="small"
style="color: #ff4d4f"
@click="removeAttributes(scope.row, scope.$index)"
>
移除
</el-button>
</template>
</el-table-column>
</el-table>
<div class="element-drawer__button">
<XButton
type="primary"
preIcon="ep:plus"
title="添加属性"
@click="openAttributesForm(null, -1)"
/>
</div>
<el-dialog
v-model="propertyFormModelVisible"
title="属性配置"
width="600px"
append-to-body
destroy-on-close
>
<el-form :model="propertyForm" label-width="80px" ref="attributeFormRef">
<el-form-item label="属性名：" prop="name">
<el-input v-model="propertyForm.name" clearable />
</el-form-item>
<el-form-item label="属性值：" prop="value">
<el-input v-model="propertyForm.value" clearable />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="propertyFormModelVisible = false">取 消</el-button>
<el-button type="primary" @click="saveAttribute">确 定</el-button>
</template>
</el-dialog>
</div>
</template>
<script lang="ts" setup>
import { ref, watch, nextTick, inject, toRaw } from 'vue'
import { ElMessageBox } from 'element-plus'
import XButton from '@/components/XButton/src/XButton.vue'
defineOptions({ name: 'ElementProperties' })
const props = defineProps({
id: String,
type: String
id: String,
type: String
})
const prefix = inject('prefix')
// const width = inject('width')
@@ -63,92 +76,95 @@ const attributeFormRef = ref()
const bpmnInstances = () => (window as any)?.bpmnInstances
const resetAttributesList = () => {
console.log(window, 'windowwindowwindowwindowwindowwindowwindow')
bpmnElement.value = bpmnInstances().bpmnElement
otherExtensionList.value = [] // 其他扩展配置
bpmnElementProperties.value =
// bpmnElement.value.businessObject?.extensionElements?.filter((ex) => {
bpmnElement.value.businessObject?.extensionElements?.values.filter(ex => {
if (ex.$type !== `${prefix}:Properties`) {
otherExtensionList.value.push(ex)
}
return ex.$type === `${prefix}:Properties`
}) ?? []
console.log(window, 'windowwindowwindowwindowwindowwindowwindow')
bpmnElement.value = bpmnInstances().bpmnElement
otherExtensionList.value = [] // 其他扩展配置
bpmnElementProperties.value =
// bpmnElement.value.businessObject?.extensionElements?.filter((ex) => {
bpmnElement.value.businessObject?.extensionElements?.values.filter((ex) => {
if (ex.$type !== `${prefix}:Properties`) {
otherExtensionList.value.push(ex)
}
return ex.$type === `${prefix}:Properties`
}) ?? []
// 保存所有的 扩展属性字段
bpmnElementPropertyList.value = bpmnElementProperties.value.reduce((pre, current) => pre.concat(current.values), [])
// 复制 显示
elementPropertyList.value = JSON.parse(JSON.stringify(bpmnElementPropertyList.value ?? []))
// 保存所有的 扩展属性字段
bpmnElementPropertyList.value = bpmnElementProperties.value.reduce(
(pre, current) => pre.concat(current.values),
[]
)
// 复制 显示
elementPropertyList.value = JSON.parse(JSON.stringify(bpmnElementPropertyList.value ?? []))
}
const openAttributesForm = (attr, index) => {
editingPropertyIndex.value = index
propertyForm.value = index === -1 ? {} : JSON.parse(JSON.stringify(attr))
propertyFormModelVisible.value = true
nextTick(() => {
if (attributeFormRef.value) attributeFormRef.value.clearValidate()
})
editingPropertyIndex.value = index
propertyForm.value = index === -1 ? {} : JSON.parse(JSON.stringify(attr))
propertyFormModelVisible.value = true
nextTick(() => {
if (attributeFormRef.value) attributeFormRef.value.clearValidate()
})
}
const removeAttributes = (attr, index) => {
console.log(attr, 'attr')
ElMessageBox.confirm('确认移除该属性吗？', '提示', {
confirmButtonText: '确 认',
cancelButtonText: '取 消'
console.log(attr, 'attr')
ElMessageBox.confirm('确认移除该属性吗？', '提示', {
confirmButtonText: '确 认',
cancelButtonText: '取 消'
})
.then(() => {
elementPropertyList.value.splice(index, 1)
bpmnElementPropertyList.value.splice(index, 1)
// 新建一个属性字段的保存列表
const propertiesObject = bpmnInstances().moddle.create(`${prefix}:Properties`, {
values: bpmnElementPropertyList.value
})
updateElementExtensions(propertiesObject)
resetAttributesList()
})
.then(() => {
elementPropertyList.value.splice(index, 1)
bpmnElementPropertyList.value.splice(index, 1)
// 新建一个属性字段的保存列表
const propertiesObject = bpmnInstances().moddle.create(`${prefix}:Properties`, {
values: bpmnElementPropertyList.value
})
updateElementExtensions(propertiesObject)
resetAttributesList()
})
.catch(() => console.info('操作取消'))
.catch(() => console.info('操作取消'))
}
const saveAttribute = () => {
console.log(propertyForm.value, 'propertyForm.value')
const { name, value } = propertyForm.value
if (editingPropertyIndex.value !== -1) {
bpmnInstances().modeling.updateModdleProperties(
toRaw(bpmnElement.value),
toRaw(bpmnElementPropertyList.value)[toRaw(editingPropertyIndex.value)],
{
name,
value
}
)
} else {
// 新建属性字段
const newPropertyObject = bpmnInstances().moddle.create(`${prefix}:Property`, {
name,
value
})
// 新建一个属性字段的保存列表
const propertiesObject = bpmnInstances().moddle.create(`${prefix}:Properties`, {
values: bpmnElementPropertyList.value.concat([newPropertyObject])
})
updateElementExtensions(propertiesObject)
}
propertyFormModelVisible.value = false
resetAttributesList()
console.log(propertyForm.value, 'propertyForm.value')
const { name, value } = propertyForm.value
if (editingPropertyIndex.value !== -1) {
bpmnInstances().modeling.updateModdleProperties(
toRaw(bpmnElement.value),
toRaw(bpmnElementPropertyList.value)[toRaw(editingPropertyIndex.value)],
{
name,
value
}
)
} else {
// 新建属性字段
const newPropertyObject = bpmnInstances().moddle.create(`${prefix}:Property`, {
name,
value
})
// 新建一个属性字段的保存列表
const propertiesObject = bpmnInstances().moddle.create(`${prefix}:Properties`, {
values: bpmnElementPropertyList.value.concat([newPropertyObject])
})
updateElementExtensions(propertiesObject)
}
propertyFormModelVisible.value = false
resetAttributesList()
}
const updateElementExtensions = properties => {
const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
values: otherExtensionList.value.concat([properties])
})
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
extensionElements: extensions
})
const updateElementExtensions = (properties) => {
const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
values: otherExtensionList.value.concat([properties])
})
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
extensionElements: extensions
})
}
watch(
() => props.id,
val => {
if (val) {
val && val.length && resetAttributesList()
}
},
{ immediate: true }
() => props.id,
(val) => {
if (val) {
val && val.length && resetAttributesList()
}
},
{ immediate: true }
)
</script>

178
src/components/bpmnProcessDesigner/package/penal/signal-message/SignalAndMessage.vue
View File

@@ -1,59 +1,55 @@
<template>
<div class="panel-tab__content">
<div class="panel-tab__content--title">
<span>
<Icon icon="ep:menu" style="margin-right: 8px; color: #555" />
消息列表
</span>
<el-button type="primary" icon="el-icon-Plus" @click="openModel('message')">创建新消息</el-button>
</div>
<el-table :data="messageList" border>
<el-table-column type="index" label="序号" width="60px" />
<el-table-column label="消息ID" prop="id" max-width="300px" show-overflow-tooltip />
<el-table-column label="消息名称" prop="name" max-width="300px" show-overflow-tooltip />
</el-table>
<div class="panel-tab__content--title" style="padding-top: 8px; margin-top: 8px; border-top: 1px solid #eee">
<span>
<Icon icon="ep:menu" style="margin-right: 8px; color: #555" />
信号列表
</span>
<el-button type="primary" icon="el-icon-Plus" @click="openModel('signal')">创建新信号</el-button>
</div>
<el-table :data="signalList" border>
<el-table-column type="index" label="序号" width="60px" />
<el-table-column label="信号ID" prop="id" max-width="300px" show-overflow-tooltip />
<el-table-column label="信号名称" prop="name" max-width="300px" show-overflow-tooltip />
</el-table>
<el-dialog
draggable
v-model="dialogVisible"
:title="modelConfig.title"
:close-on-click-modal="false"
width="400px"
append-to-body
destroy-on-close
>
<el-form :model="modelObjectForm" label-width="90px">
<el-form-item :label="modelConfig.idLabel">
<el-input v-model="modelObjectForm.id" clearable />
</el-form-item>
<el-form-item :label="modelConfig.nameLabel">
<el-input v-model="modelObjectForm.name" clearable />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addNewObject">保 存</el-button>
</template>
</el-dialog>
<div class="panel-tab__content">
<div class="panel-tab__content--title">
<span><Icon icon="ep:menu" style="margin-right: 8px; color: #555" />消息列表</span>
<XButton type="primary" title="创建新消息" preIcon="ep:plus" @click="openModel('message')" />
</div>
<el-table :data="messageList" border>
<el-table-column type="index" label="序号" width="60px" />
<el-table-column label="消息ID" prop="id" max-width="300px" show-overflow-tooltip />
<el-table-column label="消息名称" prop="name" max-width="300px" show-overflow-tooltip />
</el-table>
<div
class="panel-tab__content--title"
style="padding-top: 8px; margin-top: 8px; border-top: 1px solid #eee"
>
<span><Icon icon="ep:menu" style="margin-right: 8px; color: #555" />信号列表</span>
<XButton type="primary" title="创建新信号" preIcon="ep:plus" @click="openModel('signal')" />
</div>
<el-table :data="signalList" border>
<el-table-column type="index" label="序号" width="60px" />
<el-table-column label="信号ID" prop="id" max-width="300px" show-overflow-tooltip />
<el-table-column label="信号名称" prop="name" max-width="300px" show-overflow-tooltip />
</el-table>
<el-dialog
v-model="dialogVisible"
:title="modelConfig.title"
:close-on-click-modal="false"
width="400px"
append-to-body
destroy-on-close
>
<el-form :model="modelObjectForm" label-width="90px">
<el-form-item :label="modelConfig.idLabel">
<el-input v-model="modelObjectForm.id" clearable />
</el-form-item>
<el-form-item :label="modelConfig.nameLabel">
<el-input v-model="modelObjectForm.name" clearable />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addNewObject">保 存</el-button>
</template>
</el-dialog>
</div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, watch, onBeforeUnmount, toRaw, nextTick, computed } from 'vue'
import { ElMessage } from 'element-plus'
defineOptions({ name: 'SignalAndMassage' })
import { useMessage } from '@/hooks/web/useMessage'
import XButton from '@/components/XButton/src/XButton.vue'
const message = useMessage()
const signalList = ref<any[]>([])
const messageList = ref<any[]>([])
const dialogVisible = ref(false)
@@ -63,56 +59,56 @@ const rootElements = ref()
const messageIdMap = ref()
const signalIdMap = ref()
const modelConfig = computed(() => {
if (modelType.value === 'message') {
return { title: '创建消息', idLabel: '消息ID', nameLabel: '消息名称' }
} else {
return { title: '创建信号', idLabel: '信号ID', nameLabel: '信号名称' }
}
if (modelType.value === 'message') {
return { title: '创建消息', idLabel: '消息ID', nameLabel: '消息名称' }
} else {
return { title: '创建信号', idLabel: '信号ID', nameLabel: '信号名称' }
}
})
const bpmnInstances = () => (window as any)?.bpmnInstances
const initDataList = () => {
console.log(window, 'window')
rootElements.value = bpmnInstances().modeler.getDefinitions().rootElements
messageIdMap.value = {}
signalIdMap.value = {}
messageList.value = []
signalList.value = []
rootElements.value.forEach(el => {
if (el.$type === 'bpmn:Message') {
messageIdMap.value[el.id] = true
messageList.value.push({ ...el })
}
if (el.$type === 'bpmn:Signal') {
signalIdMap.value[el.id] = true
signalList.value.push({ ...el })
}
})
console.log(window, 'window')
rootElements.value = bpmnInstances().modeler.getDefinitions().rootElements
messageIdMap.value = {}
signalIdMap.value = {}
messageList.value = []
signalList.value = []
rootElements.value.forEach((el) => {
if (el.$type === 'bpmn:Message') {
messageIdMap.value[el.id] = true
messageList.value.push({ ...el })
}
if (el.$type === 'bpmn:Signal') {
signalIdMap.value[el.id] = true
signalList.value.push({ ...el })
}
})
}
const openModel = type => {
modelType.value = type
modelObjectForm.value = {}
dialogVisible.value = true
const openModel = (type) => {
modelType.value = type
modelObjectForm.value = {}
dialogVisible.value = true
}
const addNewObject = () => {
if (modelType.value === 'message') {
if (messageIdMap.value[modelObjectForm.value.id]) {
ElMessage.error('该消息已存在，请修改id后重新保存')
}
const messageRef = bpmnInstances().moddle.create('bpmn:Message', modelObjectForm.value)
rootElements.value.push(messageRef)
} else {
if (signalIdMap.value[modelObjectForm.value.id]) {
ElMessage.error('该信号已存在，请修改id后重新保存')
}
const signalRef = bpmnInstances().moddle.create('bpmn:Signal', modelObjectForm.value)
rootElements.value.push(signalRef)
if (modelType.value === 'message') {
if (messageIdMap.value[modelObjectForm.value.id]) {
message.error('该消息已存在，请修改id后重新保存')
}
dialogVisible.value = false
initDataList()
const messageRef = bpmnInstances().moddle.create('bpmn:Message', modelObjectForm.value)
rootElements.value.push(messageRef)
} else {
if (signalIdMap.value[modelObjectForm.value.id]) {
message.error('该信号已存在，请修改id后重新保存')
}
const signalRef = bpmnInstances().moddle.create('bpmn:Signal', modelObjectForm.value)
rootElements.value.push(signalRef)
}
dialogVisible.value = false
initDataList()
}
onMounted(() => {
initDataList()
initDataList()
})
</script>

2
src/components/bpmnProcessDesigner/package/penal/task/ElementTask.vue
View File

@@ -1,7 +1,6 @@
<template>
<div class="panel-tab__content">
<el-form size="small" label-width="90px">
<!-- add by 芋艿：由于「异步延续」暂时用不到，所以这里 display 为 none -->
<el-form-item label="异步延续" style="display: none">
<el-checkbox
v-model="taskConfigForm.asyncBefore"
@@ -26,7 +25,6 @@ import UserTask from './task-components/UserTask.vue'
import ScriptTask from './task-components/ScriptTask.vue'
import ReceiveTask from './task-components/ReceiveTask.vue'
import { onMounted, reactive, ref, watch, onBeforeUnmount,toRaw,nextTick } from 'vue'
defineOptions({ name: 'ElementTaskConfig' })
const props = defineProps({

81
src/components/bpmnProcessDesigner/package/penal/task/task-components/ProcessExpressionDialog.vue
View File

@@ -1,65 +1,68 @@
<!-- 表达式选择 -->
<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="expression" />
<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>
<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="expression" />
<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 { onMounted, reactive, ref, watch, onBeforeUnmount } from 'vue'
import { CommonStatusEnum } from '@/utils/constants'
import { ProcessExpressionApi, ProcessExpressionVO } from '@/api/bpm/processExpression'
/** BPM 流程 表单 */
defineOptions({ name: 'ProcessExpressionDialog' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const loading = ref(true) // 列表的加载中
const list = ref<ProcessExpressionVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
type: undefined
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 ProcessExpressionApi.getProcessExpressionPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
dialogVisible.value = true
loading.value = true
try {
queryParams.pageNo = 1
queryParams.type = type
const data = await ProcessExpressionApi.getProcessExpressionPage(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)
const select = async (row) => {
dialogVisible.value = false
// 发送操作成功的事件
emit('select', row)
}
</script>

166
src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue
View File

@@ -1,46 +1,58 @@
<template>
<div style="margin-top: 16px">
<el-form-item label="消息实例">
<div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap">
<el-select v-model="bindMessageId" @change="updateTaskMessage">
<el-option
v-for="key in Object.keys(messageMap)"
:value="key"
:label="messageMap[key]"
:key="key"
/>
</el-select>
<el-button type="primary" icon="el-icon-Plus" style="margin-left: 8px" @click="openMessageModel" />
</div>
<div style="margin-top: 16px">
<el-form-item label="消息实例">
<div
style="
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
"
>
<el-select v-model="bindMessageId" @change="updateTaskMessage">
<el-option
v-for="key in Object.keys(messageMap)"
:value="key"
:label="messageMap[key]"
:key="key"
/>
</el-select>
<XButton
type="primary"
preIcon="ep:plus"
style="margin-left: 8px"
@click="openMessageModel"
/>
</div>
</el-form-item>
<el-dialog
v-model="messageModelVisible"
:close-on-click-modal="false"
title="创建新消息"
width="400px"
append-to-body
destroy-on-close
>
<el-form :model="newMessageForm" size="small" label-width="90px">
<el-form-item label="消息ID">
<el-input v-model="newMessageForm.id" clearable />
</el-form-item>
<el-dialog
v-model="messageModelVisible"
:close-on-click-modal="false"
title="创建新消息"
width="400px"
append-to-body
destroy-on-close
>
<el-form :model="newMessageForm" size="small" label-width="90px">
<el-form-item label="消息ID">
<el-input v-model="newMessageForm.id" clearable />
</el-form-item>
<el-form-item label="消息名称">
<el-input v-model="newMessageForm.name" clearable />
</el-form-item>
</el-form>
<template #footer>
<el-button size="small" type="primary" @click="createNewMessage">确 认</el-button>
</template>
</el-dialog>
</div>
<el-form-item label="消息名称">
<el-input v-model="newMessageForm.name" clearable />
</el-form-item>
</el-form>
<template #footer>
<el-button size="small" type="primary" @click="createNewMessage">确 认</el-button>
</template>
</el-dialog>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'ReceiveTask' })
const props = defineProps({
id: String,
type: String
id: String,
type: String
})
const message = useMessage()
@@ -55,59 +67,59 @@ const bpmnRootElements = ref<any>()
const bpmnInstances = () => (window as any).bpmnInstances
const getBindMessage = () => {
bpmnElement.value = bpmnInstances().bpmnElement
bindMessageId.value = bpmnElement.value.businessObject?.messageRef?.id || '-1'
bpmnElement.value = bpmnInstances().bpmnElement
bindMessageId.value = bpmnElement.value.businessObject?.messageRef?.id || '-1'
}
const openMessageModel = () => {
messageModelVisible.value = true
newMessageForm.value = {}
messageModelVisible.value = true
newMessageForm.value = {}
}
const createNewMessage = () => {
if (messageMap.value[newMessageForm.value.id]) {
message.error('该消息已存在，请修改id后重新保存')
return
}
const newMessage = bpmnInstances().moddle.create('bpmn:Message', newMessageForm.value)
bpmnRootElements.value.push(newMessage)
messageMap.value[newMessageForm.value.id] = newMessageForm.value.name
bpmnMessageRefsMap.value[newMessageForm.value.id] = newMessage
messageModelVisible.value = false
if (messageMap.value[newMessageForm.value.id]) {
message.error('该消息已存在，请修改id后重新保存')
return
}
const newMessage = bpmnInstances().moddle.create('bpmn:Message', newMessageForm.value)
bpmnRootElements.value.push(newMessage)
messageMap.value[newMessageForm.value.id] = newMessageForm.value.name
bpmnMessageRefsMap.value[newMessageForm.value.id] = newMessage
messageModelVisible.value = false
}
const updateTaskMessage = messageId => {
if (messageId === '-1') {
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
messageRef: null
})
} else {
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
messageRef: bpmnMessageRefsMap.value[messageId]
})
}
const updateTaskMessage = (messageId) => {
if (messageId === '-1') {
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
messageRef: null
})
} else {
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
messageRef: bpmnMessageRefsMap.value[messageId]
})
}
}
onMounted(() => {
bpmnMessageRefsMap.value = Object.create(null)
bpmnRootElements.value = bpmnInstances().modeler.getDefinitions().rootElements
bpmnRootElements.value
.filter(el => el.$type === 'bpmn:Message')
.forEach(m => {
bpmnMessageRefsMap.value[m.id] = m
messageMap.value[m.id] = m.name
})
messageMap.value['-1'] = '无'
bpmnMessageRefsMap.value = Object.create(null)
bpmnRootElements.value = bpmnInstances().modeler.getDefinitions().rootElements
bpmnRootElements.value
.filter((el) => el.$type === 'bpmn:Message')
.forEach((m) => {
bpmnMessageRefsMap.value[m.id] = m
messageMap.value[m.id] = m.name
})
messageMap.value['-1'] = '无'
})
onBeforeUnmount(() => {
bpmnElement.value = null
bpmnElement.value = null
})
watch(
() => props.id,
() => {
// bpmnElement.value = bpmnInstances().bpmnElement
nextTick(() => {
getBindMessage()
})
},
{ immediate: true }
() => props.id,
() => {
// bpmnElement.value = bpmnInstances().bpmnElement
nextTick(() => {
getBindMessage()
})
},
{ immediate: true }
)
</script>

295
src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue
View File

@@ -1,182 +1,185 @@
<template>
<div>
<el-form label-width='100px'>
<el-form-item label='规则类型' prop='candidateStrategy'>
<el-select
v-model='userTaskForm.candidateStrategy'
clearable
style='width: 100%'
@change='changeCandidateStrategy'
>
<el-option
v-for='dict in RuleTypeList'
:key='dict.code'
:label='dict.name'
:value='dict.code'
/>
</el-select>
</el-form-item>
<el-form-item
v-if='userTaskForm.candidateStrategy == 10'
label='指定角色'
prop='candidateParam'
>
<el-select
v-model='userTaskForm.candidateParam'
clearable
multiple
style='width: 100%'
@change='updateElementTask'
>
<el-option v-for='item in roleOptions' :key='item.id' :label='item.name' :value='item.id' />
</el-select>
</el-form-item>
<el-form-item
v-if='userTaskForm.candidateStrategy == 20'
label='指定部门'
prop='candidateParam'
span='24'
>
<el-tree-select
ref='treeRef'
v-model='userTaskForm.candidateParam'
:data='deptTreeOptions'
:props='defaultProps'
empty-text='加载中，请稍后'
multiple
node-key='id'
show-checkbox
@change='updateElementTask'
/>
</el-form-item>
<div v-if="dataType === 'ROLES'">
<el-select v-model='roleIds' :size='mini' placeholder='请选择 角色' @change='changeSelectRoles'>
<el-option
v-for='item in roleOptions'
:key='item.id'
:label='item.name'
:value='`ROLE${item.id}`'
>
</el-option>
</el-select>
</div>
</div>
<el-form-item
v-if='userTaskForm.candidateStrategy == 30'
label='指定用户'
prop='candidateParam'
span='24'
>
<el-select
v-model='userTaskForm.candidateParam'
clearable
multiple
style='width: 100%'
@change='updateElementTask'
>
<el-option
v-for='item in userOptions'
:key='item.id'
:label='item.name'
:value='item.id'
/>
</el-select>
</el-form-item>
</el-form>
</template>
<script lang='ts' setup>
import { listAllUserByDeptId } from '@/api/user-boot/user'
import { onMounted, reactive, ref, watch, onBeforeUnmount, toRaw, nextTick } from 'vue'
import { defaultProps, handleTree } from '@/utils/tree'
import { useDictData } from '@/stores/dictData'
const dictData = useDictData()
const RuleTypeList = ref()
import { getRoleSimpleList } from '@/api/user-boot/role'
import { getUserSimpleList } from '@/api/user-boot/user'
interface UserTaskForm {
dataType: any,
assignee: any,
candidateUsers: any,
candidateGroups: any,
text: any
}
const userTaskForm: UserTaskForm = reactive({
dataType: '',
assignee: '',
candidateUsers: '',
candidateGroups: '',
text: []
// dueDate: '',
// followUpDate: '',
// priority: ''
})
const mini = ref('small')
const dataType = ref('ROLES')
const multiLoopType = ref('Null')
const roleIds = ref('')
const roleOptions = ref([{ id: '', name: '' }])
const bpmnElement = ref()
const isSequential = ref(false)
defineOptions({ name: 'UserTask' })
const props = defineProps({
id: String,
type: String
id: String,
type: String
})
const userTaskForm = ref({
candidateStrategy: '', // 分配规则
candidateParam: [] // 分配选项
})
const bpmnElement = ref()
const bpmnInstances = () => (window as any)?.bpmnInstances
const changeSelectRoles = (val: any) => {
let groups = null
let text = null
if (val && val.length > 0) {
userTaskForm.dataType = 'ROLES'
groups = val.join() || null
let textArr = roleOptions.value.filter(k => val.indexOf(`ROLE${k.id}`) >= 0)
text = textArr?.map(k => k.name).join() || null
} else {
userTaskForm.dataType = ''
multiLoopType.value = 'Null'
}
userTaskForm.candidateGroups = groups
userTaskForm.text = text
updateElementTask()
export interface optionVO {
id: string
name: string
}
/**
* 跟新节点数据
*/
const updateElementTask = () => {
const taskAttr = Object.create(null)
for (let key in userTaskForm) {
taskAttr[key] = userTaskForm[key]
}
bpmnInstances().modeling.updateProperties(bpmnElement.value, taskAttr)
}
const roleOptions = ref<optionVO[]>([]) // 角色列表
const userOptions = ref<optionVO[]>([]) // 用户列表
const deptTreeOptions = ref() // 部门树
const resetTaskForm = () => {
const bpmnElementObj = bpmnElement.value?.businessObject
if (!bpmnElementObj) {
return
const businessObject = bpmnElement.value.businessObject
if (!businessObject) {
return
}
if (businessObject.candidateStrategy != undefined) {
userTaskForm.value.candidateStrategy = businessObject.candidateStrategy
} else {
userTaskForm.value.candidateStrategy = undefined
}
if (businessObject.candidateParam && businessObject.candidateParam.length > 0) {
if (userTaskForm.value.candidateStrategy === 60) {
// 特殊：流程表达式，只有一个 input 输入框
userTaskForm.value.candidateParam = [businessObject.candidateParam]
} else {
userTaskForm.value.candidateParam = businessObject.candidateParam.split(',')
}
clearOptionsData()
getRoleOptions()
let roleIdData = bpmnElementObj['candidateGroups'] || []
if (roleIdData && roleIdData.length > 0) {
roleIds.value = roleIdData.split(',')
}
getElementLoop(bpmnElementObj)
} else {
userTaskForm.value.candidateParam = []
}
}
/**
* 清空选项数据
*/
const clearOptionsData = () => {
// this.selectedUser.ids = []
// this.selectedUser.text = []
roleIds.value = ''
/** 更新 candidateStrategy 字段时，需要清空 candidateParam，并触发 bpmn 图更新 */
const changeCandidateStrategy = () => {
userTaskForm.value.candidateParam = []
updateElementTask()
}
const getRoleOptions = () => {
if (!roleOptions.value || roleOptions.value.length <= 0) {
listAllUserByDeptId('').then(res => {
roleOptions.value = res.data
//默认第一个
if (roleOptions.value.length > 0) {
roleIds.value = roleOptions.value[0].id
}
})
}
/** 选中某个 options 时候，更新 bpmn 图 */
const updateElementTask = () => {
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
candidateStrategy: userTaskForm.value.candidateStrategy,
candidateParam: userTaskForm.value.candidateParam.join(',')
})
}
const getElementLoop = (businessObject: any) => {
if (!businessObject.loopCharacteristics) {
multiLoopType.value = 'Null'
return
}
isSequential.value = businessObject.loopCharacteristics.isSequential
if (businessObject.loopCharacteristics.completionCondition) {
if (businessObject.loopCharacteristics.completionCondition.body === '${nrOfCompletedInstances >= nrOfInstances}') {
multiLoopType.value = 'SequentialMultiInstance'
} else {
multiLoopType.value = 'ParallelMultiInstance'
}
}
// 打开监听器弹窗
const processExpressionDialogRef = ref()
const openProcessExpressionDialog = async () => {
processExpressionDialogRef.value.open()
}
const selectProcessExpression = (expression) => {
userTaskForm.value.candidateParam = [expression.expression]
}
watch(
() => props.id,
() => {
bpmnElement.value = bpmnInstances().bpmnElement
nextTick(() => {
resetTaskForm()
})
bpmnElement.value = bpmnInstances().bpmnElement
nextTick(() => {
resetTaskForm()
})
},
{ immediate: true }
)
onMounted(async () => {
// 获得角色列表
// roleOptions.value = await RoleApi.getSimpleRoleList()
// 获得用户列表
await listAllUserByDeptId('').then(res => {
roleOptions.value = res.data
})
// 获得角色列表
await getRoleSimpleList().then(res => {
roleOptions.value = res.data
})
// 获得用户列表
await getUserSimpleList().then(res => {
userOptions.value = res.data
})
//传入type的名称
RuleTypeList.value = dictData.getBasicData('rule_type')
//
// // 获得部门列表
// const deptOptions = await DeptApi.getSimpleDeptList()
// deptTreeOptions.value = handleTree(deptOptions, 'id')
})
onBeforeUnmount(() => {
bpmnElement.value = null
bpmnElement.value = null
})
</script>
<style scoped lang='scss'>
.el-row .el-radio-group {
margin-bottom: 15px;
.el-radio {
line-height: 28px;
}
}
.el-tag {
margin-bottom: 10px;
+ .el-tag {
margin-left: 10px;
}
}
.custom-label {
padding-left: 5px;
font-weight: 500;
font-size: 14px;
color: #606266;
}
</style>

1
src/components/bpmnProcessDesigner/package/theme/element-variables.scss
View File

@@ -34,7 +34,6 @@ span:focus {
.el-dialog {
margin-top: 50vh !important;
transform: translateY(-50%);
padding: 0px !important;
overflow: hidden;
}
.el-dialog__wrapper {