<!--
 * @Description: 
 * @Author: Format-qi 283810417@qq.com
 * @Date: 2022-06-07 14:51:28
 * @LastEditors: Format-qi 283810417@qq.com
 * @LastEditTime: 2022-06-15 16:18:40
-->
<template>
  <bz-page-wrapper title="BzForm 表单示例" contentFullHeight>
    <Tabs v-model:activeKey="activeKey">
      <TabPane key="1" tab="基础表单"><BasicForm /></TabPane>
      <TabPane key="2" tab="useForm"><UseForm /></TabPane>
      <TabPane key="3" tab="refForm"><RefForm /></TabPane>
      <TabPane key="4" tab="可收缩表单"><AdvancedForm /></TabPane>
      <TabPane key="5" tab="表单验证"><RuleForm /></TabPane>
      <TabPane key="6" tab="动态表单"><DynamicForm /></TabPane>
      <TabPane key="7" tab="自定义组件"><CustomerForm /></TabPane>
      <TabPane key="8" tab="表单增删示例"><AppendForm /></TabPane>
      <TabPane key="9" tab="标签页+多级field表单"><TabsForm /></TabPane>
    </Tabs>
  </bz-page-wrapper>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BzPageWrapper } from '/@/index';
  import { Tabs, TabPane } from 'ant-design-vue';
  import BasicForm from './BasicForm.vue';
  import UseForm from './useForm.vue';
  import RefForm from './RefForm.vue';
  import AdvancedForm from './advancedForm.vue';
  import RuleForm from './ruleForm.vue';
  import DynamicForm from './dynamicForm.vue';
  import CustomerForm from './customerForm.vue';
  import AppendForm from './appendForm.vue';
  import TabsForm from './tabsForm.vue';
  export default defineComponent({
    components: {
      BzPageWrapper,

      Tabs,
      TabPane,
      BasicForm,
      UseForm,
      RefForm,
      AdvancedForm,
      RuleForm,
      DynamicForm,
      CustomerForm,
      AppendForm,
      TabsForm,
    },
    setup() {
      return {
        activeKey: ref('1'),
      };
    },
  });
</script>
