optimize(projects): optimize code

Author: Ohh-889

src/hooks/common/table.ts

@@ -12,11 +12,13 @@ export function useTable<A extends AntDesign.TableApiFn>(
   paginationConfig?: Omit<TablePaginationConfig, 'total' | 'current' | 'pageSize' | 'onChange'>
 ) {
   const isMobile = useAppSelector(getIsMobile);
+
   const [total, setTotal] = useState<TablePaginationConfig['total']>(0);
 
-  const { apiFn, apiParams, immediate } = config;
+  const { apiFn, apiParams, immediate, rowKey = 'id' } = config;
+
+  const [form] = Form.useForm<AntDesign.AntDesignTableConfig<A>['apiParams']>();
 
-  const [form] = Form.useForm();
   const {
     loading,
     empty,
@@ -111,20 +113,25 @@ export function useTable<A extends AntDesign.TableApiFn>(
 
     if (res) {
       if (isResetCurrent) {
-        updateSearchParams({ current: 1, ...res });
+        const { current = 1, ...rest } = res;
+        updateSearchParams({ current, ...rest });
       } else {
         updateSearchParams(res);
       }
     }
   }
 
   return {
-    loading,
+    tableProps: {
+      loading,
+      dataSource: data,
+      columns,
+      rowKey,
+      pagination
+    },
     empty,
     data,
-    columns,
     columnChecks,
-    pagination,
     run,
     setColumnChecks,
     searchParams,
@@ -208,7 +215,8 @@ export function useTableScroll(scrollX: number = 702) {
   const size = useSize(tableWrapperRef);
 
   const height = size?.height;
-  const result = height && height < 435 ? height - 184 : undefined;
+
+  const result = height && height < 600 ? height - 184 : undefined;
 
   const scrollConfig = {
     y: result,

src/pages/manage/user/index.tsx

@@ -1,4 +1,3 @@
-import { Button, Card, Popconfirm, Table, Tag } from 'antd';
 import { Suspense, lazy } from 'react';
 import { fetchGetUserList } from '@/service/api';
 import { enableStatusRecord, userGenderRecord } from '@/constants/business';
@@ -22,7 +21,7 @@ export function Component() {
 
   const { tableWrapperRef, scrollConfig } = useTableScroll();
 
-  const { columns, columnChecks, data, run, loading, pagination, reset, form, setColumnChecks } = useTable(
+  const { columnChecks, data, reset, form, setColumnChecks, tableProps, run } = useTable(
     {
       apiFn: fetchGetUserList,
       apiParams: {
@@ -65,7 +64,7 @@ export function Component() {
 
             const label = t(userGenderRecord[record.userGender]);
 
-            return <Tag color={tagUserGenderMap[record.userGender]}>{label}</Tag>;
+            return <ATag color={tagUserGenderMap[record.userGender]}>{label}</ATag>;
           }
         },
         {
@@ -99,10 +98,8 @@ export function Component() {
             if (record.status === null) {
               return null;
             }
-
             const label = t(enableStatusRecord[record.status]);
-
-            return <Tag color={tagMap[record.status]}>{label}</Tag>;
+            return <ATag color={tagMap[record.status]}>{label}</ATag>;
           }
         },
         {
@@ -112,25 +109,25 @@ export function Component() {
           width: 130,
           render: (_, record) => (
             <div className="flex-center gap-8px">
-              <Button
+              <AButton
                 type="primary"
                 ghost
                 size="small"
                 onClick={() => edit(record.id)}
               >
                 {t('common.edit')}
-              </Button>
-              <Popconfirm
+              </AButton>
+              <APopconfirm
                 title={t('common.confirmDelete')}
                 onConfirm={() => handleDelete(record.id)}
               >
-                <Button
+                <AButton
                   danger
                   size="small"
                 >
                   {t('common.delete')}
-                </Button>
-              </Popconfirm>
+                </AButton>
+              </APopconfirm>
             </div>
           )
         }
@@ -175,7 +172,7 @@ export function Component() {
         reset={reset}
         form={form}
       />
-      <Card
+      <ACard
         styles={{ body: { flex: 1, overflow: 'hidden' } }}
         ref={tableWrapperRef}
         bordered={false}
@@ -184,7 +181,7 @@ export function Component() {
             onDelete={handleBatchDelete}
             refresh={run}
             add={handleAdd}
-            loading={loading}
+            loading={tableProps.loading}
             setColumnChecks={setColumnChecks}
             disabledDelete={checkedRowKeys.length === 0}
             columns={columnChecks}
@@ -193,15 +190,11 @@ export function Component() {
         title={t('page.manage.user.title')}
         className="flex-col-stretch sm:flex-1-hidden card-wrapper"
       >
-        <Table
-          pagination={pagination}
-          rowKey="id"
+        <ATable
           scroll={scrollConfig}
           rowSelection={rowSelection}
           size="small"
-          loading={loading}
-          dataSource={data}
-          columns={columns}
+          {...tableProps}
         />
         <Suspense>
           <UserOperateDrawer
@@ -212,7 +205,7 @@ export function Component() {
             closeDrawer={closeDrawer}
           />
         </Suspense>
-      </Card>
+      </ACard>
     </div>
   );
 }

src/pages/manage/user/modules/UserOperateDrawer.tsx

@@ -1,5 +1,6 @@
 import { Button, Drawer, Flex, Form, Input, Radio, Select } from 'antd';
 import type { FC } from 'react';
+import { useRequest } from '@sa/hooks';
 import { enableStatusOptions, userGenderOptions } from '@/constants/business';
 import { fetchGetAllRoles } from '@/service/api';
 
@@ -23,35 +24,32 @@ interface OptionsProps {
   value: string;
 }
 
+function getOptions(item: Api.SystemManage.AllRole) {
+  return {
+    label: item.roleName,
+    value: item.roleCode
+  };
+}
+
 const UserOperateDrawer: FC<Props> = ({ open, closeDrawer, submitted, operateType, rowData }) => {
   const { t } = useTranslation();
 
-  const [roleOptions, setRoleOptions] = useState<OptionsProps[]>([]);
-
   const [form] = Form.useForm<Model>();
 
+  const { data, run } = useRequest(fetchGetAllRoles, {
+    manual: true
+  });
+
+  const roleOptions: OptionsProps[] = data ? data.map(getOptions) : [];
+
   const onClose = () => {
     closeDrawer();
     form.resetFields();
   };
 
-  async function getRoleOptions() {
-    const { error, data } = await fetchGetAllRoles();
-
-    if (!error) {
-      const options = data.map(item => ({
-        label: item.roleName,
-        value: item.roleCode
-      }));
-
-      // end
-      setRoleOptions(options);
-    }
-  }
-
   async function handleSubmit() {
-    const data = await form.validateFields();
-    console.log(data);
+    const res = await form.validateFields();
+    console.log(res);
 
     // request
     window.$message?.success(t('common.updateSuccess'));
@@ -61,7 +59,7 @@ const UserOperateDrawer: FC<Props> = ({ open, closeDrawer, submitted, operateTyp
 
   useUpdateEffect(() => {
     if (open) {
-      getRoleOptions();
+      run();
     }
   }, [open]);
 

src/types/antd.d.ts

@@ -36,5 +36,5 @@ declare namespace AntDesign {
   type AntDesignTableConfig<A extends TableApiFn> = Pick<
     import('@sa/hooks').TableConfig<A, GetTableData<A>, TableColumn<TableDataWithIndex<GetTableData<A>>>>,
     'apiFn' | 'apiParams' | 'columns' | 'immediate'
-  >;
+  > & { rowKey?: keyof GetTableData<A> };
 }

src/types/auto-imports.d.ts

@@ -17,11 +17,14 @@ declare global {
   const AInput: typeof import('antd')['Input']
   const AMenu: typeof import('antd')['Menu']
   const AModal: typeof import('antd')['Modal']
+  const APopconfirm: typeof import('antd')['Popconfirm']
   const APopover: typeof import('antd')['Popover']
   const ARow: typeof import('antd')['Row']
   const ASpace: typeof import('antd')['Space']
   const AStatistic: typeof import('antd')['Statistic']
   const ASwitch: typeof import('antd')['Switch']
+  const ATable: typeof import('antd')['Table']
+  const ATag: typeof import('antd')['Tag']
   const ATooltip: typeof import('antd')['Tooltip']
   const AWatermark: typeof import('antd')['Watermark']
   const AppProvider: typeof import('../components/stateful/AppProvider')['default']