fix: naive ui form reset does not meet expectations (#4569)

* fix: naive ui form reset does not meet expectations * fix: typo
vbenjs · Oct 5, 2024 · d37e2f5 · d37e2f5
1 parent 402eaf4
commit d37e2f5
Show file tree

Hide file tree

Showing 13 changed files with 34 additions and 19 deletions.
diff --git a/apps/web-antd/src/api/core/auth.ts b/apps/web-antd/src/api/core/auth.ts
@@ -3,8 +3,8 @@ import { baseRequestClient, requestClient } from '#/api/request';
 export namespace AuthApi {
   /** 登录接口参数 */
   export interface LoginParams {
-    password: string;
-    username: string;
+    password?: string;
+    username?: string;
   }
 
   /** 登录接口返回值 */

diff --git a/apps/web-ele/src/api/core/auth.ts b/apps/web-ele/src/api/core/auth.ts
@@ -3,8 +3,8 @@ import { baseRequestClient, requestClient } from '#/api/request';
 export namespace AuthApi {
   /** 登录接口参数 */
   export interface LoginParams {
-    password: string;
-    username: string;
+    password?: string;
+    username?: string;
   }
 
   /** 登录接口返回值 */

diff --git a/apps/web-naive/src/adapter/form.ts b/apps/web-naive/src/adapter/form.ts
@@ -84,7 +84,10 @@ setupVbenForm<FormComponentType>({
     Upload: NUpload,
   },
   config: {
+    // naive-ui组件不接受onChang事件，所以需要禁用
     disabledOnChangeListener: true,
+    // naive-ui组件的空值为null,不能是undefined，否则重置表单时不生效
+    emptyStateValue: null,
     baseModelPropName: 'value',
     modelPropNameMap: {
       Checkbox: 'checked',

diff --git a/apps/web-naive/src/api/core/auth.ts b/apps/web-naive/src/api/core/auth.ts
@@ -3,8 +3,8 @@ import { baseRequestClient, requestClient } from '#/api/request';
 export namespace AuthApi {
   /** 登录接口参数 */
   export interface LoginParams {
-    password: string;
-    username: string;
+    password?: string;
+    username?: string;
   }
 
   /** 登录接口返回值 */

diff --git a/packages/@core/ui-kit/form-ui/src/config.ts b/packages/@core/ui-kit/form-ui/src/config.ts
@@ -43,8 +43,13 @@ export function setupVbenForm<
 >(options: VbenFormAdapterOptions<T>) {
   const { components, config, defineRules } = options;
 
-  DEFAULT_FORM_COMMON_CONFIG.disabledOnChangeListener =
-    config?.disabledOnChangeListener ?? false;
+  const { disabledOnChangeListener = false, emptyStateValue = undefined } =
+    (config || {}) as FormCommonConfig;
+
+  Object.assign(DEFAULT_FORM_COMMON_CONFIG, {
+    disabledOnChangeListener,
+    emptyStateValue,
+  });
 
   if (defineRules) {
     for (const key of Object.keys(defineRules)) {

diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
@@ -33,6 +33,7 @@ const {
   description,
   disabled,
   disabledOnChangeListener,
+  emptyStateValue,
   fieldName,
   formFieldProps,
   label,
@@ -55,7 +56,7 @@ const formApi = formRenderProps.form;
 
 const isInValid = computed(() => errors.value?.length > 0);
 
-const fieldComponent = computed(() => {
+const FieldComponent = computed(() => {
   const finalComponent = isString(component)
     ? componentMap.value[component]
     : component;
@@ -213,7 +214,7 @@ function fieldBindEvent(slotProps: Record<string, any>) {
   if (bindEventField) {
     return {
       [`onUpdate:${bindEventField}`]: handler,
-      [bindEventField]: value,
+      [bindEventField]: value === undefined ? emptyStateValue : value,
       onChange: disabledOnChangeListener
         ? undefined
         : (e: Record<string, any>) => {
@@ -300,7 +301,7 @@ function autofocus() {
             }"
           >
             <component
-              :is="fieldComponent"
+              :is="FieldComponent"
               ref="fieldComponentRef"
               :class="{
                 'border-destructive focus:border-destructive hover:border-destructive/80 focus:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]':

diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form.vue b/packages/@core/ui-kit/form-ui/src/form-render/form.vue
@@ -87,6 +87,7 @@ const computedSchema = computed(
       controlClass = '',
       disabled,
       disabledOnChangeListener = false,
+      emptyStateValue = undefined,
       formFieldProps = {},
       formItemClass = '',
       hideLabel = false,
@@ -107,6 +108,7 @@ const computedSchema = computed(
       return {
         disabled,
         disabledOnChangeListener,
+        emptyStateValue,
         hideLabel,
         hideRequiredMark,
         labelWidth,

diff --git a/packages/@core/ui-kit/form-ui/src/types.ts b/packages/@core/ui-kit/form-ui/src/types.ts
@@ -153,6 +153,10 @@ export interface FormCommonConfig {
    * @default false
    */
   disabledOnChangeListener?: boolean;
+  /**
+   * 所有表单项的空状态值,默认都是undefined，naive-ui的空状态值是null
+   */
+  emptyStateValue?: null | undefined;
   /**
    * 所有表单项的控件样式
    * @default {}
@@ -341,6 +345,7 @@ export interface VbenFormAdapterOptions<
   config?: {
     baseModelPropName?: string;
     disabledOnChangeListener?: boolean;
+    emptyStateValue?: null | undefined;
     modelPropNameMap?: Partial<Record<T, string>>;
   };
   defineRules?: {

diff --git a/packages/effects/common-ui/src/ui/authentication/types.ts b/packages/effects/common-ui/src/ui/authentication/types.ts
@@ -67,10 +67,7 @@ interface AuthenticationProps {
   submitButtonText?: string;
 }
 
-interface LoginAndRegisterParams {
-  password: string;
-  username: string;
-}
+type LoginAndRegisterParams = Record<string, any>;
 
 interface LoginCodeParams {
   code: string;

diff --git a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
@@ -193,8 +193,8 @@ async function init() {
   }
 
   // form 由 vben-form代替，所以不适配formConfig，这里给出警告
-  const formConfig = defaultGridOptions.formConfig;
-  if (formConfig?.enabled) {
+  const formConfig = options.value.formConfig;
+  if (formConfig) {
     console.warn(
       '[Vben Vxe Table]: The formConfig in the grid is not supported, please use the `formOptions` props',
     );

diff --git a/packages/stores/src/modules/user.ts b/packages/stores/src/modules/user.ts
@@ -1,6 +1,7 @@
 import { acceptHMRUpdate, defineStore } from 'pinia';
 
 interface BasicUserInfo {
+  [key: string]: any;
   /**
    * 头像
    */

diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
@@ -1,3 +1,4 @@
 export * from './helpers';
+export * from '@vben-core/shared/cache';
 export * from '@vben-core/shared/color';
 export * from '@vben-core/shared/utils';
diff --git a/playground/src/api/core/auth.ts b/playground/src/api/core/auth.ts
@@ -3,8 +3,8 @@ import { baseRequestClient, requestClient } from '#/api/request';
 export namespace AuthApi {
   /** 登录接口参数 */
   export interface LoginParams {
-    password: string;
-    username: string;
+    password?: string;
+    username?: string;
   }
 
   /** 登录接口返回值 */