feat: 剔除旧的useTableScroll代码

src/components/RightContent/NoticeIcon/NoticeIcon.tsx

@@ -118,7 +118,7 @@ const NoticeIcon: React.FC<NoticeIconProps> & {
 }
 
 NoticeIcon.defaultProps = {
-  emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg'
+  emptyImage: '/public/notice_empty.svg'
 }
 
 NoticeIcon.Tab = NoticeList

src/hooks/core/useWebSocketFn.ts

@@ -0,0 +1,46 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useWebSocket } from 'ahooks'
+import { useEffect } from 'react'
+import { useModel } from 'umi'
+
+export enum cmdType {
+  Single = 10,
+  Group = 11,
+  OnlineList = 12,
+  Notice = 13
+}
+
+export enum noticeType {
+  Notice = 1,
+  Message = 2
+}
+
+export default function useWebSocketFn() {
+  const { initialState } = useModel('@@initialState')
+
+  const { currentUser } = initialState
+
+  const { disconnect, connect, webSocketIns } = useWebSocket(
+    `ws://192.168.1.26:8848/summon/v1/chat/link?username=${currentUser.username}&id=${currentUser.staffId}`,
+    {
+      manual: true,
+      reconnectLimit: 3,
+      reconnectInterval: 2000
+    }
+  )
+  useEffect(() => {
+    if (currentUser && currentUser.staffId) {
+      connect()
+    }
+    return () => {
+      disconnect()
+    }
+  }, [])
+
+  function sendMsg(cmd: cmdType, dstid?: string | null, media?: number | null, options: any) {
+    webSocketIns?.send(
+      JSON.stringify({ cmd, dstid, media, userid: currentUser.staffId, ...options })
+    )
+  }
+  return { webSocketIns, sendMsg }
+}

src/hooks/useAutoTable.js

@@ -1,146 +0,0 @@
-import { useState, useEffect, useMemo } from 'react'
-import { useDebounceFn, useMount, useUpdateLayoutEffect } from 'ahooks'
-import { useStore } from 'dva'
-import { getViewportOffset } from '@/utils/domUtils'
-import { useWindowSizeFn } from './event/useWindomSizeFn'
-/**
- * @param {number} needSubtractHeight 被裁去的高度
- * @param {number} needSubtractWidth 被裁去的宽度
- */
-const useAutoTable = (needSubtractHeight, needSubtractWidth) => {
-  const { collapsed = true } = useStore().getState().global
-  const [scroll, setScroll] = useState({
-    x: document.body.clientWidth - ((collapsed ? 208 : 48) + needSubtractWidth),
-    y: document.body.clientHeight - needSubtractHeight
-  })
-  // const { run, cancel } = useDebounceFn(handleScroll, { wait: 5000})
-  const { run, cancel } = useDebounceFn(() =>
-    setScroll({
-      ...scroll,
-      x: document.body.clientWidth - ((collapsed ? 208 : 48) + needSubtractWidth),
-      y: document.body.clientHeight - needSubtractHeight
-    })
-  )
-  useEffect(() => {
-    run()
-    return () => cancel()
-  }, [collapsed])
-  useEffect(() => {
-    window.addEventListener('resize', run)
-    return () => {
-      window.removeEventListener('resize', cancel)
-    }
-  }, [])
-
-  // 实际返回的宽度要大一点让table出现滚动条，反正折叠菜单栏卡顿
-  return [scroll.x + 50, scroll.y]
-}
-
-export default useAutoTable
-
-export function useTableScroll(columnsRef = [], selectKeysRef = []) {
-  let paginationEl = null
-  let footerEl = null
-  let bodyEl = null
-  const [tableHeight, setTableHeight] = useState(null)
-
-  async function calcTableHeight() {
-    const tableEl = document.getElementsByClassName('ant-table-container')[0]
-    if (!tableEl) return
-    if (!bodyEl) {
-      bodyEl = tableEl.querySelector('.ant-table-body')
-      bodyEl && (bodyEl.style.height = 'unset')
-    }
-    // Add a delay to get the correct bottomIncludeBody paginationHeight footerHeight headerHeight
-
-    const headEl = tableEl.querySelector('.ant-table-thead ')
-
-    if (!headEl) return
-    // Table height from bottom
-    const { bottomIncludeBody } = getViewportOffset(headEl)
-    //
-    const paddingHeight = 24
-
-    let paginationHeight = 32
-
-    if (!paginationEl) {
-      paginationEl = tableEl.querySelector('.ant-pagination')
-      if (paginationEl) {
-        const { offsetHeight } = paginationEl
-        paginationHeight += offsetHeight || 0
-      } else {
-        // TODO First fix 24
-        paginationHeight += 24
-      }
-    }
-
-    let footerHeight = 0
-    if (!paginationEl) {
-      if (!footerEl) {
-        footerEl = tableEl.querySelector('.ant-table-footer')
-      } else {
-        const { offsetHeight } = footerEl
-        footerHeight += offsetHeight || 0
-      }
-    }
-
-    let headerHeight = 0
-    if (headEl) {
-      headerHeight = headEl.offsetHeight
-    }
-
-    const height =
-      bottomIncludeBody - paddingHeight - paginationHeight - footerHeight - headerHeight
-    setTableHeight(height)
-    bodyEl && (bodyEl.style.height = `${height}px`)
-  }
-
-  function redoHeight() {
-    calcTableHeight()
-  }
-  const { run: debounceRedoHeight } = useDebounceFn(redoHeight, { wait: 280 })
-
-  // Greater than animation time 280
-  useWindowSizeFn(calcTableHeight, 280)
-
-  useMount(() => {
-    debounceRedoHeight()
-  })
-
-  useUpdateLayoutEffect(() => {
-    debounceRedoHeight()
-  }, [selectKeysRef?.length])
-
-  const getSrollX = useMemo(() => {
-    let width = 0
-    if (selectKeysRef?.length) {
-      width += 60
-    }
-
-    // TODO props ?? 0;
-    const NORMAL_WIDTH = 150
-
-    const columns = columnsRef.filter(item => !item.defaultHidden)
-    columns.forEach(item => {
-      // eslint-disable-next-line radix
-      width += Number.parseInt(item.width) || 0
-    })
-
-    const unsetWidthColumns = columns.filter(item => !Reflect.has(item, 'width'))
-
-    const len = unsetWidthColumns.length
-    if (len !== 0) {
-      width += len * NORMAL_WIDTH
-    }
-    const tableEl = document.getElementsByClassName('ant-pro-table')[0]
-
-    const tableWidth = tableEl && tableEl.offsetWidth ? tableEl.offsetWidth : 0
-
-    return tableWidth > width ? '100%' : width
-  }, [selectKeysRef])
-
-  const getScrollRef = useMemo(() => {
-    return { x: getSrollX, y: tableHeight || null }
-  }, [getSrollX, tableHeight])
-  return { getScrollRef, redoHeight }
-}

