feat: 增加自定义useAutoTable hook去接管table自适应高度的问题

.eslintrc.js

@@ -1,21 +1,21 @@
 module.exports = {
-  extends: [ require.resolve('@umijs/fabric/dist/eslint') ],
+  extends: [require.resolve('@umijs/fabric/dist/eslint')],
   globals: {
     ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true,
     page: true,
     REACT_APP_ENV: true
   },
   rules: {
-    'semi': [ 'error', 'never' ],
-    'no-multiple-empty-lines': [ 1, { max: 2 } ],
-    'comma-dangle': [ 2, 'never' ],
+    'semi': ['error', 'never'],
+    'no-multiple-empty-lines': [1, { max: 2 }],
+    'comma-dangle': [2, 'never'],
     'react/prop-types': 0,
     'spaced-comment': 'error',
-    'array-bracket-spacing': [ 'error', 'always' ],
-    'object-curly-spacing': [ 'error', 'always' ],
-    "react/self-closing-comp": [ "error", {
+    // 'array-bracket-spacing': ['error', 'always'], // 和prettier冲突
+    'object-curly-spacing': ['error', 'always'],
+    "react/self-closing-comp": ["error", {
       "component": true,
       "html": true
-    } ]
+    }]
   }
 }

.prettierrc.js

@@ -2,13 +2,32 @@ const fabric = require('@umijs/fabric')
 
 module.exports = {
   ...fabric.prettier,
-  eslintIntegration: false,
-  stylelintIntegration: false,
   semi: false,
-  quoteProps: 'consistent',
+  // quoteProps: 'consistent',
   htmlWhitespaceSensitivity: 'ignore',
   jsxBracketSameLine: true,
   trailingComma: 'none',
   bracketSpacing: true,
-  arrowParens: 'avoid'
+  arrowParens: 'avoid',
+
+  printWidth: 100,
+  tabWidth: 2,
+  singleQuote: true,
+  quoteProps: 'as-needed',
+  bracketSpacing: true,
+  jsxSingleQuote: false,
+  insertPragma: false,
+  requirePragma: false,
+  proseWrap: 'never',
+  htmlWhitespaceSensitivity: 'strict',
+  endOfLine: 'lf',
+  rangeStart: 0,
+  overrides: [
+    {
+      files: '*.md',
+      options: {
+        tabWidth: 2,
+      },
+    },
+  ],
 }

mock/contact.js

@@ -286,6 +286,198 @@ const dataSource = [
     dasikong: '大司空',
     yanghuyun: '养护云',
     chuanpeople: '创建人'
+  },
+  {
+    key: '13',
+    clientname: '孙杨',
+    companyname: '甘肃恒和交通工程科技开发有限公司',
+    department: '部门',
+    telephone: '13896881179',
+    phone: '13896881179',
+    qq: 'qq',
+    email: '171247210@qq.com',
+    position: '职务',
+    office: '办公室',
+    local: '地区',
+    tag: '测试test',
+    tooltip: 'adada测试',
+    address: '地址',
+    ride: '乘车',
+    landmarks: '地标',
+    stay: '住宿',
+    mark: '备注',
+    keynum: 'ZH-06272',
+    dasikong: '大司空',
+    yanghuyun: '养护云',
+    chuanpeople: '创建人'
+  },
+  {
+    key: '14',
+    clientname: '孙杨',
+    companyname: '甘肃恒和交通工程科技开发有限公司',
+    department: '部门',
+    telephone: '13896881179',
+    phone: '13896881179',
+    qq: 'qq',
+    email: '171247210@qq.com',
+    position: '职务',
+    office: '办公室',
+    local: '地区',
+    tag: '测试test',
+    tooltip: 'adada测试',
+    address: '地址',
+    ride: '乘车',
+    landmarks: '地标',
+    stay: '住宿',
+    mark: '备注',
+    keynum: 'ZH-06272',
+    dasikong: '大司空',
+    yanghuyun: '养护云',
+    chuanpeople: '创建人'
+  },
+  {
+    key: '15',
+    clientname: '孙杨',
+    companyname: '甘肃恒和交通工程科技开发有限公司',
+    department: '部门',
+    telephone: '13896881179',
+    phone: '13896881179',
+    qq: 'qq',
+    email: '171247210@qq.com',
+    position: '职务',
+    office: '办公室',
+    local: '地区',
+    tag: '测试test',
+    tooltip: 'adada测试',
+    address: '地址',
+    ride: '乘车',
+    landmarks: '地标',
+    stay: '住宿',
+    mark: '备注',
+    keynum: 'ZH-06272',
+    dasikong: '大司空',
+    yanghuyun: '养护云',
+    chuanpeople: '创建人'
+  },
+  {
+    key: '16',
+    clientname: '孙杨',
+    companyname: '甘肃恒和交通工程科技开发有限公司',
+    department: '部门',
+    telephone: '13896881179',
+    phone: '13896881179',
+    qq: 'qq',
+    email: '171247210@qq.com',
+    position: '职务',
+    office: '办公室',
+    local: '地区',
+    tag: '测试test',
+    tooltip: 'adada测试',
+    address: '地址',
+    ride: '乘车',
+    landmarks: '地标',
+    stay: '住宿',
+    mark: '备注',
+    keynum: 'ZH-06272',
+    dasikong: '大司空',
+    yanghuyun: '养护云',
+    chuanpeople: '创建人'
+  },
+  {
+    key: '17',
+    clientname: '孙杨',
+    companyname: '甘肃恒和交通工程科技开发有限公司',
+    department: '部门',
+    telephone: '13896881179',
+    phone: '13896881179',
+    qq: 'qq',
+    email: '171247210@qq.com',
+    position: '职务',
+    office: '办公室',
+    local: '地区',
+    tag: '测试test',
+    tooltip: 'adada测试',
+    address: '地址',
+    ride: '乘车',
+    landmarks: '地标',
+    stay: '住宿',
+    mark: '备注',
+    keynum: 'ZH-06272',
+    dasikong: '大司空',
+    yanghuyun: '养护云',
+    chuanpeople: '创建人'
+  },
+  {
+    key: '18',
+    clientname: '孙杨',
+    companyname: '甘肃恒和交通工程科技开发有限公司',
+    department: '部门',
+    telephone: '13896881179',
+    phone: '13896881179',
+    qq: 'qq',
+    email: '171247210@qq.com',
+    position: '职务',
+    office: '办公室',
+    local: '地区',
+    tag: '测试test',
+    tooltip: 'adada测试',
+    address: '地址',
+    ride: '乘车',
+    landmarks: '地标',
+    stay: '住宿',
+    mark: '备注',
+    keynum: 'ZH-06272',
+    dasikong: '大司空',
+    yanghuyun: '养护云',
+    chuanpeople: '创建人'
+  },
+  {
+    key: '19',
+    clientname: '孙杨',
+    companyname: '甘肃恒和交通工程科技开发有限公司',
+    department: '部门',
+    telephone: '13896881179',
+    phone: '13896881179',
+    qq: 'qq',
+    email: '171247210@qq.com',
+    position: '职务',
+    office: '办公室',
+    local: '地区',
+    tag: '测试test',
+    tooltip: 'adada测试',
+    address: '地址',
+    ride: '乘车',
+    landmarks: '地标',
+    stay: '住宿',
+    mark: '备注',
+    keynum: 'ZH-06272',
+    dasikong: '大司空',
+    yanghuyun: '养护云',
+    chuanpeople: '创建人'
+  },
+  {
+    key: '20',
+    clientname: '孙杨',
+    companyname: '甘肃恒和交通工程科技开发有限公司',
+    department: '部门',
+    telephone: '13896881179',
+    phone: '13896881179',
+    qq: 'qq',
+    email: '171247210@qq.com',
+    position: '职务',
+    office: '办公室',
+    local: '地区',
+    tag: '测试test',
+    tooltip: 'adada测试',
+    address: '地址',
+    ride: '乘车',
+    landmarks: '地标',
+    stay: '住宿',
+    mark: '备注',
+    keynum: 'ZH-06272',
+    dasikong: '大司空',
+    yanghuyun: '养护云',
+    chuanpeople: '创建人'
   }
 ]
 

