仓储系统
查看 | 历史 | 提交 | 提交对比
xm
2024-06-14 722af26bc6fec32bb289b1df51a9016a4935610f
提交 | 用户 | 时间
722af2 1 <template>
X 2   <div class="process-panel__container" :style="{ width: `${this.width}px` }">
3     <el-collapse v-model="activeTab">
4       <el-collapse-item name="base">
5         <div slot="title" class="panel-tab__title"><i class="el-icon-info"></i>常规</div>
6         <element-base-info :id-edit-disabled="idEditDisabled" :business-object="elementBusinessObject" :type="elementType" />
7       </el-collapse-item>
8       <el-collapse-item name="condition" v-if="elementType === 'Process'" key="message">
9         <div slot="title" class="panel-tab__title"><i class="el-icon-s-comment"></i>消息与信号</div>
10         <signal-and-massage />
11       </el-collapse-item>
12       <el-collapse-item name="condition" v-if="conditionFormVisible" key="condition">
13         <div slot="title" class="panel-tab__title"><i class="el-icon-s-promotion"></i>流转条件</div>
14         <flow-condition :business-object="elementBusinessObject" :type="elementType" />
15       </el-collapse-item>
16       <el-collapse-item name="condition" v-if="formVisible" key="form">
17         <div slot="title" class="panel-tab__title"><i class="el-icon-s-order"></i>表单</div>
18         <element-form :id="elementId" :type="elementType" />
19       </el-collapse-item>
20       <el-collapse-item name="task" v-if="elementType.indexOf('Task') !== -1" key="task">
21         <div slot="title" class="panel-tab__title"><i class="el-icon-s-claim"></i>任务</div>
22         <element-task :id="elementId" :type="elementType" />
23       </el-collapse-item>
24       <el-collapse-item name="multiInstance" v-if="elementType.indexOf('Task') !== -1 && elementType !== 'UserTask'" key="multiInstance">
25         <div slot="title" class="panel-tab__title"><i class="el-icon-s-help"></i>多实例</div>
26         <element-multi-instance :business-object="elementBusinessObject" :type="elementType" />
27       </el-collapse-item>
28       <el-collapse-item name="listeners" key="listeners">
29         <div slot="title" class="panel-tab__title"><i class="el-icon-message-solid"></i>执行监听器</div>
30         <element-listeners :id="elementId" :type="elementType" />
31       </el-collapse-item>
32       <el-collapse-item name="taskListeners" v-if="elementType === 'UserTask'" key="taskListeners">
33         <div slot="title" class="panel-tab__title"><i class="el-icon-message-solid"></i>任务监听器</div>
34         <user-task-listeners :id="elementId" :type="elementType" />
35       </el-collapse-item>
36       <el-collapse-item name="extensions" key="extensions">
37         <div slot="title" class="panel-tab__title"><i class="el-icon-circle-plus"></i>扩展属性</div>
38         <element-properties :id="elementId" :type="elementType" />
39       </el-collapse-item>
40       <el-collapse-item name="other" key="other">
41         <div slot="title" class="panel-tab__title"><i class="el-icon-s-promotion"></i>其他</div>
42         <element-other-config :id="elementId" />
43       </el-collapse-item>
44     </el-collapse>
45   </div>
46 </template>
47 <script>
48 import ElementBaseInfo from "./base/ElementBaseInfo";
49 import ElementOtherConfig from "./other/ElementOtherConfig";
50 import ElementTask from "./task/ElementTask";
51 import ElementMultiInstance from "./multi-instance/ElementMultiInstance";
52 import FlowCondition from "./flow-condition/FlowCondition";
53 import SignalAndMassage from "./signal-message/SignalAndMessage";
54 import ElementListeners from "./listeners/ElementListeners";
55 import ElementProperties from "./properties/ElementProperties";
56 import ElementForm from "./form/ElementForm";
57 import UserTaskListeners from "./listeners/UserTaskListeners";
58 /**
59  * 侧边栏
60  * @Author MiyueFE
61  * @Home https://github.com/miyuesc
62  * @Date 2021年3月31日18:57:51
63  */
64 export default {
65   name: "BpmnPropertiesPanel",
66   components: {
67     UserTaskListeners,
68     ElementForm,
69     ElementProperties,
70     ElementListeners,
71     SignalAndMassage,
72     FlowCondition,
73     ElementMultiInstance,
74     ElementTask,
75     ElementOtherConfig,
76     ElementBaseInfo
77   },
78   componentName: "BpmnPropertiesPanel",
79   props: {
80     bpmnModeler: Object,
81     prefix: {
82       type: String,
83       default: "camunda"
84     },
85     width: {
86       type: Number,
87       default: 480
88     },
89     idEditDisabled: {
90       type: Boolean,
91       default: false
92     }
93   },
94   provide() {
95     return {
96       prefix: this.prefix,
97       width: this.width
98     };
99   },
100   data() {
101     return {
102       activeTab: "base",
103       elementId: "",
104       elementType: "",
105       elementBusinessObject: {}, // 元素 businessObject 镜像，提供给需要做判断的组件使用
106       conditionFormVisible: false, // 流转条件设置
107       formVisible: false // 表单配置
108     };
109   },
110   watch: {
111     elementId: {
112       handler() {
113         this.activeTab = "base";
114       }
115     }
116   },
117   created() {
118     this.initModels();
119   },
120   methods: {
121     initModels() {
122       // 初始化 modeler 以及其他 moddle
123       if (!this.bpmnModeler) {
124         // 避免加载时 流程图 并未加载完成
125         this.timer = setTimeout(() => this.initModels(), 10);
126         return;
127       }
128       if (this.timer) clearTimeout(this.timer);
129       window.bpmnInstances = {
130         modeler: this.bpmnModeler,
131         modeling: this.bpmnModeler.get("modeling"),
132         moddle: this.bpmnModeler.get("moddle"),
133         eventBus: this.bpmnModeler.get("eventBus"),
134         bpmnFactory: this.bpmnModeler.get("bpmnFactory"),
135         elementFactory: this.bpmnModeler.get("elementFactory"),
136         elementRegistry: this.bpmnModeler.get("elementRegistry"),
137         replace: this.bpmnModeler.get("replace"),
138         selection: this.bpmnModeler.get("selection")
139       };
140       this.getActiveElement();
141     },
142     getActiveElement() {
143       // 初始第一个选中元素 bpmn:Process
144       this.initFormOnChanged(null);
145       this.bpmnModeler.on("import.done", e => {
146         this.initFormOnChanged(null);
147       });
148       // 监听选择事件，修改当前激活的元素以及表单
149       this.bpmnModeler.on("selection.changed", ({ newSelection }) => {
150         this.initFormOnChanged(newSelection[0] || null);
151       });
152       this.bpmnModeler.on("element.changed", ({ element }) => {
153         // 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
154         if (element && element.id === this.elementId) {
155           this.initFormOnChanged(element);
156         }
157       });
158     },
159     // 初始化数据
160     initFormOnChanged(element) {
161       let activatedElement = element;
162       if (!activatedElement) {
163         activatedElement =
164           window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Process") ??
165           window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Collaboration");
166       }
167       if (!activatedElement) return;
168       console.log(`
169               ----------
170       select element changed:
171                 id:  ${activatedElement.id}
172               type:  ${activatedElement.businessObject.$type}
173               ----------
174               `);
175       console.log("businessObject: ", activatedElement.businessObject);
176       window.bpmnInstances.bpmnElement = activatedElement;
177       this.bpmnElement = activatedElement;
178       this.elementId = activatedElement.id;
179       this.elementType = activatedElement.type.split(":")[1] || "";
180       this.elementBusinessObject = JSON.parse(JSON.stringify(activatedElement.businessObject));
181       this.conditionFormVisible = !!(
182         this.elementType === "SequenceFlow" &&
183         activatedElement.source &&
184         activatedElement.source.type.indexOf("StartEvent") === -1
185       );
186       this.formVisible = this.elementType === "UserTask" || this.elementType === "StartEvent";
187     },
188     beforeDestroy() {
189       window.bpmnInstances = null;
190     }
191   }
192 };
193 </script>