canrd-outside / order-erp-front · Commits

Commit 5091a875ab520c51aec4c57cdd200d68016958ab

Authored by vben
1 parent 5c273534

feat(modal): add minHeight and height prop #156

Inline Side-by-side
Showing 6 changed files with 21 additions and 13 deletions
src/components/Form/src/BasicForm.vue
  View file @5091a87
... ... @@ -31,17 +31,7 @@
31 31 import type { AdvanceState } from './types/hooks';
32 32 import type { CSSProperties, Ref, WatchStopHandle } from 'vue';
33 33  
34   - import {
35   - defineComponent,
36   - reactive,
37   - ref,
38   - computed,
39   - unref,
40   - onMounted,
41   - watch,
42   - toRefs,
43   - toRaw,
44   - } from 'vue';
  34 + import { defineComponent, reactive, ref, computed, unref, onMounted, watch, toRefs } from 'vue';
45 35 import { Form, Row } from 'ant-design-vue';
46 36 import FormItem from './components/FormItem';
47 37 import FormAction from './components/FormAction.vue';
... ...
src/components/Form/src/hooks/useFormValues.ts
  View file @5091a87
1 1 import { isArray, isFunction, isObject, isString } from '/@/utils/is';
2 2 import moment from 'moment';
3   -import { unref } from 'vue';
  3 +import { unref, nextTick } from 'vue';
4 4 import type { Ref, ComputedRef } from 'vue';
5 5 import type { FieldMapToTime, FormSchema } from '../types/form';
  6 +import { useModalContext } from '/@/components/Modal';
6 7  
7 8 interface UseFormValuesContext {
8 9 transformDateFuncRef: Ref<Fn>;
... ... @@ -18,6 +19,7 @@ export function useFormValues({
18 19 getSchema,
19 20 formModel,
20 21 }: UseFormValuesContext) {
  22 + const modalFn = useModalContext();
21 23 // Processing form values
22 24 function handleFormValues(values: Recordable) {
23 25 if (!isObject(values)) {
... ... @@ -81,6 +83,10 @@ export function useFormValues({
81 83 }
82 84 });
83 85 defaultValueRef.value = obj;
  86 + nextTick(() => {
  87 + // Solve the problem of modal adaptive height calculation when the form is placed in the modal
  88 + modalFn?.redoModalHeight?.();
  89 + });
84 90 }
85 91  
86 92 return { handleFormValues, initDefault };
... ...
src/components/Modal/src/BasicModal.vue
  View file @5091a87
... ... @@ -23,6 +23,8 @@
23 23 :fullScreen="fullScreenRef"
24 24 ref="modalWrapperRef"
25 25 :loading="getProps.loading"
  26 + :minHeight="getProps.minHeight"
  27 + :height="getProps.height"
26 28 :visible="visibleRef"
27 29 :modalFooterHeight="footer !== undefined && !footer ? 0 : undefined"
28 30 v-bind="omit(getProps.wrapperProps, 'visible')"
... ...
src/components/Modal/src/components/ModalWrapper.vue
  View file @5091a87
... ... @@ -38,6 +38,7 @@
38 38 modalHeaderHeight: propTypes.number.def(50),
39 39 modalFooterHeight: propTypes.number.def(54),
40 40 minHeight: propTypes.number.def(200),
  41 + height: propTypes.number,
41 42 footerOffset: propTypes.number.def(0),
42 43 visible: propTypes.bool,
43 44 fullScreen: propTypes.bool,
... ... @@ -142,7 +143,11 @@
142 143 realHeightRef.value =
143 144 window.innerHeight - props.modalFooterHeight - props.modalHeaderHeight;
144 145 } else {
145   - realHeightRef.value = realHeight > maxHeight ? maxHeight : realHeight + 16 + 30;
  146 + realHeightRef.value = props.height
  147 + ? props.height
  148 + : realHeight > maxHeight
  149 + ? maxHeight
  150 + : realHeight + 16 + 30;
146 151 }
147 152 emit('height-change', unref(realHeightRef));
148 153 } catch (error) {
... ...
src/components/Modal/src/props.ts
  View file @5091a87
... ... @@ -8,6 +8,8 @@ const { t } = useI18n();
8 8  
9 9 export const modalProps = {
10 10 visible: propTypes.bool,
  11 + height: propTypes.number,
  12 + minHeight: propTypes.number,
11 13 // open drag
12 14 draggable: propTypes.bool.def(true),
13 15 centered: propTypes.bool,
... ...
src/components/Modal/src/types.ts
  View file @5091a87
... ... @@ -27,6 +27,8 @@ export interface ReturnInnerMethods extends ModalMethods {
27 27 export type UseModalInnerReturnType = [RegisterFn, ReturnInnerMethods];
28 28  
29 29 export interface ModalProps {
  30 + minHeight?: number;
  31 + height?: number;
30 32 // 启用wrapper后 底部可以适当增加高度
31 33 wrapperFooterOffset?: number;
32 34 draggable?: boolean;
... ... @@ -195,6 +197,7 @@ export interface ModalWrapperProps {
195 197 modalHeaderHeight: number;
196 198 modalFooterHeight: number;
197 199 minHeight: number;
  200 + height: number;
198 201 visible: boolean;
199 202 fullScreen: boolean;
200 203 useWrapper: boolean;
... ...