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
	 LiuHao
					LiuHao