cldV2react/src/pages/Hr/Employee/components/StaffModal/index.jsx

import React, { useState, useEffect, useRef } from 'react'
import { Input, Button, Spin, Modal } from 'antd'
import consts from '@/basic/consts'
import { useDebounceFn } from 'ahooks'
import { SearchOutlined } from '@ant-design/icons'
import { queryStaff, apiChangeSupervisor } from '@/services/staff'
import styles from '@/pages/Customer/Company/components/ConnectCompany/index.less'

const StaffModal = ({ visible, onCancel, id, onSelect, preUrl }) => {
  const scrollRef = useRef()
  const [state, setState] = useState({
    loading: true,
    list: [],
    current: 1,
    pageSize: 10,
    noMore: false,
    total: 0
  })
  const initData = async params => {
    const { data: { list, total } = { list: [], total: 0 }, code = -1 } = await queryStaff({
      ...params,
      waiver: true
    })
    if (code === consts.RET_CODE.SUCCESS) {
      if (params?.current === 1) {
        scrollRef.current?.scrollTo({ top: 0 })
        // 请求的是第一页
        setState({ ...state, list, total, loading: false, searchVal: params?.search })
      } else {
        setState({
          ...state,
          list: state.list.concat(list),
          total,
          searchVal: params?.search,
          loading: false,
          current: params?.current || 1
        })
      }
    }
  }

  useEffect(() => {
    initData({ current: 1, pageSize: 10 })
  }, [])
  const onChange = e => {
    const { value = '' } = e.target || e.currentTarget
    initData({ search: value, current: 1, pageSize: state.pageSize })
  }

  const { run: handleInputChange } = useDebounceFn(onChange)

  // 关联上司
  const connectStaff = async dataId => {
    const { code = -1 } = await apiChangeSupervisor(preUrl, { id, dataId })
    if (code === consts.RET_CODE.SUCCESS) {
      onSelect()
      setTimeout(() => {
        onCancel()
      }, 80)
    }
  }

  const handleListScroll = () => {
    // 未滚动到底部
    if (scrollRef.current.scrollHeight - scrollRef.current.clientHeight <= 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 })
    }
  }
  return (
    <Modal
      visible={visible}
      onCancel={onCancel}
      width="43vw"
      getContainer={() => document.getElementById('root')}
      title={
        <Input
          prefix={<SearchOutlined />}
          className={styles.inputSearch}
          placeholder="输入员工名称搜索"
          onChange={handleInputChange}
        />
      }
      footer={false}>
      <div className={styles.modalContent} ref={scrollRef} onScroll={handleListScroll} style={{ paddingBottom: 0 }}>
        <Spin spinning={state.loading}>
          {state.list.map(item => (
            <div key={item.id} className={styles.card}>
              <span className="w-1/6">{item.username}</span>
              <span className="w-1/6">{item.departmentName}</span>
              <span className="w-1/6">{item.position}</span>
              <span className="w-1/2 flex justify-between">
                <span>{item.emergencyContacts}</span>
                <Button type="primary" size="small" onClick={() => connectStaff(item.id)}>
                  关联
                </Button>
              </span>
            </div>
          ))}
        </Spin>
        {state.noMore && <div className="text-center text-gray-400 my-4">已到底部</div>}
      </div>
    </Modal>
  )
}

export default StaffModal