iailab-plat-ui-vue3.git

Merge remote-tracking branch 'origin/master'

潘志宝

3 天以前 221918bba28d2384d03c596a68256d7832e4a0e0

提交 \| 用户 \| 时间
820397	1	<template>
c9a6f7	2	<div class="process-panel__container" :style="{ width: `${width}px` }">
H	3	<el-collapse v-model="activeTab" v-if="isReady">
820397	4	<el-collapse-item name="base">
H	5	<!-- class="panel-tab__title" -->
	6	<template #title>
	7	<Icon icon="ep:info-filled" />
	8	常规</template
	9	>
	10	<ElementBaseInfo
	11	:id-edit-disabled="idEditDisabled"
	12	:business-object="elementBusinessObject"
	13	:type="elementType"
	14	:model="model"
	15	/>
	16	</el-collapse-item>
	17	<el-collapse-item name="condition" v-if="elementType === 'Process'" key="message">
	18	<template #title><Icon icon="ep:comment" />消息与信号</template>
	19	<signal-and-massage />
	20	</el-collapse-item>
	21	<el-collapse-item name="condition" v-if="conditionFormVisible" key="condition">
	22	<template #title><Icon icon="ep:promotion" />流转条件</template>
	23	<flow-condition :business-object="elementBusinessObject" :type="elementType" />
	24	</el-collapse-item>
	25	<el-collapse-item name="condition" v-if="formVisible" key="form">
	26	<template #title><Icon icon="ep:list" />表单</template>
	27	<element-form :id="elementId" :type="elementType" />
	28	</el-collapse-item>
9259c2	29	<el-collapse-item name="task" v-if="isTaskCollapseItemShow(elementType)" key="task">
H	30	<template #title
c9a6f7	31	><Icon icon="ep:checked" />{{ getTaskCollapseItemName(elementType) }}</template
9259c2	32	>
820397	33	<element-task :id="elementId" :type="elementType" />
H	34	</el-collapse-item>
	35	<el-collapse-item
	36	name="multiInstance"
	37	v-if="elementType.indexOf('Task') !== -1"
	38	key="multiInstance"
	39	>
9259c2	40	<template #title><Icon icon="ep:help-filled" />多人审批方式</template>
H	41	<element-multi-instance
	42	:id="elementId"
	43	:business-object="elementBusinessObject"
	44	:type="elementType"
	45	/>
820397	46	</el-collapse-item>
H	47	<el-collapse-item name="listeners" key="listeners">
	48	<template #title><Icon icon="ep:bell-filled" />执行监听器</template>
	49	<element-listeners :id="elementId" :type="elementType" />
	50	</el-collapse-item>
	51	<el-collapse-item name="taskListeners" v-if="elementType === 'UserTask'" key="taskListeners">
	52	<template #title><Icon icon="ep:bell-filled" />任务监听器</template>
	53	<user-task-listeners :id="elementId" :type="elementType" />
	54	</el-collapse-item>
	55	<el-collapse-item name="extensions" key="extensions">
	56	<template #title><Icon icon="ep:circle-plus-filled" />扩展属性</template>
	57	<element-properties :id="elementId" :type="elementType" />
	58	</el-collapse-item>
	59	<el-collapse-item name="other" key="other">
	60	<template #title><Icon icon="ep:promotion" />其他</template>
	61	<element-other-config :id="elementId" />
	62	</el-collapse-item>
9259c2	63	<el-collapse-item name="customConfig" key="customConfig">
H	64	<template #title><Icon icon="ep:tools" />自定义配置</template>
	65	<element-custom-config
	66	:id="elementId"
	67	:type="elementType"
	68	:business-object="elementBusinessObject"
	69	/>
3e359e	70	</el-collapse-item>
820397	71	</el-collapse>
H	72	</div>
	73	</template>
	74	<script lang="ts" setup>
	75	import ElementBaseInfo from './base/ElementBaseInfo.vue'
	76	import ElementOtherConfig from './other/ElementOtherConfig.vue'
	77	import ElementTask from './task/ElementTask.vue'
	78	import ElementMultiInstance from './multi-instance/ElementMultiInstance.vue'
	79	import FlowCondition from './flow-condition/FlowCondition.vue'
	80	import SignalAndMassage from './signal-message/SignalAndMessage.vue'
	81	import ElementListeners from './listeners/ElementListeners.vue'
	82	import ElementProperties from './properties/ElementProperties.vue'
	83	// import ElementForm from './form/ElementForm.vue'
	84	import UserTaskListeners from './listeners/UserTaskListeners.vue'
9259c2	85	import { getTaskCollapseItemName, isTaskCollapseItemShow } from './task/data'
820397	86
H	87	defineOptions({ name: 'MyPropertiesPanel' })
	88
	89	/**
	90	* 侧边栏
	91	* @Author MiyueFE
	92	* @Home https://github.com/miyuesc
	93	* @Date 2021年3月31日18:57:51
	94	*/
	95	const props = defineProps({
	96	bpmnModeler: {
	97	type: Object,
	98	default: () => {}
	99	},
	100	prefix: {
	101	type: String,
	102	default: 'camunda'
	103	},
	104	width: {
	105	type: Number,
	106	default: 480
	107	},
	108	idEditDisabled: {
	109	type: Boolean,
	110	default: false
	111	},
	112	model: Object // 流程模型的数据
	113	})
	114
	115	const activeTab = ref('base')
	116	const elementId = ref('')
	117	const elementType = ref('')
	118	const elementBusinessObject = ref<any>({}) // 元素 businessObject 镜像，提供给需要做判断的组件使用
	119	const conditionFormVisible = ref(false) // 流转条件设置
	120	const formVisible = ref(false) // 表单配置
	121	const bpmnElement = ref()
