添加工作流 设计器
This commit is contained in:
@@ -0,0 +1,233 @@
|
||||
<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>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, provide, ref, watch, onBeforeUnmount } from '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 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'
|
||||
|
||||
defineOptions({ name: 'MyPropertiesPanel' })
|
||||
|
||||
/**
|
||||
* 侧边栏
|
||||
* @Author MiyueFE
|
||||
* @Home https://github.com/miyuesc
|
||||
* @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 // 流程模型的数据
|
||||
})
|
||||
|
||||
const activeTab = ref('base')
|
||||
const elementId = ref('')
|
||||
const elementType = ref('')
|
||||
const elementBusinessObject = ref<any>({}) // 元素 businessObject 镜像，提供给需要做判断的组件使用
|
||||
const conditionFormVisible = ref(false) // 流转条件设置
|
||||
const formVisible = ref(false) // 表单配置
|
||||
const bpmnElement = ref()
|
||||
|
||||
provide('prefix', props.prefix)
|
||||
provide('width', props.width)
|
||||
const bpmnInstances = () => (window as any)?.bpmnInstances
|
||||
|
||||
// 监听 props.bpmnModeler 然后 initModels
|
||||
const unwatchBpmn = watch(
|
||||
() => props.bpmnModeler,
|
||||
() => {
|
||||
// 避免加载时 流程图 并未加载完成
|
||||
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(bpmnInstances(), 'window.bpmnInstances')
|
||||
getActiveElement()
|
||||
unwatchBpmn()
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
const getActiveElement = () => {
|
||||
// 初始第一个选中元素 bpmn:Process
|
||||
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)
|
||||
}
|
||||
})
|
||||
}
|
||||
// 初始化数据
|
||||
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')
|
||||
})
|
||||
|
||||
watch(
|
||||
() => elementId.value,
|
||||
() => {
|
||||
activeTab.value = 'base'
|
||||
}
|
||||
)
|
||||
</script>
|
||||
Reference in New Issue
Block a user