model

src/plugins/package/penal/base/ElementBaseInfo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="panel-tab__content">
-    <el-form size="mini" label-width="90px" @submit.native.prevent>
+    <el-form size="small" label-width="90px" @submit.native.prevent>
       <el-form-item label="ID">
         <el-input
           v-model="elementBaseInfo.id"
@@ -10,67 +10,83 @@
         />
       </el-form-item>
       <el-form-item label="名称">
-        <el-input v-model="elementBaseInfo.name" clearable @change="updateBaseInfo('name')" />
+        <el-input
+          v-model="elementBaseInfo.name"
+          clearable
+          @change="updateBaseInfo('name')"
+        />
       </el-form-item>
       <!--流程的基础属性-->
       <template v-if="elementBaseInfo.$type === 'bpmn:Process'">
         <el-form-item label="版本标签">
-          <el-input v-model="elementBaseInfo.versionTag" clearable @change="updateBaseInfo('versionTag')" />
+          <el-input
+            v-model="elementBaseInfo.versionTag"
+            clearable
+            @change="updateBaseInfo('versionTag')"
+          />
         </el-form-item>
         <el-form-item label="可执行">
-          <el-switch v-model="elementBaseInfo.isExecutable" active-text="是" inactive-text="否" @change="updateBaseInfo('isExecutable')" />
+          <el-switch
+            v-model="elementBaseInfo.isExecutable"
+            active-text="是"
+            inactive-text="否"
+            @change="updateBaseInfo('isExecutable')"
+          />
         </el-form-item>
       </template>
     </el-form>
   </div>
 </template>
-<script>
 
-export default {
-  name: "ElementBaseInfo",
-  props: {
-    businessObject: Object,
-    type: String,
-    idEditDisabled: {
-      type: Boolean,
-      default: true
+<script setup name="ElementBaseInfo">
+import { nextTick, onBeforeUnmount, toRefs } from "vue";
+import useBpmnStore from "@/store/modules/bpmn";
+const bpmnStore = useBpmnStore();
+const props = defineProps({
+  businessObject: Object,
+  type: String,
+  idEditDisabled: {
+    type: Boolean,
+    default: true,
+  },
+});
+const { businessObject, type, idEditDisabled } = toRefs(props);
+const data = reactive({
+  elementBaseInfo: {},
+  bpmnElement: undefined,
+});
+const { elementBaseInfo, bpmnElement } = toRefs(data);
+watch(
+  businessObject,
+  (val) => {
+    if (val) {
+      nextTick(() => {
+        resetBaseInfo();
+      });
     }
   },
-  data() {
-    return {
-      elementBaseInfo: {},
-    };
-  },
-  watch: {
-    businessObject: {
-      immediate: false,
-      handler: function(val) {
-        if (val) {
-          this.$nextTick(() => this.resetBaseInfo());
-        }
-      }
-    }
-  },
-  methods: {
-    resetBaseInfo() {
-      this.bpmnElement = window?.bpmnInstances?.bpmnElement;
-      this.elementBaseInfo = JSON.parse(JSON.stringify(this.bpmnElement.businessObject));
-    },
-    updateBaseInfo(key) {
-      const attrObj = Object.create(null);
-      attrObj[key] = this.elementBaseInfo[key];
-      if (key === "id") {
-        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
-          id: this.elementBaseInfo[key],
-          di: { id: `${this.elementBaseInfo[key]}_di` }
-        });
-      } else {
-        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, attrObj);
-      }
-    }
-  },
-  beforeDestroy() {
-    this.bpmnElement = null;
+  { immediate: false }
+);
+
+function resetBaseInfo() {
+  bpmnElement.value = window?.bpmnInstances?.bpmnElement;
+  elementBaseInfo.value = JSON.parse(
+    JSON.stringify(bpmnElement.value.businessObject)
+  );
+}
+function updateBaseInfo(key) {
+  const attrObj = Object.create(null);
+  attrObj[key] = elementBaseInfo.value[key];
+  if (key === "id") {
+    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+      id: elementBaseInfo.value[key],
+      di: { id: `${elementBaseInfo.value[key]}_di` },
+    });
+  } else {
+    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, attrObj);
   }
-};
+}
+onBeforeUnmount(() => {
+  bpmnElement.value = null;
+});
 </script>