feat(form-page): add form page demo

src/views/demo/page/form/high/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="high-form">
+    <a-page-header title="高级表单" :ghost="false">
+      高级表单常见于一次性输入和提交大批量数据的场景。
+    </a-page-header>
+
+    <div class="m-5">
+      <a-card title="仓库管理" :bordered="false">
+        <BasicForm @register="register" layout="vertical" />
+      </a-card>
+      <a-card title="任务管理" :bordered="false" class="mt-5">
+        <BasicForm @register="registerTask" layout="vertical" />
+      </a-card>
+      <a-card title="成员管理" :bordered="false" class="mt-5">
+        <PersonTable ref="tableRef" />
+      </a-card>
+    </div>
+
+    <app-footer>
+      <template #right>
+        <a-button type="primary" @click="submitAll">提交</a-button>
+      </template>
+    </app-footer>
+  </div>
+</template>
+<script lang="ts">
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { defineComponent, ref } from 'vue';
+  import PersonTable from './PersonTable.vue';
+  import { schemas, taskSchemas } from './data';
+
+  export default defineComponent({
+    components: { BasicForm, PersonTable },
+    setup() {
+      const tableRef = ref<{ getDataSource: () => any } | null>(null);
+
+      const [register, { validate }] = useForm({
+        baseColProps: {
+          span: 6,
+        },
+        schemas: schemas,
+        showActionButtonGroup: false,
+      });
+
+      const [registerTask, { validate: validateTaskForm }] = useForm({
+        baseColProps: {
+          span: 6,
+        },
+        schemas: taskSchemas,
+        showActionButtonGroup: false,
+      });
+
+      async function submitAll() {
+        try {
+          if (tableRef.value) {
+            console.log('table data:', tableRef.value.getDataSource());
+          }
+
+          const [values, taskValues] = await Promise.all([validate(), validateTaskForm()]);
+          console.log('form data:', values, taskValues);
+        } catch (error) {}
+      }
+
+      return { register, registerTask, submitAll, tableRef };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .high-form {
+    padding-bottom: 48px;
+  }
+</style>