fix: fix schema-form type tip

package.json

@@ -68,7 +68,7 @@
     "husky": "^7.0.4",
     "less": "^4.1.2",
     "less-loader": "10.2.0",
-    "lint-staged": "^12.1.5",
+    "lint-staged": "^12.1.7",
     "path-browserify": "^1.0.1",
     "postcss-html": "^1.3.0",
     "prettier": "^2.5.1",

src/components/core/draggable-modal/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <teleport to="body">
+  <teleport :to="getContainer()">
     <div ref="modalWrapRef" class="custom-modal" :class="{ fullscreen: fullscreenModel }">
       <Modal
         v-bind="{ ...$attrs, ...props }"
@@ -41,6 +41,7 @@
   import { Modal, Space } from 'ant-design-vue';
   import { CloseOutlined, FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons-vue';
   import { useVModel } from '@vueuse/core';
+  import { throttle } from 'lodash-es';
 
   const props = defineProps({
     visible: {
@@ -106,7 +107,7 @@
 
   const registerDragTitle = (dragEl: HTMLDivElement, handleEl: HTMLDivElement) => {
     handleEl.style.cursor = 'move';
-    handleEl.onmousedown = (e: MouseEvent) => {
+    handleEl.onmousedown = throttle((e: MouseEvent) => {
       if (fullscreenModel.value) return;
       document.body.style.userSelect = 'none';
       const disX = e.clientX - dragEl.getBoundingClientRect().left;
@@ -134,7 +135,7 @@
 
       document.addEventListener('mousemove', mousemove);
       document.addEventListener('mouseup', mouseup);
-    };
+    }, 20);
   };
 
   const initDrag = async () => {
@@ -147,7 +148,7 @@
       const headerEl = modalEl.querySelector<HTMLDivElement>('.ant-modal-header');
       headerEl && registerDragTitle(modalEl, headerEl);
 
-      modalWrapEl.onmousemove = (event: MouseEvent) => {
+      modalWrapEl.onmousemove = throttle((event: MouseEvent) => {
         if (fullscreenModel.value) return;
         const left = event.clientX - modalEl.offsetLeft;
         const top = event.clientY - modalEl.offsetTop;
@@ -184,7 +185,7 @@
         } else {
           modalWrapEl.style.cursor = cursorStyle.auto;
         }
-      };
+      }, 20);
       modalWrapEl.onmousedown = (e: MouseEvent) => {
         if (fullscreenModel.value) return;
         const iParentTop = modalEl.getBoundingClientRect().top;
@@ -196,7 +197,7 @@
 
         const cursor = modalWrapEl.style.cursor;
 
-        const mousemove = (event: MouseEvent) => {
+        const mousemove = throttle((event: MouseEvent) => {
           if (fullscreenModel.value) return;
           if (cursor !== cursorStyle.auto) {
             document.body.style.userSelect = 'none';
@@ -237,7 +238,7 @@
             modalEl.style.height = event.clientY - iParentTop + 'px';
           }
           innerWidth.value = modalEl.style.width;
-        };
+        }, 20);
 
         const mouseup = () => {
           document.removeEventListener('mousemove', mousemove);

src/components/core/dynamic-table/components/table-settings/column-setting.vue

@@ -30,7 +30,7 @@
           <template v-for="item in tableColumns" :key="table.getColumnKey(item)">
             <div class="check-item">
               <div style="padding: 4px 16px 8px 0">
-                <DragOutlined class="table-column-drag-icon pr-6px cursor-pointer" />
+                <DragOutlined class="table-column-drag-icon pr-6px cursor-move" />
                 <Checkbox
                   v-model:checked="item.hideInTable"
                   :true-value="false"

src/components/core/dynamic-table/typing.ts

@@ -39,7 +39,7 @@ export interface TableColumn<T = Indexable> extends Omit<TableColumnType, 'dataI
   /** 在 Table 中不展示此列 */
   hideInTable?: boolean;
   /** 传递给 Form.Item 的配置,可以配置 rules */
-  formItemProps?: Partial<FormItemSchema>;
+  formItemProps?: Partial<FormItemSchema<T>>;
   bodyCell?: (params: ColumnParams<T>) => VNode;
   headerCell?: (params: ColumnParams<T>) => VNode;
   actions?: (params: ColumnParams<T>) => ActionItem[];

src/components/core/schema-form/types/form.ts

@@ -15,11 +15,13 @@ export type FieldMapToTime = [string, [string, string], string?][];
 export type Rule = RuleObject & {
   trigger?: 'blur' | 'change' | ['change', 'blur'];
 };
+/** 获取所有字段名 */
+export type GetFieldKeys<T> = Exclude<keyof T, symbol | number>;
 
 export interface RenderCallbackParams<T = string> {
   schemaItem: FormItemSchema;
-  formModel: T extends string ? Recordable : T;
-  field: T extends string ? string : keyof T;
+  formModel: T extends string ? Recordable : Record<GetFieldKeys<T>, any>;
+  field: T extends string ? string : GetFieldKeys<T>;
 }
 
 export interface ButtonProps {
@@ -115,10 +117,11 @@ export interface FormSchema<T = any> extends FormProps {
   submitFunc?: () => Promise<void>;
   transformDateFunc?: (date: any) => string;
 }
+
 /** 表单项 */
-export interface FormItemSchema<T = any> {
+export interface FormItemSchema<T = string> {
   /** 字段名 */
-  field: T extends any ? string : keyof T;
+  field: T extends string ? string : GetFieldKeys<T>;
   // Event name triggered by internal value change, default change
   changeEvent?: string;
   // Variable name bound to v-model Default value
@@ -145,11 +148,11 @@ export interface FormItemSchema<T = any> {
     | ComponentProps
     | ((opt: {
         /** 当前表单项 */
-        schemaItem: FormItemSchema;
+        schemaItem: FormItemSchema<T>;
         /** 动态表单实例 */
         schemaFormRef: FormActionType;
         /** 当前表单数据模型 */
-        formModel: Recordable;
+        formModel: T extends string ? Recordable : Record<GetFieldKeys<T>, any>;
       }) => ComponentProps);
 
   componentSlots?:

src/views/demos/tables/search-table/columns.tsx

@@ -8,6 +8,7 @@ export const tableData = Array.from({ length: 30 }).map((_, i) => ({
   date: new Date().toLocaleString(),
   name: names[~~(Math.random() * 4)],
   clothes: clothes[~~(Math.random() * 4)],
+  price: ~~(Math.random() * 1000),
   gender: ~~(Math.random() * 2),
   status: ~~(Math.random() * 2),
 }));
@@ -92,6 +93,15 @@ export const columns: TableColumn<ListItemType>[] = [
       component: 'Select',
     },
   },
+  {
+    title: '价格',
+    align: 'center',
+    dataIndex: 'price',
+    formItemProps: {
+      component: 'Select',
+    },
+    bodyCell: ({ record }) => <>{[record.price]}元</>,
+  },
   {
     title: '状态',
     align: 'center',

src/views/demos/tables/search-table/index.vue

@@ -28,18 +28,19 @@
   // 展开搜索表单时更新英雄皮肤选项值
   const toggleAdvanced = (e) => {
     if (e) {
+      // 手动设置搜索表单的搜索项
       dynamicTableRef.value?.getQueryFormRef().updateSchema([
         {
-          field: 'skin_name',
+          field: 'price',
           componentProps: {
             options: [
               {
-                label: '皮肤1',
-                value: 'aa',
+                label: '0-199',
+                value: '0-199',
               },
               {
-                label: '皮肤2',
-                value: 'bb',
+                label: '200-999',
+                value: '200-999',
               },
             ],
           },
@@ -49,10 +50,14 @@
   };
 
   const loadData = async (params) => {
-    return {
-      list: tableData,
-      ...params,
-    };
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve({
+          list: tableData,
+          ...params,
+        });
+      }, 500);
+    });
   };
 </script>
 

types/utils.d.ts

@@ -8,6 +8,11 @@ declare type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) e
   ? I
   : never;
 
+/** eg: type result = StringToUnion<'abc'> 结果：'a'|'b'|'c'*/
+type StringToUnion<S extends string> = S extends `${infer S1}${infer S2}`
+  ? S1 | StringToUnion<S2>
+  : never;
+
 /** 字符串替换，类似js的字符串replace方法 */
 type Replace<
   Str extends string,
@@ -23,3 +28,45 @@ type ReplaceAll<
 > = Str extends `${infer Left}${From}${infer Right}`
   ? Replace<Replace<`${Left}${To}${Right}`, From, To>, From, To>
   : Str;
+
+/** eg: type result = CamelCase<'foo-bar-baz'>, 结果：fooBarBaz */
+type CamelCase<S extends string> = S extends `${infer S1}-${infer S2}`
+  ? S2 extends Capitalize<S2>
+    ? `${S1}-${CamelCase<S2>}`
+    : `${S1}${CamelCase<Capitalize<S2>>}`
+  : S;
+
+/** eg: type result = StringToArray<'abc'>, 结果：['a', 'b', 'c'] */
+type StringToArray<S extends string, T extends any[] = []> = S extends `${infer S1}${infer S2}`
+  ? StringToArray<S2, [...T, S1]>
+  : T;
+
+/** `RequiredKeys`是用来获取所有必填字段，其中这些必填字段组合成一个联合类型 */
+type RequiredKeys<T> = {
+  [P in keyof T]: T extends Record<P, T[P]> ? P : never;
+}[keyof T];
+
+/** `OptionalKeys`是用来获取所有可选字段，其中这些可选字段组合成一个联合类型 */
+type OptionalKeys<T> = {
+  [P in keyof T]: {} extends Pick<T, P> ? P : never;
+}[keyof T];
+
+/** `GetRequired`是用来获取一个类型中，所有必填键及其类型所组成的一个新类型的 */
+type GetRequired<T> = {
+  [P in RequiredKeys<T>]-?: T[P];
+};
+
+/** `GetOptional`是用来获取一个类型中，所有可选键及其类型所组成的一个新类型的 */
+type GetOptional<T> = {
+  [P in OptionalKeys<T>]?: T[P];
+};
+
+/**  type result1 = Includes<[1, 2, 3, 4], '4'> 结果： false; type result2 = Includes<[1, 2, 3, 4], 4> 结果： true */
+type Includes<T extends any[], K> = K extends T[number] ? true : false;
+
+/** eg:type result = MyConcat<[1, 2], [3, 4]>  结果：[1, 2, 3, 4]*/
+type MyConcat<T extends any[], U extends any[]> = [...T, ...U];
+/** eg: type result1 = MyPush<[1, 2, 3], 4> 结果：[1, 2, 3, 4] */
+type MyPush<T extends any[], K> = [...T, K];
+/** eg: type result3 = MyPop<[1, 2, 3]>  结果：[1, 2] */
+type MyPop<T extends any[]> = T extends [...infer L, infer R] ? L : never; // eslint-disable-line

windi.config.ts

@@ -1,6 +1,7 @@
 // @ts-check - enable TS check for js file
 import { defineConfig } from 'windicss/helpers';
 import colors from 'windicss/colors';
+import { baseConfig } from 'windicss/config';
 
 export default defineConfig({
   darkMode: 'class', // or 'media'
@@ -21,6 +22,7 @@ export default defineConfig({
       },
     },
     cursor: {
+      ...baseConfig.theme.cursor,
       'zoom-in': 'zoom-in',
     },
   },

yarn.lock

@@ -5911,10 +5911,10 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.npmmirror.com/lines-and-columns/download/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
-lint-staged@^12.1.5:
-  version "12.1.5"
-  resolved "https://registry.npmmirror.com/lint-staged/download/lint-staged-12.1.5.tgz#e05582fc39aed5cb13b9dd1dfb8330407246d809"
-  integrity sha512-WyKb+0sNKDTd1LwwAfTBPp0XmdaKkAOEbg4oHE4Kq2+oQVchg/VAcjVQtSqZih1izNsTURjc2EkhG/syRQUXdA==
+lint-staged@^12.1.7:
+  version "12.1.7"
+  resolved "https://registry.npmmirror.com/lint-staged/download/lint-staged-12.1.7.tgz#fe9137992ac18a456422bb8484dd30be0140629f"
+  integrity sha512-bltv/ejiLWtowExpjU+s5z8j1Byjg9AlmaAjMmqNbIicY69u6sYIwXGg0dCn0TlkrrY2CphtHIXAkbZ+1VoWQQ==
   dependencies:
     cli-truncate "^3.1.0"
     colorette "^2.0.16"