fix: from bug

Author: 李磊

packages/lint-configs/eslint-config/index.mjs

@@ -65,6 +65,7 @@ export default tseslint.config(
         { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
       ], // 禁止未使用的变量，但允许以 _ 开头的变量
       'no-unused-vars': 'off', // 关闭原生 ESLint 规则，避免冲突
+      '@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
     },
   },
 );

packages/ui/src/components/Form/hooks/useFormMethods.ts

@@ -10,7 +10,7 @@ import {
   omit,
   set,
 } from '@ssuperlilei/utils';
-import { DefineComponent, unref } from 'vue';
+import { type DefineComponent, unref } from 'vue';
 import type { FormProps } from '../types/ll-form';
 import type { FormState } from './useFormState';
 
@@ -163,7 +163,7 @@ export const useFormMethods = (formMethodsContext: UseFormMethodsContext) => {
         continue;
       }
 
-      const [startTime, endTime]: string[] = values[field];
+      const [startTime, endTime]: string[] = values[field] as string[];
 
       values[startTimeKey] = dateUtil(startTime).format(format);
       values[endTimeKey] = dateUtil(endTime).format(format);
@@ -173,23 +173,33 @@ export const useFormMethods = (formMethodsContext: UseFormMethodsContext) => {
     return values;
   }
 
