FEATURE: 可否封装一个浮层表单组件ModalForm/DrawerForm

[ITstyle]

Version

Vben Admin V5

Description

类似于https://procomponents.ant.design/components/modal-form,这个是ant react版本的

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.

[biggerstar]

我也遇到这个问题了， 简单写了个方案， 大家可以应急用下， 如果要正规点的可以再等等官方出版

<!-- 带表单的模态框， 通过  Confirm 按钮提交进行表单和模态框的协调-->
<script lang="ts" setup>
import {
  type ExtendedFormApi, type ExtendedModalApi,
  type ModalProps,
  useVbenModal,
  VbenButton,
  type VbenFormProps,
} from '@vben/common-ui';
import { type PropType, toRaw, useAttrs } from 'vue';
import { useVbenForm } from '#/adapter/form';

type Attr = Record<any, any> & {
  class: string;
}
const props = defineProps({
  modalProps: {
    type: Object as PropType<ModalProps>,
    default: {},
    required: false,
  },
  formProps: {
    type: Object as PropType<VbenFormProps>,
    default: {},
    required: false,
  },
  buttonContent: {
    type: String,
    default: '',
  },
  /** submit 可以用于提交数据，返回一个布尔值表示是否关闭模态框 */
  submit: {
    type: Function as PropType<(data: Record<string, unknown>, ref: {formApi: ExtendedFormApi, modalApi: ExtendedModalApi}) => Promise<boolean>>,
  },
});
const attrs = useAttrs() as Attr
const [BaseForm, formApi] = useVbenForm(props.formProps);
const [Modal, modalApi] = useVbenModal({
  ...props.modalProps,
  async onConfirm() {
    const result = await formApi.validate()
    if (!result.valid) return
    modalApi.setState({
      confirmLoading: true
    })
    if (!props.submit) {
      throw new Error('ModalForm attr submit function is required')
    }
    const isClose = await props.submit(toRaw(await formApi.getValues()), {formApi, modalApi})
    Boolean(isClose) && modalApi.close()
    modalApi.setState({
      confirmLoading: false,
    })
  },
});
</script>
<template>
  <div>
    <div @click="modalApi.open()">
      <slot name="default" >
        <VbenButton v-if="props.buttonContent" type="primary" >{{props.buttonContent}}</VbenButton>
      </slot>
    </div>
    <Modal :class="attrs.class">
      <BaseForm/>
    </Modal>
  </div>
</template>