test: 11

src/hooks/useAutoTable.js

@@ -1,26 +1,32 @@
 import { useState, useEffect } from "react"
-import { useStore } from 'umi'
 
-const useAutoTable = () => {
-  const collapsed = useStore(state => state.getState().global.collapsed)
-  const needSubtractLength = {
-    // header: 48  main: (margin: 24) card: (padding: 24) table-hedaer: 64
-    height: 48 + 48 + 48 + 64, // 需要被裁掉的高度
-    // collapsed ? 48 : 208 , main: (margin: 24) card: (padding: 24) card-body(padding: 24)
-    width: (collapsed ? 48 : 208) + 48 + 48 + 48
-  }
-  const [scroll, setScroll] = useState({ x: document.body.clientWidth - needSubtractLength.width, y: document.body.clientWidth - needSubtractLength.height })
+const useAutoTable = (collapsed) => {
+  // console.log(collapsed)
+  const needSubtractHeight = 48 + 48 + 48 + 64 // 需要被裁掉的高度
+  const needSubtractWidth = (collapsed ? 208 : 48) + 48 + 48 + 48// 需要被裁掉的高度
+
+  // const needSubtractLength = {
+  //   // header: 48  main: (margin: 24) card: (padding: 24) table-hedaer: 64
+  //   height: 48 + 48 + 48 + 64, // 需要被裁掉的高度
+  //   // collapsed ? 48 : 208 , main: (margin: 24) card: (padding: 24) card-body(padding: 24)
+  //   width: (collapsed ? 208 : 48) + 48 + 48 + 48
+  // }
+
+
+  const [scroll, setScroll] = useState({ x: 0, y: 0 })
+
   useEffect(() => {
+    setScroll({ ...scroll, x: document.body.clientWidth - needSubtractWidth, y: document.body.clientWidth - needSubtractHeight })
     window.addEventListener('resize', () => {
-      setScroll({ ...scroll, x: document.body.clientWidth - needSubtractLength.width, y: document.body.clientWidth - needSubtractLength.height })
+      setScroll({ ...scroll, x: document.body.clientWidth - needSubtractWidth, y: document.body.clientWidth - needSubtractHeight })
     })
     return () => {
       window.removeEventListener('resize', () => { })
     }
-  }, [])
+  }, [collapsed])
 
   // 实际返回的宽度要大一点让table出现滚动条，反正折叠菜单栏卡顿
-  return [scroll.x + 10, scroll.y]
+  return [scroll.x, scroll.y]
 }
 
 export default useAutoTable

src/pages/Customer/Contact/index.jsx

@@ -8,7 +8,7 @@ import SvgIcon from '@/components/SvgIcon'
 import useAutoTable from '@/hooks/useAutoTable'
 
 const Contact = props => {
-  const [x, y] = useAutoTable()
+  const [x, y] = useAutoTable(props.collapsed)
   // let tag = Array.from(tag);
   const [visible, setVisible] = useState(false)
 
@@ -275,7 +275,7 @@ const Contact = props => {
 
   return (
     // <PageHeaderWrapper></PageHeaderWrapper>
-    <Card bordered={false}>
+    <div className="zh-pd-24">
       <ProTable
         className="auto-scroll-y"
         size="middle"
@@ -298,11 +298,12 @@ const Contact = props => {
         ]}
       />
       <Contacts onClose={hideDrawer} visible={visible} onCreate={onCreate} />
-    </Card>
+    </div>
   )
 }
 
-export default connect(({ contact, loading }) => ({
+export default connect(({ contact, global, loading }) => ({
   contactName: contact,
+  collapsed: global.collapsed,
   getlist: loading.effects['contact/fetch']
 }))(Contact)