+  const setNestedFormModel = (formModel: Recordable, keys: string[], defaultValue: any) => {
+    let current: Recordable = formModel;
+
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i];
+      if (!current[key] || !isObject(current[key])) {
+        current[key] = {};
+      }
+      if (i === keys.length - 1) {
+        current[key] = defaultValue;
+      }
+      current = current[key] as Recordable;
+    }
+  };
+
   /**
    * @description 初始化表单数据
    */
   const initFormValues = (initialValues?: Recordable) => {
     try {
-      unref(formPropsRef).schemas?.forEach((item: { field?: any; defaultValue?: any }) => {
+      unref(formPropsRef).schemas?.forEach((item: { field: string; defaultValue?: any }) => {
         const { defaultValue } = item;
         const namePath = isArray(item.field) ? item.field : item.field.split('.');
         if (namePath.length > 1) {
-          const target = namePath
-            .slice(1)
-            .reduce((prev: any, item: any) => (prev[item] ??= {}), {});
-          target[namePath.slice(1)[0]] = defaultValue;
-          const prop = namePath.shift()!;
-          formModel[prop] = target;
-          cacheFormModel[prop] = target;
-          defaultFormValues[prop] = target;
+          setNestedFormModel(formModel, namePath, defaultValue);
+          setNestedFormModel(cacheFormModel, namePath, defaultValue);
+          setNestedFormModel(defaultFormValues, namePath, defaultValue);
         } else if (!isNullOrUnDef(defaultValue)) {
           formModel[item.field] = defaultValue;
           cacheFormModel[item.field] = defaultValue;
@@ -205,7 +215,10 @@ export const useFormMethods = (formMethodsContext: UseFormMethodsContext) => {
           formModel[key] = !isNullOrUnDef(initialValues[key]) ? initialValues[key] : undefined;
         });
       }
-    } catch (error) {}
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    } catch (_error) {
+      //
+    }
   };
 
   return {

packages/ui/src/components/Form/hooks/useFormState.ts

@@ -1,9 +1,17 @@
 import { cloneDeep, isFunction } from '@ssuperlilei/utils';
 import type { FormInstance } from 'ant-design-vue';
-import type { DefineComponent, SetupContext } from 'vue';
-import { computed, reactive, ref, unref, watch, watchEffect } from 'vue';
+import {
+  type DefineComponent,
+  type SetupContext,
+  computed,
+  reactive,
+  ref,
+  unref,
+  watch,
+  watchEffect,
+} from 'vue';
 import { ActionColOptions } from '../enums/common';
-import type { ComponentProps, RenderCallbackParams } from '../types';
+import type { ComponentProps, FormSchema, RenderCallbackParams } from '../types';
 import type { FormProps } from '../types/ll-form';
 import type { AdvanceState } from '../types/hooks';
 
@@ -42,7 +50,7 @@ export const useFormState = ({ props, attrs }: useFormStateParams): any => {
   // 表单实例
   const lFormRef = ref<FormInstance>();
   // 将所有的表单组件实例保存起来
-  const compRefMap = new Map<string, DefineComponent<any>>();
+  const compRefMap = new Map<string, DefineComponent<unknown>>();
   // 初始时的componentProps，用于updateSchema更新时不覆盖componentProps为函数时的值
   const originComponentPropsFnMap = new Map<
     string,
@@ -77,7 +85,9 @@ export const useFormState = ({ props, attrs }: useFormStateParams): any => {
     (): Recordable => ({ ...getFormProps.value, ...advanceState }),
   );
   watchEffect(() => {
-    formPropsRef.value.schemas?.forEach((item: any) => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    formPropsRef.value.schemas?.forEach((item: FormSchema) => {
       if (isFunction(item.componentProps)) {
         originComponentPropsFnMap.set(item.field, item.componentProps);
       }

packages/ui/src/components/Form/types/form.ts

@@ -2,8 +2,8 @@ import type { RowProps } from 'ant-design-vue';
 import type { FormItemProps } from 'ant-design-vue/es/form/FormItem';
 import type { NamePath, RuleObject } from 'ant-design-vue/es/form/interface';
 import type { Component, HTMLAttributes, VNode } from 'vue';
-import { JSX } from 'vue/jsx-runtime';
-import { LFormType } from '../hooks';
+import type { JSX } from 'vue/jsx-runtime';
+import type { LFormType } from '../hooks';
 import type { FormInstance } from './ll-form';
 import type { ColEx, ComponentMapType, ComponentProps } from './component';
 
@@ -20,16 +20,16 @@ export type GetFieldKeys<T> = Exclude<keyof T, symbol | number>;
 
 export interface RenderCallbackParams<T = string> {
   schema: FormSchema<T>;
-  formModel: T extends string ? Recordable : Record<GetFieldKeys<T>, any>;
+  formModel: T extends string ? Recordable : Record<GetFieldKeys<T>, unknown>;
   field: T extends string ? string : GetFieldKeys<T>;
-  values: any;
+  values: unknown;
   /** 动态表单实例 */
   formInstance: LFormType;
   /** 作用域插槽数据 */
   slotData?: Recordable;
 }
 /** 自定义VNode渲染器 */
-export type CustomRenderFn<T = any> = (
+export type CustomRenderFn<T = unknown> = (
   opt: RenderCallbackParams<T>,
 ) => Component | VNode | VNode[] | string | JSX.Element | Element;
 
@@ -38,7 +38,7 @@ export interface FormActionType {
   submit: () => Promise<void>;
   setFieldsValue: <T>(values: T) => Promise<void>;
   resetForm: () => Promise<void>;
-  getFormValues: () => any;
+  getFormValues: () => unknown;
   clearValidate: (name?: string | string[]) => Promise<void>;
   updateSchema: (data: Partial<FormSchema> | Partial<FormSchema>[]) => Promise<void>;
   resetSchema: (data: Partial<FormSchema> | Partial<FormSchema>[]) => Promise<void>;
@@ -49,8 +49,8 @@ export interface FormActionType {
     prefixField: string | undefined,
     first?: boolean | undefined,
   ) => Promise<void>;
-  validateFields: (nameList?: NamePath[]) => Promise<any>;
-  validate: (nameList?: NamePath[]) => Promise<any>;
+  validateFields: (nameList?: NamePath[]) => Promise<unknown>;
+  validate: (nameList?: NamePath[]) => Promise<unknown>;
   scrollToField: (name: NamePath, options?: ScrollOptions) => Promise<void>;
 }
 
@@ -113,7 +113,7 @@ export interface FormSchema<T = string> {
   /** 搜索表单项排序 */
   order?: number;
   // 默认值
-  defaultValue?: any;
+  defaultValue?: unknown;
   isAdvanced?: boolean;
   // label 是否显示铺满
   labelFullWidth?: boolean;
@@ -155,13 +155,13 @@ export interface HelpComponentProps {
   // Whether to display the serial number
   showIndex: boolean;
   // Text list
-  text: any;
+  text: unknown;
   // colour
   color: string;
   // font size
   fontSize: string;
   icon: string;
   absolute: boolean;
   // Positioning
-  position: any;
+  position: unknown;
 }

packages/ui/src/components/ModalForm/hooks/useModalFormMethods.ts

@@ -1,6 +1,6 @@
 import { deepMerge } from '@ssuperlilei/utils';
-import { ModalFormEmitFn, type ModalFormProps } from '../types';
-import { ModalFormState } from './useModalFormState';
+import type { ModalFormEmitFn, ModalFormProps } from '../types';
+import type { ModalFormState } from './useModalFormState';
 import { unref } from 'vue';
 
 export type ModalFormMethods = ReturnType<typeof useModalFormMethods>;
@@ -79,6 +79,7 @@ export function useModalFormMethods(modalFormActionContext: UseModalFormActionCo
    * @description 内部打开弹窗
    */
   const innerOpenModal = (e: any) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     modalFormPropsRef.value.preventDefault && e.preventDefault();
     innerOpen.value = true;
   };

packages/ui/src/components/ModalForm/hooks/useModalFormState.ts

@@ -1,8 +1,7 @@
 import { cloneDeep, deepMerge } from '@ssuperlilei/utils';
-import { SetupContext, computed, ref, watch, nextTick } from 'vue';
-import { FormProps, FormInstance } from '../../Form';
-import type { ModalFormEmitFn, ModalFormProps } from '../types';
-import { defaultFormProps } from '../types';
+import { type SetupContext, computed, nextTick, ref, watch } from 'vue';
+import type { FormInstance, FormProps } from '../../Form';
+import { type ModalFormEmitFn, type ModalFormProps, defaultFormProps } from '../types';
 import { ModalSize } from '~/components';
 
 export type useModalFormStateParams = {
@@ -17,7 +16,7 @@ export const useModalFormState = ({ props, attrs, emit }: useModalFormStateParam
   const cloneProps = cloneDeep(props);
   const modalFormPropsRef = ref<ModalFormProps>(cloneProps as ModalFormProps);
   // modalForm 实例
-  const modalFormRef = ref<any>();
+  const modalFormRef = ref<Recordable>();
   // 表单实例
   const formRef = ref<FormInstance | null>();
   // 内部控制 modal 的显示
@@ -31,6 +30,14 @@ export const useModalFormState = ({ props, attrs, emit }: useModalFormStateParam
       emit('update:open', val as boolean);
     },
   });
+  // 监听 内部控制 modal 的显示
+  watch(
+    () => innerOpen.value,
+    (v) => {
+      emit('update:open', v as boolean);
+    },
+    { immediate: true },
+  );
 
   // props.open 是否为 undefined
   const openUndefined = ref<boolean>(false);
@@ -63,12 +70,11 @@ export const useModalFormState = ({ props, attrs, emit }: useModalFormStateParam
     (v) => {
       if (v && props.formProps) {
         modalFormPropsRef.value = cloneDeep(props);
-        const newDefaultFormProps: Record<any, any> = cloneDeep(defaultFormProps);
+        const newDefaultFormProps: Record<string, unknown> = cloneDeep(defaultFormProps);
         const formProps = deepMerge(newDefaultFormProps, {
           ...v.formProps,
-        }) as FormProps;
-        // @ts-ignore
-        modalFormPropsRef.value.formProps = formProps;
+        }) as unknown as FormProps;
+        modalFormPropsRef.value.formProps = formProps as any;
       }
     },
     { immediate: true, deep: true },
@@ -113,7 +119,7 @@ export const useModalFormState = ({ props, attrs, emit }: useModalFormStateParam
     async (v) => {
       if (v) {
         await nextTick();
-        formRef.value?.resetForm();
+        formRef.value?.resetForm?.();
       }
     },
     { immediate: false },

packages/ui/src/components/ModalForm/types/modal-form.ts

@@ -1,8 +1,8 @@
 import { isObject } from '@ssuperlilei/utils';
-import { ButtonProps } from 'ant-design-vue';
+import type { ButtonProps } from 'ant-design-vue';
 import { modalProps } from 'ant-design-vue/es/modal/Modal';
 import type { ComponentInternalInstance, ExtractPropTypes, PropType } from 'vue';
-import { FormProps } from '../../Form';
+import type { FormProps } from '../../Form';
 import { initDefaultProps } from '~/_utils';
 import type ModalForm from '../index.vue';
 
@@ -106,5 +106,4 @@ export type ModalFormEmits = typeof modalFormEmits;
 
 export type ModalFormEmitFn = EmitFn<ModalFormEmits>;
 
-// @ts-ignore:next-line
 export type ModalFormInstance = InstanceType<typeof ModalForm>;