|
@@ -1,155 +0,0 @@
|
|
|
-import { useRequest } from 'umi'
|
|
|
-import { Input, message, Modal } from 'antd'
|
|
|
-import type { PropsWithChildren } from 'react'
|
|
|
-import React, { useState, useRef, useEffect } from 'react'
|
|
|
-import { fetchStaffList } from '@/services/user/api'
|
|
|
-import { linkAttendance, addAttendance } from '@/services/user/system'
|
|
|
-import '@/pages/Role/System/components/ConnectModal/index.less'
|
|
|
-import { LoadingOutlined, MoreOutlined } from '@ant-design/icons'
|
|
|
-import { modalType } from '@/pages/Business/Attendance/index.tsx'
|
|
|
-
|
|
|
-interface ConnectModalProps extends PropsWithChildren {
|
|
|
- dataId: string
|
|
|
- visible: boolean
|
|
|
- onCancel: () => void
|
|
|
- onRefresh: () => void
|
|
|
-}
|
|
|
-const ConnectModal: React.FC<ConnectModalProps> = ({
|
|
|
- type,
|
|
|
- dataId,
|
|
|
- visible,
|
|
|
- onCancel,
|
|
|
- onRefresh,
|
|
|
- children
|
|
|
-}) => {
|
|
|
- const containerRef = useRef<HTMLDivElement>(null)
|
|
|
- const [searchVal, setSearchVal] = useState('')
|
|
|
-
|
|
|
- const {
|
|
|
- run: tryQueryStaffList,
|
|
|
- data,
|
|
|
- noMore,
|
|
|
- loadMore,
|
|
|
- loadingMore
|
|
|
- } = useRequest(
|
|
|
- result =>
|
|
|
- fetchStaffList({
|
|
|
- current: result?.list.length / 10 + 1 || 1,
|
|
|
- pageSize: 10,
|
|
|
- search: searchVal
|
|
|
- }),
|
|
|
- {
|
|
|
- manual: true,
|
|
|
- loadMore: true,
|
|
|
- ref: containerRef,
|
|
|
- isNoMore: (res: API.BasicFetchResult<API.StaffItem>) => res.list.length >= res.total,
|
|
|
- refreshDeps: [searchVal]
|
|
|
- }
|
|
|
- )
|
|
|
-
|
|
|
- const { run: tryLinkAttendance } = useRequest(
|
|
|
- (params: API.LinkAttendance) => linkAttendance(params),
|
|
|
- {
|
|
|
- manual: true,
|
|
|
- onSuccess: () => {
|
|
|
- message.success('添加申请对象成功')
|
|
|
- onCancel()
|
|
|
- onRefresh()
|
|
|
- },
|
|
|
- onError: e => {
|
|
|
- message.error(e.message)
|
|
|
- }
|
|
|
- }
|
|
|
- )
|
|
|
- const { run: tryAddAttendance } = useRequest(
|
|
|
- (params: API.Addattendance) => addAttendance(params),
|
|
|
- {
|
|
|
- manual: true,
|
|
|
- onSuccess: () => {
|
|
|
- message.success('添加申请人成功')
|
|
|
- onCancel()
|
|
|
- onRefresh()
|
|
|
- },
|
|
|
- onError: e => {
|
|
|
- message.error(e.message)
|
|
|
- }
|
|
|
- }
|
|
|
- )
|
|
|
-
|
|
|
- const connectHandler = (staffId: string) => {
|
|
|
- if (type === modalType.addobjectModal) {
|
|
|
- tryAddAttendance({ applicantStaffId: staffId })
|
|
|
- } else {
|
|
|
- tryLinkAttendance({ id: dataId, staffId })
|
|
|
- }
|
|
|
- }
|
|
|
- const handleSearch = (value: string) => {
|
|
|
- setSearchVal(value)
|
|
|
- setTimeout(() => {
|
|
|
- tryQueryStaffList()
|
|
|
- }, 250)
|
|
|
- }
|
|
|
-
|
|
|
- const { list = [] }: { list: API.StaffItem[] } = data || {}
|
|
|
- useEffect(() => {
|
|
|
- if (visible) {
|
|
|
- tryQueryStaffList()
|
|
|
- }
|
|
|
- }, [visible])
|
|
|
-
|
|
|
- // const itemSelectHandler = (staffId: string) => {
|
|
|
- // if (type === addType.addobjectModal) {
|
|
|
-
|
|
|
- // } else {
|
|
|
-
|
|
|
- // }
|
|
|
- // }
|
|
|
- return (
|
|
|
- <>
|
|
|
- {children}
|
|
|
- <Modal
|
|
|
- visible={visible}
|
|
|
- onCancel={onCancel}
|
|
|
- getContainer={false}
|
|
|
- width="60vw"
|
|
|
- title={
|
|
|
- <Input.Search
|
|
|
- placeholder="搜索员工(姓名)"
|
|
|
- onSearch={value => handleSearch(value)}
|
|
|
- onPressEnter={e => handleSearch(e.currentTarget.value)}
|
|
|
- style={{ width: '95%' }}
|
|
|
- allowClear={true}></Input.Search>
|
|
|
- }>
|
|
|
- <div ref={containerRef} className="h-60vh overflow-y-auto overflow-x-hidden modal-content">
|
|
|
- {list.map(item => (
|
|
|
- <div className="card" key={item.id}>
|
|
|
- <div className="w-4/3 flex justify-between">
|
|
|
- <span className="w-1/5">{item.username}</span>
|
|
|
- <span className="w-2/5">{item.phone}</span>
|
|
|
- <span className="w-1/5">{item.position}</span>
|
|
|
- <span className="w-1/5">{item.category}</span>
|
|
|
- </div>
|
|
|
- <div className="w-1/4 flex justify-end">
|
|
|
- <span className="btn-outline" onClick={() => connectHandler(item.id)}>
|
|
|
- 选择ta
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- ))}
|
|
|
- {noMore && <div className="text-center text-gray-400">已到底部</div>}
|
|
|
- {!noMore && (
|
|
|
- <div className="text-center mt-3 cursor-pointer">
|
|
|
- {loadingMore ? (
|
|
|
- <LoadingOutlined />
|
|
|
- ) : (
|
|
|
- <MoreOutlined rotate={90} style={{ fontSize: 24 }} onClick={loadMore} />
|
|
|
- )}
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </div>
|
|
|
- </Modal>
|
|
|
- </>
|
|
|
- )
|
|
|
-}
|
|
|
-
|
|
|
-export default ConnectModal
|