fix(projects): fix Fix type error type error . close #3

mufeng889 · Aug 15, 2024 · d923752 · d923752
1 parent d9e87f2
commit d923752
Show file tree

Hide file tree

Showing 2 changed files with 109 additions and 117 deletions.
diff --git a/src/hooks/common/table.ts b/src/hooks/common/table.ts
@@ -163,9 +163,10 @@ export function useTableOperate<T extends TableData = TableData>(
     setCheckedRowKeys(keys);
   }
 
-  const rowSelection: TableProps['rowSelection'] = {
+  const rowSelection: TableProps<T>['rowSelection'] = {
     columnWidth: 48,
     type: 'checkbox',
+    fixed: true,
     selectedRowKeys: checkedRowKeys,
     onChange: onSelectChange
   };

diff --git a/src/pages/manage/user/index.tsx b/src/pages/manage/user/index.tsx
@@ -20,123 +20,122 @@ export function Component() {
 
   const { tableWrapperRef, scrollConfig } = useTableScroll();
 
-  const { columns, columnChecks, data, run, loading, pagination, searchParams, reset, form, setColumnChecks } =
-    useTable(
-      {
-        apiFn: fetchGetUserList,
-        apiParams: {
-          current: 1,
-          size: 10,
-          // if you want to use the searchParams in Form, you need to define the following properties, and the value is null
-          // the value can not be undefined, otherwise the property in Form will not be reactive
-          status: null,
-          userName: null,
-          userGender: null,
-          nickName: null,
-          userPhone: null,
-          userEmail: null
+  const { columns, columnChecks, data, run, loading, pagination, reset, form, setColumnChecks } = useTable(
+    {
+      apiFn: fetchGetUserList,
+      apiParams: {
+        current: 1,
+        size: 10,
+        // if you want to use the searchParams in Form, you need to define the following properties, and the value is null
+        // the value can not be undefined, otherwise the property in Form will not be reactive
+        status: null,
+        userName: null,
+        userGender: null,
+        nickName: null,
+        userPhone: null,
+        userEmail: null
+      },
+      columns: () => [
+        {
+          key: 'index',
+          title: t('common.index'),
+          dataIndex: 'index',
+          align: 'center',
+          width: 64
+        },
+        {
+          key: 'userName',
+          dataIndex: 'userName',
+          title: t('page.manage.user.userName'),
+          align: 'center',
+          minWidth: 100
         },
-        columns: () => [
-          {
-            key: 'index',
-            title: t('common.index'),
-            dataIndex: 'index',
-            align: 'center',
-            width: 64
-          },
-          {
-            key: 'userName',
-            dataIndex: 'userName',
-            title: t('page.manage.user.userName'),
-            align: 'center',
-            minWidth: 100
-          },
-          {
-            key: 'userGender',
-            title: t('page.manage.user.userGender'),
-            align: 'center',
-            dataIndex: 'userGender',
-            width: 100,
-            render: (_, record) => {
-              if (record?.userGender === null) {
-                return null;
-              }
+        {
+          key: 'userGender',
+          title: t('page.manage.user.userGender'),
+          align: 'center',
+          dataIndex: 'userGender',
+          width: 100,
+          render: (_, record) => {
+            if (record?.userGender === null) {
+              return null;
+            }
 
-              const label = t(userGenderRecord[record.userGender]);
+            const label = t(userGenderRecord[record.userGender]);
 
-              return <Tag color={tagUserGenderMap[record.userGender]}>{label}</Tag>;
+            return <Tag color={tagUserGenderMap[record.userGender]}>{label}</Tag>;
+          }
+        },
+        {
+          key: 'nickName',
+          dataIndex: 'nickName',
+          title: t('page.manage.user.nickName'),
+          align: 'center',
+          minWidth: 100
+        },
+        {
+          key: 'userPhone',
+          dataIndex: 'userPhone',
+          title: t('page.manage.user.userPhone'),
+          align: 'center',
+          width: 120
+        },
+        {
+          key: 'userEmail',
+          dataIndex: 'userEmail',
+          title: t('page.manage.user.userEmail'),
+          align: 'center',
+          minWidth: 200
+        },
+        {
+          key: 'status',
+          dataIndex: 'status',
+          title: t('page.manage.user.userStatus'),
+          align: 'center',
+          width: 100,
+          render: (_, record) => {
+            if (record.status === null) {
+              return null;
             }
-          },
-          {
-            key: 'nickName',
-            dataIndex: 'nickName',
-            title: t('page.manage.user.nickName'),
-            align: 'center',
-            minWidth: 100
-          },
-          {
-            key: 'userPhone',
-            dataIndex: 'userPhone',
-            title: t('page.manage.user.userPhone'),
-            align: 'center',
-            width: 120
-          },
-          {
-            key: 'userEmail',
-            dataIndex: 'userEmail',
-            title: t('page.manage.user.userEmail'),
-            align: 'center',
-            minWidth: 200
-          },
-          {
-            key: 'status',
-            dataIndex: 'status',
-            title: t('page.manage.user.userStatus'),
-            align: 'center',
-            width: 100,
-            render: (_, record) => {
-              if (record.status === null) {
-                return null;
-              }
 
-              const label = t(enableStatusRecord[record.status]);
+            const label = t(enableStatusRecord[record.status]);
 
-              return <Tag color={tagMap[record.status]}>{label}</Tag>;
-            }
-          },
-          {
-            key: 'operate',
-            title: t('common.operate'),
-            align: 'center',
-            width: 130,
-            render: (_, record) => (
-              <div className="flex-center gap-8px">
+            return <Tag color={tagMap[record.status]}>{label}</Tag>;
+          }
+        },
+        {
+          key: 'operate',
+          title: t('common.operate'),
+          align: 'center',
+          width: 130,
+          render: (_, record) => (
+            <div className="flex-center gap-8px">
+              <Button
+                type="primary"
+                ghost
+                size="small"
+                onClick={() => edit(record.id)}
+              >
+                {t('common.edit')}
+              </Button>
+              <Popconfirm
+                title={t('common.confirmDelete')}
+                onConfirm={() => handleDelete(record.id)}
+              >
                 <Button
-                  type="primary"
-                  ghost
+                  danger
                   size="small"
-                  onClick={() => edit(record.id)}
                 >
-                  {t('common.edit')}
+                  {t('common.delete')}
                 </Button>
-                <Popconfirm
-                  title={t('common.confirmDelete')}
-                  onConfirm={() => handleDelete(record.id)}
-                >
-                  <Button
-                    danger
-                    size="small"
-                  >
-                    {t('common.delete')}
-                  </Button>
-                </Popconfirm>
-              </div>
-            )
-          }
-        ]
-      },
-      { showQuickJumper: true }
-    );
+              </Popconfirm>
+            </div>
+          )
+        }
+      ]
+    },
+    { showQuickJumper: true }
+  );
 
   const {
     checkedRowKeys,
@@ -150,15 +149,7 @@ export function Component() {
     operateType,
     editingData
   } = useTableOperate(data, run);
-  useWhyDidYouUpdate('Component', {
-    columns,
-    columnChecks,
-    data,
-    loading,
-    pagination,
-    searchParams,
-    checkedRowKeys
-  });
+
   async function handleBatchDelete() {
     // request
     console.log(checkedRowKeys);