版本更新至2.11.5

Ben Lin

2024-06-18 ebbd788fbb2c0b45d4473798efc57eec8ba74a25

 src/views/demo/form/TabsForm.vue

@@ -19,118 +19,104 @@
  </PageWrapper>
</template>

<script lang="ts">
  import { ref, defineComponent } from 'vue';
<script lang="ts" setup>
  import { ref } from 'vue';
  import { Tabs } from 'ant-design-vue';
  import { PageWrapper } from '/@/components/Page';
  import { CollapseContainer } from '/@/components/Container';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { PageWrapper } from '@/components/Page';
  import { CollapseContainer } from '@/components/Container';
  import { useMessage } from '@/hooks/web/useMessage';
  import { omit } from 'lodash-es';
  import { deepMerge } from '/@/utils';
  import { BasicForm, FormSchema, useForm, FormProps, UseFormReturnType } from '/@/components/Form';
  import { deepMerge } from '@/utils';
  import { BasicForm, FormSchema, useForm, FormProps, UseFormReturnType } from '@/components/Form';

  export default defineComponent({
    name: 'TabsFormDemo',
    components: { Tabs, TabPane: Tabs.TabPane, PageWrapper, CollapseContainer, BasicForm },
    setup() {
      type TabsFormType = {
        key: string;
        tab: string;
        forceRender?: boolean;
        Form: UseFormReturnType;
      };
  defineOptions({ name: 'TabsFormDemo' });

      const { createMessage } = useMessage();
      const activeKey = ref('tabs2');
      const loading = ref(false);
      const tabsFormSchema: TabsFormType[] = [];
  const TabPane = Tabs.TabPane;
  type TabsFormType = {
    key: string;
    tab: string;
    forceRender?: boolean;
    Form: UseFormReturnType;
  };

      // 公共属性
      const baseFormConfig: Partial<FormProps> = {
        showActionButtonGroup: false,
        labelWidth: 100,
      };
  const { createMessage } = useMessage();
  const activeKey = ref('tabs2');
  const loading = ref(false);
  const tabsFormSchema: TabsFormType[] = [];

      // 为每个字段模拟默认值, { tabs1: { field1: '', field2: '' }, tabs2: { field1: '' }, ... }
      const mockDefaultValue: Recordable = {};
  // 公共属性
  const baseFormConfig: Partial<FormProps> = {
    showActionButtonGroup: false,
    labelWidth: 100,
  };

      // 模拟5个标签页
      for (let i = 1; i <= 5; ++i) {
        const tabsKey = `tabs${i}`;
  // 为每个字段模拟默认值, { tabs1: { field1: '', field2: '' }, tabs2: { field1: '' }, ... }
  const mockDefaultValue: Recordable = {};

        // 每个标签页8个字段
        const schemas: FormSchema[] = [];
        const row: Recordable = {};
  // 模拟5个标签页
  for (let i = 1; i <= 5; ++i) {
    const tabsKey = `tabs${i}`;

        for (let j = 1; j <= 8; ++j) {
          schemas.push({
            field: `${tabsKey}.field${j}`,
            label: `${tabsKey}-field${j}`,
            component: 'Input',
            colProps: { span: 24 },
          });
          row[`field${j}`] = `field: ${tabsKey}.field${j}, default value`;
        }
    // 每个标签页8个字段
    const schemas: FormSchema[] = [];
    const row: Recordable = {};

        mockDefaultValue[tabsKey] = row;
    for (let j = 1; j <= 8; ++j) {
      schemas.push({
        field: `${tabsKey}.field${j}`,
        label: `${tabsKey}-field${j}`,
        component: 'Input',
        colProps: { span: 24 },
      });
      row[`field${j}`] = `field: ${tabsKey}.field${j}, default value`;
    }

        tabsFormSchema.push({
          key: tabsKey,
          tab: tabsKey,
          forceRender: true,
          Form: useForm(Object.assign({ schemas }, baseFormConfig) as FormProps),
        });
    mockDefaultValue[tabsKey] = row;

    tabsFormSchema.push({
      key: tabsKey,
      tab: tabsKey,
      forceRender: true,
      Form: useForm(Object.assign({ schemas }, baseFormConfig) as FormProps),
    });
  }

  async function handleReset() {
    for (const item of tabsFormSchema) {
      const { resetFields } = item.Form[1];
      await resetFields();
    }
  }

  async function handleSubmit() {
    let lastKey = '';
    loading.value = true;
    try {
      const values: Recordable = {};
      for (const item of tabsFormSchema) {
        lastKey = item.key;
        const { validate, getFieldsValue } = item.Form[1];
        await validate();
        // 表单已支持多级key
        deepMerge(values, getFieldsValue());
      }

      async function handleReset() {
        for (const item of tabsFormSchema) {
          const { resetFields } = item.Form[1];
          await resetFields();
        }
      }
      console.log('submit values: ', values);
      createMessage.success('提交成功！请打开控制台查看');
    } catch (e) {
      // 验证失败或出错，切换到对应标签页
      activeKey.value = lastKey;
      console.log(e);
    } finally {
      loading.value = false;
    }
  }

      async function handleSubmit() {
        let lastKey = '';
        loading.value = true;
        try {
          const values: Recordable = {};
          for (const item of tabsFormSchema) {
            lastKey = item.key;
            const { validate, getFieldsValue } = item.Form[1];
            await validate();
            // 表单已支持多级key
            deepMerge(values, getFieldsValue());
          }

          console.log('submit values: ', values);
          createMessage.success('提交成功！请打开控制台查看');
        } catch (e) {
          // 验证失败或出错，切换到对应标签页
          activeKey.value = lastKey;
          console.log(e);
        } finally {
          loading.value = false;
        }
      }

      async function handleSetValues() {
        console.log('默认值为: ', mockDefaultValue);
        for (const item of tabsFormSchema) {
          const { setFieldsValue } = item.Form[1];
          await setFieldsValue(mockDefaultValue);
        }
      }
      return {
        omit,
        loading,
        activeKey,
        tabsFormSchema,
        handleReset,
        handleSubmit,
        handleSetValues,
      };
    },
  });
  async function handleSetValues() {
    console.log('默认值为: ', mockDefaultValue);
    for (const item of tabsFormSchema) {
      const { setFieldsValue } = item.Form[1];
      await setFieldsValue(mockDefaultValue);
    }
  }
</script>

<style scoped></style>