chore: type optimization

Vben

2021-06-17 4f20d45f9dcb2e1ed29555c61fc92090e3fe12e5

 src/components/Form/src/BasicForm.vue

@@ -1,6 +1,12 @@
<template>
  <Form v-bind="{ ...$attrs, ...$props }" :class="getFormClass" ref="formElRef" :model="formModel">
    <Row :style="getRowWrapStyle">
  <Form
    v-bind="getBindValue"
    :class="getFormClass"
    ref="formElRef"
    :model="formModel"
    @keypress.enter="handleEnterPress"
  >
    <Row v-bind="getRow">
      <slot name="formHeader"></slot>
      <template v-for="schema in getSchema" :key="schema.field">
        <FormItem
@@ -33,19 +39,9 @@
<script lang="ts">
  import type { FormActionType, FormProps, FormSchema } from './types/form';
  import type { AdvanceState } from './types/hooks';
  import type { CSSProperties, Ref } from 'vue';
  import type { 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';
@@ -66,12 +62,14 @@
  import { basicProps } from './props';
  import { useDesign } from '/@/hooks/web/useDesign';

  import type { RowProps } from 'ant-design-vue/lib/grid/Row';

  export default defineComponent({
    name: 'BasicForm',
    components: { FormItem, Form, Row, FormAction },
    props: basicProps,
    emits: ['advanced-change', 'reset', 'submit', 'register'],
    setup(props, { emit }) {
    setup(props, { emit, attrs }) {
      const formModel = reactive<Recordable>({});
      const modalFn = useModalContext();

@@ -91,11 +89,9 @@
      const { prefixCls } = useDesign('basic-form');

      // Get the basic configuration of the form
      const getProps = computed(
        (): FormProps => {
          return { ...props, ...unref(propsRef) } as FormProps;
        }
      );
      const getProps = computed((): FormProps => {
        return { ...props, ...unref(propsRef) } as FormProps;
      });

      const getFormClass = computed(() => {
        return [
@@ -106,12 +102,17 @@
        ];
      });

      // Get uniform row style
      const getRowWrapStyle = computed(
        (): CSSProperties => {
          const { baseRowStyle = {} } = unref(getProps);
          return baseRowStyle;
        }
      // Get uniform row style and Row configuration for the entire form
      const getRow = computed((): RowProps => {
        const { baseRowStyle = {}, rowProps } = unref(getProps);
        return {
          style: baseRowStyle,
          ...rowProps,
        };
      });

      const getBindValue = computed(
        () => ({ ...attrs, ...props, ...unref(getProps) } as Recordable)
      );

      const getSchema = computed((): FormSchema[] => {
@@ -143,11 +144,8 @@
        defaultValueRef,
      });

      const { transformDateFunc, fieldMapToTime, autoFocusFirstItem } = toRefs(props);

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

      useAutoFocus({
        getSchema,
        autoFocusFirstItem,
        getProps,
        isInitedDefault: isInitedDefaultRef,
        formElRef: formElRef as Ref<FormActionType>,
      });
@@ -168,6 +166,7 @@
        validateFields,
        getFieldsValue,
        updateSchema,
        resetSchema,
        appendSchemaByField,
        removeSchemaByFiled,
        resetFields,
@@ -201,6 +200,13 @@
      );

      watch(
        () => unref(getProps).schemas,
        (schemas) => {
          resetSchema(schemas ?? []);
        }
      );

      watch(
        () => getSchema.value,
        (schema) => {
          nextTick(() => {
@@ -225,11 +231,23 @@
        formModel[key] = value;
      }

      function handleEnterPress(e: KeyboardEvent) {
        const { autoSubmitOnEnter } = unref(getProps);
        if (!autoSubmitOnEnter) return;
        if (e.key === 'Enter' && e.target && e.target instanceof HTMLElement) {
          const target: HTMLElement = e.target as HTMLElement;
          if (target && target.tagName && target.tagName.toUpperCase() == 'INPUT') {
            handleSubmit();
          }
        }
      }

      const formActionType: Partial<FormActionType> = {
        getFieldsValue,
        setFieldsValue,
        resetFields,
        updateSchema,
        resetSchema,
        setProps,
        removeSchemaByFiled,
        appendSchemaByField,
@@ -246,11 +264,13 @@
      });

      return {
        getBindValue,
        handleToggleAdvanced,
        handleEnterPress,
        formModel,
        defaultValueRef,
        advanceState,
        getRowWrapStyle,
        getRow,
        getProps,
        formElRef,
        getSchema,
@@ -285,9 +305,16 @@
          display: flex;
        }

        .ant-form-item-control {
          margin-top: 4px;
        }

        .suffix {
          display: inline-block;
          display: inline-flex;
          padding-left: 6px;
          margin-top: 1px;
          line-height: 1;
          align-items: center;
        }
      }
    }