feat:表单

src/views/components/PenDatas.vue

@@ -1,10 +1,44 @@
 <template>
   <div class="props">
     <t-collapse
-      :defaultValue="['1', '2', '3']"
+      :defaultValue="['1', '2', '3', '7']"
       expandIconPlacement="right"
       :borderless="true"
     >
+    <t-collapse-panel  v-if="props.pen.formId" value="7" header="表单">
+          <!-- 表单子图元 -->
+          <div class="form-item px-12">
+            <label title="所属表单">所属表单 </label>
+            <div class="ml-8" :title="leaderPen?.id">{{ leaderPen?.description||leaderPen?.name }}</div>
+          </div>
+          <div class="form-item px-12">
+            <label>表单key </label>
+            <t-input
+              class="w-full"
+              v-model="props.pen.formKey"
+              @change="changeValue('formKey')"
+            />
+          </div>
+          <div class="form-item px-12">
+            <label>表单value </label>
+            <t-input
+              class="w-full"
+              v-model="props.pen.formValue"
+              @change="changeValue('formValue')"
+            />
+          </div>
+          <div class="form-item px-12">
+            <label>表单类型 </label>
+            <t-select
+              class="w-full"
+              v-model="props.pen.formType"
+              placeholder="选择变量"
+            >
+            <t-option key="submit" value="submit" label="提交"/>
+            <t-option key="reset" value="reset" label="重置"/>
+          </t-select>
+          </div>
+      </t-collapse-panel>
       <!-- <t-collapse-panel value="1" header="通信">
         <t-space direction="vertical" size="small" class="w-full">
           <div class="form-item">
@@ -1980,13 +2014,23 @@ const onConfirmAPI = async () => {
   }
 };
 
+const leaderPen = ref(null);
+const watcher = watch(
+  () => props.pen.id,
+  async () => {
+    leaderPen.value = meta2d.store.pens[props.pen.formId];
+  }
+);
+
 onMounted(() => {
    meta2d.on('click',getPenData);
+   leaderPen.value = meta2d.store.pens[props.pen.formId];
    getPenData({});
 });
 
 onUnmounted(() => {
   meta2d.off('click',getPenData);
+  watcher();
   clearInterval(timer);
 });
 </script>
@@ -2081,6 +2125,9 @@ onUnmounted(() => {
       padding-bottom: 0;
     }
   }
+  .form-item{
+    height: 32px;
+  }
 }
 
 .body {

src/views/components/PenEvents.vue

@@ -180,6 +180,21 @@ const options: any = computed(() => {
         },
       ]
     );
+  }else if(props.pen.name=='form'){
+    //表单组件
+    options.push(
+      ...[
+        {
+          value: 'submit',
+          content: '表单提交',
+        },
+        {
+          value: 'reset',
+          content: '表单重置',
+          divider: true,
+        },
+      ]
+    );
   }
 
   options.push(