105 lines
3.0 KiB
Vue
Raw Normal View History

2024-01-19 18:26:18 +08:00
<template>
2024-01-25 14:43:20 +08:00
<div ref="propertyPanel">
<div v-if="nodeName" class="node-name">{{ nodeName }}</div>
2024-02-01 15:17:48 +08:00
<component :is="component" v-if="element" :element="element" />
2024-01-19 18:26:18 +08:00
</div>
</template>
<script setup lang="ts" name="PropertyPanel">
2024-02-21 09:18:10 +08:00
import { NodeName } from '../assets/lang/zh';
import TaskPanel from './TaskPanel.vue';
import ProcessPanel from './ProcessPanel.vue';
import StartEndPanel from './StartEndPanel.vue';
import GatewayPanel from './GatewayPanel.vue';
import SequenceFlowPanel from './SequenceFlowPanel.vue';
2024-02-01 17:57:24 +08:00
import { Modeler, ModdleElement } from 'bpmn';
2024-02-01 15:17:48 +08:00
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
2024-01-19 18:26:18 +08:00
interface propsType {
2024-01-22 14:50:58 +08:00
modeler: Modeler;
2024-01-19 18:26:18 +08:00
}
const props = withDefaults(defineProps<propsType>(), {});
2024-02-01 17:57:24 +08:00
const element = ref<ModdleElement>();
const processElement = ref<ModdleElement>();
2024-01-19 18:26:18 +08:00
const startEndType = ['bpmn:IntermediateThrowEvent', 'bpmn:StartEvent', 'bpmn:EndEvent'];
const taskType = [
'bpmn:UserTask',
'bpmn:Task',
'bpmn:SendTask',
'bpmn:ReceiveTask',
'bpmn:ManualTask',
'bpmn:BusinessRuleTask',
'bpmn:ServiceTask',
'bpmn:ScriptTask'
];
const sequenceType = ['bpmn:SequenceFlow'];
2024-02-01 15:17:48 +08:00
const gatewayType = ['bpmn:InclusiveGateway', 'bpmn:ExclusiveGateway', 'bpmn:ParallelGateway', 'bpmn:EventBasedGateway', 'bpmn:ComplexGateway'];
2024-01-19 18:26:18 +08:00
const processType = ['bpmn:Process'];
// 组件计算
2024-01-19 18:26:18 +08:00
const component = computed(() => {
if (!element.value) return null;
const type = element.value.type;
2024-01-21 22:35:34 +08:00
if (startEndType.includes(type)) return StartEndPanel;
2024-01-20 22:09:15 +08:00
if (taskType.includes(type)) return TaskPanel;
2024-01-21 22:35:34 +08:00
if (sequenceType.includes(type)) return SequenceFlowPanel;
if (gatewayType.includes(type)) return GatewayPanel;
2024-01-21 15:35:43 +08:00
if (processType.includes(type)) return ProcessPanel;
2024-02-01 15:17:48 +08:00
return proxy?.$modal.msgWarning('面板开发中....');
2024-01-19 18:26:18 +08:00
});
const nodeName = computed(() => {
if (element.value) {
const bizObj = element.value.businessObject;
const type = bizObj?.eventDefinitions && bizObj?.eventDefinitions.length > 0 ? bizObj.eventDefinitions[0].$type : bizObj.$type;
2024-01-19 18:26:18 +08:00
return NodeName[type] || type;
}
});
const handleModeler = () => {
2024-01-22 14:50:58 +08:00
props.modeler.on('root.added', (e: any) => {
element.value = null;
2024-01-19 18:26:18 +08:00
if (e.element.type === 'bpmn:Process') {
nextTick(() => {
element.value = e.element;
processElement.value = e.element;
2024-01-19 18:26:18 +08:00
});
}
});
2024-01-22 14:50:58 +08:00
props.modeler.on('element.click', (e: any) => {
2024-01-20 22:09:15 +08:00
if (e.element.type === 'bpmn:Process') {
nextTick(() => {
element.value = e.element;
processElement.value = e.element;
});
2024-01-19 18:26:18 +08:00
}
});
2024-01-22 14:50:58 +08:00
props.modeler.on('selection.changed', (e: any) => {
2024-01-21 21:27:57 +08:00
// 先给null为了让vue刷新
element.value = null;
2024-01-19 18:26:18 +08:00
const newElement = e.newSelection[0];
if (newElement) {
nextTick(() => {
2024-01-20 22:09:15 +08:00
element.value = newElement;
2024-01-19 18:26:18 +08:00
});
} else {
nextTick(() => {
element.value = processElement.value;
});
2024-01-19 18:26:18 +08:00
}
});
};
onMounted(() => {
handleModeler();
});
</script>
2024-01-20 22:09:15 +08:00
<style scoped lang="scss">
2024-01-25 14:43:20 +08:00
.node-name {
font-size: 16px;
font-weight: bold;
padding: 10px;
2024-01-20 22:09:15 +08:00
}
</style>