src/pages/Customer/Business/index.jsx

@@ -7,7 +7,6 @@ import { Select } from 'antd'
 import AddBusiness from './components/AddBusiness'
 import Detail from './components/BusinessDetail'
 import { useModal } from '@/components/Modal'
-import { useTableScroll } from '@/hooks/useAutoTable'
 import CompanyDetail from '../Company/components/CompanyDetail'
 import { Funnel } from '@ant-design/charts'
 import PermSelect from '../Company/components/PermSelect'
@@ -75,7 +74,8 @@ const Business = ({ dispatch, groupList, shouldUpdate, loading }) => {
       render: (text, record) => (
         <span
           onClick={() => showDrawer(record.id)}
-          className="text-primary cursor-pointer hover:text-[#967bbd]">
+          className="text-primary cursor-pointer hover:text-[#967bbd]"
+        >
           {text}
         </span>
       )
@@ -88,7 +88,8 @@ const Business = ({ dispatch, groupList, shouldUpdate, loading }) => {
         return record.customerId !== consts.ENCRYPTION_ZERO ? (
           <span
             onClick={() => showDrawer(record.customerId, true)}
-            className="text-primary cursor-pointer hover:text-[#967bbd]">
+            className="text-primary cursor-pointer hover:text-[#967bbd]"
+          >
             {text}
           </span>
         ) : (
@@ -134,7 +135,7 @@ const Business = ({ dispatch, groupList, shouldUpdate, loading }) => {
     shape: 'pyramid',
     conversionTag: false
   }
-  const { getScrollRef, redoHeight } = useTableScroll(columns)
+  // const { getScrollRef, redoHeight } = useTableScroll(columns)
 
   // 处理权限Select下拉组件OnChange事件
   const handlePermChange = ({ staffIds = [], dataPermission }) => {
@@ -186,10 +187,6 @@ const Business = ({ dispatch, groupList, shouldUpdate, loading }) => {
               params={state.params}
               rowKey={record => record.id}
               columns={columns}
-              onLoadingChange={loadingStatus => {
-                loadingStatus && redoHeight()
-              }}
-              scroll={getScrollRef}
               request={async (params, sort, filter) => {
                 const {
                   code = -1,

src/pages/Product/Lock/Lockcount/index.jsx

@@ -1,6 +1,5 @@
-import React, { useState } from 'react'
+import React from 'react'
 import ProTable from '@ant-design/pro-table'
-import { useTableScroll } from '@/hooks/useAutoTable'
 
 const Lockcount = () => {
   // const { modalVisible, onCancel } = props;
@@ -45,8 +44,6 @@ const Lockcount = () => {
     }
   ]
 
-  const [selectKeys, setSelectKeys] = useState([])
-  const { getScrollRef, redoHeight } = useTableScroll(columns, selectKeys)
   return (
     <div>
       <ProTable
@@ -55,10 +52,6 @@ const Lockcount = () => {
         headerTitle="使用统计"
         bordered
         columns={columns}
-        scroll={getScrollRef}
-        onLoadingChange={loadingStatus => {
-          loadingStatus && redoHeight()
-        }}
         // toolbar={{
         //   search: {
         //     allowClear: true