工业互联网平台前端 vue3版本
查看 | 历史 | 提交 | 提交对比
houzhongjian
2024-09-27 912df10c968d01457d15bcfa0b10acc7d7d4b7aa
提交 | 用户 | 时间
820397 1 <template>
H 2   <div class="process-panel__container" :style="{ width: `${width}px` }">
3     <el-collapse v-model="activeTab">
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>
57     </el-collapse>
58   </div>
59 </template>
60 <script lang="ts" setup>
61 import ElementBaseInfo from './base/ElementBaseInfo.vue'
62 import ElementOtherConfig from './other/ElementOtherConfig.vue'
63 import ElementTask from './task/ElementTask.vue'
64 import ElementMultiInstance from './multi-instance/ElementMultiInstance.vue'
65 import FlowCondition from './flow-condition/FlowCondition.vue'
66 import SignalAndMassage from './signal-message/SignalAndMessage.vue'
67 import ElementListeners from './listeners/ElementListeners.vue'
68 import ElementProperties from './properties/ElementProperties.vue'
69 // import ElementForm from './form/ElementForm.vue'
70 import UserTaskListeners from './listeners/UserTaskListeners.vue'
71
72 defineOptions({ name: 'MyPropertiesPanel' })
73
74 /**
75  * 侧边栏
76  * @Author MiyueFE
77  * @Home https://github.com/miyuesc
78  * @Date 2021年3月31日18:57:51
79  */
80 const props = defineProps({
81   bpmnModeler: {
82     type: Object,
83     default: () => {}
84   },
85   prefix: {
86     type: String,
87     default: 'camunda'
88   },
89   width: {
90     type: Number,
91     default: 480
92   },
93   idEditDisabled: {
94     type: Boolean,
95     default: false
96   },
97   model: Object // 流程模型的数据
98 })
99
100 const activeTab = ref('base')
101 const elementId = ref('')
102 const elementType = ref('')
103 const elementBusinessObject = ref<any>({}) // 元素 businessObject 镜像，提供给需要做判断的组件使用
104 const conditionFormVisible = ref(false) // 流转条件设置
105 const formVisible = ref(false) // 表单配置
106 const bpmnElement = ref()
107
108 provide('prefix', props.prefix)
109 provide('width', props.width)
110 const bpmnInstances = () => (window as any)?.bpmnInstances
111
112 // 监听 props.bpmnModeler 然后 initModels
113 const unwatchBpmn = watch(
114   () => props.bpmnModeler,
115   () => {
116     // 避免加载时 流程图 并未加载完成
117     if (!props.bpmnModeler) {
118       console.log('缺少props.bpmnModeler')
119       return
120     }
121
122     console.log('props.bpmnModeler 有值了！！！')
123     const w = window as any
124     w.bpmnInstances = {
125       modeler: props.bpmnModeler,
126       modeling: props.bpmnModeler.get('modeling'),
127       moddle: props.bpmnModeler.get('moddle'),
128       eventBus: props.bpmnModeler.get('eventBus'),
129       bpmnFactory: props.bpmnModeler.get('bpmnFactory'),
130       elementFactory: props.bpmnModeler.get('elementFactory'),
131       elementRegistry: props.bpmnModeler.get('elementRegistry'),
132       replace: props.bpmnModeler.get('replace'),
133       selection: props.bpmnModeler.get('selection')
134     }
135
136     console.log(bpmnInstances(), 'window.bpmnInstances')
137     getActiveElement()
138     unwatchBpmn()
139   },
140   {
141     immediate: true
142   }
143 )
144
145 const getActiveElement = () => {
146   // 初始第一个选中元素 bpmn:Process
147   initFormOnChanged(null)
148   props.bpmnModeler.on('import.done', (e) => {
149     console.log(e, 'eeeee')
150     initFormOnChanged(null)
151   })
152   // 监听选择事件，修改当前激活的元素以及表单
153   props.bpmnModeler.on('selection.changed', ({ newSelection }) => {
154     initFormOnChanged(newSelection[0] || null)
155   })
156   props.bpmnModeler.on('element.changed', ({ element }) => {
157     // 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
158     if (element && element.id === elementId.value) {
159       initFormOnChanged(element)
160     }
161   })
162 }
163 // 初始化数据
164 const initFormOnChanged = (element) => {
165   let activatedElement = element
166   if (!activatedElement) {
167     activatedElement =
168       bpmnInstances().elementRegistry.find((el) => el.type === 'bpmn:Process') ??
169       bpmnInstances().elementRegistry.find((el) => el.type === 'bpmn:Collaboration')
170   }
171   if (!activatedElement) return
172   console.log(`
173               ----------
174       select element changed:
175                 id:  ${activatedElement.id}
176               type:  ${activatedElement.businessObject.$type}
177               ----------
178               `)
179   console.log('businessObject: ', activatedElement.businessObject)
180   bpmnInstances().bpmnElement = activatedElement
181   bpmnElement.value = activatedElement
182   elementId.value = activatedElement.id
183   elementType.value = activatedElement.type.split(':')[1] || ''
184   elementBusinessObject.value = JSON.parse(JSON.stringify(activatedElement.businessObject))
185   conditionFormVisible.value = !!(
186     elementType.value === 'SequenceFlow' &&
187     activatedElement.source &&
188     activatedElement.source.type.indexOf('StartEvent') === -1
189   )
190   formVisible.value = elementType.value === 'UserTask' || elementType.value === 'StartEvent'
191 }
192
193 onBeforeUnmount(() => {
194   const w = window as any
195   w.bpmnInstances = null
196   console.log(props, 'props1')
197   console.log(props.bpmnModeler, 'props.bpmnModeler1')
198 })
199
200 watch(
201   () => elementId.value,
202   () => {
203     activeTab.value = 'base'
204   }
205 )
206 </script>