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

import React, { useState, useEffect, useRef } from 'react'
import { Input, Button, Spin } from 'antd'
import consts from '@/basic/consts'
import { useDispatch } from 'dva'
import { useDebounceFn } from 'ahooks'
import { SearchOutlined, CloseOutlined } from '@ant-design/icons'
import { queryStaff, apiChangeSupervisor } from '@/services/staff'
import styles from './index.less'
// import request from '@/basic/utils/request'

const StaffModal = ({ id, onSelect, postUrl }) => {
  const scrollRef = useRef()
  const dispatch = useDispatch()
  const [state, setState] = useState({
    loading: true,
    list: [],
    current: 1,
    pageSize: 10,
    total: 0
  })
  const initData = async params => {
    const { data: { list, total } = { list: [], total: 0 }, code = -1 } = await queryStaff(params)
    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 closeModal = () => {
    dispatch({
      type: 'single/changeModal'
    })
  }

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

  const handleListScroll = () => {
    // 未滚动到底部
    if (
      scrollRef.current.scrollHeight - scrollRef.current.clientHeight <=
      scrollRef.current.scrollTop
    ) {
      // 已到底部
      state.current * state.pageSize < state.total &&
        initData({ current: state.current + 1, pageSize: state.pageSize, search: state.searchVal })
    }
  }
  return (
    <div className={['ant-modal-content', styles.modalContainer].join(' ')}>
      <div className={styles.modalHeader}>
        <Input
          prefix={<SearchOutlined />}
          className={styles.inputSearch}
          placeholder="输入员工名称搜索"
          onClick={handleInputChange}
        />
        <span className={styles.closeIcon}>
          <CloseOutlined onClick={closeModal} />
        </span>
      </div>
      <div className={styles.modalContent} ref={scrollRef} onScroll={handleListScroll}>
        <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>
      </div>
    </div>
  )
}

export default StaffModal