refactor: 弹窗联系人列表优化-增加已到底部标识。

src/pages/Customer/Client/components/AddClient/index.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useRef } from 'react'
 import { Form, Row, Col, Button } from 'antd'
 import LazyCascader from '@/components/LazyCascader'
-import { ProFormSelect, ProFormText } from '@ant-design/pro-form'
+import { ProFormSelect, ProFormText, ProFormTextArea } from '@ant-design/pro-form'
 import { Plus } from '@icon-park/react'
 import { ChangeCompMap } from '@/pages/Customer/Company/components/ChangeCompany'
 import ModalDragForm from '@/components/Modal/src/components/ModalDragForm'
@@ -99,7 +99,7 @@ const AddClient = props => {
           <ProFormText label="联系人住宿" name="stay" />
         </Col>
       </Row>
-      <ProFormText label="备注" name="remakrs" />
+      <ProFormTextArea label="备注" name="remakrs" />
     </ModalDragForm>
   )
 }

src/pages/Customer/Client/components/ConnectClient/index.jsx

@@ -17,6 +17,7 @@ const ConnectClient = ({ dataId, onSelect, preUrl = 'client', showFooter = true
     laoding: true,
     client: [],
     searchVal: '',
+    noMore: false,
     current: 1,
     pageSize: 10,
     total: 0
@@ -89,12 +90,14 @@ const ConnectClient = ({ dataId, onSelect, preUrl = 'client', showFooter = true
       scrollRef.current.scrollTop
     ) {
       // 已到底部
-
+      if (state.current * state.pageSize > state.total) {
+        setState({ ...state, noMore: true })
+        return
+      }
       state.current * state.pageSize < state.total &&
         initData({ current: state.current + 1, pageSize: state.pageSize, search: state.searchVal })
     }
   }
-  // const { run: listScroller } = useThrottleFn(handleListScroll)
 
   return (
     <CustomModal
@@ -106,7 +109,11 @@ const ConnectClient = ({ dataId, onSelect, preUrl = 'client', showFooter = true
           onChange={handleInputChange}
         />
       }>
-      <div className={styles.modalContent} ref={scrollRef} onScroll={handleListScroll}>
+      <div
+        className={styles.modalContent}
+        ref={scrollRef}
+        onScroll={handleListScroll}
+        style={{ paddingBottom: 0 }}>
         <Spin spinning={state.laoding}>
           {state.client.map(item => (
             <div key={item.id} className={styles.card}>
@@ -122,6 +129,7 @@ const ConnectClient = ({ dataId, onSelect, preUrl = 'client', showFooter = true
             </div>
           ))}
         </Spin>
+        {state.noMore && <div className="text-center text-gray-400 my-4">已到底部</div>}
       </div>
       {showFooter ? (
         <div className={styles.modalFooter}>

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

@@ -17,6 +17,7 @@ const ConnectCompany = ({ dataId, onSelect, preUrl }) => {
   const [state, setState] = useState({
     laoding: true,
     customer: [],
+    noMore: false,
     searchVal: '',
     current: 1,
     pageSize: 10,
@@ -89,12 +90,14 @@ const ConnectCompany = ({ dataId, onSelect, preUrl }) => {
       scrollRef.current.scrollTop
     ) {
       // 已到底部
-
+      if (state.current * state.pageSize > state.total) {
+        setState({ ...state, noMore: true })
+        return
+      }
       state.current * state.pageSize < state.total &&
         initData({ current: state.current + 1, pageSize: state.pageSize, search: state.searchVal })
     }
   }
-  // const { run: listScroller } = useThrottleFn(handleListScroll)
 
   return (
     <CustomModal
@@ -106,7 +109,11 @@ const ConnectCompany = ({ dataId, onSelect, preUrl }) => {
           onChange={handleInputChange}
         />
       }>
-      <div className={styles.modalContent} ref={scrollRef} onScroll={handleListScroll}>
+      <div
+        className={styles.modalContent}
+        ref={scrollRef}
+        onScroll={handleListScroll}
+        style={{ paddingBottom: 0 }}>
         <Spin spinning={state.laoding}>
           {state.customer.map(item => (
             <div key={item.id} className={styles.card}>
@@ -120,6 +127,7 @@ const ConnectCompany = ({ dataId, onSelect, preUrl }) => {
             </div>
           ))}
         </Spin>
+        {state.noMore && <div className="text-center text-gray-400 my-4">已到底部</div>}
       </div>
       <div className={styles.modalFooter}>
         <AddCompany onConfirm={addConfirm} dataId={dataId} dataType={preUrl} />

src/pages/Customer/Company/components/ConnectCompany/index.less

@@ -1,12 +1,14 @@
 .inputSearch {
   width: 95%;
 }
+
 .modalContent {
   height: 63vh;
   max-height: 63vh;
   padding: 1.5rem;
   overflow-y: auto;
   border-bottom: 1px solid #dee2e6;
+
   .card {
     display: flex;
     align-items: center;