refactor: 优化useAutoTable

src/components/EditableForm/src/editableFormItem.jsx

@@ -1,11 +1,12 @@
 import consts from '@/basic/consts'
 import { editFormApi } from '@/services/common'
-import { Input, Row, Col, Select } from 'antd'
+import { Input, Row, Col } from 'antd'
 import React, { useState, useEffect, useRef } from 'react'
 import LazyCascader from '../../LazyCascader'
 import { connect } from 'dva'
 import './index.less'
 import useOptions from './useOptions'
+import ChangeSelect from '@/pages/Customer/Company/components/ChangeSelect'
 
 const EditableFormItem = ({
   type,
@@ -32,7 +33,12 @@ const EditableFormItem = ({
   useEffect(() => {
     // 处于编辑状态自动聚焦, 级联有问题暂无解决办法
     if (editing && iRef.current) {
-      iRef.current.focus()
+      if (iRef.current.selectRef) {
+        // select选择器相关
+        iRef.current.selectRef.current.focus()
+      } else {
+        iRef.current.focus()
+      }
     }
 
     // 对级联数据初始化, key一定要是district!!
@@ -106,25 +112,7 @@ const EditableFormItem = ({
         )
         break
       case 'select':
-        cell = (
-          <Select
-            defaultValue={val}
-            ref={iRef}
-            onBlur={save}
-            options={options}
-            defaultOpen={true}
-            mode={Array.isArray(val) ? 'multiple' : null}
-            onChange={(value, option) => {
-              const local = Array.isArray(option)
-                ? option.reduce((prev, curr) => {
-                    return prev + curr.label
-                  }, '')
-                : options.label
-              save({ currentTarget: { value, local } })
-            }}
-            className="zh-width-100P"
-          />
-        )
+        cell = <ChangeSelect ref={iRef} defaultValue={val} options={options} onSave={save} />
         break
       case 'textarea':
         cell = (
@@ -154,6 +142,9 @@ const EditableFormItem = ({
     if (editCellType === 'cascader') {
       content = extraVal || dataSource.local
     }
+    if (editCellType === 'select') {
+      content = extraVal || dataSource.nature
+    }
     cell = (
       <div className="editable-cell-value-wrap" onClick={toggleEdit}>
         {content}

src/hooks/useAutoTable.js

@@ -1,22 +1,28 @@
-import { useState, useEffect } from "react"
+import { useState, useEffect } from 'react'
 import { useDebounceFn } from 'ahooks'
-
+import { useStore } from 'dva'
 /**
  *
- * @param {boolean} collapsed 侧边栏是否折叠
  * @param {number} needSubtractHeight 被裁去的高度
  * @param {number} needSubtractWidth 被裁去的宽度
  */
-const useAutoTable = (collapsed, needSubtractHeight, needSubtractWidth) => {
-
-
-  const [scroll, setScroll] = useState({ x: document.body.clientWidth - needSubtractWidth, y: document.body.clientHeight - needSubtractHeight })
+const useAutoTable = (needSubtractHeight, needSubtractWidth) => {
+  const { collapsed = true } = useStore().getState().global
+  const [scroll, setScroll] = useState({
+    x: document.body.clientWidth - needSubtractWidth,
+    y: document.body.clientHeight - needSubtractHeight
+  })
   // const { run, cancel } = useDebounceFn(handleScroll, { wait: 5000})
-  const { run, cancel } = useDebounceFn(() => setScroll({ ...scroll, x: document.body.clientWidth - needSubtractWidth, y: document.body.clientHeight - needSubtractHeight }))
+  const { run, cancel } = useDebounceFn(() =>
+    setScroll({
+      ...scroll,
+      x: document.body.clientWidth - needSubtractWidth,
+      y: document.body.clientHeight - needSubtractHeight
+    })
+  )
   useEffect(() => {
     run()
     return () => cancel()
-
   }, [collapsed])
   useEffect(() => {
     window.addEventListener('resize', run)

src/pages/Customer/Company/components/ChangeSelect/index.jsx

@@ -0,0 +1,38 @@
+import React, { forwardRef, useState } from 'react'
+import { Select } from 'antd'
+
+const ChangeSelect = props => {
+  const { defaultValue, refinstance, options, onSave } = props
+  const [selectedObj, setSelectedObj] = useState({ value: defaultValue, label: '' })
+
+  const handleOnChange = (value, option) => {
+    let local = ''
+    if (Array.isArray(value)) {
+      local = options.reduce((prev, curr) => {
+        if (value.includes(curr.value)) {
+          return `${prev}${prev ? ',' : ''}${curr.label}`
+        }
+        return prev
+      }, '')
+    } else {
+      local = option.label
+    }
+
+    setSelectedObj({ ...selectedObj, value, local })
+  }
+
+  return (
+    <Select
+      defaultValue={defaultValue}
+      ref={refinstance}
+      onBlur={() => onSave({ currentTarget: { ...selectedObj } })}
+      options={options}
+      defaultOpen={true}
+      mode={Array.isArray(selectedObj.value) ? 'multiple' : null}
+      onChange={handleOnChange}
+      className="zh-width-100P"
+    />
+  )
+}
+
+export default forwardRef((props, ref) => <ChangeSelect {...props} refinstance={ref} />)

src/pages/Customer/Company/components/CompanyDetail/CompanyLowerList.jsx

@@ -4,12 +4,11 @@ import { dayjsFormat } from '@/utils/utils'
 
 const CompanyLowerList = props => {
   const {
-    log: { log: logs = [], total = 0 },
-    collapsed
+    log: { log: logs = [], total = 0 }
   } = props
   const { TabPane } = Tabs
   const needSubtractHeight = 48 + 48 + 48 + 64 + 24 // 需要被裁掉的高度
-  const [x, y] = useAutoTable(collapsed, needSubtractHeight)
+  const [x, y] = useAutoTable(needSubtractHeight)
   return (
     <div>
       <div className="zh-pd-left-15">

src/pages/Customer/Company/components/CompanyDetail/index.jsx

@@ -49,7 +49,7 @@ const Index = props => {
               <CompanyForm customer={state.customer} />
             </div>
           </Col>
-          <Col span={12}>
+          <Col span={12} flex={{ flexDirection: 'column' }}>
             <CompanyTabList />
             <CompanyLowerList log={state.log} />
           </Col>

src/pages/Customer/Company/index.jsx

@@ -10,13 +10,12 @@ import AddCompany from '@/pages/Customer/Company/components/AddCompany'
 import { useModal } from '@/components/Modal'
 import { formatValues } from '@/components/LazyCascader'
 
-const Company = props => {
+const Company = () => {
   const { toggleDrawer, setDrawerProps } = useModal()
-  const { collapsed } = props
   const needSubtractHeight = 48 + 48 + 48 + 64 + 24 + 32 // 需要被裁掉的高度
-  const needSubtractWidth = (collapsed ? 208 : 48) + 48 + 48 + 48 // 需要被裁掉的高度
+  const needSubtractWidth = 48 + 48 + 48 // 需要被裁掉的高度
 
-  const [x, y] = useAutoTable(collapsed, needSubtractHeight, needSubtractWidth)
+  const [x, y] = useAutoTable(needSubtractHeight, needSubtractWidth)
 
   const [state, setState] = useState({
     data: [],

src/pages/Customer/Contact/components/ContactDetail/ContanctLowerList.jsx

@@ -1,14 +1,12 @@
-import { Tabs, Table, List, Row, Col } from 'antd'
-import React, { useEffect } from 'react'
-import { connect } from 'umi'
+import { Tabs, List, Row, Col } from 'antd'
+import React from 'react'
 import useAutoTable from '@/hooks/useAutoTable'
 import { dayjsFormat } from '@/utils/utils'
 
 const ContanctLowerList = props => {
   const {
     log: { log: logs = [], total = 0 },
-    servicelist,
-    collapsed
+    servicelist
   } = props
   const servicelogEnum = {
     1: '上门服务',
@@ -20,7 +18,7 @@ const ContanctLowerList = props => {
   const needSubtractHeight = 48 + 48 + 48 + 64 + 24 // 需要被裁掉的高度
   // const needSubtractWidth = (collapsed ? 208 : 48) + 48 + 48 + 48 // 需要被裁掉的高度
 
-  const [x, y] = useAutoTable(collapsed, needSubtractHeight)
+  const [x, y] = useAutoTable(needSubtractHeight)
   return (
     <div>
       <div className="zh-pd-left-15">

src/pages/Customer/Contact/index.jsx

@@ -14,13 +14,12 @@ import { useDebounceFn } from 'ahooks'
 import { useModal } from '@/components/Modal'
 import { formatValues } from '@/components/LazyCascader'
 
-const Contact = props => {
+const Contact = () => {
   const { toggleDrawer, setDrawerProps } = useModal()
-  const { collapsed } = props
   const needSubtractHeight = 48 + 48 + 48 + 64 + 24 + 32 // 需要被裁掉的高度
-  const needSubtractWidth = (collapsed ? 208 : 48) + 48 + 48 + 48 // 需要被裁掉的高度
+  const needSubtractWidth = 48 + 48 + 48 // 需要被裁掉的高度
 
-  const [x, y] = useAutoTable(collapsed, needSubtractHeight, needSubtractWidth)
+  const [x, y] = useAutoTable(needSubtractHeight, needSubtractWidth)
 
   const [state, setState] = useState({
     data: [],

src/pages/Customer/Test/index.jsx

@@ -108,6 +108,21 @@ const Test = ({ natures, dispatch }) => {
           <Input />
         </Dropdown>
       </div>
+      <Button
+        onClick={() => {
+          console.log(iRef)
+          iRef.current.focus()
+          iRef.current.selectRef.current.focus()
+        }}>
+        AAA
+      </Button>
+      <Select
+        ref={iRef}
+        onBlur={() => console.log(22)}
+        // onChange={() => console.log(iRef)}
+        options={options}
+        style={{ width: '200px' }}
+      />
     </Card>
   )
 }

src/pages/Product/Lock/Lockstore/components/LocksDetail/index.jsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Drawer, Row, Col } from 'antd'
-import useAutoTable from '@/hooks/useAutoTable'
+import { Row, Col } from 'antd'
 import consts from '@/consts'
 import { apiSoftwareDetail } from '@/services/lock'
 import LockForm from '@/pages/Product/Lock/Lockstore/components/LocksDetail/LockForm.jsx'
@@ -9,11 +8,7 @@ import LockTabList from '@/pages/Product/Lock/Lockstore/components/LocksDetail/L
 import { connect } from 'dva'
 
 const Index = props => {
-  const { collapsed, visible, id = '' } = props
-  const needSubtractHeight = 55 // 需要被裁掉的高度
-  // const needSubtractWidth = (collapsed ? 208 : 48) + 48 + 48 + 48 // 需要被裁掉的高度
-  const [x, y] = useAutoTable(collapsed, needSubtractHeight)
-  const [clientWidth, setClientWidth] = useState(document.body.clientWidth * 0.75)
+  const { visible, id = '' } = props
   const [state, setState] = useState({
     longle: {},
     log: [],
@@ -33,12 +28,6 @@ const Index = props => {
     if (visible) {
       initData()
     }
-    window.addEventListener('resize', () => {
-      setClientWidth(document.body.clientWidth * 0.7)
-    })
-    return () => {
-      window.removeEventListener('resize', () => {})
-    }
   }, [visible])
   return (
     <div>

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

@@ -26,13 +26,12 @@ export const ProductLabel = ({ data }) => {
   )
 }
 
-const Lockstore = props => {
+const Lockstore = () => {
   const { toggleDrawer, setDrawerProps } = useModal()
-  const { collapsed } = props
   const needSubtractHeight = 48 + 48 + 48 + 64 + 24 + 32 // 需要被裁掉的高度
-  const needSubtractWidth = (collapsed ? 208 : 48) + 48 + 48 + 48 // 需要被裁掉的高度
+  const needSubtractWidth = 48 + 48 + 48 // 需要被裁掉的高度
 
-  const [x, y] = useAutoTable(collapsed, needSubtractHeight, needSubtractWidth)
+  const [x, y] = useAutoTable(needSubtractHeight, needSubtractWidth)
   const [state, setState] = useState({
     data: [],
     total: 0,