fix(form): fix updateSchema error #100

vben
1 parent 81baf1d5
Showing 9 changed files with 114 additions and 91 deletions
src/components/Form/index.ts
src/components/Form/src/BasicForm.vue
src/components/Form/src/FormAction.tsx
src/components/Form/src/props.ts
src/router/menus/index.ts
src/router/menus/modules/dashboard.ts
src/router/routes/modules/dashboard.ts
src/utils/index.ts
vite.config.ts
-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);
@@ -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,
@@ -7,28 +7,17 @@ import { BasicArrow } from &#39;/@/components/Basic/index&#39;;
 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 @@ export default defineComponent({
       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,19 +67,53 @@ export default defineComponent({
       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 @@ export default defineComponent({
               {() => (
                 <>
                   {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')}
                 </>
@@ -5,7 +5,7 @@ import { TableActionType } from &#39;/@/components/Table&#39;;
 export const basicProps = {
   model: {
-    type: Object as PropType<any>,
+    type: Object as PropType<Record<string, any>>,
     default: {},
   },
   // 标签宽度  固定宽度
@@ -13,7 +13,9 @@ import modules from &#39;globby!/@/router/menus/modules/**/*.@(ts)&#39;;
 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 @@ const staticMenus: Menu[] = [];
   menuModules.sort((a, b) => {
     return (a.orderNo || 0) - (b.orderNo || 0);
   });
+
   for (const menu of menuModules) {
     staticMenus.push(transformMenuModule(menu));
   }
 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;
@@ -7,7 +7,7 @@ const dashboard: AppRouteModule = {
     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 @@ const dashboard: AppRouteModule = {
       component: () => import('/@/views/dashboard/welcome/index.vue'),
       meta: {
         title: 'routes.dashboard.welcome',
+        affix: true,
+        icon: 'ant-design:home-outlined',
       },
     },
     {
@@ -29,7 +31,6 @@ const dashboard: AppRouteModule = {
       component: () => import('/@/views/dashboard/workbench/index.vue'),
       meta: {
         title: 'routes.dashboard.workbench',
-        affix: true,
       },
     },
     {
 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 setObjToUrlParams(baseUrl: string, obj: any): string {
 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;
 }
@@ -89,7 +89,7 @@ const viteConfig: UserConfig = {
    * Transpile target for esbuild.
    * @default 'es2020'
    */
-  esbuildTarget: 'es2020',
+  esbuildTarget: 'es2019',
   /**
    * Whether to log asset info to console
    * @default false