fix(form): fix updateSchema error #100

vben

2020-11-28 498278660112a52b7c6e608159d20920d6047e04

fix(form): fix updateSchema error #100

 src/components/Form/index.ts

@@ -1,7 +1,10 @@
export { default as BasicForm } from './src/BasicForm.vue';
import BasicFormLib from './src/BasicForm.vue';
import { withInstall } from '../util';

export * from './src/types/form';
export * from './src/types/formItem';

export { useComponentRegister } from './src/hooks/useComponentRegister';
export { useForm } from './src/hooks/useForm';

export const BasicForm = withInstall(BasicFormLib);

 src/components/Form/src/BasicForm.vue

@@ -16,6 +16,7 @@
          </template>
        </FormItem>
      </template>

      <FormAction
        v-bind="{ ...getActionPropsRef, ...advanceState }"
        @toggle-advanced="handleToggleAdvanced"
@@ -30,7 +31,17 @@
  import type { Ref, WatchStopHandle } from 'vue';
  import type { ValidateFields } from 'ant-design-vue/lib/form/interface';

  import { defineComponent, reactive, ref, computed, unref, toRef, onMounted, watch } from 'vue';
  import {
    defineComponent,
    reactive,
    ref,
    computed,
    unref,
    toRef,
    onMounted,
    watch,
    toRefs,
  } from 'vue';
  import { Form, Row } from 'ant-design-vue';
  import FormItem from './FormItem';
  import { basicProps } from './props';
