负责人选择

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

@@ -1,15 +1,22 @@
 <template>
   <div class="panel-tab__content">
-    <el-form size="small" label-width="90px" @submit.native.prevent>
-      <el-form-item label="ID">
+    <el-form
+      size="small"
+      label-width="90px"
+      :model="elementBaseInfo"
+      ref="formRef"
+      :rules="rules"
+      @submit.native.prevent
+    >
+      <!-- <el-form-item label="ID">
         <el-input
           v-model="elementBaseInfo.id"
           :disabled="idEditDisabled || elementBaseInfo.$type === 'bpmn:Process'"
           clearable
           @change="updateBaseInfo('id')"
         />
-      </el-form-item>
-      <el-form-item label="名称">
+      </el-form-item> -->
+      <el-form-item label="节点名称" prop="name">
         <el-input
           v-model="elementBaseInfo.name"
           clearable
@@ -39,8 +46,9 @@
 </template>
 
 <script setup name="ElementBaseInfo">
-import { nextTick, onBeforeUnmount, toRefs } from "vue";
+import { nextTick, onBeforeUnmount, toRefs, ref } from "vue";
 let bpmnElement;
+const formRef = ref();
 const props = defineProps({
   businessObject: Object,
   type: String,
@@ -52,9 +60,12 @@ const props = defineProps({
 const { businessObject, type, idEditDisabled } = toRefs(props);
 const data = reactive({
   elementBaseInfo: {},
-  bpmnElement: undefined,
+  rules: {
+    name: [{ required: true, trigger: "blur", message: "节点名称必填" }],
+  },
 });
-const { elementBaseInfo } = toRefs(data);
+const { elementBaseInfo, rules } = toRefs(data);
+
 watch(
   businessObject,
   (val) => {
@@ -72,6 +83,11 @@ function resetBaseInfo() {
   elementBaseInfo.value = JSON.parse(
     JSON.stringify(bpmnElement.businessObject)
   );
+  if (type.value === "StartEvent") {
+    elementBaseInfo.value.name = "开始";
+  } else if (type.value === "EndEvent") {
+    elementBaseInfo.value.name = "结束";
+  }
 }
 function updateBaseInfo(key) {
   const attrObj = Object.create(null);