refactor: 优化BasicTable性能，增加必要说明文档

README.md

@@ -36,6 +36,3 @@ git push origin master --force //将重置后的 master 分支强制推送更新
  1. 要使用PageContainer包裹并将title、breadcrumb置为false(不需要渲染标题以及面包屑)，水印配置视具体页面调整(默认配置查看app.tsx中的layout配置)。
  2. locales/zh-CH/menu.js要加上对应国际化配置。
 3. 本项目使用@umijs/plugin-dva整合数据流进行全局状态管理， [详见](https://umijs.org/zh-CN/plugins/plugin-dva)。
-4. 项目使用ProTable封装的BasicTable进行表格的渲染，支持透传[ProTable](https://procomponents.ant.design/components/table#api)所有属性。
- 1. 表格自动进行高度自适应，若使用request api自动接管请求，任何情况下都将返回的对象的success: true，data都要返回数组即使是空数组。
- 2. mainMenuType参数决定是否开启数据权限配置项、表格配置本地化存储。

src/components/Table/README.md

@@ -0,0 +1,4 @@
+## 项目使用BasicTable进行表格的渲染，是基于ProTable再封装实现的，故支持透传[ProTable](https://procomponents.ant.design/components/table#api)所有属性。
+1. 表格自动进行高度自适应，推荐使用request api自动接管请求。
+2. mainMenuType参数决定是否开启数据权限配置项、表格配置项的本地化自动存储。
+3. ProTable本身又基于antd Table的封装，故支持透传[Table](https://ant-design.antgroup.com/components/table-cn/#API)所有属性。

src/components/Table/src/BasicTable.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 /* eslint-disable no-param-reassign */
-import React, { useRef, useState, useMemo } from 'react'
+import React, { useRef, useState, useMemo, useCallback } from 'react'
 import PermSelect from '@/pages/Customer/Company/components/PermSelect'
 import { TABLE_COLUMNS_MAP, ColumnStateEnum } from '@/utils/cache/cacheEnum'
 import { isBoolean, isMobile, isNullOrUnDef, isObject, isUnDef } from '@/utils/is'
@@ -25,6 +25,7 @@ const BasicTable: {
 } = ({
   onPermChange,
   rowKey,
+  request,
   headerTitle,
   params,
   mainMenuType,
@@ -73,7 +74,7 @@ const BasicTable: {
     columnsRef,
     selectKeysRef: state.selectKeysRef,
     sizeRef: state.sizeRef,
-    // TODO: 只要是boolean[false]说明不需要分页器, 则高度计算时不应该计入
+    // TODO: boolean[false]说明不需要分页器, 则高度计算时不应该计入
     paginationRef: !isBoolean(resetProps.pagination)
   })
 
@@ -146,6 +147,15 @@ const BasicTable: {
 
   const computedParams = mainMenuType ? { ...params, ...state.params } : params
 
+  const _request = useCallback(async (_params, _sort, _filter) => {
+    const result = await request(_params, _sort, _filter)
+    if (!isBoolean(result?.success)) {
+      result.success = true
+    } else if (!result?.success) result.success = true
+    if (!Array.isArray(result?.data)) result.data = []
+    return result
+  }, [])
+
   return (
     <React.StrictMode>
       <div ref={tableElRef} className={styles.BasicTable}>
@@ -155,6 +165,7 @@ const BasicTable: {
           columns={originalColumns}
           params={computedParams}
           scroll={getScrollRef}
+          request={_request}
           columnsState={{
             defaultValue: state.columnsStateMap,
             onChange: handleOnColumnsChange

src/components/Table/src/hooks/useTableScroll.ts

@@ -74,25 +74,14 @@ export function useTableScroll({
     let headerHeight = 0
     if (headEl) {
       headerHeight = headEl.offsetHeight
-      // console.log('headerHeight', headerHeight)
     }
     const height = bottomIncludeBody - paddingHeight - paginationHeight - headerHeight
 
-    // console.log(
-    //   'bottomIncludeBody',
-    //   bottomIncludeBody,
-    //   'paddingHeight',
-    //   paddingHeight,
-    //   'paginationHeight',
-    //   paginationHeight,
-    //   'headerHeight',
-    //   headerHeight
-    // )
-
     setTableHeight(dataSource?.length ? height : null)
 
     if (!dataSource?.length) {
       // TODO:针对无数据的情况下，特别设置tboody
+      tableContainerEl!.style.marginBottom = '16px'
       const tbodyEl: HTMLElement = tableContainerEl?.querySelector('.ant-table-tbody')
       const el = tableContainerEl?.querySelector('table')
       let hasScrollBar = el?.style.width !== '100%'
@@ -103,7 +92,7 @@ export function useTableScroll({
         hasScrollBar = el?.clientWidth > contentWidth
       }
 
-      const notDataHeight = `${height - (hasScrollBar ? 8 : 0)}px`
+      const notDataHeight = `${height - (hasScrollBar ? 8 : 0) - 16}px`
 
       tbodyEl && (tbodyEl!.style.height = notDataHeight)
       return

src/pages/Product/Cloud/index.jsx

@@ -270,12 +270,10 @@ const Cloud = () => {
         request={async (params, sort, filter) => {
           const sortOrder = generateSortField(sort)
           const {
-            code = -1,
             data: { list = [], total = 0 }
           } = await queryRoadpricingList({ ...params, ...sortOrder, ...filter })
           return {
             data: list,
-            success: true,
             total
           }
         }}