update 新增池/参与者面板
This commit is contained in:
40
src/components/BpmnDesign/panel/ParticipantPanel.vue
Normal file
40
src/components/BpmnDesign/panel/ParticipantPanel.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
|
||||
<el-form-item prop="id" label="节点 ID">
|
||||
<el-input v-model="formData.id" @change="idChange"> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="name" label="节点名称">
|
||||
<el-input v-model="formData.name" @change="nameChange"> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="执行监听器" style="margin-bottom: 0"> </el-form-item>
|
||||
<ExecutionListener :element="element"></ExecutionListener>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
|
||||
import usePanel from '@/components/BpmnDesign/hooks/usePanel';
|
||||
import { ModdleElement } from 'bpmn';
|
||||
import { StartEndPanel } from 'bpmnDesign';
|
||||
|
||||
interface PropType {
|
||||
element: ModdleElement;
|
||||
}
|
||||
const props = withDefaults(defineProps<PropType>(), {});
|
||||
const { nameChange, idChange } = usePanel({
|
||||
element: toRaw(props.element)
|
||||
});
|
||||
const { parseData } = useParseElement({
|
||||
element: toRaw(props.element)
|
||||
});
|
||||
|
||||
const formData = ref(parseData<StartEndPanel>());
|
||||
|
||||
const formRules = ref<ElFormRules>({
|
||||
id: [{ required: true, message: '请输入', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '请输入', trigger: 'blur' }]
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
@ -11,6 +11,7 @@ import ProcessPanel from './ProcessPanel.vue';
|
||||
import StartEndPanel from './StartEndPanel.vue';
|
||||
import GatewayPanel from './GatewayPanel.vue';
|
||||
import SequenceFlowPanel from './SequenceFlowPanel.vue';
|
||||
import ParticipantPanel from './ParticipantPanel.vue';
|
||||
import { Modeler, ModdleElement } from 'bpmn';
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
interface propsType {
|
||||
@ -45,6 +46,7 @@ const component = computed(() => {
|
||||
if (sequenceType.includes(type)) return SequenceFlowPanel;
|
||||
if (gatewayType.includes(type)) return GatewayPanel;
|
||||
if (processType.includes(type)) return ProcessPanel;
|
||||
if (type === 'bpmn:Participant') return ParticipantPanel;
|
||||
//return proxy?.$modal.msgWarning('面板开发中....');
|
||||
});
|
||||
|
||||
|
Reference in New Issue
Block a user