package.json

@@ -50,6 +50,7 @@
     "@ant-design/pro-form": "^1.3.0",
     "@ant-design/pro-layout": "^6.5.15",
     "@ant-design/pro-table": "^2.9.16",
+    "@umijs/plugin-dva": "^0.10.0",
     "@umijs/route-utils": "^1.0.33",
     "antd": "^4.8.0",
     "classnames": "^2.2.6",

src/hooks/useAutoTable.js

@@ -0,0 +1,26 @@
+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 })
+  useEffect(() => {
+    window.addEventListener('resize', () => {
+      setScroll({ ...scroll, x: document.body.clientWidth - needSubtractLength.width, y: document.body.clientWidth - needSubtractLength.height })
+    })
+    return () => {
+      window.removeEventListener('resize', () => { })
+    }
+  }, [])
+
+  // 实际返回的宽度要大一点让table出现滚动条，反正折叠菜单栏卡顿
+  return [scroll.x + 10, scroll.y]
+}
+
+export default useAutoTable

src/pages/Customer/Contact/index.jsx

@@ -5,10 +5,12 @@ import { Button, Card, Tag } from 'antd'
 import { connect } from 'dva'
 import React, { useEffect, useState } from 'react'
 import SvgIcon from '@/components/SvgIcon'
+import useAutoTable from '@/hooks/useAutoTable'
 
 const Contact = props => {
+  const [x, y] = useAutoTable()
   // let tag = Array.from(tag);
-  const [ visible, setVisible ] = useState(false)
+  const [visible, setVisible] = useState(false)
 
   // 展示drawer
   const showDrawer = () => {
@@ -230,11 +232,11 @@ const Contact = props => {
   const {
     contactName: { list }
   } = props // 将contact中的pros.list命名为list
-  const contanctlist = [ ...list ]
+  const contanctlist = [...list]
   // console.log(props);
   // console.log(list)
   // console.log(dataSource);
-  const [ columnsStateMap, setColumnsStateMap ] = useState({
+  const [columnsStateMap, setColumnsStateMap] = useState({
     telephone: {
       show: false
     },
@@ -284,13 +286,14 @@ const Contact = props => {
         options={{
           search: true
         }}
-        scroll={{ x: 1500, y: 200 }}
+        scroll={{ x, y }}
         columnsStateMap={columnsStateMap}
         onColumnsStateChange={map => setColumnsStateMap(map)}
         headerTitle="联系人"
         toolBarRender={() => [
           <Button key="button" type="primary">
-            <SvgIcon type="icon-plus" />联系人
+            <SvgIcon type="icon-plus" />
+            联系人
           </Button>
         ]}
       />