保存、预览流程

src/plugins/package/penal/PropertiesPanel.vue

@@ -2,9 +2,11 @@
   <div class="process-panel__container" :style="{ width: `${this.width}px` }">
     <el-collapse v-model="activeTab">
       <el-collapse-item name="base">
-        <div slot="title" class="panel-tab__title">
-          <i class="el-icon-info"></i>常规
-        </div>
+        <template #title>
+          <div class="panel-tab__title">
+            <el-icon><InfoFilled /></el-icon>常规
+          </div>
+        </template>
         <element-base-info
           :id-edit-disabled="idEditDisabled"
           :business-object="elementBusinessObject"
@@ -16,9 +18,11 @@
         v-if="elementType === 'Process'"
         key="message"
       >
-        <div slot="title" class="panel-tab__title">
-          <i class="el-icon-s-comment"></i>消息与信号
-        </div>
+        <template #title>
+          <div class="panel-tab__title">
+            <el-icon><Comment /></el-icon>消息与信号
+          </div>
+        </template>
         <signal-and-massage />
       </el-collapse-item>
       <el-collapse-item
@@ -26,18 +30,22 @@
         v-if="conditionFormVisible"
         key="condition"
       >
-        <div slot="title" class="panel-tab__title">
-          <i class="el-icon-s-promotion"></i>流转条件
-        </div>
+        <template #title>
+          <div class="panel-tab__title">
+            <el-icon><Promotion /></el-icon>流转条件
+          </div>
+        </template>
         <flow-condition
           :business-object="elementBusinessObject"
           :type="elementType"
         />
       </el-collapse-item>
       <el-collapse-item name="condition" v-if="formVisible" key="form">
-        <div slot="title" class="panel-tab__title">
-          <i class="el-icon-s-order"></i>表单
-        </div>
+        <template #title>
+          <div class="panel-tab__title">
+            <el-icon><Document /></el-icon>表单
+          </div>
+        </template>
         <element-form :id="elementId" :type="elementType" />
       </el-collapse-item>
       <el-collapse-item
@@ -45,9 +53,11 @@
         v-if="elementType.indexOf('Task') !== -1"
         key="task"
       >
-        <div slot="title" class="panel-tab__title">
-          <i class="el-icon-s-claim"></i>任务
-        </div>
+        <template #title
+          ><div class="panel-tab__title">
+            <el-icon><Checked /></el-icon>任务
+          </div>
+        </template>
         <element-task :id="elementId" :type="elementType" />
       </el-collapse-item>
       <el-collapse-item
@@ -55,18 +65,22 @@
         v-if="elementType.indexOf('Task') !== -1 && elementType !== 'UserTask'"
         key="multiInstance"
       >
-        <div slot="title" class="panel-tab__title">
-          <i class="el-icon-s-help"></i>多实例
-        </div>
+        <template #title
+          ><div class="panel-tab__title">
+            <el-icon><Help /></el-icon>多实例
+          </div>
+        </template>
         <element-multi-instance
           :business-object="elementBusinessObject"
           :type="elementType"
         />
       </el-collapse-item>
       <el-collapse-item name="listeners" key="listeners">
-        <div slot="title" class="panel-tab__title">
-          <i class="el-icon-message-solid"></i>执行监听器
-        </div>
+        <template #title
+          ><div class="panel-tab__title">
+            <el-icon><Message /></el-icon>执行监听器
+          </div>
+        </template>
         <element-listeners :id="elementId" :type="elementType" />
       </el-collapse-item>
       <el-collapse-item
@@ -74,21 +88,27 @@
         v-if="elementType === 'UserTask'"
         key="taskListeners"
       >
-        <div slot="title" class="panel-tab__title">
-          <i class="el-icon-message-solid"></i>任务监听器
-        </div>
+        <template #title
+          ><div class="panel-tab__title">
+            <el-icon><Message /></el-icon>任务监听器
+          </div></template
+        >
         <user-task-listeners :id="elementId" :type="elementType" />
       </el-collapse-item>
       <el-collapse-item name="extensions" key="extensions">
-        <div slot="title" class="panel-tab__title">
-          <i class="el-icon-circle-plus"></i>扩展属性
-        </div>
+        <template #title
+          ><div class="panel-tab__title">
+            <el-icon><CirclePlus /></el-icon>扩展属性
+          </div></template
+        >
         <element-properties :id="elementId" :type="elementType" />
       </el-collapse-item>
       <el-collapse-item name="other" key="other">
