fix: 完善级联-历史记录UI显示

src/components/LazyCascader/LazyCascader.jsx

@@ -1,7 +1,7 @@
 import { getAuthCache } from '@/utils/auth'
 import { CASCADER_HISTORY_KEY } from '@/utils/cache/cacheEnum'
 import { Cascader, Divider, Tag } from 'antd'
-import React, { forwardRef, useEffect, useState, useCallback } from 'react'
+import React, { forwardRef, useEffect, useState, useLayoutEffect } from 'react'
 import { connect } from 'umi'
 import styles from './index.less'
 import { serializeRecord } from './util'
@@ -19,11 +19,11 @@ const CLazyCascader = props => {
     onBlur,
     ...resetProps
   } = props
-  const [state, setState] = useState({
-    visible: popupVisible,
-    historyRecord: showFooter ? getAuthCache(CASCADER_HISTORY_KEY) || [] : []
-  })
+  const [visible, setVisible] = useState(popupVisible)
 
+  const [historyRecord, setHistoryRecord] = useState(
+    showFooter ? getAuthCache(CASCADER_HISTORY_KEY) || [] : []
+  )
   const [cValue, setValue] = useState(defaultValue)
   useEffect(() => {
     if (!options.length) {
@@ -50,7 +50,7 @@ const CLazyCascader = props => {
         selectedOptions.map(item => ({ id: item.id, name: item.name }))
       )
       if (htr?.length) {
-        setState({ ...state, historyRecord: htr })
+        setHistoryRecord(htr)
       }
     }
     const local = selectedOptions.reduce((prev, curr) => {
@@ -79,56 +79,60 @@ const CLazyCascader = props => {
     // 触发级联的onChange回调
     handleOnChange(values, selectedOptions)
     // 手动将pop浮层隐藏
-    setState({ ...state, visible: false })
+    setVisible(false)
   }
 
-  // useLayoutEffect(() => {
-  //   document.querySelector('.Cascader-Body')?.addEventListener(
-  //     'DOMSubtreeModified',
-  //     () => {
-  //       const width = document.getElementById('casaContent')?.clientWidth
-  //       console.log('width', width)
-  //       const extraEl = document.getElementById('h-address')
-  //       if (extraEl) {
-  //         extraEl.style.width = `${width === 0 ? 156 : width}px`
-  //       }
-  //     },
-  //     false
-  //   )
-  //   return () => {
-  //     document.querySelector('.Cascader-Body')?.removeEventListener('DOMSubtreeModified', () => {})
-  //   }
-  // }, [])
-  const dropdownRender = useCallback(
-    menu => (
-      <>
-        <div id="casaContent">{menu}</div>
-        {showFooter ? (
-          <>
-            <Divider style={{ margin: 0 }} />
-            <div id="h-address" className="p-3" style={{ width: 'auto' }}>
-              <div className="font-semibold">最近使用</div>
-              <div className="inline-flex flex-wrap">
-                {state.historyRecord?.map((item, idx) => (
-                  <div
-                    key={item.key + idx}
-                    className="mt-1 cursor-pointer"
-                    onClick={() =>
-                      handleTagClick(
-                        item.value.map(v => v.id),
-                        item.value
-                      )
-                    }>
-                    <Tag>{item.name}</Tag>
-                  </div>
-                ))}
-              </div>
+  useLayoutEffect(() => {
+    document.querySelector('.Cascader-Body')?.addEventListener(
+      'DOMSubtreeModified',
+      () => {
+        let width = 0
+        const menus = document.getElementsByClassName('ant-cascader-menu')
+        // eslint-disable-next-line no-plusplus
+        for (let i = 0; i < menus.length; i++) {
+          const element = menus[i]
+          if (element.clientWidth) {
+            width += element.clientWidth
+          }
+        }
+        const extraEl = document.getElementById('h-address')
+        if (extraEl) {
+          extraEl.style.width = `${width === 0 ? 156 : width}px`
+        }
+      },
+      false
+    )
+    return () => {
+      document.querySelector('.Cascader-Body')?.removeEventListener('DOMSubtreeModified', () => {})
+    }
+  }, [])
+  const dropdownRender = menu => (
+    <>
+      <div id="casaContent">{menu}</div>
+      {showFooter && historyRecord.length ? (
+        <>
+          <Divider style={{ margin: 0 }} />
+          <div id="h-address" className="p-3" style={{ width: 'auto' }}>
+            <div className="font-semibold">最近使用</div>
+            <div className="inline-flex flex-wrap">
+              {historyRecord?.map((item, idx) => (
+                <div
+                  key={item.key + idx}
+                  className="mt-1 cursor-pointer"
+                  onClick={() =>
+                    handleTagClick(
+                      item.value.map(v => v.id),
+                      item.value
+                    )
+                  }>
+                  <Tag>{item.name}</Tag>
+                </div>
+              ))}
             </div>
-          </>
-        ) : null}
-      </>
-    ),
-    [state.historyRecord]
+          </div>
+        </>
+      ) : null}
+    </>
   )
 
   return (
@@ -136,7 +140,7 @@ const CLazyCascader = props => {
       <Cascader
         value={cValue}
         getPopupContainer={triggerNode => triggerNode.parentNode}
-        popupVisible={state.visible}
+        popupVisible={visible}
         placeholder="省/市/区"
         options={options}
         ref={refinstance}
@@ -145,7 +149,7 @@ const CLazyCascader = props => {
         loadData={loadData}
         fieldNames={{ label: 'name', value: 'id' }}
         changeOnSelect={changeOnSelect}
-        onPopupVisibleChange={e => setState({ ...state, visible: e })}
+        onPopupVisibleChange={e => setVisible(e)}
         {...resetProps}
       />
     </div>

src/components/LazyCascader/util.js

@@ -35,11 +35,11 @@ export function serializeRecord(name = '', id = '', value = []) {
   if (id && i === 0) {
     return
   }
+  // 存在历史节点，删除历史节点
+  if (id && i !== -1) {
+    hty.splice(i + 1, 0)
+  }
   if (hty?.length < 5) {
-    // 存在历史节点，删除并在最前面插入重复的新的
-    if (id && i !== -1) {
-      hty.splice(i + 1, 0)
-    }
     hty.unshift({ key: id, name, value })
   } else {
     hty.pop()

src/pages/Customer/Client/model.js

@@ -30,10 +30,11 @@ export default {
           type: 'changeState',
           payload: {
             key: tagType === TagTypeEnum.PERSONTAG ? 'personTagColorMap' : 'teamTagColorMap',
-            data: response.data.reduce((curr, prev, idx) => {
-              const item = { ...curr, [prev.id]: LabelStatusColorMap[tagType][idx] }
-              return item
-            }, {})
+            data:
+              response.data?.reduce((curr, prev, idx) => {
+                const item = { ...curr, [prev.id]: LabelStatusColorMap[tagType][idx] }
+                return item
+              }, {}) || {}
           }
         })
       }

src/pages/Customer/Company/model.js

@@ -31,10 +31,11 @@ export default {
           type: 'changeState',
           payload: {
             key: tagType === TagTypeEnum.PERSONTAG ? 'personTagColorMap' : 'teamTagColorMap',
-            data: response.data.reduce((curr, prev, idx) => {
-              const item = { ...curr, [prev.id]: LabelStatusColorMap[tagType][idx] }
-              return item
-            }, {})
+            data:
+              response.data?.reduce((curr, prev, idx) => {
+                const item = { ...curr, [prev.id]: LabelStatusColorMap[tagType][idx] }
+                return item
+              }, {}) || {}
           }
         })
       }