提交 2882d6e9 编写于 作者: V vben

perf(form): perf form in modal

上级 733afddd
...@@ -33,9 +33,19 @@ ...@@ -33,9 +33,19 @@
<script lang="ts"> <script lang="ts">
import type { FormActionType, FormProps, FormSchema } from './types/form'; import type { FormActionType, FormProps, FormSchema } from './types/form';
import type { AdvanceState } from './types/hooks'; import type { AdvanceState } from './types/hooks';
import type { CSSProperties, Ref, WatchStopHandle } from 'vue'; import type { CSSProperties, Ref } from 'vue';
import { defineComponent, reactive, ref, computed, unref, onMounted, watch, toRefs } from 'vue'; import {
defineComponent,
reactive,
ref,
computed,
unref,
onMounted,
watch,
toRefs,
nextTick,
} from 'vue';
import { Form, Row } from 'ant-design-vue'; import { Form, Row } from 'ant-design-vue';
import FormItem from './components/FormItem'; import FormItem from './components/FormItem';
import FormAction from './components/FormAction.vue'; import FormAction from './components/FormAction.vue';
...@@ -51,6 +61,7 @@ ...@@ -51,6 +61,7 @@
import { useFormEvents } from './hooks/useFormEvents'; import { useFormEvents } from './hooks/useFormEvents';
import { createFormContext } from './hooks/useFormContext'; import { createFormContext } from './hooks/useFormContext';
import { useAutoFocus } from './hooks/useAutoFocus'; import { useAutoFocus } from './hooks/useAutoFocus';
import { useModalContext } from '/@/components/Modal';
import { basicProps } from './props'; import { basicProps } from './props';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '/@/hooks/web/useDesign';
...@@ -62,6 +73,7 @@ ...@@ -62,6 +73,7 @@
emits: ['advanced-change', 'reset', 'submit', 'register'], emits: ['advanced-change', 'reset', 'submit', 'register'],
setup(props, { emit }) { setup(props, { emit }) {
const formModel = reactive<Recordable>({}); const formModel = reactive<Recordable>({});
const modalFn = useModalContext();
const advanceState = reactive<AdvanceState>({ const advanceState = reactive<AdvanceState>({
isAdvanced: true, isAdvanced: true,
...@@ -188,11 +200,15 @@ ...@@ -188,11 +200,15 @@
} }
); );
const stopWatch: WatchStopHandle = watch( watch(
() => getSchema.value, () => getSchema.value,
(schema) => { (schema) => {
nextTick(() => {
// Solve the problem of modal adaptive height calculation when the form is placed in the modal
modalFn?.redoModalHeight?.();
});
if (unref(isInitedDefaultRef)) { if (unref(isInitedDefaultRef)) {
return stopWatch(); return;
} }
if (schema?.length) { if (schema?.length) {
initDefault(); initDefault();
......
import { isArray, isFunction, isObject, isString, isNullOrUnDef } from '/@/utils/is'; import { isArray, isFunction, isObject, isString, isNullOrUnDef } from '/@/utils/is';
import { dateUtil } from '/@/utils/dateUtil'; import { dateUtil } from '/@/utils/dateUtil';
import { unref, nextTick } from 'vue'; import { unref } from 'vue';
import type { Ref, ComputedRef } from 'vue'; import type { Ref, ComputedRef } from 'vue';
import type { FieldMapToTime, FormSchema } from '../types/form'; import type { FieldMapToTime, FormSchema } from '../types/form';
import { useModalContext } from '/@/components/Modal';
interface UseFormValuesContext { interface UseFormValuesContext {
transformDateFuncRef: Ref<Fn>; transformDateFuncRef: Ref<Fn>;
...@@ -20,7 +19,6 @@ export function useFormValues({ ...@@ -20,7 +19,6 @@ export function useFormValues({
getSchema, getSchema,
formModel, formModel,
}: UseFormValuesContext) { }: UseFormValuesContext) {
const modalFn = useModalContext();
// Processing form values // Processing form values
function handleFormValues(values: Recordable) { function handleFormValues(values: Recordable) {
if (!isObject(values)) { if (!isObject(values)) {
...@@ -85,10 +83,6 @@ export function useFormValues({ ...@@ -85,10 +83,6 @@ export function useFormValues({
} }
}); });
defaultValueRef.value = obj; 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 }; return { handleFormValues, initDefault };
......
...@@ -7722,10 +7722,10 @@ vite-plugin-purge-icons@^0.6.0: ...@@ -7722,10 +7722,10 @@ vite-plugin-purge-icons@^0.6.0:
"@purge-icons/generated" "^0.6.0" "@purge-icons/generated" "^0.6.0"
rollup-plugin-purge-icons "^0.6.0" rollup-plugin-purge-icons "^0.6.0"
vite-plugin-pwa@^0.4.0: vite-plugin-pwa@^0.4.1:
version "0.4.0" version "0.4.1"
resolved "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.4.0.tgz#be7723315beed00ca7f9d23b24c5b1356276747c" resolved "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.4.1.tgz#eae03c4dd10cd51600c08fd1aaa179a92577c456"
integrity sha512-+qsqpR6QgkxY8IdSyjHDGz5L5+3pbXKVP2KztqMeamu8Rpki45kEUMrdhloFSPiSNA7L+xS/U6WDyNe+u0IP4A== integrity sha512-UvcdW93FT0+2dRSLasQtvJepBwXj+UTcvzBekca6YuVdn/MTdEX01J/QqPL+v3KUZBnNM2MAOFpLIkZ3wi9t8g==
dependencies: dependencies:
debug "^4.3.2" debug "^4.3.2"
fast-glob "^3.2.5" fast-glob "^3.2.5"
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册