| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| 9259c2 | 2 | <div class="process-panel__container" :style="{ width: `${width}px`, maxHeight: '700px' }"> |
| 820397 | 3 | <el-collapse v-model="activeTab"> |
| H | 4 | <el-collapse-item name="base"> |
| 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 |
| 31 | ><Icon icon="ep:checked" />{{ getTaskCollapseItemName(elementType) }}</template | |
| 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() | |
| 122 | ||
| 123 | provide('prefix', props.prefix) | |
| 124 | provide('width', props.width) | |
| 125 | const bpmnInstances = () => (window as any)?.bpmnInstances | |
| 126 | ||
| 127 | // 监听 props.bpmnModeler 然后 initModels | |
| 128 | const unwatchBpmn = watch( | |
| 129 | () => props.bpmnModeler, | |
| 130 | () => { | |
| 131 | // 避免加载时 流程图 并未加载完成 | |
| 132 | if (!props.bpmnModeler) { | |
| 133 | console.log('缺少props.bpmnModeler') | |
| 134 | return | |
| 135 | } | |
| 136 | ||
| 137 | console.log('props.bpmnModeler 有值了！！！') | |
| 138 | const w = window as any | |
| 139 | w.bpmnInstances = { | |
| 140 | modeler: props.bpmnModeler, | |
| 141 | modeling: props.bpmnModeler.get('modeling'), | |
| 142 | moddle: props.bpmnModeler.get('moddle'), | |
| 143 | eventBus: props.bpmnModeler.get('eventBus'), | |
| 144 | bpmnFactory: props.bpmnModeler.get('bpmnFactory'), | |
| 145 | elementFactory: props.bpmnModeler.get('elementFactory'), | |
| 146 | elementRegistry: props.bpmnModeler.get('elementRegistry'), | |
| 147 | replace: props.bpmnModeler.get('replace'), | |
| 148 | selection: props.bpmnModeler.get('selection') | |
| 149 | } | |
| 150 | ||
| 151 | console.log(bpmnInstances(), 'window.bpmnInstances') | |
| 152 | getActiveElement() | |
| 153 | unwatchBpmn() | |
| 154 | }, | |
| 155 | { | |
| 156 | immediate: true | |
| 157 | } | |
| 158 | ) | |
| 159 | ||
| 160 | const getActiveElement = () => { | |
| 161 | // 初始第一个选中元素 bpmn:Process | |
| 162 | initFormOnChanged(null) | |
| 163 | props.bpmnModeler.on('import.done', (e) => { | |
| 164 | console.log(e, 'eeeee') | |
| 165 | initFormOnChanged(null) | |
| 166 | }) | |
| 167 | // 监听选择事件，修改当前激活的元素以及表单 | |
| 168 | props.bpmnModeler.on('selection.changed', ({ newSelection }) => { | |
| 169 | initFormOnChanged(newSelection[0] || null) | |
| 170 | }) | |
| 171 | props.bpmnModeler.on('element.changed', ({ element }) => { | |
| 172 | // 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。 | |
| 173 | if (element && element.id === elementId.value) { | |
| 174 | initFormOnChanged(element) | |
| 175 | } | |
| 176 | }) | |
| 177 | } | |
| 178 | // 初始化数据 | |
| 179 | const initFormOnChanged = (element) => { | |
| 180 | let activatedElement = element | |
| 181 | if (!activatedElement) { | |
| 182 | activatedElement = | |
| 183 | bpmnInstances().elementRegistry.find((el) => el.type === 'bpmn:Process') ?? | |
| 184 | bpmnInstances().elementRegistry.find((el) => el.type === 'bpmn:Collaboration') | |
| 185 | } | |
| 186 | if (!activatedElement) return | |
| 187 | console.log(` | |
| 188 | ---------- | |
| 189 | select element changed: | |
| 190 | id: ${activatedElement.id} | |
| 191 | type: ${activatedElement.businessObject.$type} | |
| 192 | ---------- | |
| 193 | `) | |
| 194 | console.log('businessObject: ', activatedElement.businessObject) | |
| 195 | bpmnInstances().bpmnElement = activatedElement | |
| 196 | bpmnElement.value = activatedElement | |
| 197 | elementId.value = activatedElement.id | |
| 198 | elementType.value = activatedElement.type.split(':')[1] || '' | |
| 199 | elementBusinessObject.value = JSON.parse(JSON.stringify(activatedElement.businessObject)) | |
| 200 | conditionFormVisible.value = !!( | |
| 201 | elementType.value === 'SequenceFlow' && | |
| 202 | activatedElement.source && | |
| 203 | activatedElement.source.type.indexOf('StartEvent') === -1 | |
| 204 | ) | |
| 205 | formVisible.value = elementType.value === 'UserTask' || elementType.value === 'StartEvent' | |
| 206 | } | |
| 207 | ||
| 208 | onBeforeUnmount(() => { | |
| 209 | const w = window as any | |
| 210 | w.bpmnInstances = null | |
| 211 | console.log(props, 'props1') | |
| 212 | console.log(props.bpmnModeler, 'props.bpmnModeler1') | |
| 213 | }) | |
| 214 | ||
| 215 | watch( | |
| 216 | () => elementId.value, | |
| 217 | () => { | |
| 218 | activeTab.value = 'base' | |
| 219 | } | |
| 220 | ) | |
| 221 | </script> | |
