fix: [BasicTable] 受useCallback影响导致Toolbar渲染受影响

package.json

@@ -52,7 +52,7 @@
     "@ant-design/icons": "^4.0.0",
     "@ant-design/pro-form": "1.66.0",
     "@ant-design/pro-layout": "6.19.3",
-    "@ant-design/pro-table": "^2.60.0",
+    "@ant-design/pro-table": "2.76.3",
     "@icon-park/react": "^1.3.3",
     "@umijs/route-utils": "^2.0.5",
     "ahooks": "^2.10.0",
@@ -77,7 +77,6 @@
     "virtuallist-antd": "^0.7.2"
   },
   "devDependencies": {
-    "@ant-design/pro-cli": "^1.0.18",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/plugin-proposal-decorators": "^7.17.2",
     "@babel/plugin-proposal-optional-chaining": "^7.13.12",

src/components/Table/src/BasicTable.tsx

@@ -150,23 +150,29 @@ const BasicTable: {
 
   const computedParams = mainMenuType ? { ...params, ...state.params } : params
 
-  const _request = useCallback(async (_params, _sort, _filter) => {
-    if (isUnDef(request)) return undefined
-    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
-  }, [])
-
-  const _onLoad = useCallback(_dataSource => {
-    onLoad?.(_dataSource)
-    // TODO: 使用[request]api才对dataSource进行赋值, 规避掉手动设置[dataSource] api 自适应高度失效
-    if (!isUnDef(request)) {
-      setState({ ...state, dataSource: _dataSource })
-    }
-  }, [])
+  const _request = useCallback(
+    async (_params, _sort, _filter) => {
+      if (isUnDef(request)) return undefined
+      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
+    },
+    [request]
+  )
+
+  const _onLoad = useCallback(
+    _dataSource => {
+      onLoad?.(_dataSource)
+      // TODO: 使用[request]api才对dataSource进行赋值, 规避掉手动设置[dataSource] api 自适应高度失效
+      if (!isUnDef(request)) {
+        setState({ ...state, dataSource: _dataSource })
+      }
+    },
+    [onLoad]
+  )
 
   return (
     <React.StrictMode>

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

@@ -110,7 +110,7 @@ export function useTableScroll({
   const { run: debounceRedoHeight } = useDebounceFn(redoHeight, { wait: 80 })
 
   // Greater than animation time 80
-  useWindowSizeFn(() => debounceRedoHeight(), 0)
+  useWindowSizeFn(() => debounceRedoHeight(), 80)
 
   useUpdateLayoutEffect(() => {
     debounceRedoHeight()

src/pages/Statistic/Customer/CustomerAdditions/index.jsx

@@ -1,6 +1,6 @@
 import BasicTable from '@/components/Table'
 import consts from '@/consts'
-import React, { useRef, useState } from 'react'
+import React, { useRef, useState, useEffect } from 'react'
 import { DatePicker, Select, Space } from 'antd'
 import { Column } from '@ant-design/charts'
 import dayjs from 'dayjs'
@@ -10,54 +10,61 @@ import { queryCustomerAdditionList } from '@/services/statistic'
 import { PageContainer } from '@ant-design/pro-layout'
 
 const { Option } = Select
-const { RangePicker } = DatePicker
 const columnGroupMap = {
   client: '客户',
   company: '单位'
 }
+
+const dateTypeOptions = [
+  { label: '月', value: 'month' },
+  { label: '周', value: 'week' },
+  { label: '日', value: 'day' }
+]
+
 const CustomerAdditions = () => {
   const [state, setState] = useState({
     params: {
       optionType: 'singleStaff',
       dataIds: [],
       dateType: 'month',
-      startMonth: [dayjs(new Date()), dayjs(new Date())]
+      startMonth: null
     },
-    data: [],
-    type: 'month'
+    data: []
   })
-  const [dates, setDates] = useState([])
-  const [hackValue, setHackValue] = useState()
-  const tRef = useRef(null)
+
+  useEffect(() => {
+    setState({ ...state, params: { ...state.params, startMonth: [dayjs(new Date()), dayjs(new Date())] } })
+    console.log(state.params.startMonth)
+  }, [])
+
+  const [dates, setDates] = useState(null)
+  const [hackValue, setHackValue] = useState(null)
   const handleOptionChange = (type, ids) =>
     setState({ ...state, params: { ...state.params, optionType: type, dataIds: ids } })
+
   const disabledDate = current => {
     if (!dates || dates.length === 0) {
       return false
     }
-    if (state.type === 'month') {
-      const tooLate = dates[0] && current.diff(dates[0], 'month') > 10
-      const tooEarly = dates[1] && dates[1].diff(current, 'month') > 10
-      return tooEarly || tooLate
-    }
-    if (state.type === 'week') {
-      const tooLate = dates[0] && current.diff(dates[0], 'weeks') > 11
-      const tooEarly = dates[1] && dates[1].diff(current, 'weeks') > 11
-      return tooEarly || tooLate
-    }
-    if (state.type === 'date') {
-      const tooLate = dates[0] && current.diff(dates[0], 'days') > 29
-      const tooEarly = dates[1] && dates[1].diff(current, 'days') > 29
-      return tooEarly || tooLate
+    let tooLate, tooEarly
+    if (state.params.dateType === 'month') {
+      tooLate = dates[0] && current.diff(dates[0], 'month') > 10
+      tooEarly = dates[1] && dates[1].diff(current, 'month') > 10
+    } else if (state.params.dateType === 'week') {
+      tooLate = dates[0] && current.diff(dates[0], 'weeks') > 11
+      tooEarly = dates[1] && dates[1].diff(current, 'weeks') > 11
+    } else {
+      tooLate = dates[0] && current.diff(dates[0], 'days') > 29
+      tooEarly = dates[1] && dates[1].diff(current, 'days') > 29
     }
-    // return tooEarly || tooLate
+    return !!tooEarly || !!tooLate
   }
   const onOpenChange = open => {
     if (open) {
-      setHackValue([])
-      setDates([])
+      setHackValue([null, null])
+      setDates([null, null])
     } else {
-      setHackValue(undefined)
+      setHackValue(null)
     }
   }
   const columns = [
@@ -80,28 +87,23 @@ const CustomerAdditions = () => {
     }
   ]
 
-  const dateTypeOptions = [
-    { label: '月', value: 'month' },
-    { label: '周', value: 'week' },
-    { label: '日', value: 'date' }
-  ]
   const handleOnChange = val => {
     // console.log(state.type)
     if (val?.length !== 2) return
-    if (state.type === 'month') {
+    console.log(val)
+    if (state.params.dateType === 'month') {
       const [startTime, endTime] = val
       setState({
         ...state,
         params: {
           ...state.params,
-          startMonth: [startTime.startOf('month'), endTime.endOf('month')],
-          dateType: state.type
+          startMonth: [startTime.startOf('month'), endTime.endOf('month')]
         }
       })
     } else {
       setState({
         ...state,
-        params: { ...state.params, startMonth: val, dateType: state.type === 'date' ? 'day' : state.type }
+        params: { ...state.params, startMonth: val }
       })
     }
   }
@@ -143,10 +145,8 @@ const CustomerAdditions = () => {
           </div>
         </div>
         <BasicTable
-          // manualRequest
           search={false}
           columns={columns}
-          actionRef={tRef}
           rowkey="id"
           params={state.params}
           pagination={false}
@@ -163,19 +163,14 @@ const CustomerAdditions = () => {
             actions: [
               <Space key="id">
                 <Select
-                  value={state.type}
+                  defaultValue="month"
                   options={dateTypeOptions}
-                  onChange={value => setState({ ...state, type: value })}
+                  onChange={value => setState({ ...state, params: { ...state.params, dateType: value } })}
                 />
-                {/* <Option value="month">月</Option>
-                <Option value="week">周</Option>
-                <Option value="date">日</Option> */}
-                {/* </Select> */}
-                <RangePicker
-                  picker={state.type}
+                <DatePicker.RangePicker
+                  picker={state.params.dateType}
                   disabledDate={disabledDate}
                   // allowClear={false}
-                  // value={state.params.startMonth}
                   value={hackValue || state.params.startMonth}
                   onCalendarChange={val => setDates(val)}
                   onOpenChange={onOpenChange}

src/pages/Statistic/Product/InvoiceAggregate/index.jsx

@@ -107,8 +107,7 @@ const InvoiceAggregate = () => {
                 picker="month"
                 key="DatePicker"
                 disabledDate={current => disabledDate(current, 'month')}
-                defaultValue={[dayjs(new Date()), dayjs(new Date())]}
-                // value={state.params.startMonth}
+                value={state.params.startMonth}
                 onChange={(val, formatString) => {
                   console.log(val, formatString)
                   setState({ ...state, params: { ...state.params, startMonth: val } })

src/pages/Statistic/Product/InvoiceReceivables/index.jsx

@@ -3,16 +3,17 @@ import BasicTable from '@/components/Table'
 import { queryInvoiceReceivablesList } from '@/services/statistic'
 import consts from '@/consts'
 import dayjs from 'dayjs'
-import { Checkbox, DatePicker, Select, Space, Statistic, Table } from 'antd'
+import { Checkbox, DatePicker, Space, Statistic, Table } from 'antd'
 import OptionSelect from '../../components/OptionSelect'
 import { disabledDate } from '@/utils/utils'
 import styles from './index.less'
 import classNames from 'classnames'
 import { PageContainer } from '@ant-design/pro-layout'
+import ProTable from '@ant-design/pro-table'
 
-export const collectedTypeEnum = {
-  UNSTART: 0, // 未启动
-  START: 1 // 启动
+export enum CollectedType {
+  UNSTART = 0, // 未启动
+  START = 1 // 启动
 }
 const invoiceFormEnum = {
   0: { text: '纸质发票' },
@@ -28,18 +29,16 @@ const invoiceTypeEnum = {
   0: { text: '增值税普通发票' },
   1: { text: '增值税专用发票' }
 }
-const { Option } = Select
-// const { RangePicker } = DatePicker
 
 const InvoiceReceivables = () => {
   const [state, setState] = useState({
     params: {
       optionType: 'singleStaff',
       dataIds: [],
-      uncollected: collectedTypeEnum.UNSTART,
+      uncollected: CollectedType.UNSTART,
       startMonth: [dayjs(new Date()), dayjs(new Date())]
     },
-    list: []
+    sum: {}
   })
   const handleOptionChange = (type, ids) =>
     setState({
@@ -48,9 +47,9 @@ const InvoiceReceivables = () => {
     })
   const handleCheckOnChange = checked => {
     if (checked) {
-      setState({ ...state, params: { ...state.params, uncollected: collectedTypeEnum.START } })
+      setState({ ...state, params: { ...state.params, uncollected: CollectedType.START } })
     } else {
-      setState({ ...state, params: { ...state.params, uncollected: collectedTypeEnum.UNSTART } })
+      setState({ ...state, params: { ...state.params, uncollected: CollectedType.UNSTART } })
     }
   }
   const columns = [
@@ -242,10 +241,8 @@ const InvoiceReceivables = () => {
                 <DatePicker.RangePicker
                   picker="month"
                   allowClear={false}
-                  // key="DatePicker"
                   disabledDate={current => disabledDate(current, 'month')}
-                  // value={state.params.startMonth}
-                  defaultValue={[dayjs(new Date()), dayjs(new Date())]}
+                  value={state.params.startMonth}
                   onChange={val => setState({ ...state, params: { ...state.params, startMonth: val } })}
                 />
                 <Checkbox onChange={e => handleCheckOnChange(e.target.checked)}>
@@ -264,7 +261,7 @@ const InvoiceReceivables = () => {
               code = -1,
               data: { list, sum }
             } = await queryInvoiceReceivablesList({ ...params })
-            setState({ ...state, list, sum })
+            setState({ ...state, sum })
             return {
               data: list,
               success: code === consts.RET_CODE.SUCCESS,

src/pages/Statistic/Product/InvoiceTrends/index.jsx

@@ -219,8 +219,7 @@ const InvoiceTrends = () => {
                 key="DatePicker"
                 allowClear={false}
                 disabledDate={current => disabledDate(current, 'year')}
-                // value={state.params.startMonth}
-                defaultValue={[dayjs(new Date()), dayjs(new Date())]}
+                value={state.params.startMonth}
                 onChange={val => setState({ ...state, params: { ...state.params, startMonth: val } })}
               />
             ]

src/pages/Statistic/Product/SoftwareUsage/index.jsx

@@ -145,8 +145,7 @@ const Usage = () => {
                 allowClear={false}
                 key="DatePicker"
                 disabledDate={current => disabledDate(current, 'month')}
-                // value={state.params.startMonth}
-                defaultValue={[dayjs(new Date()), dayjs(new Date())]}
+                value={state.params.startMonth}
                 onChange={val => setState({ ...state, params: { ...state.params, startMonth: val } })}
               />
             ]