fix(form): improve warning prompt, fix #538

Vben

2021-04-26 3ff70bb56f998cfc92a773676d75c06372d90658

fix(form): improve warning prompt, fix #538

 package.json

@@ -63,7 +63,7 @@
  "devDependencies": {
    "@commitlint/cli": "^12.1.1",
    "@commitlint/config-conventional": "^12.1.1",
    "@iconify/json": "^1.1.331",
    "@iconify/json": "^1.1.333",
    "@purge-icons/generated": "^0.7.0",
    "@types/codemirror": "^0.0.109",
    "@types/crypto-js": "^4.0.1",
@@ -110,7 +110,7 @@
    "stylelint-order": "^4.1.0",
    "ts-node": "^9.1.1",
    "typescript": "4.2.4",
    "vite": "2.1.5",
    "vite": "2.2.3",
    "vite-plugin-compression": "^0.2.4",
    "vite-plugin-html": "^2.0.7",
    "vite-plugin-imagemin": "^0.3.0",

 src/components/Form/src/BasicForm.vue

@@ -35,17 +35,7 @@
  import type { AdvanceState } from './types/hooks';
  import type { CSSProperties, Ref } from 'vue';

  import {
    defineComponent,
    reactive,
    ref,
    computed,
    unref,
    onMounted,
    watch,
    toRefs,
    nextTick,
  } from 'vue';
  import { defineComponent, reactive, ref, computed, unref, onMounted, watch, nextTick } from 'vue';
  import { Form, Row } from 'ant-design-vue';
  import FormItem from './components/FormItem.vue';
  import FormAction from './components/FormAction.vue';
@@ -143,13 +133,8 @@
        defaultValueRef,
      });

      const { transformDateFunc, fieldMapToTime, autoFocusFirstItem } = toRefs(
        unref(getProps)
      ) as any;

      const { handleFormValues, initDefault } = useFormValues({
        transformDateFuncRef: transformDateFunc,
        fieldMapToTimeRef: fieldMapToTime,
        getProps,
        defaultValueRef,
        getSchema,
        formModel,
@@ -157,7 +142,7 @@

      useAutoFocus({
        getSchema,
        autoFocusFirstItem,
        getProps,
        isInitedDefault: isInitedDefaultRef,
        formElRef: formElRef as Ref<FormActionType>,
      });

 src/components/Form/src/hooks/useAutoFocus.ts

@@ -1,22 +1,22 @@
import type { ComputedRef, Ref } from 'vue';
import type { FormSchema, FormActionType } from '../types/form';
import type { FormSchema, FormActionType, FormProps } from '../types/form';

import { unref, nextTick, watchEffect } from 'vue';

interface UseAutoFocusContext {
  getSchema: ComputedRef<FormSchema[]>;
  autoFocusFirstItem: Ref<boolean>;
  getProps: ComputedRef<FormProps>;
  isInitedDefault: Ref<boolean>;
  formElRef: Ref<FormActionType>;
}
export async function useAutoFocus({
  getSchema,
  autoFocusFirstItem,
  getProps,
  formElRef,
  isInitedDefault,
}: UseAutoFocusContext) {
  watchEffect(async () => {
    if (unref(isInitedDefault) || !unref(autoFocusFirstItem)) return;
    if (unref(isInitedDefault) || !unref(getProps).autoFocusFirstItem) return;
    await nextTick();
    const schemas = unref(getSchema);
    const formEl = unref(formElRef);

 src/components/Form/src/hooks/useFormValues.ts

@@ -3,21 +3,19 @@

import { unref } from 'vue';
import type { Ref, ComputedRef } from 'vue';
import type { FieldMapToTime, FormSchema } from '../types/form';
import type { FormProps, FormSchema } from '../types/form';

interface UseFormValuesContext {
  transformDateFuncRef: Ref<Fn>;
  fieldMapToTimeRef: Ref<FieldMapToTime>;
  defaultValueRef: Ref<any>;
  getSchema: ComputedRef<FormSchema[]>;
  getProps: ComputedRef<FormProps>;
  formModel: Recordable;
}
export function useFormValues({
  transformDateFuncRef,
  fieldMapToTimeRef,
  defaultValueRef,
  getSchema,
  formModel,
  getProps,
}: UseFormValuesContext) {
  // Processing form values
  function handleFormValues(values: Recordable) {
@@ -31,12 +29,12 @@
      if ((isArray(value) && value.length === 0) || isFunction(value)) {
        continue;
      }
      const transformDateFunc = unref(transformDateFuncRef);
      const transformDateFunc = unref(getProps).transformDateFunc;
      if (isObject(value)) {
        value = transformDateFunc(value);
        value = transformDateFunc?.(value);
      }
      if (isArray(value) && value[0]?._isAMomentObject && value[1]?._isAMomentObject) {
        value = value.map((item) => transformDateFunc(item));
        value = value.map((item) => transformDateFunc?.(item));
      }
      // Remove spaces
      if (isString(value)) {
@@ -51,7 +49,7 @@
   * @description: Processing time interval parameters
   */
  function handleRangeTimeValue(values: Recordable) {
    const fieldMapToTime = unref(fieldMapToTimeRef);
    const fieldMapToTime = unref(getProps).fieldMapToTime;

    if (!fieldMapToTime || !Array.isArray(fieldMapToTime)) {
      return values;

 yarn.lock

@@ -1108,10 +1108,10 @@
  dependencies:
    cross-fetch "^3.0.6"

"@iconify/json@^1.1.331":
  version "1.1.331"
  resolved "https://registry.npmjs.org/@iconify/json/-/json-1.1.331.tgz#5bd10c8764e24a973474992a35b56ea7e32a2115"
  integrity sha512-6YK6fJccOZYa01o6SV3WHNFWtfdP7+q9urn7s4OIFx0a6FTqole0BHGJ87ZsLp03N96TcGEY2nQGpv3MdezYKg==
"@iconify/json@^1.1.333":
  version "1.1.333"
  resolved "https://registry.npmjs.org/@iconify/json/-/json-1.1.333.tgz#d58b3d26c97963a1387b089f0c5accae1719fbea"
  integrity sha512-JcYRNdt9UUBGsH3U5P/Idw9jzZoDCokVyTUGfweHNRuH4r2xR4oVJgH/CyijdUd0BGZ4ztiO2iVBC1sysk67Yg==

"@intlify/core-base@9.0.0":
  version "9.0.0"
@@ -9336,10 +9336,10 @@
    debug "^4.3.2"
    windicss "^2.5.14"

vite@2.1.5:
  version "2.1.5"
  resolved "https://registry.npmjs.org/vite/-/vite-2.1.5.tgz#4857da441c62f7982c83cbd5f42a00330f20c9c1"
  integrity sha512-tYU5iaYeUgQYvK/CNNz3tiJ8vYqPWfCE9IQ7K0iuzYovWw7lzty7KRYGWwV3CQPh0NKxWjOczAqiJsCL0Xb+Og==
vite@2.2.3:
  version "2.2.3"
  resolved "https://registry.npmjs.org/vite/-/vite-2.2.3.tgz#1acbdfa56ac00e00e7ccb6988f63f130c2f99dbb"
  integrity sha512-PtjyBL4GtACM+uT5q5hi2+AlMBbb6YI2b2bam6QI8ZdZt4FezseF0yZHQx0G+b3po9jIJ/GS5N9gc5Yq9Rue7g==
  dependencies:
    esbuild "^0.9.3"
    postcss "^8.2.1"