feat: 选择客户新增滚动加载

src/components/Modal/src/components/customerModal/index.jsx

@@ -1,8 +1,8 @@
-import { Input, Form, Button, Spin, message } from 'antd'
-import React, { useState, useEffect } from 'react'
+import { Input, Button, Spin, message } from 'antd'
+import React, { useState, useEffect, useRef } from 'react'
 import styles from './index.less'
-import { SearchOutlined, CloseOutlined, PlusOutlined } from '@ant-design/icons'
-import { useDebounceFn } from 'ahooks'
+import { SearchOutlined, CloseOutlined } from '@ant-design/icons'
+import { useDebounceFn, useThrottleFn } from 'ahooks'
 import { useDispatch } from 'dva'
 import AddCustomerModal from '../addCustomerModal'
 import { createCustomer, queryCustomers } from '@/services/customer'
@@ -12,6 +12,7 @@ import { apiChangeCustomer } from '@/services/contact'
 
 const SearchModal = ({ clientId, onSelect }) => {
   const dispatch = useDispatch()
+  const scrollRef = useRef()
   const [state, setState] = useState({
     laoding: true,
     customer: [],
@@ -21,9 +22,12 @@ const SearchModal = ({ clientId, onSelect }) => {
     total: 0
   })
   const initData = async params => {
-    const { data = { customer: [], total: 0 }, code = -1 } = await queryCustomers(params)
+    const {
+      data: { customer, total } = { customer: [], total: 0 },
+      code = -1
+    } = await queryCustomers(params)
     if (code === consts.RET_CODE.SUCCESS) {
-      setState({ ...state, ...data, laoding: false })
+      setState({ ...state, customer: state.customer.concat(customer), total, laoding: false })
     }
   }
 
@@ -65,6 +69,19 @@ const SearchModal = ({ clientId, onSelect }) => {
       closeModal()
     }
   }
+
+  const handleListScroll = () => {
+    // 未滚动到底部
+    if (
+      scrollRef.current.scrollHeight - scrollRef.current.clientHeight <=
+      scrollRef.current.scrollTop
+    ) {
+      // 已到底部
+      initData({ page: state.page + 1, size: state.size })
+    }
+  }
+  // const { run: listScroller } = useThrottleFn(handleListScroll)
+
   return (
     <div className={['ant-modal-content', styles.modalContainer].join(' ')}>
       <div className={styles.modalHeader}>
@@ -78,7 +95,7 @@ const SearchModal = ({ clientId, onSelect }) => {
           <CloseOutlined onClick={closeModal} />
         </span>
       </div>
-      <div className={styles.modalContent}>
+      <div className={styles.modalContent} ref={scrollRef} onScroll={handleListScroll}>
         <Spin spinning={state.laoding}>
           {state.customer.map(item => (
             <div key={item.id} className={styles.card}>