@@ -103,6 +114,7 @@
        const schemas: FormSchema[] = unref(schemaRef) || (unref(getProps).schemas as any);
        for (const schema of schemas) {
          const { defaultValue, component } = schema;
          // handle date type
          if (defaultValue && dateItemType.includes(component)) {
            if (!Array.isArray(defaultValue)) {
              schema.defaultValue = moment(defaultValue);
@@ -127,10 +139,10 @@
        formModel,
        defaultValueRef,
      });

      const { transformDateFunc, fieldMapToTime } = toRefs(props);
      const { handleFormValues, initDefault } = useFormValues({
        transformDateFuncRef: toRef(props, 'transformDateFunc') as Ref<Fn<any>>,
        fieldMapToTimeRef: toRef(props, 'fieldMapToTime'),
        transformDateFuncRef: transformDateFunc as Ref<Fn<any>>,
        fieldMapToTimeRef: fieldMapToTime,
        defaultValueRef,
        getSchema,
        formModel,

 src/components/Form/src/FormAction.tsx

@@ -7,28 +7,17 @@

import { getSlot } from '/@/utils/helper/tsxHelper';
import { useI18n } from '/@/hooks/web/useI18n';
import { propTypes } from '/@/utils/propTypes';

const { t } = useI18n('component.form');

export default defineComponent({
  name: 'BasicFormAction',
  props: {
    show: {
      type: Boolean,
      default: true,
    },
    showResetButton: {
      type: Boolean,
      default: true,
    },
    showSubmitButton: {
      type: Boolean,
      default: true,
    },
    showAdvancedButton: {
      type: Boolean,
      default: true,
    },
    show: propTypes.bool.def(true),
    showResetButton: propTypes.bool.def(true),
    showSubmitButton: propTypes.bool.def(true),
    showAdvancedButton: propTypes.bool.def(true),
    resetButtonOptions: {
      type: Object as PropType<any>,
      default: {},
@@ -41,18 +30,9 @@
      type: Object as PropType<any>,
      default: {},
    },
    actionSpan: {
      type: Number,
      default: 6,
    },
    isAdvanced: {
      type: Boolean,
      default: false,
    },
    hideAdvanceBtn: {
      type: Boolean,
      default: false,
    },
    actionSpan: propTypes.number.def(6),
    isAdvanced: propTypes.bool,
    hideAdvanceBtn: propTypes.bool,
  },
  emits: ['toggle-advanced'],
  setup(props, { slots, emit }) {
@@ -87,18 +67,52 @@
      emit('toggle-advanced');
    }

    function renderAdvanceButton() {
      const { showAdvancedButton, hideAdvanceBtn, isAdvanced } = props;

      if (!showAdvancedButton || !!hideAdvanceBtn) {
        return null;
      }
      return (
        <Button type="default" class="mr-2" onClick={toggleAdvanced}>
          {() => (
            <>
              {isAdvanced ? t('putAway') : t('unfold')}
              <BasicArrow expand={!isAdvanced} top />
            </>
          )}
        </Button>
      );
    }

    function renderResetButton() {
      const { showResetButton } = props;
      if (!showResetButton) {
        return null;
      }
      return (
        <Button type="default" class="mr-2" {...unref(getResetBtnOptionsRef)}>
          {() => unref(getResetBtnOptionsRef).text}
        </Button>
      );
    }

    function renderSubmitButton() {
      const { showSubmitButton } = props;
      if (!showSubmitButton) {
        return null;
      }
      return (
        <Button type="primary" {...unref(getSubmitBtnOptionsRef)}>
          {() => unref(getSubmitBtnOptionsRef).text}
        </Button>
      );
    }

    return () => {
      if (!props.show) {
        return;
        return null;
      }

      const {
        showAdvancedButton,
        hideAdvanceBtn,
        isAdvanced,
        showResetButton,
        showSubmitButton,
      } = props;

      return (
        <Col {...unref(actionColOpt)} style={{ textAlign: 'right' }}>
@@ -107,30 +121,13 @@
              {() => (
                <>
                  {getSlot(slots, 'advanceBefore')}
                  {showAdvancedButton && !hideAdvanceBtn && (
                    <Button type="default" class="mr-2" onClick={toggleAdvanced}>
                      {() => (
                        <>
                          {isAdvanced ? t('putAway') : t('unfold')}
                          <BasicArrow expand={!isAdvanced} top />
                        </>
                      )}
                    </Button>
                  )}
                  {renderAdvanceButton()}

                  {getSlot(slots, 'resetBefore')}
                  {showResetButton && (
                    <Button type="default" class="mr-2" {...unref(getResetBtnOptionsRef)}>
                      {() => unref(getResetBtnOptionsRef).text}
                    </Button>
                  )}
                  {renderResetButton()}

                  {getSlot(slots, 'submitBefore')}
                  {showSubmitButton && (
                    <Button type="primary" {...unref(getSubmitBtnOptionsRef)}>
                      {() => unref(getSubmitBtnOptionsRef).text}
                    </Button>
                  )}
                  {renderSubmitButton()}

                  {getSlot(slots, 'submitAfter')}
                </>

 src/components/Form/src/props.ts

@@ -5,7 +5,7 @@

export const basicProps = {
  model: {
    type: Object as PropType<any>,
    type: Object as PropType<Record<string, any>>,
    default: {},
  },
  // 标签宽度  固定宽度

 src/router/menus/index.ts

@@ -13,7 +13,9 @@
const menuModules: MenuModule[] = [];

Object.keys(modules).forEach((key) => {
  menuModules.push(modules[key]);
  const moduleItem = modules[key];
  const menuModule = Array.isArray(moduleItem) ? [...moduleItem] : [moduleItem];
  menuModules.push(...menuModule);
});

// ===========================
@@ -25,6 +27,7 @@
  menuModules.sort((a, b) => {
    return (a.orderNo || 0) - (b.orderNo || 0);
  });

  for (const menu of menuModules) {
    staticMenus.push(transformMenuModule(menu));
  }

 src/router/menus/modules/dashboard.ts

@@ -1,24 +1,33 @@
import type { MenuModule } from '/@/router/types.d';

const menu: MenuModule = {
  orderNo: 10,
  menu: {
    name: 'routes.dashboard.dashboard',
    path: '/dashboard',
    children: [
      {
        path: '/workbench',
        name: 'routes.dashboard.workbench',
      },
      {
        path: '/analysis',
        name: 'routes.dashboard.analysis',
      },
      {
        path: '/welcome',
        name: 'routes.dashboard.welcome',
      },
    ],
const menu: MenuModule[] = [
  {
    orderNo: 0,
    menu: {
      path: '/dashboard/welcome',
      name: 'routes.dashboard.welcome',
    },
  },
};
  {
    orderNo: 10,
    menu: {
      name: 'routes.dashboard.dashboard',
      path: '/dashboard',
      children: [
        {
          path: '/workbench',
          name: 'routes.dashboard.workbench',
        },
        {
          path: '/analysis',
          name: 'routes.dashboard.analysis',
        },
        // {
        //   path: '/welcome',
        //   name: 'routes.dashboard.welcome',
        // },
      ],
    },
  },
];
export default menu;

 src/router/routes/modules/dashboard.ts

@@ -7,7 +7,7 @@
    path: '/dashboard',
    name: 'Dashboard',
    component: PAGE_LAYOUT_COMPONENT,
    redirect: '/dashboard/workbench',
    redirect: '/dashboard/welcome',
    meta: {
      icon: 'ant-design:home-outlined',
      title: 'routes.dashboard.dashboard',
@@ -21,6 +21,8 @@
      component: () => import('/@/views/dashboard/welcome/index.vue'),
      meta: {
        title: 'routes.dashboard.welcome',
        affix: true,
        icon: 'ant-design:home-outlined',
      },
    },
    {
@@ -29,7 +31,6 @@
      component: () => import('/@/views/dashboard/workbench/index.vue'),
      meta: {
        title: 'routes.dashboard.workbench',
        affix: true,
      },
    },
    {

 src/utils/index.ts

@@ -1,4 +1,5 @@
export const timestamp = () => +Date.now();
import { isObject } from '/@/utils/is';
export const clamp = (n: number, min: number, max: number) => Math.min(max, Math.max(min, n));
export const noop = () => {};
export const now = () => Date.now();
@@ -40,10 +41,7 @@
export function deepMerge<T = any>(src: any, target: any): T {
  let key: string;
  for (key in target) {
    src[key] =
      src[key] && src[key].toString() === '[object Object]'
        ? deepMerge(src[key], target[key])
        : (src[key] = target[key]);
    src[key] = isObject(src[key]) ? deepMerge(src[key], target[key]) : (src[key] = target[key]);
  }
  return src;
}

 vite.config.ts

@@ -89,7 +89,7 @@
   * Transpile target for esbuild.
   * @default 'es2020'
   */
  esbuildTarget: 'es2020',
  esbuildTarget: 'es2019',
  /**
   * Whether to log asset info to console
   * @default false