| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| 3e359e | 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> | |
| 29 | <el-collapse-item name="task" v-if="elementType.indexOf('Task') !== -1" key="task"> | |
| 30 | <template #title><Icon icon="ep:checked" />任务（审批人）</template> | |
| 31 | <element-task :id="elementId" :type="elementType" /> | |
| 32 | </el-collapse-item> | |
| 33 | <el-collapse-item | |
| 34 | name="multiInstance" | |
| 35 | v-if="elementType.indexOf('Task') !== -1" | |
| 36 | key="multiInstance" | |
| 37 | > | |
| 38 | <template #title><Icon icon="ep:help-filled" />多实例（会签配置）</template> | |
| 39 | <element-multi-instance :business-object="elementBusinessObject" :type="elementType" /> | |
| 40 | </el-collapse-item> | |
| 41 | <el-collapse-item name="listeners" key="listeners"> | |
| 42 | <template #title><Icon icon="ep:bell-filled" />执行监听器</template> | |
| 43 | <element-listeners :id="elementId" :type="elementType" /> | |
| 44 | </el-collapse-item> | |
| 45 | <el-collapse-item name="taskListeners" v-if="elementType === 'UserTask'" key="taskListeners"> | |
| 46 | <template #title><Icon icon="ep:bell-filled" />任务监听器</template> | |
| 47 | <user-task-listeners :id="elementId" :type="elementType" /> | |
| 48 | </el-collapse-item> | |
| 49 | <el-collapse-item name="extensions" key="extensions"> | |
| 50 | <template #title><Icon icon="ep:circle-plus-filled" />扩展属性</template> | |
| 51 | <element-properties :id="elementId" :type="elementType" /> | |
| 52 | </el-collapse-item> | |
| 53 | <el-collapse-item name="other" key="other"> | |
| 54 | <template #title><Icon icon="ep:promotion" />其他</template> | |
| 55 | <element-other-config :id="elementId" /> | |
| 56 | </el-collapse-item> | |
| 3e359e | 57 | <el-collapse-item name="customConfig" v-if="elementType.indexOf('Task') !== -1" key="customConfig"> |
| H | 58 | <template #title><Icon icon="ep:circle-plus-filled" />自定义配置</template> |
| 59 | <element-custom-config :id="elementId" :type="elementType" /> | |
| 60 | </el-collapse-item> | |
| 820397 | 61 | </el-collapse> |
| H | 62 | </div> |
| 63 | </template> | |
| 64 | <script lang="ts" setup> | |
| 65 | import ElementBaseInfo from './base/ElementBaseInfo.vue' | |
| 66 | import ElementOtherConfig from './other/ElementOtherConfig.vue' | |
| 67 | import ElementTask from './task/ElementTask.vue' | |
| 68 | import ElementMultiInstance from './multi-instance/ElementMultiInstance.vue' | |
| 69 | import FlowCondition from './flow-condition/FlowCondition.vue' | |
| 70 | import SignalAndMassage from './signal-message/SignalAndMessage.vue' | |
| 71 | import ElementListeners from './listeners/ElementListeners.vue' | |
| 72 | import ElementProperties from './properties/ElementProperties.vue' | |
| 73 | // import ElementForm from './form/ElementForm.vue' | |
| 74 | import UserTaskListeners from './listeners/UserTaskListeners.vue' | |
| 75 | ||
| 76 | defineOptions({ name: 'MyPropertiesPanel' }) | |
| 77 | ||
| 78 | /** | |
| 79 | * 侧边栏 | |
| 80 | * @Author MiyueFE | |
| 81 | * @Home https://github.com/miyuesc | |
| 82 | * @Date 2021年3月31日18:57:51 | |
| 83 | */ | |
| 84 | const props = defineProps({ | |
| 85 | bpmnModeler: { | |
| 86 | type: Object, | |
| 87 | default: () => {} | |
| 88 | }, | |
| 89 | prefix: { | |
| 90 | type: String, | |
| 91 | default: 'camunda' | |
| 92 | }, | |
| 93 | width: { | |
| 94 | type: Number, | |
| 95 | default: 480 | |
| 96 | }, | |
| 97 | idEditDisabled: { | |
| 98 | type: Boolean, | |
| 99 | default: false | |
| 100 | }, | |
| 101 | model: Object // 流程模型的数据 | |
| 102 | }) | |
| 103 | ||
| 104 | const activeTab = ref('base') | |
| 105 | const elementId = ref('') | |
| 106 | const elementType = ref('') | |
| 107 | const elementBusinessObject = ref<any>({}) // 元素 businessObject 镜像，提供给需要做判断的组件使用 | |
| 108 | const conditionFormVisible = ref(false) // 流转条件设置 | |
| 109 | const formVisible = ref(false) // 表单配置 | |
| 110 | const bpmnElement = ref() | |
| 111 | ||
| 112 | provide('prefix', props.prefix) | |
| 113 | provide('width', props.width) | |
| 114 | const bpmnInstances = () => (window as any)?.bpmnInstances | |
| 115 | ||
| 116 | // 监听 props.bpmnModeler 然后 initModels | |
| 117 | const unwatchBpmn = watch( | |
| 118 | () => props.bpmnModeler, | |
| 119 | () => { | |
| 120 | // 避免加载时 流程图 并未加载完成 | |
| 121 | if (!props.bpmnModeler) { | |
| 122 | console.log('缺少props.bpmnModeler') | |
| 123 | return | |
| 124 | } | |
| 125 | ||
| 126 | console.log('props.bpmnModeler 有值了！！！') | |
| 127 | const w = window as any | |
| 128 | w.bpmnInstances = { | |
| 129 | modeler: props.bpmnModeler, | |
| 130 | modeling: props.bpmnModeler.get('modeling'), | |
| 131 | moddle: props.bpmnModeler.get('moddle'), | |
| 132 | eventBus: props.bpmnModeler.get('eventBus'), | |
| 133 | bpmnFactory: props.bpmnModeler.get('bpmnFactory'), | |
| 134 | elementFactory: props.bpmnModeler.get('elementFactory'), | |
| 135 | elementRegistry: props.bpmnModeler.get('elementRegistry'), | |
| 136 | replace: props.bpmnModeler.get('replace'), | |
| 137 | selection: props.bpmnModeler.get('selection') | |
| 138 | } | |
| 139 | ||
| 140 | console.log(bpmnInstances(), 'window.bpmnInstances') | |
| 141 | getActiveElement() | |
| 142 | unwatchBpmn() | |
| 143 | }, | |
| 144 | { | |
| 145 | immediate: true | |
| 146 | } | |
| 147 | ) | |
| 148 | ||
| 149 | const getActiveElement = () => { | |
| 150 | // 初始第一个选中元素 bpmn:Process | |
| 151 | initFormOnChanged(null) | |
| 152 | props.bpmnModeler.on('import.done', (e) => { | |
| 153 | console.log(e, 'eeeee') | |
| 154 | initFormOnChanged(null) | |
| 155 | }) | |
| 156 | // 监听选择事件，修改当前激活的元素以及表单 | |
| 157 | props.bpmnModeler.on('selection.changed', ({ newSelection }) => { | |
| 158 | initFormOnChanged(newSelection[0] || null) | |
| 159 | }) | |
| 160 | props.bpmnModeler.on('element.changed', ({ element }) => { | |
| 161 | // 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。 | |
| 162 | if (element && element.id === elementId.value) { | |
| 163 | initFormOnChanged(element) | |
| 164 | } | |
| 165 | }) | |
| 166 | } | |
| 167 | // 初始化数据 | |
| 168 | const initFormOnChanged = (element) => { | |
| 169 | let activatedElement = element | |
| 170 | if (!activatedElement) { | |
| 171 | activatedElement = | |
| 172 | bpmnInstances().elementRegistry.find((el) => el.type === 'bpmn:Process') ?? | |
| 173 | bpmnInstances().elementRegistry.find((el) => el.type === 'bpmn:Collaboration') | |
| 174 | } | |
| 175 | if (!activatedElement) return | |
| 176 | console.log(` | |
| 177 | ---------- | |
| 178 | select element changed: | |
| 179 | id: ${activatedElement.id} | |
| 180 | type: ${activatedElement.businessObject.$type} | |
| 181 | ---------- | |
| 182 | `) | |
| 183 | console.log('businessObject: ', activatedElement.businessObject) | |
| 184 | bpmnInstances().bpmnElement = activatedElement | |
| 185 | bpmnElement.value = activatedElement | |
| 186 | elementId.value = activatedElement.id | |
| 187 | elementType.value = activatedElement.type.split(':')[1] || '' | |
| 188 | elementBusinessObject.value = JSON.parse(JSON.stringify(activatedElement.businessObject)) | |
| 189 | conditionFormVisible.value = !!( | |
| 190 | elementType.value === 'SequenceFlow' && | |
| 191 | activatedElement.source && | |
| 192 | activatedElement.source.type.indexOf('StartEvent') === -1 | |
| 193 | ) | |
| 194 | formVisible.value = elementType.value === 'UserTask' || elementType.value === 'StartEvent' | |
| 195 | } | |
| 196 | ||
| 197 | onBeforeUnmount(() => { | |
| 198 | const w = window as any | |
| 199 | w.bpmnInstances = null | |
| 200 | console.log(props, 'props1') | |
| 201 | console.log(props.bpmnModeler, 'props.bpmnModeler1') | |
| 202 | }) | |
| 203 | ||
| 204 | watch( | |
| 205 | () => elementId.value, | |
| 206 | () => { | |
| 207 | activeTab.value = 'base' | |
| 208 | } | |
| 209 | ) | |
| 210 | </script> | |