c9a6f7	122	const isReady = ref(false)
820397	123
H	124	provide('prefix', props.prefix)
	125	provide('width', props.width)
	126
c9a6f7	127	// 初始化 bpmnInstances
H	128	const initBpmnInstances = () => {
	129	if (!props.bpmnModeler) return false
	130	try {
	131	const instances = {
820397	132	modeler: props.bpmnModeler,
H	133	modeling: props.bpmnModeler.get('modeling'),
	134	moddle: props.bpmnModeler.get('moddle'),
	135	eventBus: props.bpmnModeler.get('eventBus'),
	136	bpmnFactory: props.bpmnModeler.get('bpmnFactory'),
	137	elementFactory: props.bpmnModeler.get('elementFactory'),
	138	elementRegistry: props.bpmnModeler.get('elementRegistry'),
	139	replace: props.bpmnModeler.get('replace'),
	140	selection: props.bpmnModeler.get('selection')
	141	}
	142
c9a6f7	143	// 检查所有实例是否都存在
H	144	const allInstancesExist = Object.values(instances).every(instance => instance)
	145	if (allInstancesExist) {
	146	const w = window as any
	147	w.bpmnInstances = instances
	148	return true
	149	}
	150	return false
	151	} catch (error) {
	152	console.error('初始化 bpmnInstances 失败:', error)
	153	return false
	154	}
	155	}
	156
	157	const bpmnInstances = () => (window as any)?.bpmnInstances
	158
	159	// 监听 props.bpmnModeler 然后 initModels
	160	const unwatchBpmn = watch(
	161	() => props.bpmnModeler,
	162	async () => {
	163	// 避免加载时流程图并未加载完成
	164	if (!props.bpmnModeler) {
	165	console.log('缺少props.bpmnModeler')
	166	return
	167	}
	168
	169	try {
	170	// 等待 modeler 初始化完成
	171	await nextTick()
	172	if (initBpmnInstances()) {
	173	isReady.value = true
	174	await nextTick()
	175	getActiveElement()
	176	} else {
	177	console.error('modeler 实例未完全初始化')
	178	}
	179	} catch (error) {
	180	console.error('初始化失败:', error)
	181	}
820397	182	},
H	183	{
	184	immediate: true
	185	}
	186	)
	187
	188	const getActiveElement = () => {
c9a6f7	189	if (!isReady.value \|\| !props.bpmnModeler) return
H	190
820397	191	// 初始第一个选中元素 bpmn:Process
H	192	initFormOnChanged(null)
	193	props.bpmnModeler.on('import.done', (e) => {
	194	console.log(e, 'eeeee')
	195	initFormOnChanged(null)
	196	})
	197	// 监听选择事件，修改当前激活的元素以及表单
	198	props.bpmnModeler.on('selection.changed', ({ newSelection }) => {
	199	initFormOnChanged(newSelection[0] \|\| null)
	200	})
	201	props.bpmnModeler.on('element.changed', ({ element }) => {
	202	// 保证修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
	203	if (element && element.id === elementId.value) {
	204	initFormOnChanged(element)
	205	}
	206	})
	207	}
c9a6f7	208
820397	209	// 初始化数据
H	210	const initFormOnChanged = (element) => {
c9a6f7	211	if (!isReady.value \|\| !bpmnInstances()) return
H	212
820397	213	let activatedElement = element
H	214	if (!activatedElement) {
	215	activatedElement =
	216	bpmnInstances().elementRegistry.find((el) => el.type === 'bpmn:Process') ??
	217	bpmnInstances().elementRegistry.find((el) => el.type === 'bpmn:Collaboration')
	218	}
	219	if (!activatedElement) return
c9a6f7	220
H	221	try {
	222	console.log(`
	223	----------
	224	select element changed:
	225	id: ${activatedElement.id}
	226	type: ${activatedElement.businessObject.$type}
	227	----------
	228	`)
	229	console.log('businessObject: ', activatedElement.businessObject)
	230	bpmnInstances().bpmnElement = activatedElement
	231	bpmnElement.value = activatedElement
	232	elementId.value = activatedElement.id
	233	elementType.value = activatedElement.type.split(':')[1] \|\| ''
	234	elementBusinessObject.value = JSON.parse(JSON.stringify(activatedElement.businessObject))
	235	conditionFormVisible.value = !!(
	236	elementType.value === 'SequenceFlow' &&
	237	activatedElement.source &&
	238	activatedElement.source.type.indexOf('StartEvent') === -1
	239	)
	240	formVisible.value = elementType.value === 'UserTask' \|\| elementType.value === 'StartEvent'
	241	} catch (error) {
	242	console.error('初始化表单数据失败:', error)
	243	}
820397	244	}
H	245
	246	onBeforeUnmount(() => {
	247	const w = window as any
	248	w.bpmnInstances = null
c9a6f7	249	isReady.value = false
820397	250	})
H	251
	252	watch(
	253	() => elementId.value,
	254	() => {
	255	activeTab.value = 'base'
	256	}
	257	)
	258	</script>