-        <div slot="title" class="panel-tab__title">
-          <i class="el-icon-s-promotion"></i>其他
-        </div>
+        <template #title
+          ><div class="panel-tab__title">
+            <el-icon><Promotion /></el-icon>其他
+          </div></template
+        >
         <element-other-config :id="elementId" />
       </el-collapse-item>
     </el-collapse>
@@ -128,11 +148,6 @@ const props = defineProps({
 const { bpmnModeler, prefix, width, idEditDisabled } = toRefs(props);
 provide("prefix", prefix.value);
 provide("width", width.value);
-const bpmnStore = useBpmnStore();
-// const data = reactive({
-//   timer: undefined,
-// });
-// const { timer } = toRefs(data);
 
 const activeTab = ref("base");
 const elementId = ref("");
@@ -143,49 +158,15 @@ const formVisible = ref(false); // 表单配置
 let timer;
 let bpmnElement;
 function initModels() {
-  // bpmnStore.count = 123;
-  console.log(bpmnModeler.value);
   // 初始化 modeler 以及其他 moddle
   if (!bpmnModeler.value) {
     // 避免加载时 流程图 并未加载完成
     timer = setTimeout(() => initModels(), 10);
     return;
   }
-  // console.log(timer);
+
   if (timer) clearTimeout(timer);
-  // timer = null;
-  console.log(bpmnModeler.value);
-  // bpmnStore.bpmnInstances = {
-  //   test: bpmnModeler.value,
-  // };
-  // bpmnModeler.value.get = undefined;
-  // console.log(JSON.stringify(bpmnModeler.value));
-  // bpmnStore.setBpmnInstances({
-  //   modeler: { _container: bpmnModeler.value._container },
-  //   // modeling: bpmnModeler.value.get("modeling"),
-  //   // moddle: bpmnModeler.value.get("moddle"),
-  //   // eventBus: bpmnModeler.value.get("eventBus"),
-  //   // bpmnFactory: bpmnModeler.value.get("bpmnFactory"),
-  //   // elementFactory: bpmnModeler.value.get("elementFactory"),
-  //   elementRegistry: {
-  //     _elements: bpmnModeler.value.get("elementRegistry")._elements,
-  //   },
-  //   // replace: bpmnModeler.value.get("replace"),
-  //   // selection: bpmnModeler.value.get("selection"),
-  // });
-  // bpmnStore.bpmnInstances =
-  // {
-  //   modeler: bpmnModeler.value,
-  //   modeling: bpmnModeler.value.get("modeling"),
-  //   moddle: bpmnModeler.value.get("moddle"),
-  //   eventBus: bpmnModeler.value.get("eventBus"),
-  //   bpmnFactory: bpmnModeler.value.get("bpmnFactory"),
-  //   elementFactory: bpmnModeler.value.get("elementFactory"),
-  //   elementRegistry: bpmnModeler.value.get("elementRegistry"),
-  //   replace: bpmnModeler.value.get("replace"),
-  //   selection: bpmnModeler.value.get("selection"),
-  // };
-  console.log(bpmnStore.bpmnInstances, "167");
+
   window.bpmnInstances = {
     modeler: bpmnModeler.value,
     modeling: bpmnModeler.value.get("modeling"),
@@ -200,7 +181,6 @@ function initModels() {
   getActiveElement();
 }
 function getActiveElement() {
-  console.log("select first");
   // 初始第一个选中元素 bpmn:Process
   initFormOnChanged(null);
   bpmnModeler.value.on("import.done", (e) => {
@@ -208,7 +188,6 @@ function getActiveElement() {
   });
   // 监听选择事件，修改当前激活的元素以及表单
   bpmnModeler.value.on("selection.changed", ({ newSelection }) => {
-    console.log("selection.changed");
     initFormOnChanged(newSelection[0] || null);
   });
   bpmnModeler.value.on("element.changed", ({ element }) => {
@@ -254,9 +233,9 @@ function initFormOnChanged(element) {
   formVisible.value =
     elementType.value === "UserTask" || elementType.value === "StartEvent";
 }
-function beforeDestroy() {
+onBeforeUnmount(() => {
   window.bpmnInstances = null;
-}
+});
 
 watch(elementId, (val) => {
   activeTab.value = "base";