版本更新至2.11.5

Ben Lin

2024-06-18 ebbd788fbb2c0b45d4473798efc57eec8ba74a25

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

@@ -4,67 +4,63 @@
    title="高级表单"
    content=" 高级表单常见于一次性输入和提交大批量数据的场景。"
  >
    <a-card title="仓库管理" :bordered="false">
    <Card title="仓库管理" :bordered="false">
      <BasicForm @register="register" />
    </a-card>
    <a-card title="任务管理" :bordered="false" class="!mt-5">
    </Card>
    <Card title="任务管理" :bordered="false" class="!mt-5">
      <BasicForm @register="registerTask" />
    </a-card>
    <a-card title="成员管理" :bordered="false" class="!mt-5">
    </Card>
    <Card title="成员管理" :bordered="false" class="!mt-5">
      <PersonTable ref="tableRef" />
    </a-card>
    </Card>

    <template #rightFooter>
      <a-button type="primary" @click="submitAll"> 提交 </a-button>
    </template>
  </PageWrapper>
</template>
<script lang="ts">
  import { BasicForm, useForm } from '/@/components/Form';
  import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
  import { BasicForm, useForm } from '@/components/Form';
  import { ref } from 'vue';
  import PersonTable from './PersonTable.vue';
  import { PageWrapper } from '/@/components/Page';
  import { PageWrapper } from '@/components/Page';
  import { schemas, taskSchemas } from './data';
  import { Card } from 'ant-design-vue';

  export default defineComponent({
    name: 'FormHightPage',
    components: { BasicForm, PersonTable, PageWrapper, [Card.name]: Card },
    setup() {
      const tableRef = ref<{ getDataSource: () => any } | null>(null);
  defineOptions({ name: 'FormHightPage' });

      const [register, { validate }] = useForm({
        layout: 'vertical',
        baseColProps: {
          span: 6,
        },
        schemas: schemas,
        showActionButtonGroup: false,
      });
  const tableRef = ref<{ getDataSource: () => any } | null>(null);

      const [registerTask, { validate: validateTaskForm }] = useForm({
        layout: 'vertical',
        baseColProps: {
          span: 6,
        },
        schemas: taskSchemas,
        showActionButtonGroup: false,
      });
  const [register, { validate }] = useForm({
    layout: 'vertical',
    baseColProps: {
      span: 6,
    },
    schemas: schemas,
    showActionButtonGroup: false,
  });

      async function submitAll() {
        try {
          if (tableRef.value) {
            console.log('table data:', tableRef.value.getDataSource());
          }
  const [registerTask, { validate: validateTaskForm }] = useForm({
    layout: 'vertical',
    baseColProps: {
      span: 6,
    },
    schemas: taskSchemas,
    showActionButtonGroup: false,
  });

          const [values, taskValues] = await Promise.all([validate(), validateTaskForm()]);
          console.log('form data:', values, taskValues);
        } catch (error) {}
  async function submitAll() {
    try {
      if (tableRef.value) {
        console.log('table data:', tableRef.value.getDataSource());
      }

      return { register, registerTask, submitAll, tableRef };
    },
  });
      const [values, taskValues] = await Promise.all([validate(), validateTaskForm()]);
      console.log('form data:', values, taskValues);
    } catch (error) {
      console.log(error);
    }
  }
</script>
<style lang="less" scoped>
  .high-form {