diff --git a/src/components/Form/src/BasicForm.vue b/src/components/Form/src/BasicForm.vue index 35a898a5ee9..1b1835c0b83 100644 --- a/src/components/Form/src/BasicForm.vue +++ b/src/components/Form/src/BasicForm.vue @@ -31,17 +31,7 @@ import type { AdvanceState } from './types/hooks'; import type { CSSProperties, Ref, WatchStopHandle } from 'vue'; - import { - defineComponent, - reactive, - ref, - computed, - unref, - onMounted, - watch, - toRefs, - toRaw, - } from 'vue'; + import { defineComponent, reactive, ref, computed, unref, onMounted, watch, toRefs } from 'vue'; import { Form, Row } from 'ant-design-vue'; import FormItem from './components/FormItem'; import FormAction from './components/FormAction.vue'; diff --git a/src/components/Form/src/hooks/useFormValues.ts b/src/components/Form/src/hooks/useFormValues.ts index 2514cb2f2b0..b7b36cd82f9 100644 --- a/src/components/Form/src/hooks/useFormValues.ts +++ b/src/components/Form/src/hooks/useFormValues.ts @@ -1,8 +1,9 @@ import { isArray, isFunction, isObject, isString } from '/@/utils/is'; import moment from 'moment'; -import { unref } from 'vue'; +import { unref, nextTick } from 'vue'; import type { Ref, ComputedRef } from 'vue'; import type { FieldMapToTime, FormSchema } from '../types/form'; +import { useModalContext } from '/@/components/Modal'; interface UseFormValuesContext { transformDateFuncRef: Ref; @@ -18,6 +19,7 @@ export function useFormValues({ getSchema, formModel, }: UseFormValuesContext) { + const modalFn = useModalContext(); // Processing form values function handleFormValues(values: Recordable) { if (!isObject(values)) { @@ -81,6 +83,10 @@ export function useFormValues({ } }); defaultValueRef.value = obj; + nextTick(() => { + // Solve the problem of modal adaptive height calculation when the form is placed in the modal + modalFn?.redoModalHeight?.(); + }); } return { handleFormValues, initDefault }; diff --git a/src/components/Modal/src/BasicModal.vue b/src/components/Modal/src/BasicModal.vue index 384879852ea..f91129a2520 100644 --- a/src/components/Modal/src/BasicModal.vue +++ b/src/components/Modal/src/BasicModal.vue @@ -23,6 +23,8 @@ :fullScreen="fullScreenRef" ref="modalWrapperRef" :loading="getProps.loading" + :minHeight="getProps.minHeight" + :height="getProps.height" :visible="visibleRef" :modalFooterHeight="footer !== undefined && !footer ? 0 : undefined" v-bind="omit(getProps.wrapperProps, 'visible')" diff --git a/src/components/Modal/src/components/ModalWrapper.vue b/src/components/Modal/src/components/ModalWrapper.vue index d8e761449b2..7c1a4c64bbd 100644 --- a/src/components/Modal/src/components/ModalWrapper.vue +++ b/src/components/Modal/src/components/ModalWrapper.vue @@ -38,6 +38,7 @@ modalHeaderHeight: propTypes.number.def(50), modalFooterHeight: propTypes.number.def(54), minHeight: propTypes.number.def(200), + height: propTypes.number, footerOffset: propTypes.number.def(0), visible: propTypes.bool, fullScreen: propTypes.bool, @@ -142,7 +143,11 @@ realHeightRef.value = window.innerHeight - props.modalFooterHeight - props.modalHeaderHeight; } else { - realHeightRef.value = realHeight > maxHeight ? maxHeight : realHeight + 16 + 30; + realHeightRef.value = props.height + ? props.height + : realHeight > maxHeight + ? maxHeight + : realHeight + 16 + 30; } emit('height-change', unref(realHeightRef)); } catch (error) { diff --git a/src/components/Modal/src/props.ts b/src/components/Modal/src/props.ts index 0e7f4adbffe..794d5081f7b 100644 --- a/src/components/Modal/src/props.ts +++ b/src/components/Modal/src/props.ts @@ -8,6 +8,8 @@ const { t } = useI18n(); export const modalProps = { visible: propTypes.bool, + height: propTypes.number, + minHeight: propTypes.number, // open drag draggable: propTypes.bool.def(true), centered: propTypes.bool, diff --git a/src/components/Modal/src/types.ts b/src/components/Modal/src/types.ts index 4d32a2f29b6..697fda70590 100644 --- a/src/components/Modal/src/types.ts +++ b/src/components/Modal/src/types.ts @@ -27,6 +27,8 @@ export interface ReturnInnerMethods extends ModalMethods { export type UseModalInnerReturnType = [RegisterFn, ReturnInnerMethods]; export interface ModalProps { + minHeight?: number; + height?: number; // 启用wrapper后 底部可以适当增加高度 wrapperFooterOffset?: number; draggable?: boolean; @@ -195,6 +197,7 @@ export interface ModalWrapperProps { modalHeaderHeight: number; modalFooterHeight: number; minHeight: number; + height: number; visible: boolean; fullScreen: boolean; useWrapper: boolean;