perf(form): perf form in modal
This commit is contained in:
parent
733afddd19
commit
2882d6e937
|
|
@ -97,7 +97,7 @@
|
||||||
"vite-plugin-html": "^2.0.0-beta.6",
|
"vite-plugin-html": "^2.0.0-beta.6",
|
||||||
"vite-plugin-mock": "^2.0.0-rc.2",
|
"vite-plugin-mock": "^2.0.0-rc.2",
|
||||||
"vite-plugin-purge-icons": "^0.6.0",
|
"vite-plugin-purge-icons": "^0.6.0",
|
||||||
"vite-plugin-pwa": "^0.4.0",
|
"vite-plugin-pwa": "^0.4.1",
|
||||||
"vite-plugin-style-import": "^0.4.6",
|
"vite-plugin-style-import": "^0.4.6",
|
||||||
"vue-eslint-parser": "^7.4.1",
|
"vue-eslint-parser": "^7.4.1",
|
||||||
"yargs": "^16.2.0"
|
"yargs": "^16.2.0"
|
||||||
|
|
|
||||||
|
|
@ -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 @@
|
||||||
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 @@
|
||||||
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 @@
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
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();
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,9 @@
|
||||||
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({
|
||||||
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({
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
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:
|
||||||
"@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"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue