工业互联网平台前端 vue3版本
查看 | 历史 | 提交 | 提交对比
houzhongjian
9 天以前 3e359e4550d018035406a97c190b98f83839ba7f
提交 | 用户 | 时间
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>