FEATURE: Form item group demo

[shiyuecamus]

Version

Vben Admin V5

Description

现在项目当中有一个场景是需要填写联系人信息，包括国家，省，城市，邮编，电话，邮箱，地址等。这个联系人信息在系统当中的很多表单中都有使用场景。因此我想把它封装成一个组件，供其他页面的表单直接引用(其他页面的表单除了联系人信息外还有自己的业务表单项)。请问可以提供合适的demo么？

Proposed Solution

或者能够告诉我具体应该怎么做

Alternatives Considered

No response

Additional Context

No response

Validations

• Read the docs
• Ensure the code is up to date. (Some issues have been fixed in the latest version)
• I have searched the existing issues and checked that my issue does not duplicate any existing issues.

[shiyuecamus]

<script lang="ts" setup>
import { useVbenForm, z } from '#/adapter/form';
import { $t } from '@vben/locales';
import { NDynamicInput } from 'naive-ui';
import ContactInfo from '#/components/contact-info/index.vue';

defineOptions({ name: 'TenantForm' });

const emit = defineEmits<{
  submit: [Record<string, any>];
}>();

// 初始化表单
const [Form, formApi] = useVbenForm({
  handleSubmit: (record: Record<string, any>) => emit('submit', record),
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: $t('common.placeholder.inputWithName', {
          name: $t('page.system.tenant.name'),
        }),
      },
      fieldName: 'name',
      label: $t('page.system.tenant.name'),
      rules: 'required',
    },
    {
      component: 'Input',
      fieldName: 'domain',
      label: $t('page.system.tenant.domain'),
      rules: z
        .array(
          z
            .string()
            .regex(
              /^(?:(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}|(?:\d{1,3}\.){3}\d{1,3}(?::\d{1,5})?)$/,
              $t('errors.invalidDomainOrAddress'),
            ),
        )
        .nonempty({
          message: $t('errors.cannotBeEmptyWithName', {
            name: $t('page.system.tenant.domain'),
          }),
        }),
    },
    {
      component: 'Input',
      defaultValue: {},
      componentProps: {},
      fieldName: 'contactInfo',
      label: $t('page.system.tenant.name'),
    },
  ],
  showDefaultActions: false,
});

// 导出 formApi
defineExpose({
  formApi,
});
</script>

<template>
  <Form>
    <template #domain="slotProps">
      <NDynamicInput v-bind="slotProps" />
    </template>
    <template #contactInfo="slotProps">
      {{ console.log(slotProps) }}
      <ContactInfo v-bind="slotProps"/>
    </template>
  </Form>
</template>

<style scoped></style>

以上是某个页面的表单的代码。请问ContactInfo组件中应该具体做些什么呢？可以给我一些具体的代码或者demo么？

[chichunyang]

为什么不抽离schma到一个data.ts或者什么里面，然后export出去？

[shiyuecamus]

为什么不抽离schma到一个data.ts或者什么里面，然后export出去？

这里面有一些表单项是需要自定义的，比如国家省市的联动选择，还有国际电话填写的组件，就是那种带国际电话区号的。这种情况您能给提供一些思路么？