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 { BasicArrow } from '/@/components/Basic/index';
 
 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')}
                 </>

src/components/Form/src/props.ts

@@ -5,7 +5,7 @@ import { TableActionType } from '/@/components/Table';
 
 export const basicProps = {
   model: {
-    type: Object as PropType<any>,
+    type: Object as PropType<Record<string, any>>,
     default: {},
   },
   // 标签宽度  固定宽度